feat: edit an existing custom type

2026-10-20 04:42:50 +02:00
1 parent 083cc9e23e
commit 8e344b2500
@@ -0,0 +1,450 @@
+Feature: Edit a custom content type in the Schema builder
+  As an owner or admin
+  I want to change the name and fields of a saved custom type
+  So that the type follows the content it holds
+
+  Background:
+    Given the SPA calls the API with relative URLs under /v1 and the "jwt" HttpOnly cookie
+    And API errors are plain text
+    And the builder, FieldList, FieldInspector, ChoiceList, ApiPreview, status chip and leave guard of features/schema_builder_create.feature are reused unchanged unless a scenario below says otherwise
+    And PUT /v1/content-type/{key} takes {name, icon, fields[{key, label, type, required, unique, default, min, max, options}]} and answers 200 with the content type
+    And PUT answers 400 (name or icon), 404 content_type_not_found, 409 schema_incompatible, 422 invalid_field, 403 or 500
+    And the number of entries comes from GET /v1/content-type/{key}/entry?page=1&size=5, field "total"
+    And the route /schema/:key keeps meta auth "verified" and title "Schema"
+    And the content types store is the source of the loaded type; no GET /v1/content-type/{key} is made
+    And only owners and admins can use Schema; the SPA decides from the session role, the API still enforces it
+    And every string goes through t() and has a French entry in i18n/messages.ts
+    And a copy tagged "(proposed copy)" is not in the design and is the coder's single point of change
+
+  Scenario Outline: Resolving the key of /schema/:key
+    Given the custom list holds events, recipes, press-mentions and the built-in list holds articles, authors, sites, media, users
+    When an owner opens /schema/<key>
+    Then <result>
+
+    Examples:
+      | key       | result                                                                         |
+      | events    | the builder in edit mode                                                       |
+      | articles  | the read-only built-in view, unchanged from schema_builtin_view.feature        |
+      | unknown   | "Content type not found"                                                       |
+      | new       | the create builder, unchanged                                                  |
+
+  Scenario: Reaching the editor from the list
+    Given the Schema list is Populated
+    Then each custom row is a link to /schema/<key> on the table and on the mobile cards
+    And built-in rows still link to /schema/<key>
+    When the user activates the row "Events"
+    Then the router navigates to /schema/events and the builder opens in edit mode
+
+  Scenario: Loading, the session store and the entry count
+    Given an owner opens /schema/events as the first page of the session
+    Then GET /v1/content-type is called once and GET /v1/builtin-type once (the resolver needs both)
+    And GET /v1/content-type/events/entry?page=1&size=5 is called once
+    And the Schema skeleton is shown until the type, the built-in list and the count are known
+    And no GET /v1/content-type/events is made
+
+  Scenario Outline: The count or the list cannot be loaded
+    Given <failure>
+    Then the page shows the error "Couldn't load content type" (proposed copy) with the line "<line>" and a "Try again" action
+    And no builder, no Save is shown
+    When the user activates "Try again"
+    Then the failed request is sent again and the builder opens when it succeeds
+
+    Examples:
+      | failure                                         | line                                                                        |
+      | the entry count answers 500 or fails (network)  | GET /v1/content-type/events/entry failed. Check your connection and try again. (proposed copy) |
+
+  Scenario: The entry count answers 404
+    Given the entry count answers 404 content_type_not_found
+    Then the page shows "Content type not found"
+
+  Scenario Outline: Roles and sessions in edit mode
+    Given <who> opens /schema/events
+    Then <result>
+
+    Examples:
+      | who                         | result                                                               |
+      | a verified owner or admin   | the builder in edit mode                                             |
+      | a verified user who is neither | "You don't have access to Schema" with "Go to Home", URL unchanged |
+      | an unverified user          | the redirect to /register/pending                                    |
+      | a signed-out visitor        | the redirect to /login                                               |
+
+  Scenario: Session-owned store
+    Given an owner has loaded the custom and built-in lists
+    When the user signs out
+    Then the content types store is reset
+    And the next signed-in user's first Schema page loads both lists again
+    And an in-progress edit is not carried to another session or to a second visit of /schema/events
+
+  Scenario: Editing an existing type, desktop (design state 2)
+    Given /schema/events is Events with 7 saved fields and 37 entries, on a 1440 px viewport
+    Then the breadcrumb is "Schema" (a link) then "Events"
+    And "Name" holds "Events" and is editable
+    And "Key" holds "events" in mono, read-only, with a lock icon, no pencil, no Auto badge and no "Reset to match the name"
+    And the chip reads "Saved"
+    And the info bar reads "37 entries use this content type. Changes are checked against them when you save." with an info icon, under the type bar and above the list
+    And the list header reads "Fields" and "7 of 50" with the 7 rows in saved order, none carrying a badge "New" or "Changed"
+    And "Add field" is shown under the list
+    And the first row is selected and the inspector title is "Field: Title" with no "New" badge
+    And "Save" and "Discard" are disabled
+    And the API preview bar is collapsed
+
+  Scenario: Editing an existing type, mobile (design state 2)
+    Given the same page on a 390 px viewport
+    Then the topbar shows an arrow-left, the title "Events"
+    And Name and Key are stacked, then the info bar, then the rows, then the "API preview" row
+    And no inspector is shown until a row is activated
+    And the bottom bar holds the chip "Saved", Discard and Save
+
+  Scenario Outline: The info bar follows the count
+    Given the entry count answers <total>
+    Then <bar>
+
+    Examples:
+      | total | bar                                                                                          |
+      | 0     | no info bar is shown                                                                         |
+      | 1     | "1 entry uses this content type. Changes are checked against it when you save." (proposed copy) |
+      | 37    | "37 entries use this content type. Changes are checked against them when you save."          |
+      | 1200  | "1,200 entries use this content type. Changes are checked against them when you save."       |
+
+  Scenario: The locked type key (design state 3)
+    Given /schema/events
+    When the user hovers or focuses the locked key
+    Then a tooltip reads "The key is used in URLs and the API, so it can't change after the type is created."
+    And the tooltip closes on blur, mouse out and Esc
+    And the key input cannot be typed in and no key error can appear
+
+  Scenario: Saved fields are locked
+    Given the saved field Starts on (date) is selected
+    Then "Key" holds "starts_on" with a lock icon, no Auto badge, read-only, with the help "Used in the API, so it can't change."
+    And "Type" shows "Can't change after saving" with a lock icon
+    And the six tiles are shown, the date tile selected and the other five at reduced emphasis and not selectable
+    And label, Required, Unique values, Default value, limits and choices stay editable
+
+  Scenario: Fields added since the last save are not locked
+    Given the user activates "Add field" on /schema/events
+    Then the new row is selected with the badge "New", an Auto key, six selectable tiles and no lock
+    And the key and type behave as in the create builder
+    And a label typed for it derives its key without colliding with any saved key
+
+  Scenario Outline: What marks a saved field as changed
+    Given the saved field <field> is selected
+    When the user <edit>
+    Then its row and its inspector title show the badge "Changed"
+    When the user restores the original value
+    Then the badge goes
+
+    Examples:
+      | field    | edit                                   |
+      | Capacity | sets Highest value to 2000             |
+      | Title    | renames the label to "Name of event"   |
+      | Starts on| turns Required off                     |
+      | Category | adds the choice "Panel"                |
+      | Online   | turns the default on                   |
+
+  Scenario: Reordering is not a change of a field (proposed)
+    Given the saved fields in saved order
+    When the user moves Ends on above Starts on
+    Then no row shows "Changed"
+    And the chip reads "Unsaved changes" and Save is enabled
+
+  Scenario: Unsaved changes (design state 4)
+    Given Events with 37 entries
+    When the user sets Capacity's Highest value to 2000, adds Speaker (Text) and Room (Choice, required, default "Main hall", choices "Main hall" and "Studio"), and removes Description
+    Then the chip reads "Unsaved changes" and Save and Discard are enabled
+    And Capacity shows "Changed", Speaker and Room show "New"
+    And an undo row after the list reads "Description will be removed" with the action "Undo", with a minus icon and a dashed border
+    And the header reads "8 of 50"
+    And the info bar stays
+
+  Scenario: Removing a saved field and undoing it
+    Given Events with the saved field Description at position 7
+    When the user activates Remove on Description
+    Then it leaves the list and an undo row "Description will be removed" appears
+    And the next row (or the previous one at the end) is selected
+    When the user activates "Undo"
+    Then Description returns at position 7 with its original values and no badge
+    And the undo row goes, and with no other edit the chip returns to "Saved" and Save is disabled
+
+  Scenario: Several removals
+    Given the user removed Description and Ends on
+    Then two undo rows are shown, one per field, in the order of the removals (proposed)
+    And each Undo restores its own field at its original position
+
+  Scenario: A removed key stays reserved (proposed)
+    Given the user removed the saved field Description
+    When the user adds a field labelled "Description"
+    Then its Auto key is "description_2"
+    And "Undo" on the removed field still restores "description" without a duplicate key
+
+  Scenario: Undo at the limit of 50 fields (proposed)
+    Given 50 fields are in the list and one saved field is in an undo row
+    Then "Undo" is disabled until a field is removed
+
+  Scenario: Removing every field
+    Given the user removed all saved fields
+    Then the list shows "No fields yet" with "A content type needs at least one field." in the error colour
+    And undo rows are shown for the removed fields
+    And the chip counts one problem and Save is disabled
+
+  Scenario: Name edit only
+    Given Events
+    When the user changes the name to "Events and talks"
+    Then the Key stays "events"
+    And the chip reads "Unsaved changes"
+    And the sidebar and the list keep "Events" until the PUT answers
+
+  Scenario Outline: Type-level rules in edit mode
+    Given Events
+    When the user sets Name to <value>
+    Then <message> is shown under Name with an alert icon
+    And Save is disabled and no request is sent
+
+    Examples:
+      | value              | message                            |
+      | (empty or spaces)  | Give the content type a name.      |
+
+  Scenario: Field errors (design state 5)
+    Given Events
+    When the user empties the label of Ends on, sets Capacity's Lowest value to 6000, and gives Category the choices Talk, Workshop, a blank and Talk
+    Then the chip reads "3 problems to fix" and Save is disabled
+    And the three rows are outlined with an alert icon
+    And the messages "Give the field a label.", "Lowest value can't be above the highest value.", "Choices can't be blank." and "Two choices are the same." are shown under their inputs
+    And errors follow the timing and the counting rules of the create builder
+
+  Scenario: A single field key error on a new field (design state 7)
+    Given Events and a field added since the last save with the key "start-date"
+    Then the Key shows "Start with a letter. Use lowercase letters, digits and underscores." with the alert icon and the chip reads "1 problem to fix"
+    And a saved field never shows a key error
+
+  Scenario: The choice list of a saved Choice field (design state 8)
+    Given the saved field Category with the choices Talk, Workshop, Meetup is selected
+    Then every control of the create builder's choice list works, including add, remove, reorder and the 50 cap
+    And the help keeps "Removing a choice that entries use will be refused when you save."
+    And the default select lists the choices and is cleared when its choice is removed or renamed
+
+  Scenario: Keyboard reorder in edit mode (design state 9)
+    Given Events with 7 saved fields and Ends on at position 3
+    When the user focuses the grip "Move Ends on", presses Space then Up
+    Then the polite live region reads "Moving Ends on. Position 2 of 7. Press Up or Down to move, Space to drop, Esc to cancel."
+    And Esc restores the order and Space drops it
+
+  Scenario: API preview in edit mode (design state 10)
+    Given Events
+    When the user opens "API preview"
+    Then the routes use the locked key "events"
+    And the sample entry follows the current fields, so added fields appear and removed ones disappear as the user edits
+    And the note "Updates as you edit. Fields you add or remove here appear after you save." is shown
+    And Copy JSON, the "Copied" label and the mobile sheet behave as in the create builder
+
+  Scenario: Saving a type that has no entries
+    Given Recipes with 4 saved fields and 0 entries
+    When the user changes the label of Servings and activates Save
+    Then PUT /v1/content-type/recipes is called once with no review dialog
+    And the body has exactly name, icon and fields
+
+  Scenario: The PUT body
+    Given Events with the loaded icon "calendar" (or null)
+    When the user saves
+    Then the body is {name, icon, fields} with name trimmed
+    And "icon" equals the loaded icon, so an edit never changes it (proposed, see open question)
+    And no "key" is sent in the body
+    And the fields are in list order, undo-row fields are not sent, and each field carries exactly key, label, type, required, unique, default, min, max, options
+    And unset default, min and max are null, options are [] for a non-select field, a date bound is "YYYY-MM-DD", the boolean default is true or null
+    And the key and type of every saved field equal the loaded ones
+
+  Scenario: Saving (design state 11, no entries)
+    Given the PUT has not answered
+    Then the chip reads "Saving…" with a loader, Save shows a loader and is disabled, Discard is disabled
+    And Name, the inspector, Add field, grips, Move, Remove and Undo are dimmed and disabled
+    And a second activation of Save sends no second request
+
+  Scenario: Saved (design state 12)
+    Given the PUT answers 200 with Events and 8 fields
+    Then a success toast "Content type saved" with "Events now has 8 fields." is shown
+    And the user stays on /schema/events
+    And every badge "New" and "Changed" and every undo row clear
+    And the added fields become saved fields: their key and type are now locked
+    And the chip reads "Saved at" followed by the time (HH:MM) of the response's updated_at, Save and Discard are disabled
+    And the content types store holds the answered type in place, so the list, the sidebar Content group and the field count show the new name and count with no second GET /v1/content-type
+    And with one field the toast reads "Events now has 1 field." (proposed copy)
+    And no "Leave without saving?" prompt is shown afterwards
+
+  Scenario: Edit after saving
+    Given the form was just saved
+    When the user edits the name
+    Then the chip reads "Unsaved changes" again
+    And Discard returns to the last saved state, not to the state at page load
+
+  Scenario: Discard
+    Given the user edited the name, a field and removed a field
+    When the user activates Discard
+    Then the form returns to the loaded type, with the first row selected, no badge, no undo row, no error and the chip "Saved"
+    And nothing is sent and the URL stays /schema/events
+
+  Scenario Outline: Leaving with unsaved edits
+    Given <state>
+    When the user leaves through the breadcrumb, the mobile arrow, the sidebar or the browser back
+    Then <result>
+
+    Examples:
+      | state                                    | result                                                           |
+      | no edit                                  | the router navigates with no prompt                              |
+      | an edit, even one only in an undo row    | the dialog "Leave without saving?" with "Keep editing" and "Discard changes" |
+      | after Save answered 200                  | the router navigates with no prompt                              |
+      | after Discard                            | the router navigates with no prompt                              |
+
+  Scenario: Save on a type with entries opens the review (design group 3, state 1)
+    Given Events with 37 entries, the edits of the "Unsaved changes" scenario and no error
+    When the user activates Save
+    Then no PUT is sent yet
+    And the dialog "Review changes to Events" with "Apply them to save the content type." opens (a bottom sheet on mobile)
+    And the summary reads "Add 2 fields, change 1, remove 1" and "Events has 37 entries. Each one is checked against the new fields when you apply."
+    And the changes are listed in this order: additions, changes, removals, each in list order
+    And the footer note reads "Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed."
+    And "Back to editing" and "Apply changes" are shown
+
+  Scenario Outline: Review rows
+    Given Events with entries and the edit <edit>
+    Then the review shows the row "<title>" with the text "<text>" and <flag>
+
+    Examples:
+      | edit                                                                  | title               | text                                                                                  | flag                              |
+      | adds Speaker, Text, optional                                          | Add Speaker         | Text, optional.                                                                       | no flag                           |
+      | adds Room, Choice, required, default "Main hall"                      | Add Room            | Choice, required, default "Main hall". Existing entries get the default, so they still fit. | no flag                      |
+      | adds Seats, Number, required, no default                              | Add Seats           | Number, required. Existing entries have no value for it. (proposed copy)              | "Entries may not fit"             |
+      | sets Capacity's Highest value from 5000 to 2000                       | Change Capacity     | Highest value goes from 5000 to 2000.                                                 | "Entries may not fit"             |
+      | raises Capacity's Lowest value from 1 to 10 (proposed copy)           | Change Capacity     | Lowest value goes from 1 to 10.                                                       | "Entries may not fit"             |
+      | sets a first Longest on Title (80) where none was set (proposed copy) | Change Title        | Longest is now 80.                                                                    | "Entries may not fit"             |
+      | turns Required on for Ends on (proposed copy)                         | Change Ends on      | Now required.                                                                         | "Entries may not fit"             |
+      | turns Unique values on for Category (proposed copy)                   | Change Category     | Values must now be unique.                                                            | "Entries may not fit"             |
+      | removes the choice Meetup from Category (proposed copy)               | Change Category     | Choice removed: "Meetup".                                                             | "Entries may not fit"             |
+      | loosens Capacity's Highest value from 5000 to 8000 (proposed copy)    | Change Capacity     | Highest value goes from 5000 to 8000.                                                 | no flag                           |
+      | renames the label of Title to "Name" (proposed copy)                  | Change Title        | Label goes from "Title" to "Name".                                                    | no flag                           |
+      | adds the choice "Panel" to Category (proposed copy)                   | Change Category     | Choice added: "Panel".                                                                | no flag                           |
+      | removes Description                                                   | Remove Description  | Entries stop returning its values.                                                    | "Removes data"                    |
+
+  Scenario Outline: The summary line
+    Given Events with entries and <changes>
+    Then the summary reads "<summary>"
+
+    Examples:
+      | changes                                | summary                              |
+      | 2 added, 1 changed, 1 removed          | Add 2 fields, change 1, remove 1     |
+      | 1 added                                | Add 1 field                          |
+      | 1 changed, 2 removed                   | Change 1, remove 2                   |
+      | 1 changed                              | Change 1                             |
+
+  Scenario Outline: When the review opens
+    Given Events with 37 entries
+    When the user makes <edit> and activates Save
+    Then <result>
+
+    Examples:
+      | edit                                      | result                                                       |
+      | only a name change or only a reorder      | the PUT is sent at once, with no review (proposed)           |
+      | a field added, changed or removed         | the review opens                                             |
+      | a name change and a changed field         | the review opens and lists only the field change (proposed)  |
+
+  Scenario: Back to editing from the review
+    Given the review is open
+    When the user chooses "Back to editing" (or presses Esc or the close icon)
+    Then the dialog closes, no PUT is sent and every edit is kept
+
+  Scenario: Applying (group 3, state 2)
+    Given the review is open
+    When the user activates "Apply changes"
+    Then PUT /v1/content-type/events is sent once
+    And the confirm button reads "Applying…" with a loader and the dialog's other actions are disabled
+    And Esc, the close icon and a click on the overlay do not dismiss the dialog
+    And a second activation sends nothing
+
+  Scenario: Applied
+    Given the PUT answers 200
+    Then the dialog closes, the toast, the cleared badges, the locks and the chip "Saved at" are as in "Saved (design state 12)"
+    And the info bar and the count are unchanged
+
+  Scenario: Refused (design state 15 and group 3, state 3)
+    Given the user applied the edits "Capacity's Highest value goes from 5000 to 2000" plus "Description removed"
+    When the PUT answers 409 with the body "schema_incompatible"
+    Then the review is replaced by the dialog "Nothing was changed" with "RenewCMS refused the changes because some entries don't fit the new fields. It doesn't say which entries."
+    And an error alert reads "Your content type is as it was" with "No field was added, changed or removed."
+    And the section "The change that can cause this in your edit" lists only the flagged changes, here Change Capacity with "Highest value goes from 5000 to 2000. An entry may have a higher value." and the badge "Possible cause"
+    And Removes-data rows are not listed as a cause
+    And the explanation reads "This kind of change is refused when an entry is over the new limit, a new required field has no default, a field becomes unique while entries share a value, or a removed choice is still in use."
+    And "Discard changes" and "Back to editing" are shown
+    And no entry, id or value is ever named
+    And every edit is still in the form and the store still holds the type as loaded
+
+  Scenario: Refused with no flagged change (proposed)
+    Given the 409 comes back for edits that have no flagged change
+    Then the dialog shows "Nothing was changed", the "Your content type is as it was" alert and the explanation
+    And the section "The change that can cause this in your edit" is omitted
+
+  Scenario: Back to editing after a refusal (design state 15)
+    Given the refusal dialog is open
+    When the user chooses "Back to editing"
+    Then the dialog closes and the page shows the error alert "Nothing was changed" with "Some entries don't fit the new fields, so the whole change was refused. RenewCMS can't tell which entries. The changes that can cause this are marked." and the action "Review changes"
+    And the rows of the flagged changes show the badge "Possible cause" next to "Changed" or "New"
+    And the chip reads "Unsaved changes" and Save stays enabled
+    When the user activates "Review changes"
+    Then the review dialog (group 3, state 1) opens again, with the same rows
+
+  Scenario: Discard changes after a refusal
+    Given the refusal dialog is open
+    When the user chooses "Discard changes"
+    Then the dialog closes and the form returns to the loaded type, with no banner, no badge and the chip "Saved"
+
+  Scenario: The refusal markers clear
+    Given the banner "Nothing was changed" is shown
+    When a PUT succeeds, or the user activates Discard
+    Then the banner and every "Possible cause" badge go
+    And when the user undoes or reverts a flagged change, that row loses its "Possible cause" badge
+
+  Scenario Outline: Other answers of the PUT
+    Given the PUT answers <status> with <body>
+    Then <outcome>
+
+    Examples:
+      | status | body                     | outcome                                                                                           |
+      | 422    | invalid_field            | the review dialog closes and the banner "Check the fields marked in the list." (proposed copy) is shown, edits kept |
+      | 400    | Bad request body         | the review closes and "Give the content type a name." is shown under Name, edits kept (proposed copy) |
+      | 404    | content_type_not_found   | the page "Content type not found" and the store drops the type (proposed copy)                    |
+      | 403    | Only ...                 | the page "You don't have access to Schema"                                                        |
+      | 401    | (any)                    | the existing redirect to /login with the expired reason                                           |
+
+  Scenario Outline: Save failed (design state 13)
+    Given the PUT <failure>
+    Then the review dialog (if open) closes
+    And an error alert titled "Couldn't save the content type" shows "Something went wrong on our side. Your changes are still here. Try again in a moment."
+    And it has a "Try again" action and the chip reads "Save failed"
+    And every edit is kept and Save stays enabled
+    When the user activates "Try again"
+    Then the same body is sent again, through the review again when the type has entries
+
+    Examples:
+      | failure         |
+      | answers 500     |
+      | fails (network) |
+
+  Scenario: Offline (design state 16)
+    Given the user edited Events and navigator.onLine becomes false
+    Then the banner "You're offline. Changes will be saved when you reconnect." with a wifi-off icon is shown
+    And the chip reads "Waiting for connection", Save is disabled and every edit is kept
+    When the connection returns
+    Then the banner goes, Save is enabled again and nothing is sent by itself
+
+  Scenario: Offline while the review is open
+    Given the review dialog is open and navigator.onLine becomes false
+    Then "Apply changes" is disabled and the edits are kept
+
+  Scenario: Mobile field sheet in edit mode
+    Given a 390 px viewport
+    When the user activates the row Capacity
+    Then the sheet "Field: Capacity" opens with the inspector, the locked key, Move up, Move down, Remove and "Done"
+    And Remove inside the sheet closes the sheet and shows the undo row
+
+  Scenario: Accessibility of the edit mode
+    Then the lock icons have a text alternative or are tied to the field's help text
+    And dialogs trap focus, return it to the opener on close, and the Applying dialog keeps focus on its title
+    And the undo row's "Undo" is a button reachable by keyboard
+    And controls are 44 px high on mobile and focus is a 2 px ring in the primary colour
@@ -0,0 +1,103 @@
+# QA: Schema builder, edit (SPA slice 4; delete is slice 5)
+
+Runner: Vitest + Vue Test Utils (`task test:web`). No Go test: PUT /v1/content-type/{key} and the entry list are already covered by features/custom_content_types.qa.md and nothing changes in the backend.
+Same pattern as features/schema_builder_create.qa.md: mock `/v1` through the api composable (extend `views/__tests__/schemaTestKit.ts` with PUT and the entry count handlers, and a full "Events" type with the board's 7 saved fields), mount with the real router and a resolved session whose role varies, `components/__tests__/viewport.ts` for 1440 and 390, fake timers where a delay exists. Never freeze the system date. "Saved at HH:MM" is asserted with /^Saved at \d{2}:\d{2}$/ only.
+
+## Automated
+
+Fixtures: Events (id 1, 7 saved fields as drawn on the board: Title text required unique max 80, Starts on date required, Ends on date, Online boolean default false, Capacity number min 1 max 5000, Category select Talk/Workshop/Meetup, Description richtext) with icon "calendar"; Recipes (4 saved fields, 0 entries); the entry-count body {items:[],total:37,page:1,size:1}; plain-text bodies schema_incompatible, content_type_has_entries, content_type_not_found, invalid_field.
+
+Pure logic (lib/__tests__, it.each over the feature's Examples):
+1. Form from a ContentType: API field to BuilderField (number default to string, boolean default to defaultOn, options, ISO dates), saved flag, locked keyMode, and the round trip: loaded form to payload equals the loaded fields (no spurious diff).
+2. Change detection per saved field: Changed on and off by restoring the value; reorder-only is not a field change; New for added fields.
+3. Diff for the review: adds, changes, removes in that order, the summary line (singular, zero parts omitted), the row texts of the "Review rows" table, the flags ("Entries may not fit", "Removes data", none), and the flagged-only list used by the refusal. Name-only or reorder-only means no review.
+4. Payload for PUT: {name, icon, fields}, no key, icon equal to the loaded one (null stays null), undo-row fields excluded, saved key and type unchanged.
+5. Field key derivation against saved keys and keys in undo rows (`description_2`).
+6. Undo bookkeeping: positions, several removals, limit of 50.
+7. Info-bar copy for 0, 1, 37 and 1200 entries.
+
+Store (stores/__tests__/contentTypes.spec.ts):
+8. replace(type) swaps by key and keeps order by name when the name changed, does nothing when "idle", never touches built-in items, no request. reset() clears both slices (signed-out case).
+
+Composable and API (composables/__tests__/useContentTypes.spec.ts):
+9. updateContentType PUTs JSON to /v1/content-type/{key} and returns the type. countEntries reads `total` from the size=5 request. ApiError carries status and plain-text body for 400, 404, 409, 422, 403, 500. NetworkError passes through.
+
+Resolver and routing:
+10. Key resolver (built-in, custom, none, loading) for events, articles, unknown, new. /schema/new is still the create builder, GET /v1/builtin-type result is awaited for /schema/:key. Custom rows of SchemaTable and the mobile cards are links to /schema/<key>.
+11. Roles: owner, admin, neither (403 page), unverified and signed-out redirects (extend routerGuard.spec) on /schema/events.
+12. Session reset: sign-out resets the store and discards any edit state; a second visit starts from the store, not from an old draft.
+
+Builder view in edit mode (new views/__tests__/SchemaBuilderEdit*.spec.ts), one test per scenario:
+13. Loading: calls list (assert once each), skeleton until type, list and count are known, no GET /v1/content-type/events.
+14. Count or list failure: error copy, Try again re-sends, builder shown after success. Count 404 gives "Content type not found".
+15. State 2 desktop and mobile: breadcrumb, Name editable, locked Key without pencil/Auto/Reset, chip "Saved", info bar, "7 of 50", no badges, first row selected, Save and Discard disabled, collapsed API bar. Mobile topbar, stack order, bottom bar.
+16. Info bar for 0, 1, 37, 1200.
+17. Locked key tooltip on hover and on focus, closes on blur and Esc, input not editable.
+18. Saved fields locked: key lock and help, "Can't change after saving", tiles not selectable, other controls editable. New fields unlocked.
+19. Changed badge table (5 rows) and revert; reorder-only is no Changed badge but dirty.
+20. State 4 end to end: badges, undo row text and action, header count, chip.
+21. Remove and Undo: position restored, no residue, chip back to "Saved". Several removals, reserved key, Undo disabled at 50, empty list error.
+22. Name-only edit keeps the key; empty name error and disabled Save.
+23. Field errors (state 5) and single field key error on a new field; a saved field never shows a key error.
+24. Choice list on a saved Choice field (state 8) and keyboard reorder (state 9) with the live-region texts.
+25. API preview in edit mode (state 10): locked key in the routes, live sample, note text.
+26. PUT without entries: one request, no dialog, exact body (icon preserved, no key), Saving state (state 11) with dimmed/disabled controls and no second request on double activation.
+27. Saved (state 12): toast copy incl. singular, stays on the page, badges and undo rows cleared, newly saved fields now locked, chip /^Saved at \d{2}:\d{2}$/, store.replace, list/sidebar/count updated with no extra GET, no leave prompt, edit after save and Discard back to last saved.
+28. Discard: back to the loaded form, nothing sent.
+29. Leave guard (5 rows) with Keep editing, dismiss and Discard changes.
+30. Review (group 3, state 1): opens only for adds/changes/removes with total > 0; no PUT yet; summary, rows (the table), order, footer note, Back to editing, Esc, mobile sheet.
+31. Applying (state 2): one PUT, loader, non-dismissable (Esc, overlay, close icon), second activation ignored.
+32. Applied: dialog closes, same results as item 27.
+33. Refused: 409 schema_incompatible: refusal dialog copy, only flagged changes listed with "Possible cause", no entry named, store untouched, edits kept. Without flagged change: section omitted. Back to editing: banner "Nothing was changed", "Review changes" reopens the review, row markers. Discard changes resets. Markers clear on success, Discard or revert.
+34. Other PUT answers: 422 banner, 400 name message, 404 not-found page and store drop, 403 page, 401 redirect.
+35. Save failed (state 13): 500 and network, review closes, banner and chip, edits kept, Try again resends the same body through the review again.
+36. Offline (state 16) and offline with the review open.
+37. Mobile field sheet in edit mode.
+40. Accessibility: focus return from dialogs, Applying focus on its title, Undo reachable by keyboard.
+
+Existing tests to update:
+41. features/schema_builtin_view.qa.md and SchemaTypeView.spec: "Content type not found" for a key that is neither built-in nor custom; events is now the editor. features/schema_list_and_content_nav.qa.md and SchemaView.spec: custom rows are links.
+42. features/schema_builder_create.qa.md item 29/31: nothing changes for create; assert that the create builder still never sends "icon" (regression guard next to the edit icon test).
+43. French: every new string has a French entry (the i18n completeness spec must pass).
+
+## Visual (task visual:check -- schema)
+
+Run `task visual:check -- schema`. Every capture within 10 %, desktop and mobile, light and dark. Mock GET /v1/auth/me (owner "Marta Alves"), GET /v1/builtin-type, and GET /v1/content-type with the 3 custom types. Replace the placeholder Events fields of `schemaCustomTypes` in `web/visual/states.ts` with the board's full 7 fields (EV), keep 7 as the list's field count, and add Recipes with the board's 4 fields (RC). Mock GET /v1/content-type/events/entry as total 37 and /recipes/entry as total 0. Register the group "3 Review and delete" in `extraSources` of `web/visual/check.ts`.
+
+Setups to replace `skip: 'pending'` in `web/visual/states.ts` (screen `schema`, steps are Playwright actions on the SPA):
+
+| Board state | Setup (path /schema/events unless noted) | Board sample data |
+|---|---|---|
+| Editing an existing type | no steps | Events, 7 saved fields, Title selected, info bar "37 entries use this content type…", chip "Saved", locked key |
+| Locked key: tooltip | select the row "Starts on", hover (focus on mobile) the locked key | tooltip text, Starts on selected |
+| Unsaved changes | steps: Capacity Highest value 2000, Add field "Speaker", Add field "Room" with Choice, Required, choices Main hall and Studio, default Main hall, remove Description, select Capacity | rows New and Changed, undo row "Description will be removed", chip "Unsaved changes" |
+| Field errors | steps: empty the label of Ends on, Capacity Lowest value 6000, Category choices Talk, Workshop, blank, Talk, select Capacity | chip "3 problems to fix" and the four messages |
+| Choice list editor | steps: Category choices Talk, Workshop, Meetup, blank, Talk, select Category | "5 of 50", chip "1 problem to fix" |
+| Keyboard reorder | steps: focus the grip "Move Ends on", press Space, press Up | live region "Moving Ends on. Position 2 of 7. …", Ends on picked up |
+| API preview open | steps: open "API preview" (sheet on mobile) | key events, board's sample JSON |
+| Saved | `skip: 'clock-sensitive'` | the chip says "Saved at 11:02" |
+| Save failed | PUT mocked 500; same edits as Unsaved changes; steps: Save, Apply changes | banner "Couldn't save the content type", chip "Save failed" |
+| Schema incompatible | PUT mocked 409 schema_incompatible; same edits; steps: Save, Apply changes, Back to editing | banner "Nothing was changed" with "Review changes", "Possible cause" on Capacity |
+| Offline | same edits; steps: go offline | offline banner, chip "Waiting for connection" |
+| Saving | see open question 6 | |
+| Review before saving | same edits; steps: Save | dialog copy and the 4 rows of group 3 state 1 |
+| Applying | PUT mocked to hang; steps: Save, Apply changes | "Applying…" |
+| Refused (schema_incompatible) | PUT mocked 409; steps: Save, Apply changes | refusal dialog with Change Capacity |
+
+Not checked: "Review with counts and diff" (scope Later, not built; leave it out of `extraSources`). "Field key error" has no board frame: keep it as a documented `skip: 'pending'` with that reason and cover it in Vitest only. Do not hide it.
+Known visual differences to report, never hide: the Key help copy (Q1) on /schema/new.
+
+## Manual
+
+- Real backend, as owner and admin:
+  - Create Events with all six field types and some entries.
+  - Open it from the list. Edit the name and a label. Confirm the review does not open for a name-only edit and does for a field edit.
+  - Lower Capacity's Highest value below an existing entry's value. Confirm the real 409 `schema_incompatible`, the refusal dialog and that nothing changed (reload).
+  - Add a required field with no default (409). Add one with a default (200 and existing entries get it).
+  - Turn Unique on over duplicate values (409). Remove a Choice option that entries use (409). Remove a field and check entries no longer return it.
+  - Create a type through curl with an `icon`, edit it in the SPA, and check the icon is still returned by GET.
+  - Check that `GET /v1/content-type/{key}/entry?page=1&size=5` is accepted as the count request.
+- Keyboard: Tab order is Name, locked Key (tooltip on focus), Save, Discard, the field list (one stop, arrows move between rows), the inspector, Undo, API preview. Dialogs trap focus and return it to the trigger. Screen reader: the lock states are announced, the live region reads each reorder step, errors are read with their input.
+- Hover and motion on the lock tooltip, the undo row and the dialogs. Sheet open and close focus return on a real phone.
+- Real offline: edit, go offline with the review open, reconnect, press Apply.
+- Reload or close the tab with unsaved edits (not handled by the leave guard): note the browser behaviour.
@@ -5,6 +5,8 @@ import { computed } from 'vue'
 import { useJsonCopy } from '@/composables/useJsonCopy'
 import { previewRoutes } from '@/lib/schemaBuilderSample'

+const PANEL_COLUMNS = '1fr 1.4fr'
+
 const props = defineProps<{ keyValue: string; json: string }>()

 const open = defineModel<boolean>('open', { default: false })
@@ -55,9 +57,12 @@ const summary = computed(() => `${routes.value[0]!.method} ${routes.value[0]!.pa
 		</div>
 		<UCollapsible :open="open" :ui="{ content: 'overflow-hidden' }">
 			<template #content>
-				<div class="grid h-62 grid-cols-12 grid-rows-1 gap-4 bg-default px-6 pb-4">
-					<div class="col-span-5 flex min-h-0 min-w-0 flex-col gap-1.5">
-						<span class="text-xs text-muted">{{
+				<div
+					class="grid h-62 grid-rows-1 gap-4 bg-default px-6 pb-4"
+					:style="{ gridTemplateColumns: PANEL_COLUMNS }"
+				>
+					<div class="flex min-h-0 min-w-0 flex-col gap-1.5">
+						<span class="text-xs/4.5 text-muted">{{
 							t('Where entries of this type live')
 						}}</span>
 						<ul
@@ -67,7 +72,7 @@ const summary = computed(() => `${routes.value[0]!.method} ${routes.value[0]!.pa
 								v-for="(route, index) in routes"
 								:key="index"
 								data-testid="api-route"
-								class="truncate font-mono text-xs/5 text-highlighted"
+								class="truncate font-mono text-xs/4.75 text-highlighted"
 							>
 								<span class="inline-block w-14 text-muted">{{ route.method }}</span
 								>{{ route.path }}
@@ -79,14 +84,14 @@ const summary = computed(() => `${routes.value[0]!.method} ${routes.value[0]!.pa
 							)
 						}}</span>
 					</div>
-					<div class="col-span-7 flex min-h-0 min-w-0 flex-col gap-1.5">
-						<span class="text-xs text-muted">{{
+					<div class="flex min-h-0 min-w-0 flex-col gap-1.5">
+						<span class="text-xs/4.5 text-muted">{{
 							t("A sample entry. Values come from each field's type and default.")
 						}}</span>
 						<pre
 							tabindex="0"
 							data-testid="api-json"
-							class="m-0 min-h-0 flex-1 overflow-auto border border-default bg-elevated px-3 py-2.5 font-mono text-xs/5 whitespace-pre text-highlighted"
+							class="m-0 min-h-0 flex-1 overflow-auto border border-default bg-elevated px-3 py-2.5 font-mono text-xs/4.75 whitespace-pre text-highlighted"
 							>{{ json }}</pre
 						>
 					</div>
@@ -11,6 +11,7 @@ defineProps<{
 	canReveal: boolean
 	canDiscard: boolean
 	saving: boolean
+	savedAt?: string
 }>()

 defineEmits<{ save: []; discard: [] }>()
@@ -18,7 +19,7 @@ defineEmits<{ save: []; discard: [] }>()

 <template>
 	<div class="flex shrink-0 items-center gap-2 md:gap-3">
-		<BuilderStatusChip :status="status" :problems="problems" />
+		<BuilderStatusChip :status="status" :problems="problems" :saved-at="savedAt" />
 		<span class="flex-1 md:hidden" />
 		<UButton
 			color="neutral"
@@ -34,6 +35,7 @@ defineEmits<{ save: []; discard: [] }>()
 			:aria-disabled="canReveal ? 'true' : undefined"
 			:loading="saving"
 			class="h-11 px-4 md:h-8"
+			:class="saving ? 'disabled:opacity-40' : ''"
 			@click="$emit('save')"
 		>
 			{{ saving ? t('Saving…') : t('Save') }}
@@ -3,7 +3,10 @@ import { t } from '@/i18n'

 import { computed } from 'vue'

-const props = defineProps<{ kind: 'new' | 'required' | 'unique'; onSand?: boolean }>()
+const props = defineProps<{
+	kind: 'new' | 'changed' | 'cause' | 'required' | 'unique'
+	onSand?: boolean
+}>()

 const badges = {
 	new: {
@@ -12,6 +15,19 @@ const badges = {
 		},
 		class: 'border border-(--rc-sand) bg-(--rc-sand) text-(--rc-on-sand)',
 	},
+	changed: {
+		get label() {
+			return t('Changed')
+		},
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+	},
+	cause: {
+		get label() {
+			return t('Possible cause')
+		},
+		icon: 'i-lucide-triangle-alert',
+		class: 'border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning',
+	},
 	required: {
 		get label() {
 			return t('Required')
@@ -29,6 +45,7 @@ const badges = {
 const OUTLINE_ON_SAND = 'border border-(--rc-on-sand) bg-transparent text-(--rc-on-sand)'

 const badge = computed(() => badges[props.kind])
+const badgeIcon = computed(() => ('icon' in badge.value ? badge.value.icon : undefined))
 const badgeClass = computed(() =>
 	props.onSand && props.kind !== 'new' ? OUTLINE_ON_SAND : badge.value.class,
 )
@@ -38,8 +55,12 @@ const badgeClass = computed(() =>
 	<UBadge
 		color="neutral"
 		variant="soft"
+		:icon="badgeIcon"
 		:class="badgeClass"
-		:ui="{ base: 'h-5 shrink-0 px-1.5 py-0 text-xs font-medium whitespace-nowrap' }"
+		:ui="{
+			base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
+			leadingIcon: 'size-3',
+		}"
 	>
 		{{ badge.label }}
 	</UBadge>
@@ -4,7 +4,11 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import type { BuilderStatus } from '@/lib/schemaBuilderModel'

-const props = defineProps<{ status: BuilderStatus; problems: number }>()
+const props = defineProps<{
+	status: BuilderStatus
+	problems: number
+	savedAt?: string
+}>()

 const text = computed(() => {
 	switch (props.status) {
@@ -12,6 +16,8 @@ const text = computed(() => {
 			return t('Saving…')
 		case 'offline':
 			return t('Waiting for connection')
+		case 'saved':
+			return props.savedAt ? t('Saved at {0}', [props.savedAt]) : t('Saved')
 		case 'failed':
 			return t('Save failed')
 		case 'problems':
@@ -33,7 +39,7 @@ const text = computed(() => {
 		:class="{
 			'text-warning': status === 'dirty',
 			'text-error': status === 'failed' || status === 'problems',
-			'text-muted': status === 'saving' || status === 'offline',
+			'text-muted': status === 'saving' || status === 'offline' || status === 'saved',
 		}"
 	>
 		<UIcon
@@ -43,6 +49,7 @@ const text = computed(() => {
 		/>
 		<UIcon v-else-if="status === 'offline'" name="i-lucide-wifi-off" class="size-3.5" />
 		<UIcon v-else-if="status === 'dirty'" name="i-lucide-circle-dot" class="size-3.5" />
+		<UIcon v-else-if="status === 'saved'" name="i-lucide-check" class="size-3.5" />
 		<UIcon v-else name="i-lucide-circle-alert" class="size-3.5" />
 		<span>{{ text }}</span>
 	</span>
@@ -19,6 +19,7 @@ const props = defineProps<{
 	keyError?: string
 	disabled: boolean
 	keyFocusToken: number
+	keyLocked?: boolean
 }>()

 const emit = defineEmits<{
@@ -29,6 +30,7 @@ const emit = defineEmits<{
 }>()

 const root = ref<HTMLElement | null>(null)
+const tipOpen = ref(false)
 const slugMode = computed(() => keyDisplayMode(props.keyMode, props.keyValue))
 const hasError = computed(() => Boolean(props.nameError || props.keyError))

@@ -62,7 +64,36 @@ watch(
 				/>
 			</DirectoryField>
 		</div>
-		<div :class="keyError ? 'md:w-90' : 'md:w-80'">
+		<div v-if="keyLocked" class="md:w-80">
+			<UTooltip
+				v-model:open="tipOpen"
+				:text="
+					t(
+						'The key is used in URLs and the API, so it can\'t change after the type is created.',
+					)
+				"
+				:content="{ side: 'bottom', align: 'start' }"
+				:ui="{
+					content:
+						'h-auto w-65 items-start bg-inverted px-2.5 py-2 text-xs/4.5 text-inverted shadow-(--shadow-popover) ring-0',
+					text: 'whitespace-normal',
+				}"
+			>
+				<div @focusin="tipOpen = true" @focusout="tipOpen = false">
+					<SlugField
+						:label="t('Key')"
+						name="key"
+						mode="manual"
+						:value="keyValue"
+						:disabled="disabled"
+						dense
+						locked
+						:maxlength="BUILDER_LIMITS.typeKeyMax"
+					/>
+				</div>
+			</UTooltip>
+		</div>
+		<div v-else :class="keyError ? 'md:w-90' : 'md:w-80'">
 			<SlugField
 				:label="t('Key')"
 				name="key"
@@ -27,6 +27,7 @@ const props = withDefaults(
 		fullBleed?: boolean
 		compactPadding?: boolean
 		bleedOfflineBanner?: boolean
+		flushOfflineBanner?: boolean
 		renderWhileChecking?: boolean
 		noCurrentNav?: boolean
 		offlineMessage?: string
@@ -42,6 +43,7 @@ const props = withDefaults(
 		fullBleed: false,
 		compactPadding: false,
 		bleedOfflineBanner: false,
+		flushOfflineBanner: false,
 		renderWhileChecking: false,
 		noCurrentNav: false,
 	},
@@ -411,6 +413,7 @@ async function onLogout() {
 						:icon="offlineIcon"
 						:bleed="compactPadding || bleedOfflineBanner"
 						:roomy="!compactPadding && bleedOfflineBanner"
+						:flush="flushOfflineBanner"
 					/>

 					<AppBoot v-if="showBoot" />
@@ -2,7 +2,7 @@
 import { SHEET_CONTENT_CLASS, SHEET_FOOTER_CLASS } from '@/components/sheetClasses'
 import { t } from '@/i18n'

-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { DirectoryNotice } from '@/lib/directoryTypes'

 const props = withDefaults(
@@ -17,6 +17,7 @@ const props = withDefaults(
 		notice?: DirectoryNotice | null
 		closable?: boolean
 		confirmDisabled?: boolean
+		wide?: boolean
 	}>(),
 	{
 		cancelLabel: '',
@@ -25,13 +26,30 @@ const props = withDefaults(
 		notice: null,
 		closable: false,
 		confirmDisabled: false,
+		wide: false,
 	},
 )

-const emit = defineEmits<{ confirm: []; close: [] }>()
+const emit = defineEmits<{ confirm: []; close: []; cancel: [] }>()

 const open = defineModel<boolean>('open', { default: true })

+const titleElement = ref<HTMLElement | null>(null)
+const contentClass = computed(
+	() =>
+		`${SHEET_CONTENT_CLASS} ${props.wide ? 'sm:top-15 sm:max-w-140' : 'sm:top-35 sm:max-w-115'}`,
+)
+
+watch(
+	() => props.pending,
+	async (value) => {
+		if (value) {
+			await nextTick()
+			titleElement.value?.focus()
+		}
+	},
+)
+
 const confirmText = computed(() => (props.pending ? props.pendingLabel : props.confirmLabel))
 const closeButton = computed(() =>
 	props.closable && !props.pending
@@ -50,6 +68,7 @@ function onOpenChange(value: boolean) {
 }

 function onCancel() {
+	emit('cancel')
 	onOpenChange(false)
 }
 </script>
@@ -66,8 +85,11 @@ function onCancel() {
 			'aria-busy': pending ? 'true' : undefined,
 		}"
 		:ui="{
-			content: `${SHEET_CONTENT_CLASS} sm:top-35 sm:max-w-115`,
-			header: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
+			content: contentClass,
+			header:
+				props.wide && props.closable
+					? 'min-h-0 px-6 pe-20 pt-5 pb-0 sm:px-6 sm:pe-16'
+					: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
 			title: 'text-lg/6 font-semibold',
 			description: 'mt-1 text-sm text-muted text-pretty',
 			body: 'px-6 pt-5 pb-0 sm:px-6 sm:pt-5 sm:pb-0',
@@ -75,6 +97,9 @@ function onCancel() {
 		}"
 		@update:open="onOpenChange"
 	>
+		<template #title>
+			<span ref="titleElement" tabindex="-1" class="outline-none">{{ title }}</span>
+		</template>
 		<template #body>
 			<div class="flex flex-col gap-4">
 				<UAlert
@@ -100,7 +125,10 @@ function onCancel() {
 					color="neutral"
 					variant="outline"
 					block
-					class="h-11 justify-center text-sm text-highlighted disabled:text-dimmed disabled:opacity-100 sm:h-8 sm:w-auto sm:px-3"
+					class="h-11 justify-center text-sm text-highlighted sm:h-8 sm:w-auto sm:px-3"
+					:class="
+						wide ? 'disabled:opacity-40' : 'disabled:text-dimmed disabled:opacity-100'
+					"
 					:disabled="pending"
 					@click="onCancel"
 				>
@@ -112,6 +140,7 @@ function onCancel() {
 					:disabled="pending || confirmDisabled"
 					block
 					class="h-11 justify-center text-sm sm:h-8 sm:w-auto sm:px-3"
+					:class="wide ? 'disabled:opacity-40' : ''"
 					@click="emit('confirm')"
 				>
 					{{ confirmText }}
@@ -154,6 +154,8 @@ watch(
 				/>
 			</DirectoryField>
 			<SlugField
+				:locked="field.saved"
+				:locked-help="t('Used in the API, so it can\'t change.')"
 				:label="t('Key')"
 				name="field-key"
 				:mode="keyMode"
@@ -180,6 +182,7 @@ watch(
 			:model-value="type"
 			:compact="compact"
 			:disabled="disabled"
+			:locked="field.saved"
 			@update:model-value="emit('type', $event)"
 		/>

@@ -4,17 +4,31 @@ import { t } from '@/i18n'
 import { computed, nextTick, ref } from 'vue'
 import FieldRow from '@/components/FieldRow.vue'
 import { useKeyboardReorder } from '@/composables/useKeyboardReorder'
+import type { RowMarks } from '@/composables/useSchemaBuilder'
 import { BUILDER_LIMITS, type BuilderField } from '@/lib/schemaBuilderModel'
 import type { FieldErrors } from '@/lib/schemaBuilderValidation'

-const props = defineProps<{
-	fields: BuilderField[]
-	selectedUid: number | null
-	errors: Map<number, FieldErrors>
-	listError?: string
-	disabled: boolean
-	mobile: boolean
-}>()
+const NEW_MARKS: RowMarks = { isNew: true, changed: false, cause: false }
+
+const props = withDefaults(
+	defineProps<{
+		fields: BuilderField[]
+		selectedUid: number | null
+		errors: Map<number, FieldErrors>
+		listError?: string
+		disabled: boolean
+		mobile: boolean
+		marks?: Map<number, RowMarks>
+		removed?: BuilderField[]
+		canUndo?: boolean
+	}>(),
+	{
+		listError: undefined,
+		marks: undefined,
+		removed: () => [],
+		canUndo: true,
+	},
+)

 const emit = defineEmits<{
 	select: [uid: number]
@@ -22,6 +36,7 @@ const emit = defineEmits<{
 	remove: [uid: number]
 	move: [uid: number, delta: number]
 	reorder: [order: number[]]
+	undo: [key: string]
 }>()

 const list = ref<HTMLElement | null>(null)
@@ -120,6 +135,7 @@ function onFocusin(event: FocusEvent) {
 				:disabled="disabled"
 				:tabbable="field.uid === tabbableUid"
 				:show-actions="!mobile"
+				:marks="marks?.get(field.uid) ?? NEW_MARKS"
 				@select="emit('select', field.uid)"
 				@up="onMove(field.uid, -1)"
 				@down="onMove(field.uid, 1)"
@@ -141,6 +157,28 @@ function onFocusin(event: FocusEvent) {
 			}}</span>
 		</div>

+		<div
+			v-for="field in removed"
+			:key="field.key"
+			data-testid="undo-row"
+			class="flex min-h-11 items-center gap-2 border border-dashed border-accented px-3 text-toned"
+			:class="disabled ? 'opacity-60' : ''"
+		>
+			<UIcon name="i-lucide-minus" class="size-3.5 shrink-0" />
+			<span class="flex-1">{{
+				t('{0} will be removed', [field.label.trim() || t('Untitled field')])
+			}}</span>
+			<button
+				type="button"
+				data-testid="undo-action"
+				:disabled="disabled || !canUndo"
+				class="min-h-11 font-medium text-highlighted underline underline-offset-3 focus-visible:outline-2 focus-visible:outline-primary disabled:text-dimmed md:min-h-0"
+				@click="emit('undo', field.key)"
+			>
+				{{ t('Undo') }}
+			</button>
+		</div>
+
 		<UButton
 			icon="i-lucide-plus"
 			color="neutral"
@@ -5,6 +5,7 @@ import { computed } from 'vue'
 import BuilderBadge from '@/components/BuilderBadge.vue'
 import FieldActions from '@/components/FieldActions.vue'
 import type { BuilderField } from '@/lib/schemaBuilderModel'
+import type { RowMarks } from '@/composables/useSchemaBuilder'
 import { fieldIcon } from '@/lib/schemaFields'

 const props = defineProps<{
@@ -17,6 +18,7 @@ const props = defineProps<{
 	disabled: boolean
 	tabbable: boolean
 	showActions: boolean
+	marks: RowMarks
 }>()

 defineEmits<{
@@ -68,7 +70,7 @@ const rowClass = computed(() => [
 			:aria-current="selected ? 'true' : undefined"
 			:disabled="disabled"
 			:tabindex="tabbable ? 0 : -1"
-			class="flex min-w-0 flex-1 items-center gap-2 self-stretch text-left focus-visible:outline-2 focus-visible:outline-primary"
+			class="flex min-w-0 flex-1 items-center gap-2.5 self-stretch text-left max-md:gap-3 focus-visible:outline-2 focus-visible:outline-primary"
 			@click.stop="$emit('select')"
 		>
 			<span
@@ -88,7 +90,9 @@ const rowClass = computed(() => [
 			</span>
 		</button>
 		<span class="flex shrink-0 items-center gap-1" data-testid="field-row-badges">
-			<BuilderBadge kind="new" />
+			<BuilderBadge v-if="marks.isNew" kind="new" />
+			<BuilderBadge v-if="marks.changed" kind="changed" />
+			<BuilderBadge v-if="marks.cause" kind="cause" />
 			<BuilderBadge v-if="field.required" kind="required" :on-sand="selected" />
 			<BuilderBadge v-if="field.unique" kind="unique" :on-sand="selected" />
 			<UIcon
@@ -5,7 +5,12 @@ import { computed } from 'vue'
 import { FIELD_TYPES, type FieldType } from '@/lib/schemaBuilderModel'
 import { fieldIcon, fieldTypeLabel } from '@/lib/schemaFields'

-defineProps<{ modelValue: FieldType; compact: boolean; disabled: boolean }>()
+const props = defineProps<{
+	modelValue: FieldType
+	compact: boolean
+	disabled: boolean
+	locked?: boolean
+}>()

 defineEmits<{ 'update:modelValue': [type: FieldType] }>()

@@ -27,7 +32,11 @@ function describe(type: FieldType) {
 }

 const items = computed(() =>
-	FIELD_TYPES.map((type) => ({ value: type, label: fieldTypeLabel(type) })),
+	FIELD_TYPES.map((type) => ({
+		value: type,
+		label: fieldTypeLabel(type),
+		disabled: props.locked && type !== props.modelValue,
+	})),
 )
 </script>

@@ -42,7 +51,7 @@ const items = computed(() =>
 		orientation="horizontal"
 		:ui="{
 			root: 'w-full',
-			legend: 'mb-1.5 font-medium text-highlighted',
+			legend: 'mb-1.5 w-full font-medium text-highlighted',
 			fieldset: compact ? 'grid grid-cols-2 gap-2' : 'grid grid-cols-3 gap-2',
 			item: 'group min-h-14 rounded-none border-accented p-2.5 text-highlighted has-data-[state=checked]:border-primary has-data-[state=checked]:bg-(--rc-sand) has-data-[state=checked]:text-(--rc-on-sand) max-md:min-h-16',
 			wrapper: 'ms-0 w-full',
@@ -50,8 +59,20 @@ const items = computed(() =>
 		}"
 		@update:model-value="$emit('update:modelValue', $event as FieldType)"
 	>
+		<template v-if="locked" #legend>
+			<span class="flex items-center justify-between gap-2">
+				<span>{{ t('Type') }}</span>
+				<span class="flex items-center gap-1 text-xs font-normal text-muted">
+					<UIcon name="i-lucide-lock" class="size-3" />
+					{{ t("Can't change after saving") }}
+				</span>
+			</span>
+		</template>
 		<template #label="{ item }">
-			<span class="flex items-start gap-2.5 text-left">
+			<span
+				class="flex items-start gap-2.5 text-left"
+				:class="item.disabled ? 'opacity-40' : ''"
+			>
 				<UIcon :name="fieldIcon(item.value)" class="mt-0.5 size-4 shrink-0" />
 				<span class="flex min-w-0 flex-col">
 					<span class="font-medium">{{ item.label }}</span>
@@ -16,17 +16,32 @@ const BLEED_UI = {
 	title: 'whitespace-normal font-normal text-wrap',
 }

+const FLUSH_UI = { ...BLEED_UI, root: 'w-auto' }
+
 const props = withDefaults(
 	defineProps<{
 		message?: string
 		icon?: string
 		bleed?: boolean
 		roomy?: boolean
+		flush?: boolean
 	}>(),
-	{ message: DEFAULT_MESSAGE, icon: undefined, bleed: false, roomy: false },
+	{
+		message: DEFAULT_MESSAGE,
+		icon: undefined,
+		bleed: false,
+		roomy: false,
+		flush: false,
+	},
 )

 const bleedUi = computed(() => (props.roomy ? { ...BLEED_UI, root: ROOMY_BLEED_ROOT } : BLEED_UI))
+const bannerUi = computed(() => {
+	if (props.flush) {
+		return FLUSH_UI
+	}
+	return props.bleed ? bleedUi.value : undefined
+})

 const isOffline = ref(!navigator.onLine)

@@ -51,6 +66,6 @@ onUnmounted(() => {
 		color="neutral"
 		:icon="icon"
 		:title="translate(message)"
-		:ui="bleed ? bleedUi : undefined"
+		:ui="bannerUi"
 	/>
 </template>
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { t } from '@/i18n'

-defineProps<{ title: string; description: string }>()
+withDefaults(
+	defineProps<{
+		title: string
+		description: string
+		actionLabel?: string
+		actionIcon?: string
+	}>(),
+	{ actionLabel: '', actionIcon: 'i-lucide-rotate-cw' },
+)

 defineEmits<{ retry: [] }>()
 </script>
@@ -16,18 +24,18 @@ defineEmits<{ retry: [] }>()
 		icon="i-lucide-circle-x"
 		:title="title"
 		:description="description"
-		:ui="{ actions: 'mt-2' }"
+		:ui="{ actions: 'mt-1.5' }"
 	>
 		<template #actions>
 			<UButton
 				color="neutral"
 				variant="outline"
-				icon="i-lucide-rotate-cw"
+				:icon="actionIcon || undefined"
 				class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-8"
 				:ui="{ leadingIcon: 'size-3.5' }"
 				@click="$emit('retry')"
 			>
-				{{ t('Try again') }}
+				{{ actionLabel || t('Try again') }}
 			</UButton>
 		</template>
 	</UAlert>
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed, nextTick, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useMediaQuery } from '@vueuse/core'
+import ApiPreview from '@/components/ApiPreview.vue'
+import ApiPreviewSheet from '@/components/ApiPreviewSheet.vue'
+import BuilderActions from '@/components/BuilderActions.vue'
+import BuilderBadge from '@/components/BuilderBadge.vue'
+import BuilderInspector from '@/components/BuilderInspector.vue'
+import BuilderTypeBar from '@/components/BuilderTypeBar.vue'
+import FieldList from '@/components/FieldList.vue'
+import FieldSheet from '@/components/FieldSheet.vue'
+import RetryAlert from '@/components/RetryAlert.vue'
+import SchemaForbidden from '@/components/SchemaForbidden.vue'
+import SchemaRefusalDialog from '@/components/SchemaRefusalDialog.vue'
+import SchemaReviewDialog from '@/components/SchemaReviewDialog.vue'
+import { useSchemaBuilder, type EditSource } from '@/composables/useSchemaBuilder'
+import { useUnsavedChangesGuard } from '@/composables/useUnsavedChangesGuard'
+import { HOME_PATH } from '@/lib/routePaths'
+import { sampleJson } from '@/lib/schemaBuilderSample'
+import { entriesNotice } from '@/lib/schemaEntries'
+import { formatClock } from '@/lib/updateFormat'
+
+const DESKTOP_QUERY = '(min-width: 48rem)'
+
+const props = defineProps<{ edit?: EditSource }>()
+
+const router = useRouter()
+const isDesktop = useMediaQuery(DESKTOP_QUERY)
+const builder = useSchemaBuilder(props.edit)
+const { form } = builder
+
+useUnsavedChangesGuard({
+	isDirty: () => builder.dirty.value,
+	title: () => form.value.name.trim() || t('New content type'),
+})
+
+const apiOpen = ref(false)
+const apiSheetOpen = ref(false)
+const fieldSheetOpen = ref(false)
+
+const json = computed(() => sampleJson(form.value.key, form.value.fields))
+const notice = computed(() => entriesNotice(builder.entryTotal))
+const savedClock = computed(() =>
+	builder.savedAt.value ? formatClock(new Date(builder.savedAt.value)) : '',
+)
+const removedFields = computed(() => builder.removed.value.map((entry) => entry.field))
+const refusalCauses = computed(() => builder.refusedChanges.value)
+const selectedIndex = computed(() =>
+	form.value.fields.findIndex((field) => field.uid === builder.selectedUid.value),
+)
+const selectedErrors = computed(() =>
+	builder.selected.value
+		? (builder.shown.value.fields.get(builder.selected.value.uid) ?? {})
+		: {},
+)
+const selectedMarks = computed(() =>
+	builder.selected.value ? builder.marks.value.get(builder.selected.value.uid) : undefined,
+)
+const selectedName = computed(() => builder.selected.value?.label.trim() || t('Untitled field'))
+const sheetTitle = computed(() => t('Field: {0}', [selectedName.value]))
+const reviewName = computed(() => builder.baseline.value?.name ?? '')
+
+function goHome() {
+	router.push(HOME_PATH)
+}
+
+function onSelect(uid: number) {
+	builder.selectField(uid)
+	if (!isDesktop.value) {
+		fieldSheetOpen.value = true
+	}
+}
+
+function onAdd() {
+	builder.addField()
+	if (!isDesktop.value) {
+		fieldSheetOpen.value = true
+	}
+}
+
+function onRemoveSelected() {
+	const uid = builder.selectedUid.value
+	if (uid !== null) {
+		builder.removeField(uid)
+	}
+	if (!isDesktop.value) {
+		fieldSheetOpen.value = false
+	}
+}
+
+function onMoveSelected(delta: number) {
+	const uid = builder.selectedUid.value
+	if (uid !== null) {
+		builder.moveField(uid, delta)
+	}
+}
+
+async function restoreRowFocus() {
+	await nextTick()
+	const uid = builder.selectedUid.value
+	document.querySelector<HTMLElement>(`[data-field-row][data-uid="${uid}"]`)?.focus()
+}
+</script>
+
+<template>
+	<SchemaForbidden v-if="builder.failure.value === 'forbidden'" @back="goHome" />
+
+	<template v-else>
+		<div
+			class="flex min-h-0 flex-1 flex-col max-md:shrink-0 max-md:basis-auto"
+			data-testid="schema-builder"
+		>
+			<div class="shrink-0 border-b border-default bg-default p-4 md:px-6">
+				<BuilderTypeBar
+					:name="form.name"
+					:key-value="form.key"
+					:key-mode="form.keyMode"
+					:key-locked="form.keyLocked"
+					:name-error="builder.shown.value.type.name"
+					:key-error="builder.shown.value.type.key"
+					:disabled="builder.saving.value"
+					:key-focus-token="builder.keyFocusToken.value"
+					@update:name="builder.setName"
+					@update:key="builder.setKey"
+					@unlock="builder.unlockKey"
+					@reset="builder.resetKey"
+				>
+					<template v-if="isDesktop" #actions>
+						<BuilderActions
+							:status="builder.status.value"
+							:problems="builder.problems.value"
+							:can-save="builder.canSave.value"
+							:can-reveal="builder.canReveal.value"
+							:can-discard="builder.canDiscard.value"
+							:saving="builder.saving.value"
+							:saved-at="savedClock"
+							@save="builder.save"
+							@discard="builder.discard"
+						/>
+					</template>
+				</BuilderTypeBar>
+			</div>
+
+			<div
+				v-if="notice"
+				data-testid="entries-notice"
+				class="flex shrink-0 items-center gap-2 bg-(--rc-info-soft) px-4 py-2 text-xs/4.5 md:px-6"
+			>
+				<UIcon name="i-lucide-info" class="size-3.5 shrink-0 text-info" />
+				<span class="text-toned">{{ notice }}</span>
+			</div>
+
+			<div
+				v-if="
+					builder.failure.value === 'failed' ||
+					builder.failure.value === 'invalid' ||
+					builder.refusal.value === 'banner'
+				"
+				class="flex flex-col gap-2 px-4 pt-3 md:px-6"
+			>
+				<RetryAlert
+					v-if="builder.failure.value === 'failed'"
+					:title="t('Couldn\'t save the content type')"
+					:description="
+						t(
+							'Something went wrong on our side. Your changes are still here. Try again in a moment.',
+						)
+					"
+					@retry="builder.save"
+				/>
+				<UAlert
+					v-else-if="builder.failure.value === 'invalid'"
+					role="alert"
+					color="error"
+					variant="soft"
+					icon="i-lucide-circle-x"
+					:title="t('Check the fields marked in the list.')"
+				/>
+				<RetryAlert
+					v-if="builder.refusal.value === 'banner'"
+					:title="t('Nothing was changed')"
+					:description="
+						t(
+							'Some entries don\'t fit the new fields, so the whole change was refused. RenewCMS can\'t tell which entries. The changes that can cause this are marked.',
+						)
+					"
+					:action-label="t('Review changes')"
+					action-icon=""
+					@retry="builder.reviewAgain"
+				/>
+			</div>
+
+			<div class="flex min-h-0 flex-1 flex-col md:flex-row">
+				<div
+					class="flex flex-col gap-2 p-4 md:min-h-0 md:w-95 md:shrink-0 md:overflow-y-auto md:border-r md:border-default md:bg-muted"
+				>
+					<FieldList
+						:fields="form.fields"
+						:selected-uid="builder.selectedUid.value"
+						:errors="builder.shown.value.fields"
+						:list-error="builder.shown.value.type.fields"
+						:disabled="builder.saving.value"
+						:mobile="!isDesktop"
+						:marks="builder.marks.value"
+						:removed="removedFields"
+						:can-undo="builder.mayRestore.value"
+						@select="onSelect"
+						@add="onAdd"
+						@remove="builder.removeField"
+						@move="builder.moveField"
+						@reorder="builder.reorderFields"
+						@undo="builder.undoRemoval"
+					>
+						<button
+							v-if="!isDesktop"
+							type="button"
+							data-testid="api-row"
+							class="flex min-h-11 items-center gap-2.5 border border-default bg-default px-3 text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+							@click="apiSheetOpen = true"
+						>
+							<UIcon name="i-lucide-braces" class="size-4" />
+							<span class="flex-1 text-left font-medium">{{ t('API preview') }}</span>
+							<UIcon name="i-lucide-chevron-right" class="size-3.5 text-muted" />
+						</button>
+					</FieldList>
+				</div>
+
+				<div
+					v-if="isDesktop"
+					class="flex min-h-0 min-w-0 flex-1 flex-col gap-3.5 overflow-y-auto bg-default px-6 py-4"
+					data-testid="inspector-pane"
+				>
+					<template v-if="builder.selected.value">
+						<div class="flex items-center gap-2">
+							<h2 class="text-md font-semibold text-highlighted">
+								{{ sheetTitle }}
+							</h2>
+							<BuilderBadge v-if="selectedMarks?.isNew" kind="new" />
+							<BuilderBadge v-if="selectedMarks?.changed" kind="changed" />
+						</div>
+						<BuilderInspector
+							:builder="builder"
+							:field="builder.selected.value"
+							:errors="selectedErrors"
+							:compact="false"
+						/>
+					</template>
+					<template v-else>
+						<h2 class="text-md font-semibold text-highlighted">
+							{{ t('Field settings') }}
+						</h2>
+						<p class="text-muted">
+							{{ t('Add a field, then choose its type and rules here.') }}
+						</p>
+					</template>
+				</div>
+			</div>
+
+			<ApiPreview
+				v-if="isDesktop"
+				v-model:open="apiOpen"
+				:key-value="form.key"
+				:json="json"
+			/>
+			<div
+				v-else
+				class="sticky bottom-0 mt-auto border-t border-default bg-default px-4 py-3"
+			>
+				<BuilderActions
+					:status="builder.status.value"
+					:problems="builder.problems.value"
+					:can-save="builder.canSave.value"
+					:can-reveal="builder.canReveal.value"
+					:can-discard="builder.canDiscard.value"
+					:saving="builder.saving.value"
+					:saved-at="savedClock"
+					@save="builder.save"
+					@discard="builder.discard"
+				/>
+			</div>
+		</div>
+
+		<template v-if="!isDesktop">
+			<ApiPreviewSheet v-model:open="apiSheetOpen" :key-value="form.key" :json="json" />
+			<FieldSheet
+				v-model:open="fieldSheetOpen"
+				:title="sheetTitle"
+				:first="selectedIndex <= 0"
+				:last="selectedIndex === form.fields.length - 1"
+				:disabled="builder.saving.value"
+				@up="onMoveSelected(-1)"
+				@down="onMoveSelected(1)"
+				@remove="onRemoveSelected"
+				@closed="restoreRowFocus"
+			>
+				<BuilderInspector
+					v-if="builder.selected.value"
+					:builder="builder"
+					:field="builder.selected.value"
+					:errors="selectedErrors"
+					compact
+				/>
+			</FieldSheet>
+		</template>
+
+		<SchemaReviewDialog
+			v-if="builder.reviewOpen.value"
+			:name="reviewName"
+			:total="builder.entryTotal"
+			:changes="builder.changes.value"
+			:applying="builder.saving.value"
+			:offline="!builder.online.value"
+			@apply="builder.apply"
+			@close="builder.closeReview"
+		/>
+		<SchemaRefusalDialog
+			v-if="builder.refusal.value === 'dialog'"
+			:causes="refusalCauses"
+			@keep-editing="builder.keepEditing"
+			@discard="builder.discard"
+		/>
+	</template>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import SchemaChangeRow from '@/components/SchemaChangeRow.vue'
+import type { FieldChange } from '@/lib/schemaBuilderDiff'
+
+defineProps<{ changes: FieldChange[]; testId: string; cause?: boolean }>()
+</script>
+
+<template>
+	<ul class="m-0 flex list-none flex-col gap-2 p-0" :data-testid="testId">
+		<SchemaChangeRow
+			v-for="change in changes"
+			:key="`${change.kind}:${change.key}`"
+			:change="change"
+			:cause="cause"
+		/>
+	</ul>
+</template>
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import {
+	causeText,
+	changeText,
+	changeTitle,
+	type ChangeKind,
+	type FieldChange,
+} from '@/lib/schemaBuilderDiff'
+
+const props = defineProps<{ change: FieldChange; cause?: boolean }>()
+
+const ICONS: Record<ChangeKind, string> = {
+	add: 'i-lucide-plus',
+	change: 'i-lucide-pencil',
+	remove: 'i-lucide-minus',
+}
+
+const flagged = computed(() => props.cause || props.change.flag !== null)
+const badge = computed(() => {
+	if (props.cause) {
+		return t('Possible cause')
+	}
+	if (props.change.flag === 'mayNotFit') {
+		return t('Entries may not fit')
+	}
+	return props.change.flag === 'removesData' ? t('Removes data') : ''
+})
+const text = computed(() => (props.cause ? causeText(props.change) : changeText(props.change)))
+</script>
+
+<template>
+	<li
+		data-testid="change-row"
+		class="flex gap-2.5 border border-default px-3 py-2.5"
+		:class="flagged ? 'bg-(--rc-warning-soft)' : 'bg-default'"
+	>
+		<UIcon
+			:name="ICONS[change.kind]"
+			class="mt-0.5 size-4 shrink-0"
+			:class="flagged ? 'text-warning' : 'text-toned'"
+		/>
+		<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+			<div class="flex flex-wrap items-center gap-2">
+				<span class="font-semibold text-highlighted" data-testid="change-title">{{
+					changeTitle(change)
+				}}</span>
+				<UBadge
+					v-if="badge"
+					color="neutral"
+					variant="soft"
+					icon="i-lucide-triangle-alert"
+					data-testid="change-flag"
+					class="border border-(--rc-warning-soft) bg-(--rc-warning-soft) text-warning"
+					:ui="{
+						base: 'h-5 shrink-0 gap-1 px-1.5 py-0 text-xs font-medium whitespace-nowrap',
+						leadingIcon: 'size-3',
+					}"
+				>
+					{{ badge }}
+				</UBadge>
+			</div>
+			<span class="text-pretty text-toned" data-testid="change-text">{{ text }}</span>
+		</div>
+	</li>
+</template>
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import SchemaChangeList from '@/components/SchemaChangeList.vue'
+import DirectoryDialog from '@/components/DirectoryDialog.vue'
+import type { FieldChange } from '@/lib/schemaBuilderDiff'
+
+defineProps<{ causes: FieldChange[] }>()
+
+defineEmits<{ keepEditing: []; discard: [] }>()
+</script>
+
+<template>
+	<DirectoryDialog
+		:title="t('Nothing was changed')"
+		:description="
+			t(
+				'RenewCMS refused the changes because some entries don\'t fit the new fields. It doesn\'t say which entries.',
+			)
+		"
+		:confirm-label="t('Back to editing')"
+		:pending-label="t('Back to editing')"
+		:cancel-label="t('Discard changes')"
+		:notice="{
+			title: t('Your content type is as it was'),
+			description: t('No field was added, changed or removed.'),
+		}"
+		tone="neutral"
+		wide
+		closable
+		@confirm="$emit('keepEditing')"
+		@cancel="$emit('discard')"
+		@close="$emit('keepEditing')"
+	>
+		<template v-if="causes.length > 0">
+			<span class="font-semibold text-highlighted">{{
+				t('The change that can cause this in your edit')
+			}}</span>
+			<SchemaChangeList :changes="causes" test-id="refusal-causes" cause />
+		</template>
+		<p class="text-xs/4.5 text-pretty text-muted">
+			{{
+				t(
+					'This kind of change is refused when an entry is over the new limit, a new required field has no default, a field becomes unique while entries share a value, or a removed choice is still in use.',
+				)
+			}}
+		</p>
+	</DirectoryDialog>
+</template>
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import DirectoryDialog from '@/components/DirectoryDialog.vue'
+import SchemaChangeList from '@/components/SchemaChangeList.vue'
+import { entriesLine } from '@/lib/schemaEntries'
+import { summaryLine, type FieldChange } from '@/lib/schemaBuilderDiff'
+
+const props = defineProps<{
+	name: string
+	total: number
+	changes: FieldChange[]
+	applying: boolean
+	offline: boolean
+}>()
+
+defineEmits<{ apply: []; close: [] }>()
+
+const summary = computed(() => summaryLine(props.changes))
+const entries = computed(() => entriesLine(props.name, props.total))
+</script>
+
+<template>
+	<DirectoryDialog
+		:title="t('Review changes to {0}', [name])"
+		:description="t('Apply them to save the content type.')"
+		:confirm-label="t('Apply changes')"
+		:pending-label="t('Applying…')"
+		:cancel-label="t('Back to editing')"
+		tone="neutral"
+		wide
+		:pending="applying"
+		:confirm-disabled="offline"
+		@confirm="$emit('apply')"
+		@close="$emit('close')"
+	>
+		<div class="flex flex-col gap-1">
+			<span class="text-md/4.5 font-semibold text-highlighted" data-testid="review-summary">{{
+				summary
+			}}</span>
+			<span class="text-muted">{{ entries }}</span>
+		</div>
+		<SchemaChangeList :changes="changes" test-id="review-changes" />
+		<p v-if="!applying" class="text-xs/4.5 text-muted">
+			{{
+				t(
+					"Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed.",
+				)
+			}}
+		</p>
+	</DirectoryDialog>
+</template>
@@ -99,7 +99,7 @@ const placeholderText = computed(() => props.placeholder || t('Generated from th
 				:maxlength="maxlength"
 				:data-autofocus="autofocus ? '' : undefined"
 				:color="error ? 'error' : undefined"
-				:highlight="mode === 'manual' && !error"
+				:highlight="mode === 'manual' && !error && !locked"
 				class="w-full"
 				:ui="inputUi"
 				@update:model-value="emit('update:value', String($event))"
@@ -17,7 +17,9 @@ const fetchMock = vi.fn()

 function answer(status: number, body: unknown) {
 	fetchMock.mockResolvedValue(
-		new Response(typeof body === 'string' ? body : JSON.stringify(body), { status }),
+		new Response(typeof body === 'string' ? body : JSON.stringify(body), {
+			status,
+		}),
 	)
 }

@@ -155,3 +157,80 @@ describe('createContentType', () => {
 		)
 	})
 })
+
+describe('updateContentType', () => {
+	const body = {
+		name: 'Recipes',
+		icon: null,
+		fields: [],
+	}
+
+	it('PUTs the JSON body to the key and returns the type', async () => {
+		answer(200, recipes)
+
+		const updated = await useContentTypes().updateContentType('recipes', body)
+
+		const [url, init] = fetchMock.mock.calls[0]!
+		expect(url).toBe('/v1/content-type/recipes')
+		expect(init.method).toBe('PUT')
+		expect(JSON.parse(init.body)).toEqual(body)
+		expect(updated.key).toBe('recipes')
+	})
+
+	it.each([
+		[400, 'Bad request body'],
+		[404, 'content_type_not_found'],
+		[409, 'schema_incompatible'],
+		[422, 'invalid_field'],
+		[403, 'Only owners and admins can do this'],
+		[500, 'boom'],
+	])('rejects %i with its plain-text body', async (status, text) => {
+		answer(status, text)
+
+		const failure = await useContentTypes()
+			.updateContentType('recipes', body)
+			.catch((error) => error)
+
+		expect(failure).toBeInstanceOf(ApiError)
+		expect(failure.status).toBe(status)
+		expect(failure.body).toBe(text)
+	})
+
+	it('lets a network failure through', async () => {
+		fetchMock.mockRejectedValue(new TypeError('Failed to fetch'))
+
+		await expect(useContentTypes().updateContentType('recipes', body)).rejects.toBeInstanceOf(
+			NetworkError,
+		)
+	})
+})
+
+describe('countEntries', () => {
+	it('reads the total of a five-entry page', async () => {
+		answer(200, { items: [], total: 37, page: 1, size: 5 })
+
+		await expect(useContentTypes().countEntries('events')).resolves.toBe(37)
+		expect(fetchMock.mock.calls[0]![0]).toBe('/v1/content-type/events/entry?page=1&size=5')
+	})
+
+	it.each([[{ items: [] }], [{ total: '37' }], [null]])(
+		'rejects a body without a numeric total: %j',
+		async (page) => {
+			answer(200, page)
+
+			await expect(useContentTypes().countEntries('events')).rejects.toThrow()
+		},
+	)
+
+	it.each([404, 403, 500])('rejects %i with an ApiError', async (status) => {
+		answer(status, 'content_type_not_found')
+
+		await expect(useContentTypes().countEntries('events')).rejects.toMatchObject({ status })
+	})
+
+	it('lets a network failure through', async () => {
+		fetchMock.mockRejectedValue(new TypeError('Failed to fetch'))
+
+		await expect(useContentTypes().countEntries('events')).rejects.toBeInstanceOf(NetworkError)
+	})
+})
@@ -0,0 +1,114 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { effectScope, nextTick, ref } from 'vue'
+import { createPinia, setActivePinia } from 'pinia'
+import { useEntryCount } from '@/composables/useEntryCount'
+
+const fetchMock = vi.fn()
+
+function page(total: number) {
+	return new Response(JSON.stringify({ items: [], total, page: 1, size: 5 }), { status: 200 })
+}
+
+function flush() {
+	return new Promise((resolve) => setTimeout(resolve, 0))
+}
+
+function mount(key: ReturnType<typeof ref<string | null>>) {
+	return effectScope().run(() => useEntryCount(() => key.value))!
+}
+
+beforeEach(() => {
+	setActivePinia(createPinia())
+	fetchMock.mockReset()
+	vi.stubGlobal('fetch', fetchMock)
+})
+
+afterEach(() => {
+	vi.unstubAllGlobals()
+})
+
+describe('the entry count of a type', () => {
+	it('stays idle and sends nothing without a key', async () => {
+		const count = mount(ref<string | null>(null))
+		await flush()
+
+		expect(count.status.value).toBe('idle')
+		expect(count.total.value).toBe(0)
+		expect(fetchMock).not.toHaveBeenCalled()
+	})
+
+	it('loads, then reads ready with the total', async () => {
+		fetchMock.mockResolvedValue(page(37))
+		const count = mount(ref<string | null>('events'))
+
+		expect(count.status.value).toBe('loading')
+		await flush()
+
+		expect(count.status.value).toBe('ready')
+		expect(count.total.value).toBe(37)
+		expect(fetchMock).toHaveBeenCalledTimes(1)
+	})
+
+	it.each([
+		[404, 'missing'],
+		[403, 'forbidden'],
+		[500, 'failed'],
+	])('reads %i as %s', async (status, expected) => {
+		fetchMock.mockResolvedValue(new Response('x', { status }))
+		const count = mount(ref<string | null>('events'))
+		await flush()
+
+		expect(count.status.value).toBe(expected)
+	})
+
+	it('reads a network failure as failed, and retry loads again', async () => {
+		fetchMock.mockRejectedValueOnce(new TypeError('Failed to fetch'))
+		const count = mount(ref<string | null>('events'))
+		await flush()
+		expect(count.status.value).toBe('failed')
+
+		fetchMock.mockResolvedValue(page(2))
+		await count.retry()
+
+		expect(count.status.value).toBe('ready')
+		expect(count.total.value).toBe(2)
+		expect(fetchMock).toHaveBeenCalledTimes(2)
+	})
+
+	it('does not retry without a key', async () => {
+		const count = mount(ref<string | null>(null))
+		await count.retry()
+
+		expect(fetchMock).not.toHaveBeenCalled()
+	})
+
+	it('ignores the answer of a key that is no longer current', async () => {
+		let release: (value: Response) => void = () => {}
+		fetchMock.mockImplementationOnce(() => new Promise<Response>((r) => (release = r)))
+		fetchMock.mockResolvedValueOnce(page(9))
+		const key = ref<string | null>('events')
+		const count = mount(key)
+
+		key.value = 'recipes'
+		await flush()
+		release(page(1000))
+		await flush()
+
+		expect(count.total.value).toBe(9)
+		expect(count.status.value).toBe('ready')
+	})
+
+	it('ignores a late failure once the key is cleared', async () => {
+		let fail: (reason: unknown) => void = () => {}
+		fetchMock.mockImplementationOnce(() => new Promise<Response>((_, r) => (fail = r)))
+		const key = ref<string | null>('events')
+		const count = mount(key)
+
+		key.value = null
+		await nextTick()
+		fail(new TypeError('Failed to fetch'))
+		await flush()
+
+		expect(count.status.value).toBe('idle')
+	})
+})
@@ -1,6 +1,6 @@
 import { useApi } from '@/composables/useApi'
 import { jsonInit } from '@/lib/directoryRequest'
-import type { ContentTypePayload } from '@/lib/schemaBuilderPayload'
+import type { ContentTypePayload, UpdatePayload } from '@/lib/schemaBuilderPayload'

 export interface BuiltinField {
 	key: string
@@ -57,5 +57,29 @@ export function useContentTypes() {
 		})
 	}

-	return { listContentTypes, listBuiltinTypes, createContentType }
+	function updateContentType(key: string, payload: UpdatePayload): Promise<ContentType> {
+		return request<ContentType>(`/v1/content-type/${encodeURIComponent(key)}`, {
+			...jsonInit('PUT', payload),
+			...options,
+		})
+	}
+
+	async function countEntries(key: string): Promise<number> {
+		const page = await request<{ total?: unknown }>(
+			`/v1/content-type/${encodeURIComponent(key)}/entry?page=1&size=5`,
+			options,
+		)
+		if (typeof page?.total !== 'number') {
+			throw new Error(`Unexpected response from /v1/content-type/${key}/entry`)
+		}
+		return page.total
+	}
+
+	return {
+		listContentTypes,
+		listBuiltinTypes,
+		createContentType,
+		updateContentType,
+		countEntries,
+	}
 }
@@ -0,0 +1,57 @@
+import { ref, watch } from 'vue'
+import { ApiError } from '@/composables/useApi'
+import { useContentTypes } from '@/composables/useContentTypes'
+
+export type EntryCountStatus = 'idle' | 'loading' | 'ready' | 'failed' | 'missing' | 'forbidden'
+
+export function useEntryCount(key: () => string | null) {
+	const status = ref<EntryCountStatus>('idle')
+	const total = ref(0)
+	let generation = 0
+
+	async function load(target: string) {
+		const current = ++generation
+		status.value = 'loading'
+		try {
+			const counted = await useContentTypes().countEntries(target)
+			if (current === generation) {
+				total.value = counted
+				status.value = 'ready'
+			}
+		} catch (error) {
+			if (current !== generation) {
+				return
+			}
+			if (error instanceof ApiError && error.status === 404) {
+				status.value = 'missing'
+			} else if (error instanceof ApiError && error.status === 403) {
+				status.value = 'forbidden'
+			} else {
+				status.value = 'failed'
+			}
+		}
+	}
+
+	function retry() {
+		const target = key()
+		if (target !== null) {
+			return load(target)
+		}
+		return Promise.resolve()
+	}
+
+	watch(
+		key,
+		(target) => {
+			if (target === null) {
+				generation++
+				status.value = 'idle'
+				return
+			}
+			load(target)
+		},
+		{ immediate: true },
+	)
+
+	return { status, total, retry }
+}
@@ -19,7 +19,16 @@ import {
 	type BuilderStatus,
 	type FieldType,
 } from '@/lib/schemaBuilderModel'
-import { buildPayload } from '@/lib/schemaBuilderPayload'
+import {
+	baselineSignatures,
+	diffFields,
+	flaggedChanges,
+	isFieldChanged,
+	type FieldChange,
+} from '@/lib/schemaBuilderDiff'
+import { baselinePayload, formFromType } from '@/lib/schemaBuilderLoad'
+import { buildPayload, buildUpdatePayload } from '@/lib/schemaBuilderPayload'
+import { reservedKeys, restoreIndex, type RemovedField } from '@/lib/schemaBuilderRemoval'
 import { FIELD_ERROR_TOUCH, fieldTouchKey, typeTouchKey } from '@/lib/schemaBuilderTouch'
 import type { FieldTouch, TypeTouch } from '@/lib/schemaBuilderTouch'
 import {
@@ -34,10 +43,25 @@ import { useContentTypesStore } from '@/stores/contentTypes'
 const KEY_TAKEN_BODY = 'content_type_key_taken'
 const INVALID_KEY_BODY = 'invalid_content_type_key'
 const INVALID_FIELD_BODY = 'invalid_field'
+const INCOMPATIBLE_BODY = 'schema_incompatible'
 const TOAST_ID = 'content-type-saved'

 export type SaveFailure = 'none' | 'failed' | 'invalid' | 'forbidden'
 export type SaveState = 'editing' | 'saving' | 'saved' | 'failed'
+export type RefusalState = 'none' | 'dialog' | 'banner'
+
+export interface EditSource {
+	type: ContentType
+	total: number
+}
+
+export interface RowMarks {
+	isNew: boolean
+	changed: boolean
+	cause: boolean
+}
+
+const CREATE_MARKS: RowMarks = { isNew: true, changed: false, cause: false }

 function signature(form: BuilderForm) {
 	return JSON.stringify({
@@ -48,7 +72,7 @@ function signature(form: BuilderForm) {
 	})
 }

-export function useSchemaBuilder() {
+export function useSchemaBuilder(source?: EditSource) {
 	const router = useRouter()
 	const store = useContentTypesStore()
 	const toast = useLocalizedToast()
@@ -56,7 +80,17 @@ export function useSchemaBuilder() {
 	let nextUid = 1
 	const newUid = () => nextUid++

-	const form = ref<BuilderForm>(blankForm(newUid()))
+	const editing = source !== undefined
+	const baseline = ref<ContentType | null>(source?.type ?? null)
+	const entryTotal = source?.total ?? 0
+	const form = ref<BuilderForm>(source ? formFromType(source.type, newUid) : blankForm(newUid()))
+	const removed = ref<RemovedField[]>([])
+	const reviewOpen = ref(false)
+	const refusal = ref<RefusalState>('none')
+	const refusedUids = ref<number[]>([])
+	const refusedChanges = ref<FieldChange[]>([])
+	const savedAt = ref('')
+	const nameServerError = ref('')
 	let initialSignature = signature(form.value)
 	const selectedUid = ref<number | null>(form.value.fields[0]!.uid)
 	const touched = ref(new Set<string>())
@@ -71,7 +105,34 @@ export function useSchemaBuilder() {
 	const dirty = computed(
 		() => saveState.value !== 'saved' && signature(form.value) !== initialSignature,
 	)
-	const errors = computed(() => validateForm(form.value))
+	const errors = computed(() => validateForm(form.value, reservedKeys(removed.value)))
+	const baselineFields = computed(() => (baseline.value ? baselinePayload(baseline.value) : []))
+	const baselineKeys = computed(() => baselineFields.value.map((field) => field.key))
+	const savedSignatures = computed(() => baselineSignatures(baselineFields.value))
+	const changes = computed(() => diffFields(baselineFields.value, form.value.fields))
+	const needsReview = computed(() => editing && entryTotal > 0 && changes.value.length > 0)
+	const flaggedUids = computed(
+		() => new Set(flaggedChanges(changes.value).map((change) => change.uid)),
+	)
+	const marks = computed(() => {
+		const result = new Map<number, RowMarks>()
+		for (const field of form.value.fields) {
+			result.set(
+				field.uid,
+				editing
+					? {
+							isNew: !field.saved,
+							changed: isFieldChanged(field, savedSignatures.value),
+							cause:
+								refusedUids.value.includes(field.uid) &&
+								flaggedUids.value.has(field.uid),
+						}
+					: CREATE_MARKS,
+			)
+		}
+		return result
+	})
+	const mayRestore = computed(() => form.value.fields.length < BUILDER_LIMITS.fieldsMax)
 	const selected = computed(
 		() => form.value.fields.find((field) => field.uid === selectedUid.value) ?? null,
 	)
@@ -110,6 +171,7 @@ export function useSchemaBuilder() {
 		if (!isShown(typeTouchKey('key'))) delete type.key
 		if (!isShown(typeTouchKey('fields'))) delete type.fields
 		if (keyServerError.value) type.key = keyServerError.value
+		if (nameServerError.value && !type.name) type.name = nameServerError.value
 		const fields = new Map<number, FieldErrors>()
 		for (const [uid, all] of errors.value.fields) {
 			const pick = shownFieldErrors(uid, all)
@@ -120,11 +182,15 @@ export function useSchemaBuilder() {
 		return { type, fields }
 	})

-	const hasServerKeyError = computed(
-		() => keyServerError.value !== '' && !errors.value.type.key,
+	const hasServerKeyError = computed(() => keyServerError.value !== '' && !errors.value.type.key)
+	const hasServerNameError = computed(
+		() => nameServerError.value !== '' && !errors.value.type.name,
 	)
 	const problems = computed(
-		() => countProblems(errors.value) + (hasServerKeyError.value ? 1 : 0),
+		() =>
+			countProblems(errors.value) +
+			(hasServerKeyError.value ? 1 : 0) +
+			(hasServerNameError.value ? 1 : 0),
 	)
 	const hasHidden = computed(() => countErrors(errors.value) > countErrors(shown.value))
 	const engaged = computed(() => dirty.value || touched.value.size > 0 || submitted.value)
@@ -134,15 +200,15 @@ export function useSchemaBuilder() {
 		if (!online.value) return 'offline'
 		if (failure.value === 'failed') return 'failed'
 		if (problems.value > 0 && engaged.value) return 'problems'
-		return dirty.value ? 'dirty' : 'none'
+		if (dirty.value) return 'dirty'
+		return editing ? 'saved' : 'none'
 	})

 	const canSave = computed(
 		() => !saving.value && online.value && dirty.value && problems.value === 0,
 	)
 	const canReveal = computed(
-		() =>
-			!saving.value && online.value && dirty.value && hasHidden.value && !submitted.value,
+		() => !saving.value && online.value && dirty.value && hasHidden.value && !submitted.value,
 	)
 	const canDiscard = computed(
 		() =>
@@ -150,7 +216,8 @@ export function useSchemaBuilder() {
 			(dirty.value ||
 				touched.value.size > 0 ||
 				submitted.value ||
-				keyServerError.value !== ''),
+				keyServerError.value !== '' ||
+				nameServerError.value !== ''),
 	)

 	function clearFailure() {
@@ -167,11 +234,15 @@ export function useSchemaBuilder() {
 	}

 	function otherKeys(uid: number) {
-		return form.value.fields.filter((field) => field.uid !== uid).map((field) => field.key)
+		return [
+			...form.value.fields.filter((field) => field.uid !== uid).map((field) => field.key),
+			...reservedKeys(removed.value),
+		]
 	}

 	function setName(name: string) {
 		form.value.name = name
+		nameServerError.value = ''
 		touch('name')
 		if (form.value.keyMode === 'auto') {
 			form.value.key = deriveTypeKey(name)
@@ -245,7 +316,10 @@ export function useSchemaBuilder() {
 	function resetFieldKey(uid: number) {
 		const field = form.value.fields[indexOf(uid)]
 		if (field) {
-			patchField(uid, { keyMode: 'auto', key: deriveFieldKey(field.label, otherKeys(uid)) })
+			patchField(uid, {
+				keyMode: 'auto',
+				key: deriveFieldKey(field.label, otherKeys(uid)),
+			})
 		}
 	}

@@ -285,7 +359,10 @@ export function useSchemaBuilder() {
 		if (index === -1) {
 			return
 		}
-		form.value.fields.splice(index, 1)
+		const [taken] = form.value.fields.splice(index, 1)
+		if (editing && taken?.saved) {
+			removed.value = [...removed.value, { field: taken }]
+		}
 		if (selectedUid.value === uid) {
 			const next = form.value.fields[index] ?? form.value.fields[index - 1]
 			selectedUid.value = next?.uid ?? null
@@ -296,6 +373,20 @@ export function useSchemaBuilder() {
 		edited()
 	}

+	function undoRemoval(key: string) {
+		const entry = removed.value.find((candidate) => candidate.field.key === key)
+		if (!entry || !mayRestore.value) {
+			return
+		}
+		const index = restoreIndex(form.value.fields, baselineKeys.value, key)
+		form.value.fields.splice(index, 0, entry.field)
+		removed.value = removed.value.filter((candidate) => candidate !== entry)
+		if (selectedUid.value === null) {
+			selectedUid.value = entry.field.uid
+		}
+		edited()
+	}
+
 	function moveField(uid: number, delta: number) {
 		const index = indexOf(uid)
 		form.value.fields = moveItem(form.value.fields, index, index + delta)
@@ -344,14 +435,24 @@ export function useSchemaBuilder() {
 		setOptions(uid, options)
 	}

-	function discard() {
-		form.value = blankForm(newUid())
+	function resetEditState() {
 		initialSignature = signature(form.value)
-		selectedUid.value = form.value.fields[0]!.uid
+		selectedUid.value = form.value.fields[0]?.uid ?? null
 		touched.value = new Set()
 		submitted.value = false
 		keyServerError.value = ''
+		nameServerError.value = ''
 		failure.value = 'none'
+		removed.value = []
+		reviewOpen.value = false
+		refusal.value = 'none'
+		refusedUids.value = []
+		refusedChanges.value = []
+	}
+
+	function discard() {
+		form.value = baseline.value ? formFromType(baseline.value, newUid) : blankForm(newUid())
+		resetEditState()
 		saveState.value = 'editing'
 	}

@@ -370,15 +471,45 @@ export function useSchemaBuilder() {
 		keyFocusToken.value++
 	}

+	function onIncompatible() {
+		const flagged = flaggedChanges(changes.value)
+		refusedChanges.value = flagged
+		refusedUids.value = flagged.flatMap((change) => (change.uid === null ? [] : [change.uid]))
+		refusal.value = 'dialog'
+		saveState.value = 'editing'
+	}
+
+	function onInvalidName() {
+		nameServerError.value = t('Give the content type a name.')
+		touch('name')
+	}
+
+	function onMissing() {
+		store.drop(form.value.key)
+	}
+
 	function onRefused(error: unknown) {
+		reviewOpen.value = false
 		if (error instanceof ApiError && error.status === 401) {
 			return
 		}
 		const body = error instanceof ApiError ? error.body : undefined
-		if (error instanceof ApiError && error.status === 409 && body === KEY_TAKEN_BODY) {
+		if (
+			editing &&
+			error instanceof ApiError &&
+			error.status === 409 &&
+			body === INCOMPATIBLE_BODY
+		) {
+			onIncompatible()
+		} else if (editing && error instanceof ApiError && error.status === 404) {
+			onMissing()
+		} else if (error instanceof ApiError && error.status === 409 && body === KEY_TAKEN_BODY) {
 			onKeyTaken()
 		} else if (error instanceof ApiError && error.status === 400 && body === INVALID_KEY_BODY) {
 			onInvalidKey()
+		} else if (editing && error instanceof ApiError && error.status === 400) {
+			saveState.value = 'editing'
+			onInvalidName()
 		} else if (
 			error instanceof ApiError &&
 			error.status === 422 &&
@@ -413,8 +544,76 @@ export function useSchemaBuilder() {
 		if (!canSave.value) {
 			return
 		}
+		if (needsReview.value) {
+			reviewOpen.value = true
+			return
+		}
+		await apply()
+	}
+
+	function reviewAgain() {
+		if (needsReview.value) {
+			reviewOpen.value = true
+			return
+		}
+		refusal.value = 'none'
+	}
+
+	function closeReview() {
+		if (!saving.value) {
+			reviewOpen.value = false
+		}
+	}
+
+	function keepEditing() {
+		if (refusal.value === 'dialog') {
+			refusal.value = 'banner'
+		}
+	}
+
+	function settleSaved(answered: ContentType) {
+		store.replace(answered)
+		baseline.value = answered
+		form.value = formFromType(
+			answered,
+			newUid,
+			form.value.fields.map((field) => field.uid),
+		)
+		const keep = selectedUid.value
+		resetEditState()
+		if (keep !== null && form.value.fields.some((field) => field.uid === keep)) {
+			selectedUid.value = keep
+		}
+		savedAt.value = answered.updated_at
+		saveState.value = 'saved'
+		announceSaved(answered.name, answered.fields.length)
+	}
+
+	async function apply() {
+		if (saving.value) {
+			return
+		}
 		failure.value = 'none'
 		saveState.value = 'saving'
+		if (!baseline.value) {
+			await create()
+			return
+		}
+		let answered: ContentType
+		try {
+			answered = await useContentTypes().updateContentType(
+				baseline.value.key,
+				buildUpdatePayload(form.value, baseline.value.icon),
+			)
+		} catch (error) {
+			saveState.value = 'failed'
+			onRefused(error)
+			return
+		}
+		settleSaved(answered)
+	}
+
+	async function create() {
 		let created: ContentType
 		try {
 			created = await useContentTypes().createContentType(buildPayload(form.value))
@@ -445,6 +644,22 @@ export function useSchemaBuilder() {
 		keyFocusToken,
 		labelFocusToken,
 		online,
+		editing,
+		entryTotal,
+		baseline,
+		marks,
+		changes,
+		removed,
+		mayRestore,
+		reviewOpen,
+		refusal,
+		refusedChanges,
+		savedAt,
+		undoRemoval,
+		apply,
+		reviewAgain,
+		closeReview,
+		keepEditing,
 		setName,
 		setKey,
 		unlockKey,
@@ -2409,6 +2409,83 @@ export const messages = {
 	'Yes or no fields have no limits.': 'Les champs oui ou non n’ont pas de limites.',
 	"You're offline. Changes will be saved when you reconnect.":
 		'Vous êtes hors ligne. Les modifications seront enregistrées à la reconnexion.',
+	'{0} entries use this content type. Changes are checked against them when you save.':
+		'{0} entrées utilisent ce type de contenu. Les modifications sont vérifiées par rapport à elles à l’enregistrement.',
+	'1 entry uses this content type. Changes are checked against it when you save.':
+		'1 entrée utilise ce type de contenu. Les modifications sont vérifiées par rapport à elle à l’enregistrement.',
+	'{0} goes from {1} to {2}.': '{0} passe de {1} à {2}.',
+	'{0} has {1} entries. Each one is checked against the new fields when you apply.':
+		'{0} compte {1} entrées. Chacune est vérifiée par rapport aux nouveaux champs à l’application.',
+	'{0} has 1 entry. Each one is checked against the new fields when you apply.':
+		'{0} compte 1 entrée. Elle est vérifiée par rapport aux nouveaux champs à l’application.',
+	'{0} is no longer set.': '{0} n’est plus défini.',
+	'{0} is now {1}.': '{0} vaut maintenant {1}.',
+	'{0} will be removed': '{0} sera supprimé',
+	'Add {0}': 'Ajouter {0}',
+	'Add {0} fields': 'Ajouter {0} champs',
+	'Add 1 field': 'Ajouter 1 champ',
+	'An entry may be longer.': 'Une entrée peut être plus longue.',
+	'An entry may be shorter.': 'Une entrée peut être plus courte.',
+	'An entry may have a higher value.': 'Une entrée peut avoir une valeur plus élevée.',
+	'An entry may have a later date.': 'Une entrée peut avoir une date plus tardive.',
+	'An entry may have a lower value.': 'Une entrée peut avoir une valeur plus basse.',
+	'An entry may have an earlier date.': 'Une entrée peut avoir une date plus ancienne.',
+	'An entry may have no value.': 'Une entrée peut n’avoir aucune valeur.',
+	'An entry may still use it.': 'Une entrée peut encore l’utiliser.',
+	'Apply changes': 'Appliquer les modifications',
+	'Applying…': 'Application…',
+	'Apply them to save the content type.': 'Appliquez-les pour enregistrer le type de contenu.',
+	'Back to editing': 'Retour à l’édition',
+	"Can't change after saving": 'Ne peut plus changer après l’enregistrement',
+	'change {0}': 'modifier {0}',
+	'Change {0}': 'Modifier {0}',
+	Changed: 'Modifié',
+	'Choice added: "{0}".': 'Choix ajouté : « {0} ».',
+	'Choice removed: "{0}".': 'Choix supprimé : « {0} ».',
+	'Choices were reordered.': 'Les choix ont été réordonnés.',
+	"Couldn't load content type": 'Impossible de charger le type de contenu',
+	'default "{0}"': 'valeur par défaut « {0} »',
+	'default on': 'activé par défaut',
+	'Default value is now "{0}".': 'La valeur par défaut est maintenant « {0} ».',
+	'Default value removed.': 'Valeur par défaut supprimée.',
+	'Entries may not fit': 'Des entrées peuvent ne pas convenir',
+	'Entries may share a value.': 'Des entrées peuvent partager une valeur.',
+	'Entries stop returning its values.': 'Les entrées ne renvoient plus ses valeurs.',
+	'Existing entries get the default, so they still fit.':
+		'Les entrées existantes reçoivent la valeur par défaut, elles conviennent donc toujours.',
+	'Existing entries have no value for it.':
+		'Les entrées existantes n’ont aucune valeur pour lui.',
+	"Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed.":
+		'Les modifications signalées peuvent être refusées si des entrées existantes ne conviennent pas. Dans ce cas, rien n’est modifié.',
+	'GET /v1/content-type/{0}/entry failed. Check your connection and try again.':
+		'GET /v1/content-type/{0}/entry a échoué. Vérifiez votre connexion et réessayez.',
+	'Label goes from "{0}" to "{1}".': 'Le libellé passe de « {0} » à « {1} ».',
+	'No field was added, changed or removed.': 'Aucun champ n’a été ajouté, modifié ou supprimé.',
+	'No longer required.': 'N’est plus obligatoire.',
+	'Nothing was changed': 'Rien n’a été modifié',
+	'Now required.': 'Devient obligatoire.',
+	'On by default is now off.': 'Activé par défaut est maintenant désactivé.',
+	'On by default is now on.': 'Activé par défaut est maintenant activé.',
+	optional: 'facultatif',
+	'Possible cause': 'Cause possible',
+	'remove {0}': 'supprimer {0}',
+	'Removes data': 'Supprime des données',
+	"RenewCMS refused the changes because some entries don't fit the new fields. It doesn't say which entries.":
+		'RenewCMS a refusé les modifications parce que certaines entrées ne conviennent pas aux nouveaux champs. Il ne dit pas lesquelles.',
+	'Review changes': 'Vérifier les modifications',
+	'Review changes to {0}': 'Vérifier les modifications de {0}',
+	"Some entries don't fit the new fields, so the whole change was refused. RenewCMS can't tell which entries. The changes that can cause this are marked.":
+		'Certaines entrées ne conviennent pas aux nouveaux champs, donc toute la modification a été refusée. RenewCMS ne peut pas dire lesquelles. Les modifications qui peuvent en être la cause sont signalées.',
+	'The change that can cause this in your edit':
+		'La modification qui peut en être la cause dans vos changements',
+	"The key is used in URLs and the API, so it can't change after the type is created.":
+		'La clé est utilisée dans les adresses et l’API, elle ne peut donc plus changer après la création du type.',
+	'This kind of change is refused when an entry is over the new limit, a new required field has no default, a field becomes unique while entries share a value, or a removed choice is still in use.':
+		'Ce type de modification est refusé quand une entrée dépasse la nouvelle limite, qu’un nouveau champ obligatoire n’a pas de valeur par défaut, qu’un champ devient unique alors que des entrées partagent une valeur, ou qu’un choix supprimé est encore utilisé.',
+	"Used in the API, so it can't change.": 'Utilisée dans l’API, elle ne peut donc pas changer.',
+	'Values must now be unique.': 'Les valeurs doivent maintenant être uniques.',
+	'Values no longer need to be unique.': 'Les valeurs n’ont plus besoin d’être uniques.',
+	'Your content type is as it was': 'Votre type de contenu est tel qu’il était',
 } as const

 export type MessageKey = keyof typeof messages
@@ -0,0 +1,413 @@
+import { describe, expect, it } from 'vitest'
+import {
+	baselineSignatures,
+	causeText,
+	changeText,
+	changeTitle,
+	diffFields,
+	flaggedChanges,
+	isFieldChanged,
+	summaryLine,
+} from '@/lib/schemaBuilderDiff'
+import type { ContentType } from '@/composables/useContentTypes'
+import { baselinePayload, formFromType } from '@/lib/schemaBuilderLoad'
+import { createField, type BuilderField } from '@/lib/schemaBuilderModel'
+import { eventsFields } from './schemaFixtures'
+
+const events: ContentType = {
+	id: 1,
+	key: 'events',
+	name: 'Events',
+	icon: null,
+	fields: eventsFields,
+	created_at: '',
+	updated_at: '',
+}
+
+const baseline = baselinePayload(events)
+const signatures = baselineSignatures(baseline)
+
+function loaded() {
+	let next = 1
+	return formFromType(events, () => next++).fields
+}
+
+function edit(fields: BuilderField[], key: string, patch: Partial<BuilderField>) {
+	return fields.map((field) => (field.key === key ? { ...field, ...patch } : field))
+}
+
+function only(fields: BuilderField[]) {
+	return diffFields(baseline, fields)
+}
+
+describe('change detection per saved field', () => {
+	it('marks nothing on the loaded fields', () => {
+		expect(loaded().some((field) => isFieldChanged(field, signatures))).toBe(false)
+		expect(only(loaded())).toEqual([])
+	})
+
+	it.each([
+		['Capacity', 'capacity', { max: '2000' }, { max: '5000' }],
+		['Title', 'title', { label: 'Name of event' }, { label: 'Title' }],
+		['Starts on', 'starts_on', { required: false }, { required: true }],
+		[
+			'Category',
+			'category',
+			{ options: ['Talk', 'Workshop', 'Meetup', 'Panel'] },
+			{ options: ['Talk', 'Workshop', 'Meetup'] },
+		],
+		['Online', 'online', { defaultOn: true }, { defaultOn: false }],
+	])(
+		'marks %s changed, then clears it when the value is restored',
+		(_, key, edited, original) => {
+			const changed = edit(loaded(), key, edited)
+			expect(
+				changed
+					.filter((field) => isFieldChanged(field, signatures))
+					.map((field) => field.key),
+			).toEqual([key])
+
+			const restored = edit(changed, key, original)
+			expect(restored.some((field) => isFieldChanged(field, signatures))).toBe(false)
+		},
+	)
+
+	it('does not count a reorder as a change of any field', () => {
+		const [first, ...rest] = loaded()
+		const reordered = [...rest, first!]
+
+		expect(reordered.some((field) => isFieldChanged(field, signatures))).toBe(false)
+		expect(only(reordered)).toEqual([])
+	})
+
+	it('does not count surrounding spaces in a label', () => {
+		expect(only(edit(loaded(), 'title', { label: ' Title ' }))).toEqual([])
+	})
+})
+
+describe('review rows', () => {
+	function row(fields: BuilderField[]) {
+		const [change] = only(fields)
+		return {
+			title: changeTitle(change!),
+			text: changeText(change!),
+			flag: change!.flag,
+		}
+	}
+
+	const added = (patch: Partial<BuilderField>) => [
+		...loaded(),
+		createField(100, { label: 'New', key: 'new', ...patch }),
+	]
+
+	it.each([
+		[
+			'adds an optional Text',
+			added({ label: 'Speaker', key: 'speaker' }),
+			'Add Speaker',
+			'Text, optional.',
+			null,
+		],
+		[
+			'adds a required Choice with a default',
+			added({
+				label: 'Room',
+				key: 'room',
+				type: 'select',
+				required: true,
+				options: ['Main hall', 'Studio'],
+				defaultValue: 'Main hall',
+			}),
+			'Add Room',
+			'Choice, required, default "Main hall". Existing entries get the default, so they still fit.',
+			null,
+		],
+		[
+			'adds a required Number with no default',
+			added({
+				label: 'Seats',
+				key: 'seats',
+				type: 'number',
+				required: true,
+			}),
+			'Add Seats',
+			'Number, required. Existing entries have no value for it.',
+			'mayNotFit',
+		],
+		[
+			'lowers the highest value',
+			edit(loaded(), 'capacity', { max: '2000' }),
+			'Change Capacity',
+			'Highest value goes from 5000 to 2000.',
+			'mayNotFit',
+		],
+		[
+			'raises the lowest value',
+			edit(loaded(), 'capacity', { min: '10' }),
+			'Change Capacity',
+			'Lowest value goes from 1 to 10.',
+			'mayNotFit',
+		],
+		[
+			'sets a first longest',
+			edit(loaded(), 'description', { max: '80' }),
+			'Change Description',
+			'Longest is now 80.',
+			'mayNotFit',
+		],
+		[
+			'turns Required on',
+			edit(loaded(), 'ends_on', { required: true }),
+			'Change Ends on',
+			'Now required.',
+			'mayNotFit',
+		],
+		[
+			'turns Unique on',
+			edit(loaded(), 'category', { unique: true }),
+			'Change Category',
+			'Values must now be unique.',
+			'mayNotFit',
+		],
+		[
+			'removes a choice',
+			edit(loaded(), 'category', { options: ['Talk', 'Workshop'] }),
+			'Change Category',
+			'Choice removed: "Meetup".',
+			'mayNotFit',
+		],
+		[
+			'loosens the highest value',
+			edit(loaded(), 'capacity', { max: '8000' }),
+			'Change Capacity',
+			'Highest value goes from 5000 to 8000.',
+			null,
+		],
+		[
+			'renames a label',
+			edit(loaded(), 'title', { label: 'Name' }),
+			'Change Title',
+			'Label goes from "Title" to "Name".',
+			null,
+		],
+		[
+			'adds a choice',
+			edit(loaded(), 'category', {
+				options: ['Talk', 'Workshop', 'Meetup', 'Panel'],
+			}),
+			'Change Category',
+			'Choice added: "Panel".',
+			null,
+		],
+		[
+			'removes a field',
+			loaded().filter((field) => field.key !== 'description'),
+			'Remove Description',
+			'Entries stop returning its values.',
+			'removesData',
+		],
+	])('%s', (_, fields, title, text, flag) => {
+		expect(row(fields)).toEqual({ title, text, flag })
+	})
+
+	it('describes a default, an unset bound and a reordered choice list', () => {
+		expect(row(edit(loaded(), 'capacity', { defaultValue: '20' })).text).toBe(
+			'Default value is now "20".',
+		)
+		expect(row(edit(loaded(), 'capacity', { max: '' })).text).toBe(
+			'Highest value is no longer set.',
+		)
+		expect(
+			row(
+				edit(loaded(), 'category', {
+					options: ['Meetup', 'Talk', 'Workshop'],
+				}),
+			).text,
+		).toBe('Choices were reordered.')
+		expect(row(edit(loaded(), 'online', { defaultOn: true })).text).toBe(
+			'On by default is now on.',
+		)
+	})
+
+	it.each([
+		[
+			'loosens the lowest value',
+			'capacity',
+			{ min: '0' },
+			'Lowest value goes from 1 to 0.',
+			null,
+		],
+		[
+			'sets a first lowest value',
+			'description',
+			{ min: '2' },
+			'Shortest is now 2.',
+			'mayNotFit',
+		],
+		[
+			'unsets the lowest value',
+			'capacity',
+			{ min: '' },
+			'Lowest value is no longer set.',
+			null,
+		],
+		[
+			'turns Unique off',
+			'title',
+			{ unique: false },
+			'Values no longer need to be unique.',
+			null,
+		],
+		['turns Required off', 'starts_on', { required: false }, 'No longer required.', null],
+		['turns the default off', 'online', { defaultOn: false }, '', null],
+	])('%s', (_, key, patch, text, flag) => {
+		const fields = edit(loaded(), key, patch)
+		if (text === '') {
+			expect(only(fields)).toEqual([])
+			return
+		}
+		expect(row(fields)).toMatchObject({ text, flag })
+	})
+
+	it('says the default was removed', () => {
+		const withDefault = { ...eventsFields[4]!, default: 20 }
+		const form = formFromType({ ...events, fields: [withDefault] }, () => 1).fields
+		const [removed] = diffFields(
+			baselinePayload({ ...events, fields: [withDefault] }),
+			edit(form, 'capacity', { defaultValue: '' }),
+		)
+
+		expect(changeText(removed!)).toBe('Default value removed.')
+		expect(removed!.flag).toBeNull()
+	})
+
+	it.each([
+		[
+			'starts_on',
+			{ max: '2027-01-01' },
+			'Latest date is now 2027-01-01. An entry may have a later date.',
+		],
+		[
+			'starts_on',
+			{ min: '2027-01-01' },
+			'Earliest date is now 2027-01-01. An entry may have an earlier date.',
+		],
+		['description', { max: '80' }, 'Longest is now 80. An entry may be longer.'],
+		['description', { min: '3' }, 'Shortest is now 3. An entry may be shorter.'],
+		[
+			'capacity',
+			{ min: '10' },
+			'Lowest value goes from 1 to 10. An entry may have a lower value.',
+		],
+		[
+			'capacity',
+			{ max: '2000' },
+			'Highest value goes from 5000 to 2000. An entry may have a higher value.',
+		],
+	])('explains the tighter bound of %s with its hint', (key, patch, cause) => {
+		const [change] = flaggedChanges(only(edit(loaded(), key, patch)))
+
+		expect(causeText(change!)).toBe(cause)
+	})
+
+	it('reports a choice removed together with its hint', () => {
+		const [change] = flaggedChanges(
+			only(edit(loaded(), 'category', { options: ['Talk', 'Workshop'] })),
+		)
+
+		expect(causeText(change!)).toBe('Choice removed: "Meetup". An entry may still use it.')
+	})
+
+	it('summarises a lone removal and one added field alongside a change', () => {
+		const base = loaded().filter((field) => field.key !== 'description')
+
+		expect(summaryLine(only(base))).toBe('Remove 1')
+		expect(summaryLine(only(edit(base, 'capacity', { max: '2000' })))).toBe(
+			'Change 1, remove 1',
+		)
+	})
+
+	it('describes an added field with a boolean or text default', () => {
+		const added = (patch: Partial<BuilderField>) =>
+			createField(100, { label: 'New', key: 'new', ...patch })
+
+		expect(row([...loaded(), added({ type: 'boolean', defaultOn: true })]).text).toBe(
+			'Yes or no, optional, default on.',
+		)
+		expect(row([...loaded(), added({ defaultValue: 'x' })]).text).toBe(
+			'Text, optional, default "x".',
+		)
+	})
+
+	it('joins several notes of one field and flags it when one of them is flagged', () => {
+		const [change] = only(edit(loaded(), 'capacity', { max: '2000', label: 'Seats' }))
+
+		expect(changeText(change!)).toBe(
+			'Label goes from "Capacity" to "Seats". Highest value goes from 5000 to 2000.',
+		)
+		expect(change!.flag).toBe('mayNotFit')
+	})
+})
+
+describe('order of the review and the summary', () => {
+	const added = [
+		createField(100, { label: 'Speaker', key: 'speaker' }),
+		createField(101, { label: 'Room', key: 'room' }),
+	]
+	const fields = edit(
+		[...loaded().filter((field) => field.key !== 'description'), ...added],
+		'capacity',
+		{ max: '2000' },
+	)
+
+	it('lists additions, changes then removals', () => {
+		expect(only(fields).map(changeTitle)).toEqual([
+			'Add Speaker',
+			'Add Room',
+			'Change Capacity',
+			'Remove Description',
+		])
+	})
+
+	it.each([
+		['2 added, 1 changed, 1 removed', 'Add 2 fields, change 1, remove 1'],
+		['1 added', 'Add 1 field'],
+		['1 changed, 2 removed', 'Change 1, remove 2'],
+		['1 changed', 'Change 1'],
+	])('writes the summary for %s', (changes, summary) => {
+		const base = loaded()
+		const wanted: Record<string, BuilderField[]> = {
+			'2 added, 1 changed, 1 removed': fields,
+			'1 added': [...base, added[0]!],
+			'1 changed, 2 removed': edit(
+				base.filter((field) => field.key !== 'description' && field.key !== 'ends_on'),
+				'capacity',
+				{ max: '2000' },
+			),
+			'1 changed': edit(base, 'capacity', { max: '2000' }),
+		}
+
+		expect(summaryLine(only(wanted[changes]!))).toBe(summary)
+	})
+
+	it('keeps only the flagged additions and changes for the refusal', () => {
+		const flagged = flaggedChanges(only(fields))
+
+		expect(flagged.map(changeTitle)).toEqual(['Change Capacity'])
+		expect(causeText(flagged[0]!)).toBe(
+			'Highest value goes from 5000 to 2000. An entry may have a higher value.',
+		)
+	})
+
+	it('names the cause of a field added with no default without a hint', () => {
+		const seats = createField(100, {
+			label: 'Seats',
+			key: 'seats',
+			type: 'number',
+			required: true,
+		})
+		const [change] = flaggedChanges(only([...loaded(), seats]))
+
+		expect(causeText(change!)).toBe('Number, required. Existing entries have no value for it.')
+	})
+})
@@ -0,0 +1,125 @@
+import { describe, expect, it } from 'vitest'
+import type { ContentType } from '@/composables/useContentTypes'
+import { baselinePayload, fieldFromApi, formFromType } from '@/lib/schemaBuilderLoad'
+import { buildUpdatePayload, payloadField } from '@/lib/schemaBuilderPayload'
+import { apiField, eventsFields } from './schemaFixtures'
+
+const events: ContentType = {
+	id: 1,
+	key: 'events',
+	name: 'Events',
+	icon: 'calendar',
+	fields: eventsFields,
+	created_at: '2026-09-01T09:30:00Z',
+	updated_at: '2026-10-15T09:30:00Z',
+}
+
+function counter() {
+	let next = 1
+	return () => next++
+}
+
+describe('form from a content type', () => {
+	it('locks the key, marks every field saved and keeps the saved order', () => {
+		const form = formFromType(events, counter())
+
+		expect(form.name).toBe('Events')
+		expect(form.key).toBe('events')
+		expect(form.keyLocked).toBe(true)
+		expect(form.fields.map((field) => field.key)).toEqual(
+			eventsFields.map((field) => field.key),
+		)
+		expect(form.fields.every((field) => field.saved && field.keyMode === 'manual')).toBe(true)
+	})
+
+	it('reuses the given uids by position, then draws new ones', () => {
+		const form = formFromType(events, counter(), [10, 11])
+
+		expect(form.fields.map((field) => field.uid)).toEqual([10, 11, 1, 2, 3, 4, 5])
+	})
+
+	it('maps each API field to its builder fields', () => {
+		const [title, startsOn, , online, capacity, category] = formFromType(
+			events,
+			counter(),
+		).fields
+
+		expect(title).toMatchObject({
+			required: true,
+			unique: true,
+			max: '80',
+			min: '',
+		})
+		expect(startsOn).toMatchObject({ type: 'date', required: true })
+		expect(online).toMatchObject({
+			type: 'boolean',
+			defaultOn: false,
+			defaultValue: '',
+		})
+		expect(capacity).toMatchObject({ min: '1', max: '5000' })
+		expect(category).toMatchObject({
+			options: ['Talk', 'Workshop', 'Meetup'],
+		})
+	})
+
+	it.each([
+		['a number default', apiField('N', 'n', 'number', { default: 0, options: [] }), '0'],
+		['a text default', apiField('T', 't', 'text', { default: 'x', options: [] }), 'x'],
+		[
+			'a date default as a plain day',
+			apiField('D', 'd', 'date', {
+				default: '2026-11-21T00:00:00Z',
+				options: [],
+			}),
+			'2026-11-21',
+		],
+	])('reads %s', (_, source, expected) => {
+		expect(fieldFromApi(source, 1).defaultValue).toBe(expected)
+	})
+
+	it('turns a true boolean default on and anything else off', () => {
+		expect(fieldFromApi(apiField('B', 'b', 'boolean', { default: true }), 1).defaultOn).toBe(
+			true,
+		)
+		expect(fieldFromApi(apiField('B', 'b', 'boolean', { default: false }), 1).defaultOn).toBe(
+			false,
+		)
+		expect(fieldFromApi(apiField('B', 'b', 'boolean'), 1).defaultOn).toBe(false)
+	})
+
+	it('reads date bounds as plain days and Choice options as text', () => {
+		const date = fieldFromApi(
+			apiField('D', 'd', 'date', {
+				min: '2026-01-01T00:00:00Z',
+				max: '2027-12-31',
+				options: [],
+			}),
+			1,
+		)
+
+		expect(date).toMatchObject({ min: '2026-01-01', max: '2027-12-31' })
+		expect(fieldFromApi(apiField('C', 'c', 'select', { options: null }), 1).options).toEqual([])
+	})
+})
+
+describe('the round trip', () => {
+	it('sends back the loaded fields with no spurious difference', () => {
+		const form = formFromType(events, counter())
+
+		const payload = buildUpdatePayload(form, events.icon)
+
+		expect(payload.fields).toEqual(
+			eventsFields.map((field) => ({
+				...field,
+				default: field.type === 'boolean' ? null : field.default,
+			})),
+		)
+		expect(payload.fields).toEqual(baselinePayload(events))
+	})
+
+	it('has the same payload for a field and for its reloaded copy', () => {
+		const field = fieldFromApi(eventsFields[4]!, 1)
+
+		expect(payloadField(field)).toEqual(payloadField(fieldFromApi(eventsFields[4]!, 2)))
+	})
+})
@@ -1,13 +1,20 @@
 import { describe, expect, it } from 'vitest'
 import { createField, type BuilderForm } from '@/lib/schemaBuilderModel'
-import { buildPayload } from '@/lib/schemaBuilderPayload'
+import { buildPayload, buildUpdatePayload } from '@/lib/schemaBuilderPayload'

 const EVENTS: BuilderForm = {
 	name: '  Events ',
 	key: 'events',
 	keyMode: 'auto',
+	keyLocked: false,
 	fields: [
-		createField(1, { label: 'Title', key: 'title', required: true, unique: true, max: '80' }),
+		createField(1, {
+			label: 'Title',
+			key: 'title',
+			required: true,
+			unique: true,
+			max: '80',
+		}),
 		createField(2, {
 			label: 'Starts on',
 			key: 'starts_on',
@@ -16,7 +23,12 @@ const EVENTS: BuilderForm = {
 			min: '2026-01-01',
 			max: '2027-12-31',
 		}),
-		createField(3, { label: 'Online', key: 'online', type: 'boolean', defaultOn: true }),
+		createField(3, {
+			label: 'Online',
+			key: 'online',
+			type: 'boolean',
+			defaultOn: true,
+		}),
 		createField(4, {
 			label: 'Capacity',
 			key: 'capacity',
@@ -32,12 +44,24 @@ const EVENTS: BuilderForm = {
 			defaultValue: 'Talk',
 			options: [' Talk', 'Workshop ', 'Meetup'],
 		}),
-		createField(6, { label: 'Description', key: 'description', type: 'richtext', max: '5000' }),
+		createField(6, {
+			label: 'Description',
+			key: 'description',
+			type: 'richtext',
+			max: '5000',
+		}),
 	],
 }

 function field(key: string, rest: object) {
-	return { key, label: key, type: 'text', required: false, unique: false, ...rest }
+	return {
+		key,
+		label: key,
+		type: 'text',
+		required: false,
+		unique: false,
+		...rest,
+	}
 }

 describe('create payload', () => {
@@ -146,7 +170,14 @@ describe('create payload', () => {
 	it('does not send the default of a unique field', () => {
 		const body = buildPayload({
 			...EVENTS,
-			fields: [createField(1, { label: 'T', key: 't', unique: true, defaultValue: 'Draft' })],
+			fields: [
+				createField(1, {
+					label: 'T',
+					key: 't',
+					unique: true,
+					defaultValue: 'Draft',
+				}),
+			],
 		})

 		expect(body.fields[0]!.default).toBeNull()
@@ -156,8 +187,18 @@ describe('create payload', () => {
 		const body = buildPayload({
 			...EVENTS,
 			fields: [
-				createField(1, { label: 'R', key: 'r', type: 'richtext', unique: true }),
-				createField(2, { label: 'B', key: 'b', type: 'boolean', unique: true }),
+				createField(1, {
+					label: 'R',
+					key: 'r',
+					type: 'richtext',
+					unique: true,
+				}),
+				createField(2, {
+					label: 'B',
+					key: 'b',
+					type: 'boolean',
+					unique: true,
+				}),
 			],
 		})

@@ -168,8 +209,20 @@ describe('create payload', () => {
 		const body = buildPayload({
 			...EVENTS,
 			fields: [
-				createField(1, { label: 'B', key: 'b', type: 'boolean', min: '1', max: '2' }),
-				createField(2, { label: 'S', key: 's', type: 'select', min: '1', options: ['A'] }),
+				createField(1, {
+					label: 'B',
+					key: 'b',
+					type: 'boolean',
+					min: '1',
+					max: '2',
+				}),
+				createField(2, {
+					label: 'S',
+					key: 's',
+					type: 'select',
+					min: '1',
+					options: ['A'],
+				}),
 			],
 		})

@@ -188,3 +241,18 @@ describe('create payload', () => {
 		expect(body.fields[0]!.min).toBe(0)
 	})
 })
+
+describe('buildUpdatePayload', () => {
+	it('sends exactly name, icon and fields, with no key and the name trimmed', () => {
+		const payload = buildUpdatePayload(EVENTS, 'calendar')
+
+		expect(Object.keys(payload)).toEqual(['name', 'icon', 'fields'])
+		expect(payload.name).toBe('Events')
+		expect(payload.icon).toBe('calendar')
+		expect(payload.fields).toEqual(buildPayload(EVENTS).fields)
+	})
+
+	it('keeps a null icon null', () => {
+		expect(buildUpdatePayload(EVENTS, null).icon).toBeNull()
+	})
+})
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { createField } from '@/lib/schemaBuilderModel'
+import { reservedKeys, restoreIndex } from '@/lib/schemaBuilderRemoval'
+
+const keys = ['title', 'starts_on', 'ends_on', 'online', 'capacity', 'category', 'description']
+const saved = (key: string) => createField(keys.indexOf(key), { key, saved: true })
+
+describe('where an undo puts a field back', () => {
+	it('restores the last field at the end', () => {
+		const current = keys.slice(0, 6).map(saved)
+
+		expect(restoreIndex(current, keys, 'description')).toBe(6)
+	})
+
+	it('restores a middle field after the saved field that came before it', () => {
+		const current = ['title', 'starts_on', 'online', 'capacity', 'category', 'description'].map(
+			saved,
+		)
+
+		expect(restoreIndex(current, keys, 'ends_on')).toBe(2)
+	})
+
+	it('restores the first field at the top', () => {
+		const current = keys.slice(1).map(saved)
+
+		expect(restoreIndex(current, keys, 'title')).toBe(0)
+	})
+
+	it('ignores fields added since the last save when looking for the slot', () => {
+		const current = [saved('title'), createField(99, { key: 'speaker' }), saved('online')]
+
+		expect(restoreIndex(current, keys, 'ends_on')).toBe(1)
+	})
+
+	it('keeps the keys of the removed fields reserved', () => {
+		expect(
+			reservedKeys([{ field: saved('description') }, { field: saved('ends_on') }]),
+		).toEqual(['description', 'ends_on'])
+	})
+})
@@ -19,6 +19,7 @@ function form(overrides: Partial<BuilderForm> = {}): BuilderForm {
 		name: 'Events',
 		key: 'events',
 		keyMode: 'auto',
+		keyLocked: false,
 		fields: [starterField(1)],
 		...overrides,
 	}
@@ -109,8 +110,16 @@ describe('field validation', () => {
 	})

 	it('flags only the second of two equal keys', () => {
-		const first = createField(1, { label: 'A', key: 'title', keyMode: 'manual' })
-		const second = createField(2, { label: 'B', key: 'title', keyMode: 'manual' })
+		const first = createField(1, {
+			label: 'A',
+			key: 'title',
+			keyMode: 'manual',
+		})
+		const second = createField(2, {
+			label: 'B',
+			key: 'title',
+			keyMode: 'manual',
+		})

 		const errors = validateForm(form({ fields: [first, second] }))

@@ -162,7 +171,11 @@ describe('field validation', () => {
 		],
 		[
 			'date',
-			{ min: '2026-01-01', max: '2027-12-31', defaultValue: '2028-01-01' },
+			{
+				min: '2026-01-01',
+				max: '2027-12-31',
+				defaultValue: '2028-01-01',
+			},
 			'default',
 			'The default value is outside the limits.',
 		],
@@ -238,7 +251,11 @@ describe('problem counting', () => {
 	})

 	it('counts one field with a bad key as one problem', () => {
-		const bad = createField(1, { label: 'S', key: 'start-date', keyMode: 'manual' })
+		const bad = createField(1, {
+			label: 'S',
+			key: 'start-date',
+			keyMode: 'manual',
+		})

 		expect(countProblems(validateForm(form({ fields: [bad] })))).toBe(1)
 	})
@@ -247,3 +264,45 @@ describe('problem counting', () => {
 		expect(countProblems(validateForm(form()))).toBe(0)
 	})
 })
+
+describe('validation of a saved type', () => {
+	const saved = (key: string, overrides: Partial<BuilderField> = {}) =>
+		createField(1, {
+			label: key,
+			key,
+			keyMode: 'manual',
+			saved: true,
+			...overrides,
+		})
+
+	it('shows no key error for a locked type key', () => {
+		expect(validateType(form({ key: 'E', keyLocked: true })).key).toBeUndefined()
+		expect(Object.keys(validateType(form({ key: 'E', keyLocked: true })))).toEqual([])
+	})
+
+	it('never shows a key error on a saved field', () => {
+		const odd = saved('Old-Key')
+
+		expect(validateForm(form({ fields: [odd] })).fields.size).toBe(0)
+	})
+
+	it('flags a new field whose key is a saved key, whatever the order', () => {
+		const copy = createField(2, { label: 'Title', key: 'title' })
+		const errors = validateForm(form({ fields: [copy, saved('title')] }))
+
+		expect(errors.fields.get(2)?.key).toBe('Another field already uses this key.')
+		expect(errors.fields.has(1)).toBe(false)
+	})
+
+	it('flags a new field that takes the key of a removed field', () => {
+		const fresh = createField(2, {
+			label: 'Description',
+			key: 'description',
+		})
+
+		expect(validateForm(form({ fields: [fresh] }), ['description']).fields.get(2)?.key).toBe(
+			'Another field already uses this key.',
+		)
+		expect(validateForm(form({ fields: [fresh] })).fields.size).toBe(0)
+	})
+})
@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { entriesNotice } from '@/lib/schemaEntries'
+
+describe('the entries notice', () => {
+	it.each([
+		[-3, ''],
+		[0, ''],
+		[1, '1 entry uses this content type. Changes are checked against it when you save.'],
+		[37, '37 entries use this content type. Changes are checked against them when you save.'],
+		[
+			1200,
+			'1,200 entries use this content type. Changes are checked against them when you save.',
+		],
+	])('reads for %s entries', (total, copy) => {
+		expect(entriesNotice(total)).toBe(copy)
+	})
+})
@@ -0,0 +1,42 @@
+export function apiField(label: string, key: string, type: string, rest: object = {}) {
+	return {
+		key,
+		label,
+		type,
+		required: false,
+		unique: false,
+		default: null,
+		min: null,
+		max: null,
+		options: null,
+		...rest,
+	}
+}
+
+export const eventsFields = [
+	apiField('Title', 'title', 'text', {
+		required: true,
+		unique: true,
+		max: 80,
+		options: [],
+	}),
+	apiField('Starts on', 'starts_on', 'date', { required: true, options: [] }),
+	apiField('Ends on', 'ends_on', 'date', { options: [] }),
+	apiField('Online', 'online', 'boolean', { default: false, options: [] }),
+	apiField('Capacity', 'capacity', 'number', {
+		min: 1,
+		max: 5000,
+		options: [],
+	}),
+	apiField('Category', 'category', 'select', {
+		options: ['Talk', 'Workshop', 'Meetup'],
+	}),
+	apiField('Description', 'description', 'richtext', { options: [] }),
+]
+
+export const recipesFields = [
+	apiField('Title', 'title', 'text', { required: true, options: [] }),
+	apiField('Servings', 'servings', 'number', { min: 1, options: [] }),
+	apiField('Vegetarian', 'vegetarian', 'boolean', { options: [] }),
+	apiField('Method', 'method', 'richtext', { options: [] }),
+]
@@ -0,0 +1,263 @@
+import { t } from '@/i18n'
+import { fieldTypeLabel } from '@/lib/schemaFields'
+import type { BuilderField } from '@/lib/schemaBuilderModel'
+import { payloadField, type PayloadField } from '@/lib/schemaBuilderPayload'
+
+export type ChangeKind = 'add' | 'change' | 'remove'
+export type ChangeFlag = 'mayNotFit' | 'removesData'
+
+export interface ChangeNote {
+	text: string
+	hint: string
+	flagged: boolean
+}
+
+export interface FieldChange {
+	kind: ChangeKind
+	uid: number | null
+	key: string
+	label: string
+	notes: ChangeNote[]
+	flag: ChangeFlag | null
+}
+
+type Bound = number | string | null
+
+export function fieldSignature(field: PayloadField) {
+	return JSON.stringify(field)
+}
+
+export function isFieldChanged(field: BuilderField, baseline: ReadonlyMap<string, string>) {
+	return field.saved && fieldSignature(payloadField(field)) !== baseline.get(field.key)
+}
+
+export function baselineSignatures(fields: readonly PayloadField[]) {
+	return new Map(fields.map((field) => [field.key, fieldSignature(field)]))
+}
+
+function note(text: string, hint = '', flagged = false): ChangeNote {
+	return { text, hint, flagged }
+}
+
+function boundNames(type: string) {
+	if (type === 'number') {
+		return [t('Lowest value'), t('Highest value')] as const
+	}
+	if (type === 'date') {
+		return [t('Earliest date'), t('Latest date')] as const
+	}
+	return [t('Shortest'), t('Longest')] as const
+}
+
+function tightenHint(type: string, which: 'min' | 'max') {
+	if (type === 'number') {
+		return which === 'max'
+			? t('An entry may have a higher value.')
+			: t('An entry may have a lower value.')
+	}
+	if (type === 'date') {
+		return which === 'max'
+			? t('An entry may have a later date.')
+			: t('An entry may have an earlier date.')
+	}
+	return which === 'max' ? t('An entry may be longer.') : t('An entry may be shorter.')
+}
+
+function isTighter(which: 'min' | 'max', before: Bound, after: Bound) {
+	if (after === null) {
+		return false
+	}
+	if (before === null) {
+		return true
+	}
+	return which === 'max' ? after < before : after > before
+}
+
+function boundNote(type: string, which: 'min' | 'max', before: Bound, after: Bound) {
+	if (before === after) {
+		return []
+	}
+	const name = boundNames(type)[which === 'min' ? 0 : 1]
+	if (after === null) {
+		return [note(t('{0} is no longer set.', [name]))]
+	}
+	const tighter = isTighter(which, before, after)
+	const hint = tighter ? tightenHint(type, which) : ''
+	const text =
+		before === null
+			? t('{0} is now {1}.', [name, String(after)])
+			: t('{0} goes from {1} to {2}.', [name, String(before), String(after)])
+	return [note(text, hint, tighter)]
+}
+
+function optionNotes(before: readonly string[], after: readonly string[]) {
+	const removed = before.filter((option) => !after.includes(option))
+	const added = after.filter((option) => !before.includes(option))
+	const notes = [
+		...removed.map((option) =>
+			note(t('Choice removed: "{0}".', [option]), t('An entry may still use it.'), true),
+		),
+		...added.map((option) => note(t('Choice added: "{0}".', [option]))),
+	]
+	if (notes.length === 0 && before.join('\n') !== after.join('\n')) {
+		notes.push(note(t('Choices were reordered.')))
+	}
+	return notes
+}
+
+function defaultNotes(before: PayloadField, after: PayloadField) {
+	if (before.default === after.default) {
+		return []
+	}
+	if (after.type === 'boolean') {
+		return [
+			note(
+				after.default === true
+					? t('On by default is now on.')
+					: t('On by default is now off.'),
+			),
+		]
+	}
+	if (after.default === null) {
+		return [note(t('Default value removed.'))]
+	}
+	return [note(t('Default value is now "{0}".', [String(after.default)]))]
+}
+
+function changeNotes(before: PayloadField, after: PayloadField) {
+	const notes: ChangeNote[] = []
+	if (before.label !== after.label) {
+		notes.push(note(t('Label goes from "{0}" to "{1}".', [before.label, after.label])))
+	}
+	if (before.required !== after.required) {
+		notes.push(
+			after.required
+				? note(t('Now required.'), t('An entry may have no value.'), true)
+				: note(t('No longer required.')),
+		)
+	}
+	if (before.unique !== after.unique) {
+		notes.push(
+			after.unique
+				? note(t('Values must now be unique.'), t('Entries may share a value.'), true)
+				: note(t('Values no longer need to be unique.')),
+		)
+	}
+	notes.push(...boundNote(after.type, 'min', before.min, after.min))
+	notes.push(...boundNote(after.type, 'max', before.max, after.max))
+	notes.push(...defaultNotes(before, after))
+	notes.push(...optionNotes(before.options, after.options))
+	return notes
+}
+
+function addNote(field: PayloadField) {
+	const parts = [fieldTypeLabel(field.type), field.required ? t('required') : t('optional')]
+	if (field.default !== null) {
+		parts.push(
+			field.type === 'boolean'
+				? t('default on')
+				: t('default "{0}"', [String(field.default)]),
+		)
+	}
+	const summary = `${parts.join(', ')}.`
+	if (!field.required) {
+		return note(summary)
+	}
+	return field.default === null
+		? note(`${summary} ${t('Existing entries have no value for it.')}`, '', true)
+		: note(`${summary} ${t('Existing entries get the default, so they still fit.')}`)
+}
+
+function flagOf(notes: readonly ChangeNote[]): ChangeFlag | null {
+	return notes.some((entry) => entry.flagged) ? 'mayNotFit' : null
+}
+
+export function diffFields(
+	baseline: readonly PayloadField[],
+	fields: readonly BuilderField[],
+): FieldChange[] {
+	const before = new Map(baseline.map((field) => [field.key, field]))
+	const additions: FieldChange[] = []
+	const changes: FieldChange[] = []
+	for (const field of fields) {
+		const after = payloadField(field)
+		const previous = field.saved ? before.get(field.key) : undefined
+		if (!field.saved || !previous) {
+			const notes = [addNote(after)]
+			additions.push({
+				kind: 'add',
+				uid: field.uid,
+				key: after.key,
+				label: after.label,
+				notes,
+				flag: flagOf(notes),
+			})
+		} else if (fieldSignature(previous) !== fieldSignature(after)) {
+			const notes = changeNotes(previous, after)
+			changes.push({
+				kind: 'change',
+				uid: field.uid,
+				key: previous.key,
+				label: previous.label,
+				notes,
+				flag: flagOf(notes),
+			})
+		}
+	}
+	const kept = new Set(fields.filter((field) => field.saved).map((field) => field.key))
+	const removals = baseline
+		.filter((field) => !kept.has(field.key))
+		.map(
+			(field): FieldChange => ({
+				kind: 'remove',
+				uid: null,
+				key: field.key,
+				label: field.label,
+				notes: [note(t('Entries stop returning its values.'))],
+				flag: 'removesData',
+			}),
+		)
+	return [...additions, ...changes, ...removals]
+}
+
+export function changeTitle(change: FieldChange) {
+	if (change.kind === 'add') {
+		return t('Add {0}', [change.label])
+	}
+	return change.kind === 'change'
+		? t('Change {0}', [change.label])
+		: t('Remove {0}', [change.label])
+}
+
+export function changeText(change: FieldChange) {
+	return change.notes.map((entry) => entry.text).join(' ')
+}
+
+export function causeText(change: FieldChange) {
+	return change.notes
+		.filter((entry) => entry.flagged)
+		.map((entry) => (entry.hint ? `${entry.text} ${entry.hint}` : entry.text))
+		.join(' ')
+}
+
+export function flaggedChanges(changes: readonly FieldChange[]) {
+	return changes.filter((change) => change.flag === 'mayNotFit')
+}
+
+export function summaryLine(changes: readonly FieldChange[]) {
+	const count = (kind: ChangeKind) => changes.filter((change) => change.kind === kind).length
+	const added = count('add')
+	const changed = count('change')
+	const removed = count('remove')
+	const parts: string[] = []
+	if (added > 0) {
+		parts.push(added === 1 ? t('Add 1 field') : t('Add {0} fields', [added]))
+	}
+	if (changed > 0) {
+		parts.push(parts.length === 0 ? t('Change {0}', [changed]) : t('change {0}', [changed]))
+	}
+	if (removed > 0) {
+		parts.push(parts.length === 0 ? t('Remove {0}', [removed]) : t('remove {0}', [removed]))
+	}
+	return parts.join(', ')
+}
@@ -0,0 +1,65 @@
+import type { BuiltinField, ContentType } from '@/composables/useContentTypes'
+import {
+	FIELD_TYPES,
+	createField,
+	type BuilderField,
+	type BuilderForm,
+	type FieldType,
+} from '@/lib/schemaBuilderModel'
+import { payloadField, type PayloadField } from '@/lib/schemaBuilderPayload'
+
+const DATE_LENGTH = 10
+
+function asText(value: unknown) {
+	return value === null || value === undefined ? '' : String(value)
+}
+
+function asDate(value: unknown) {
+	return asText(value).slice(0, DATE_LENGTH)
+}
+
+function asType(type: string): FieldType {
+	return (FIELD_TYPES as readonly string[]).includes(type) ? (type as FieldType) : 'text'
+}
+
+function asOptions(options: unknown[] | null) {
+	return (options ?? []).map((option) => String(option))
+}
+
+export function fieldFromApi(source: BuiltinField, uid: number): BuilderField {
+	const type = asType(source.type)
+	const isDate = type === 'date'
+	const bound = isDate ? asDate : asText
+	return createField(uid, {
+		label: source.label,
+		key: source.key,
+		keyMode: 'manual',
+		type,
+		required: source.required,
+		unique: source.unique,
+		defaultValue: type === 'boolean' ? '' : bound(source.default),
+		defaultOn: type === 'boolean' && source.default === true,
+		min: bound(source.min),
+		max: bound(source.max),
+		options: type === 'select' ? asOptions(source.options) : [],
+		saved: true,
+	})
+}
+
+export function formFromType(
+	type: ContentType,
+	newUid: () => number,
+	uids: readonly number[] = [],
+): BuilderForm {
+	return {
+		name: type.name,
+		key: type.key,
+		keyMode: 'manual',
+		keyLocked: true,
+		fields: type.fields.map((field, index) => fieldFromApi(field, uids[index] ?? newUid())),
+	}
+}
+
+export function baselinePayload(type: ContentType): PayloadField[] {
+	return type.fields.map((field) => payloadField(fieldFromApi(field, 0)))
+}
@@ -3,7 +3,14 @@ export const FIELD_TYPES = ['text', 'richtext', 'number', 'boolean', 'date', 'se
 export type FieldType = (typeof FIELD_TYPES)[number]
 export type KeyMode = 'auto' | 'manual'
 export type KeyDisplayMode = KeyMode | 'empty'
-export type BuilderStatus = 'saving' | 'offline' | 'failed' | 'problems' | 'dirty' | 'none'
+export type BuilderStatus =
+	| 'saving'
+	| 'offline'
+	| 'failed'
+	| 'problems'
+	| 'dirty'
+	| 'saved'
+	| 'none'

 export const BUILDER_LIMITS = {
 	nameMax: 100,
@@ -32,12 +39,14 @@ export interface BuilderField {
 	min: string
 	max: string
 	options: string[]
+	saved: boolean
 }

 export interface BuilderForm {
 	name: string
 	key: string
 	keyMode: KeyMode
+	keyLocked: boolean
 	fields: BuilderField[]
 }

@@ -62,6 +71,7 @@ export function createField(uid: number, overrides: Partial<BuilderField> = {}):
 		min: '',
 		max: '',
 		options: [],
+		saved: false,
 		...overrides,
 	}
 }
@@ -71,7 +81,13 @@ export function starterField(uid: number): BuilderField {
 }

 export function blankForm(uid: number): BuilderForm {
-	return { name: '', key: '', keyMode: 'auto', fields: [starterField(uid)] }
+	return {
+		name: '',
+		key: '',
+		keyMode: 'auto',
+		keyLocked: false,
+		fields: [starterField(uid)],
+	}
 }

 export function changeFieldType(field: BuilderField, type: FieldType): BuilderField {
@@ -43,6 +43,12 @@ function defaultFor(field: BuilderField) {
 	return field.type === 'number' ? Number(given) : given
 }

+export interface UpdatePayload {
+	name: string
+	icon: string | null
+	fields: PayloadField[]
+}
+
 export function payloadField(field: BuilderField): PayloadField {
 	return {
 		key: field.key,
@@ -64,3 +70,11 @@ export function buildPayload(form: BuilderForm): ContentTypePayload {
 		fields: form.fields.map(payloadField),
 	}
 }
+
+export function buildUpdatePayload(form: BuilderForm, icon: string | null): UpdatePayload {
+	return {
+		name: form.name.trim(),
+		icon,
+		fields: form.fields.map(payloadField),
+	}
+}
@@ -0,0 +1,25 @@
+import type { BuilderField } from '@/lib/schemaBuilderModel'
+
+export interface RemovedField {
+	field: BuilderField
+}
+
+export function restoreIndex(
+	current: readonly BuilderField[],
+	baselineKeys: readonly string[],
+	removedKey: string,
+) {
+	const target = baselineKeys.indexOf(removedKey)
+	let index = 0
+	current.forEach((field, position) => {
+		const place = field.saved ? baselineKeys.indexOf(field.key) : -1
+		if (place !== -1 && place < target) {
+			index = position + 1
+		}
+	})
+	return index
+}
+
+export function reservedKeys(removed: readonly RemovedField[]) {
+	return removed.map((entry) => entry.field.key)
+}
@@ -51,10 +51,12 @@ export function validateType(form: BuilderForm): TypeErrors {
 	} else if (form.name.length > BUILDER_LIMITS.nameMax) {
 		errors.name = t('Use 100 characters or fewer.')
 	}
-	if (RESERVED_TYPE_KEYS.includes(form.key)) {
-		errors.key = t('The key "{0}" is reserved. Choose a different key.', [form.key])
-	} else if (!isValidTypeKey(form.key)) {
-		errors.key = t('Use 2 to 40 lowercase letters, digits or hyphens.')
+	if (!form.keyLocked) {
+		if (RESERVED_TYPE_KEYS.includes(form.key)) {
+			errors.key = t('The key "{0}" is reserved. Choose a different key.', [form.key])
+		} else if (!isValidTypeKey(form.key)) {
+			errors.key = t('Use 2 to 40 lowercase letters, digits or hyphens.')
+		}
 	}
 	if (form.fields.length === 0) {
 		errors.fields = t('A content type needs at least one field.')
@@ -164,6 +166,9 @@ function choiceErrors(field: BuilderField, errors: FieldErrors) {
 }

 function keyError(field: BuilderField, earlierKeys: readonly string[]) {
+	if (field.saved) {
+		return undefined
+	}
 	if (field.keyMode === 'auto' && field.label.trim() === '') {
 		return undefined
 	}
@@ -201,11 +206,12 @@ export function hasFieldErrors(errors: FieldErrors) {
 	return Object.keys(errors).length > 0
 }

-export function validateForm(form: BuilderForm): FormErrors {
+export function validateForm(form: BuilderForm, reserved: readonly string[] = []): FormErrors {
 	const fields = new Map<number, FieldErrors>()
+	const savedKeys = form.fields.filter((field) => field.saved).map((field) => field.key)
 	const earlierKeys: string[] = []
 	for (const field of form.fields) {
-		const errors = validateField(field, earlierKeys)
+		const errors = validateField(field, [...earlierKeys, ...savedKeys, ...reserved])
 		if (hasFieldErrors(errors)) {
 			fields.set(field.uid, errors)
 		}
@@ -0,0 +1,21 @@
+import { formatNumber, t } from '@/i18n'
+
+export function entriesNotice(total: number) {
+	if (total <= 0) {
+		return ''
+	}
+	return total === 1
+		? t('1 entry uses this content type. Changes are checked against it when you save.')
+		: t('{0} entries use this content type. Changes are checked against them when you save.', [
+				formatNumber(total),
+			])
+}
+
+export function entriesLine(name: string, total: number) {
+	return total === 1
+		? t('{0} has 1 entry. Each one is checked against the new fields when you apply.', [name])
+		: t('{0} has {1} entries. Each one is checked against the new fields when you apply.', [
+				name,
+				formatNumber(total),
+			])
+}
@@ -22,6 +22,7 @@ export function customRow(type: ContentType): SchemaRow {
 		fieldCount: type.fields.length,
 		updated: formatAbsoluteDateFromIso(type.updated_at),
 		builtin: false,
+		to: `/schema/${type.key}`,
 	}
 }

@@ -164,30 +164,36 @@ describe('Nuxt UI shell foundation and router guards', () => {
 		expect(resolved.meta.title).toBe('Schema')
 	})

-	it('The schema type route redirects an unverified session to the pending page', async () => {
-		const getMe = vi.fn().mockResolvedValue({ verified: false })
-		vi.mocked(useApi).mockReturnValue({ getMe })
-		setUpSession()
+	it.each(['articles', 'events'])(
+		'The schema type route redirects an unverified session on /schema/%s to the pending page',
+		async (key) => {
+			const getMe = vi.fn().mockResolvedValue({ verified: false })
+			vi.mocked(useApi).mockReturnValue({ getMe })
+			setUpSession()

-		await router.push('/schema/articles')
-		mountApp()
+			await router.push(`/schema/${key}`)
+			mountApp()

-		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
-	})
+			await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
+		},
+	)

-	it('The schema type route redirects a signed-out visitor to login with the original path', async () => {
-		const getMe = vi.fn().mockRejectedValue(new ApiError(401))
-		vi.mocked(useApi).mockReturnValue({ getMe })
-		setUpSession()
+	it.each(['articles', 'events'])(
+		'The schema type route redirects a signed-out visitor on /schema/%s to login with the original path',
+		async (key) => {
+			const getMe = vi.fn().mockRejectedValue(new ApiError(401))
+			vi.mocked(useApi).mockReturnValue({ getMe })
+			setUpSession()

-		await router.push('/schema/articles')
-		mountApp()
-		await flushPromises()
+			await router.push(`/schema/${key}`)
+			mountApp()
+			await flushPromises()

-		expect(router.currentRoute.value.fullPath).toBe(
-			'/login?redirect=/schema/articles&reason=expired',
-		)
-	})
+			expect(router.currentRoute.value.fullPath).toBe(
+				`/login?redirect=/schema/${key}&reason=expired`,
+			)
+		},
+	)

 	it('The new content type route is registered before the type key route, verified-only, titled Schema', () => {
 		const resolved = router.resolve('/schema/new')
@@ -205,7 +205,12 @@ describe('content types store', () => {
 			await store.load()

 			store.add(agenda)
-			store.add({ ...events, id: 4, key: 'press', name: 'Press mentions' })
+			store.add({
+				...events,
+				id: 4,
+				key: 'press',
+				name: 'Press mentions',
+			})
 			store.add({ ...events, id: 5, key: 'zoo', name: 'Zoo' })

 			expect(store.items.map((item) => item.name)).toEqual([
@@ -280,3 +285,92 @@ describe('content types store', () => {
 		expect(store.items).toEqual([])
 	})
 })
+
+describe('content types store: replace, drop and reset', () => {
+	const recipes = { ...events, id: 2, key: 'recipes', name: 'Recipes' }
+	const pressMentions = {
+		...events,
+		id: 3,
+		key: 'press-mentions',
+		name: 'Press mentions',
+	}
+
+	async function loadedStore() {
+		listContentTypes.mockResolvedValue([events, pressMentions, recipes])
+		listBuiltinTypes.mockResolvedValue([{ key: 'articles', name: 'Articles', fields: [] }])
+		const store = useContentTypesStore()
+		await store.load({ builtin: true })
+		listContentTypes.mockClear()
+		return store
+	}
+
+	it('swaps the type by key in place when the name did not change', async () => {
+		const store = await loadedStore()
+
+		store.replace({ ...events, fields: [{ key: 'title' }] as never })
+
+		expect(store.items.map((item) => item.key)).toEqual(['events', 'press-mentions', 'recipes'])
+		expect(store.items[0]!.fields).toHaveLength(1)
+		expect(listContentTypes).not.toHaveBeenCalled()
+	})
+
+	it('keeps the list ordered by name when the name changed', async () => {
+		const store = await loadedStore()
+
+		store.replace({ ...events, name: 'Seminars' })
+
+		expect(store.items.map((item) => item.name)).toEqual([
+			'Press mentions',
+			'Recipes',
+			'Seminars',
+		])
+		store.replace({ ...recipes, name: 'Aardvarks' })
+		expect(store.items.map((item) => item.name)).toEqual([
+			'Aardvarks',
+			'Press mentions',
+			'Seminars',
+		])
+	})
+
+	it('does nothing before the list is loaded', () => {
+		const store = useContentTypesStore()
+
+		store.replace(events)
+
+		expect(store.items).toEqual([])
+		expect(listContentTypes).not.toHaveBeenCalled()
+	})
+
+	it('ignores a type it does not hold and never touches the built-in types', async () => {
+		const store = await loadedStore()
+		const builtin = [...store.builtinItems]
+
+		store.replace({ ...events, key: 'unknown', name: 'Unknown' })
+		store.replace({ ...events, name: 'Events!' })
+
+		expect(store.items).toHaveLength(3)
+		expect(store.builtinItems).toEqual(builtin)
+	})
+
+	it('drops a type by key', async () => {
+		const store = await loadedStore()
+
+		store.drop('recipes')
+
+		expect(store.items.map((item) => item.key)).toEqual(['events', 'press-mentions'])
+	})
+
+	it('reset clears both lists so the next session loads them again', async () => {
+		const store = await loadedStore()
+
+		store.reset()
+		expect(store.items).toEqual([])
+		expect(store.builtinItems).toEqual([])
+		expect(store.status).toBe('idle')
+		expect(store.builtinStatus).toBe('idle')
+
+		await store.load({ builtin: true })
+		expect(listContentTypes).toHaveBeenCalledTimes(1)
+		expect(listBuiltinTypes).toHaveBeenCalledTimes(2)
+	})
+})
@@ -84,9 +84,43 @@ function createSlice<T>(fetcher: () => Promise<T[]>) {
 		list.splice(index === -1 ? list.length : index, 0, item)
 	}

+	function replace(
+		item: T,
+		matches: (existing: T) => boolean,
+		keepsSlot: (existing: T) => boolean,
+		before: (existing: T) => boolean,
+	) {
+		if (status.value === 'loading') {
+			stale = true
+			return
+		}
+		if (status.value !== 'ready') {
+			return
+		}
+		const list = items.value as T[]
+		const index = list.findIndex(matches)
+		if (index === -1) {
+			return
+		}
+		if (keepsSlot(list[index]!)) {
+			list.splice(index, 1, item)
+			return
+		}
+		list.splice(index, 1)
+		const target = list.findIndex(before)
+		list.splice(target === -1 ? list.length : target, 0, item)
+	}
+
+	function drop(matches: (existing: T) => boolean) {
+		if (status.value !== 'ready') {
+			return
+		}
+		items.value = (items.value as T[]).filter((existing) => !matches(existing))
+	}
+
 	const loading = computed(() => status.value === 'idle' || status.value === 'loading')

-	return { items, status, loading, load, retry, reset, insert }
+	return { items, status, loading, load, retry, reset, insert, replace, drop }
 }

 export const useContentTypesStore = defineStore('contentTypes', () => {
@@ -118,6 +152,20 @@ export const useContentTypesStore = defineStore('contentTypes', () => {
 		custom.insert(type, (existing) => existing.name.toLowerCase() > name)
 	}

+	function replace(type: ContentType) {
+		const name = type.name.toLowerCase()
+		custom.replace(
+			type,
+			(existing) => existing.key === type.key,
+			(existing) => existing.name.toLowerCase() === name,
+			(existing) => existing.name.toLowerCase() > name,
+		)
+	}
+
+	function drop(key: string) {
+		custom.drop((existing) => existing.key === key)
+	}
+
 	function retryCustom() {
 		return custom.retry()
 	}
@@ -142,6 +190,8 @@ export const useContentTypesStore = defineStore('contentTypes', () => {
 		forbidden,
 		load,
 		add,
+		replace,
+		drop,
 		retryCustom,
 		retryBuiltin,
 		reset,
@@ -1,102 +1,29 @@
 <script setup lang="ts">
 import { t } from '@/i18n'

-import { computed, nextTick, ref } from 'vue'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useMediaQuery } from '@vueuse/core'
-import ApiPreview from '@/components/ApiPreview.vue'
-import ApiPreviewSheet from '@/components/ApiPreviewSheet.vue'
-import BuilderActions from '@/components/BuilderActions.vue'
-import BuilderBadge from '@/components/BuilderBadge.vue'
-import BuilderInspector from '@/components/BuilderInspector.vue'
-import BuilderTypeBar from '@/components/BuilderTypeBar.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
-import FieldList from '@/components/FieldList.vue'
-import FieldSheet from '@/components/FieldSheet.vue'
-import RetryAlert from '@/components/RetryAlert.vue'
+import SchemaBuilderPage from '@/components/SchemaBuilderPage.vue'
 import SchemaForbidden from '@/components/SchemaForbidden.vue'
-import { useSchemaBuilder } from '@/composables/useSchemaBuilder'
 import { useSchemaGate } from '@/composables/useSchemaGate'
-import { useUnsavedChangesGuard } from '@/composables/useUnsavedChangesGuard'
 import { HOME_PATH, SCHEMA_PATH } from '@/lib/routePaths'
-import { sampleJson } from '@/lib/schemaBuilderSample'
-
-const DESKTOP_QUERY = '(min-width: 48rem)'
-const OFFLINE_COPY = "You're offline. Changes will be saved when you reconnect."

+const offlineMessage = computed(() =>
+	t("You're offline. Changes will be saved when you reconnect."),
+)
 const router = useRouter()
-const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const { sessionReady, forbidden } = useSchemaGate('custom')
-const builder = useSchemaBuilder()
-const { form } = builder

-useUnsavedChangesGuard({
-	isDirty: () => builder.dirty.value,
-	title: () => form.value.name.trim() || t('New content type'),
-})
-
-const apiOpen = ref(false)
-const apiSheetOpen = ref(false)
-const fieldSheetOpen = ref(false)
-
-const showForbidden = computed(() => forbidden.value || builder.failure.value === 'forbidden')
 const mobileTitle = computed(() => t('New content type'))
 const breadcrumb = computed(() => [
 	{ label: t('Schema'), to: SCHEMA_PATH },
 	{ label: t('New content type') },
 ])
-const json = computed(() => sampleJson(form.value.key, form.value.fields))
-const selectedIndex = computed(() =>
-	form.value.fields.findIndex((field) => field.uid === builder.selectedUid.value),
-)
-const selectedErrors = computed(() =>
-	builder.selected.value
-		? (builder.shown.value.fields.get(builder.selected.value.uid) ?? {})
-		: {},
-)
-const selectedName = computed(() => builder.selected.value?.label.trim() || t('Untitled field'))
-const sheetTitle = computed(() => t('Field: {0}', [selectedName.value]))

 function goHome() {
 	router.push(HOME_PATH)
 }
-
-function onSelect(uid: number) {
-	builder.selectField(uid)
-	if (!isDesktop.value) {
-		fieldSheetOpen.value = true
-	}
-}
-
-function onAdd() {
-	builder.addField()
-	if (!isDesktop.value) {
-		fieldSheetOpen.value = true
-	}
-}
-
-function onRemoveSelected() {
-	const uid = builder.selectedUid.value
-	if (uid !== null) {
-		builder.removeField(uid)
-	}
-	if (!isDesktop.value) {
-		fieldSheetOpen.value = false
-	}
-}
-
-function onMoveSelected(delta: number) {
-	const uid = builder.selectedUid.value
-	if (uid !== null) {
-		builder.moveField(uid, delta)
-	}
-}
-
-async function restoreRowFocus() {
-	await nextTick()
-	const uid = builder.selectedUid.value
-	document.querySelector<HTMLElement>(`[data-field-row][data-uid="${uid}"]`)?.focus()
-}
 </script>

 <template>
@@ -105,8 +32,9 @@ async function restoreRowFocus() {
 		:mobile-title="mobileTitle"
 		:back-to="SCHEMA_PATH"
 		:back-label="t('Schema')"
-		:offline-message="t(OFFLINE_COPY)"
+		:offline-message="offlineMessage"
 		offline-icon="i-lucide-wifi-off"
+		flush-offline-banner
 	>
 		<template #breadcrumb>
 			<UBreadcrumb
@@ -117,171 +45,7 @@ async function restoreRowFocus() {
 			/>
 		</template>

-		<SchemaForbidden v-if="showForbidden" @back="goHome" />
-
-		<div
-			v-else-if="sessionReady"
-			class="flex min-h-0 flex-1 flex-col"
-			data-testid="schema-builder"
-		>
-			<div class="shrink-0 border-b border-default bg-default p-4 md:px-6">
-				<BuilderTypeBar
-					:name="form.name"
-					:key-value="form.key"
-					:key-mode="form.keyMode"
-					:name-error="builder.shown.value.type.name"
-					:key-error="builder.shown.value.type.key"
-					:disabled="builder.saving.value"
-					:key-focus-token="builder.keyFocusToken.value"
-					@update:name="builder.setName"
-					@update:key="builder.setKey"
-					@unlock="builder.unlockKey"
-					@reset="builder.resetKey"
-				>
-					<template v-if="isDesktop" #actions>
-						<BuilderActions
-							:status="builder.status.value"
-							:problems="builder.problems.value"
-							:can-save="builder.canSave.value"
-							:can-reveal="builder.canReveal.value"
-							:can-discard="builder.canDiscard.value"
-							:saving="builder.saving.value"
-							@save="builder.save"
-							@discard="builder.discard"
-						/>
-					</template>
-				</BuilderTypeBar>
-			</div>
-
-			<div
-				v-if="builder.failure.value === 'failed' || builder.failure.value === 'invalid'"
-				class="px-4 pt-3 md:px-6"
-			>
-				<RetryAlert
-					v-if="builder.failure.value === 'failed'"
-					:title="t('Couldn\'t save the content type')"
-					:description="
-						t(
-							'Something went wrong on our side. Your changes are still here. Try again in a moment.',
-						)
-					"
-					@retry="builder.save"
-				/>
-				<UAlert
-					v-else
-					role="alert"
-					color="error"
-					variant="soft"
-					icon="i-lucide-circle-x"
-					:title="t('Check the fields marked in the list.')"
-				/>
-			</div>
-
-			<div class="flex min-h-0 flex-1 flex-col md:flex-row">
-				<div
-					class="flex flex-col gap-2 p-4 md:w-95 md:shrink-0 md:border-r md:border-default md:bg-muted"
-				>
-					<FieldList
-						:fields="form.fields"
-						:selected-uid="builder.selectedUid.value"
-						:errors="builder.shown.value.fields"
-						:list-error="builder.shown.value.type.fields"
-						:disabled="builder.saving.value"
-						:mobile="!isDesktop"
-						@select="onSelect"
-						@add="onAdd"
-						@remove="builder.removeField"
-						@move="builder.moveField"
-						@reorder="builder.reorderFields"
-					>
-						<button
-							v-if="!isDesktop"
-							type="button"
-							data-testid="api-row"
-							class="flex min-h-11 items-center gap-2.5 border border-default bg-default px-3 text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
-							@click="apiSheetOpen = true"
-						>
-							<UIcon name="i-lucide-braces" class="size-4" />
-							<span class="flex-1 text-left font-medium">{{ t('API preview') }}</span>
-							<UIcon name="i-lucide-chevron-right" class="size-3.5 text-muted" />
-						</button>
-					</FieldList>
-				</div>
-
-				<div
-					v-if="isDesktop"
-					class="flex min-w-0 flex-1 flex-col gap-3.5 bg-default px-6 py-4"
-					data-testid="inspector-pane"
-				>
-					<template v-if="builder.selected.value">
-						<div class="flex items-center gap-2">
-							<h2 class="text-md font-semibold text-highlighted">
-								{{ sheetTitle }}
-							</h2>
-							<BuilderBadge kind="new" />
-						</div>
-						<BuilderInspector
-							:builder="builder"
-							:field="builder.selected.value"
-							:errors="selectedErrors"
-							:compact="false"
-						/>
-					</template>
-					<template v-else>
-						<h2 class="text-md font-semibold text-highlighted">
-							{{ t('Field settings') }}
-						</h2>
-						<p class="text-muted">
-							{{ t('Add a field, then choose its type and rules here.') }}
-						</p>
-					</template>
-				</div>
-			</div>
-
-			<ApiPreview
-				v-if="isDesktop"
-				v-model:open="apiOpen"
-				:key-value="form.key"
-				:json="json"
-			/>
-			<div
-				v-else
-				class="sticky bottom-0 mt-auto border-t border-default bg-default px-4 py-3"
-			>
-				<BuilderActions
-					:status="builder.status.value"
-					:problems="builder.problems.value"
-					:can-save="builder.canSave.value"
-					:can-reveal="builder.canReveal.value"
-					:can-discard="builder.canDiscard.value"
-					:saving="builder.saving.value"
-					@save="builder.save"
-					@discard="builder.discard"
-				/>
-			</div>
-		</div>
-
-		<template v-if="!isDesktop && sessionReady && !showForbidden">
-			<ApiPreviewSheet v-model:open="apiSheetOpen" :key-value="form.key" :json="json" />
-			<FieldSheet
-				v-model:open="fieldSheetOpen"
-				:title="sheetTitle"
-				:first="selectedIndex <= 0"
-				:last="selectedIndex === form.fields.length - 1"
-				:disabled="builder.saving.value"
-				@up="onMoveSelected(-1)"
-				@down="onMoveSelected(1)"
-				@remove="onRemoveSelected"
-				@closed="restoreRowFocus"
-			>
-				<BuilderInspector
-					v-if="builder.selected.value"
-					:builder="builder"
-					:field="builder.selected.value"
-					:errors="selectedErrors"
-					compact
-				/>
-			</FieldSheet>
-		</template>
+		<SchemaForbidden v-if="forbidden" @back="goHome" />
+		<SchemaBuilderPage v-else-if="sessionReady" />
 	</DashboardShell>
 </template>
@@ -1,30 +1,104 @@
 <script setup lang="ts">
 import { t } from '@/i18n'

-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import DashboardShell from '@/components/DashboardShell.vue'
 import DirectoryBadge from '@/components/DirectoryBadge.vue'
 import DirectoryLoadError from '@/components/DirectoryLoadError.vue'
+import SchemaBuilderPage from '@/components/SchemaBuilderPage.vue'
 import SchemaFieldTable from '@/components/SchemaFieldTable.vue'
 import SchemaForbidden from '@/components/SchemaForbidden.vue'
 import SchemaTable from '@/components/SchemaTable.vue'
 import SchemaTypeNotFound from '@/components/SchemaTypeNotFound.vue'
+import { useDelayedSkeleton } from '@/composables/useDelayedSkeleton'
+import { useEntryCount } from '@/composables/useEntryCount'
 import { useSchemaGate } from '@/composables/useSchemaGate'
 import { HOME_PATH, SCHEMA_PATH } from '@/lib/routePaths'

 const route = useRoute()
+const offlineMessage = computed(() =>
+	t("You're offline. Changes will be saved when you reconnect."),
+)
 const router = useRouter()
+const skeleton = useDelayedSkeleton()

-const { sessionReady, forbidden, loading, showSkeleton, builtinFailed, builtinItems, retry } =
-	useSchemaGate('builtin')
-const failed = computed(() => !forbidden.value && builtinFailed.value)
-const type = computed(() => builtinItems.value.find((item) => item.key === route.params.key))
-const mobileTitle = computed(() => type.value?.name ?? t('Schema'))
+const {
+	sessionReady,
+	forbidden: listsForbidden,
+	loading: listsLoading,
+	customFailed,
+	builtinFailed,
+	customItems,
+	builtinItems,
+	retry: retryLists,
+} = useSchemaGate('all')
+
+const key = computed(() => String(route.params.key))
+const builtinType = computed(() => builtinItems.value.find((item) => item.key === key.value))
+const customType = computed(() =>
+	builtinType.value ? undefined : customItems.value.find((item) => item.key === key.value),
+)
+const count = useEntryCount(() =>
+	customType.value && sessionReady.value && !listsForbidden.value && !listsLoading.value
+		? customType.value.key
+		: null,
+)
+
+const forbidden = computed(() => listsForbidden.value || count.status.value === 'forbidden')
+const countPending = computed(
+	() =>
+		customType.value !== undefined &&
+		(count.status.value === 'idle' || count.status.value === 'loading'),
+)
+const loading = computed(() => !forbidden.value && (listsLoading.value || countPending.value))
+const listsFailed = computed(() => !forbidden.value && !loading.value && customFailed.value)
+const builtinListFailed = computed(
+	() => !forbidden.value && !loading.value && !listsFailed.value && builtinFailed.value,
+)
+const countFailed = computed(
+	() => !forbidden.value && !loading.value && count.status.value === 'failed',
+)
+const editable = computed(
+	() => !forbidden.value && !loading.value && customType.value && count.status.value === 'ready',
+)
+const notFound = computed(
+	() =>
+		!forbidden.value &&
+		!loading.value &&
+		!listsFailed.value &&
+		!builtinListFailed.value &&
+		!countFailed.value &&
+		!builtinType.value &&
+		!editable.value,
+)
+const showSkeleton = computed(() => loading.value && skeleton.visible.value)
+const bleed = computed(() => forbidden.value || notFound.value || Boolean(editable.value))
+
+const displayName = computed(() => customType.value?.name ?? builtinType.value?.name)
+const mobileTitle = computed(() => displayName.value ?? t('Schema'))
 const breadcrumb = computed(() => [
 	{ label: t('Schema'), to: SCHEMA_PATH },
-	...(type.value ? [{ label: type.value.name }] : []),
+	...(displayName.value && !notFound.value ? [{ label: displayName.value }] : []),
 ])
+const edit = computed(() =>
+	customType.value ? { type: customType.value, total: count.total.value } : undefined,
+)
+const countLine = computed(() =>
+	t('GET /v1/content-type/{0}/entry failed. Check your connection and try again.', [key.value]),
+)
+
+watch(
+	loading,
+	(value) => {
+		if (value) {
+			skeleton.start()
+		} else {
+			skeleton.stop()
+		}
+	},
+	{ immediate: true },
+)

 function goHome() {
 	router.push(HOME_PATH)
@@ -33,11 +107,14 @@ function goHome() {

 <template>
 	<DashboardShell
-		compact-padding
-		:full-bleed="forbidden || (sessionReady && !loading && !failed && !type)"
+		:compact-padding="!editable"
+		:full-bleed="bleed"
 		:mobile-title="mobileTitle"
 		:back-to="SCHEMA_PATH"
 		:back-label="t('Schema')"
+		:offline-message="editable ? offlineMessage : undefined"
+		:offline-icon="editable ? 'i-lucide-wifi-off' : undefined"
+		:flush-offline-banner="Boolean(editable)"
 	>
 		<template #breadcrumb>
 			<UBreadcrumb
@@ -54,18 +131,38 @@ function goHome() {
 			<SchemaTable v-if="showSkeleton" :custom="[]" :builtin="[]" loading />

 			<DirectoryLoadError
-				v-else-if="failed"
+				v-else-if="listsFailed"
+				:title="t('Couldn\'t load content types')"
+				:description="
+					t('GET /v1/content-type failed. Check your connection and try again.')
+				"
+				@retry="retryLists"
+			/>
+
+			<DirectoryLoadError
+				v-else-if="builtinListFailed"
 				:title="t('Couldn\'t load content types')"
 				:description="
 					t('GET /v1/builtin-type failed. Check your connection and try again.')
 				"
-				@retry="retry"
+				@retry="retryLists"
 			/>

-			<div v-else-if="type" class="flex flex-col gap-4">
+			<DirectoryLoadError
+				v-else-if="countFailed"
+				:title="t('Couldn\'t load content type')"
+				:description="countLine"
+				@retry="count.retry"
+			/>
+
+			<SchemaBuilderPage v-else-if="editable" :key="key" :edit="edit" />
+
+			<div v-else-if="builtinType" class="flex flex-col gap-4">
 				<div class="flex items-center gap-3">
 					<UIcon name="i-lucide-lock" class="size-4.5 shrink-0 text-muted" />
-					<h1 class="text-xl font-semibold text-highlighted">{{ type.name }}</h1>
+					<h1 class="text-xl font-semibold text-highlighted">
+						{{ builtinType.name }}
+					</h1>
 					<DirectoryBadge kind="builtin" />
 				</div>
 				<UAlert
@@ -76,7 +173,7 @@ function goHome() {
 					:description="
 						t(
 							'{0} is a built-in type. You can read its fields here, but you can\'t edit it, delete it or add fields.',
-							[type.name],
+							[builtinType.name],
 						)
 					"
 					:ui="{
@@ -85,7 +182,7 @@ function goHome() {
 						description: 'text-toned',
 					}"
 				/>
-				<SchemaFieldTable :fields="type.fields" />
+				<SchemaFieldTable :fields="builtinType.fields" />
 				<p class="text-xs/5 text-muted">
 					{{
 						t(
@@ -95,7 +192,7 @@ function goHome() {
 				</p>
 			</div>

-			<SchemaTypeNotFound v-else-if="!loading" />
+			<SchemaTypeNotFound v-else-if="notFound" />
 		</template>
 	</DashboardShell>
 </template>
@@ -0,0 +1,514 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { addCollection } from '@iconify/vue'
+import lucide from 'virtual:lucide-subset'
+import router from '@/router'
+import { MOBILE_WIDTH } from '@/components/__tests__/viewport'
+import { button, mountAt, puts, text, unmountAll } from './schemaTestKit'
+import {
+	addChoice,
+	addField,
+	all,
+	badgesOf,
+	byLabel,
+	chip,
+	chooseDefault,
+	click,
+	defaultInput,
+	discardButton,
+	el,
+	fieldKeyInput,
+	inspector,
+	inspectorTitle,
+	keyInput,
+	labelInput,
+	limit,
+	live,
+	makeUnsavedChanges,
+	nameInput,
+	notice,
+	press,
+	removeSelected,
+	rowLabels,
+	rows,
+	saveButton,
+	selectRow,
+	setMax,
+	toggle,
+	typeInto,
+	undoButtons,
+	undoRows,
+} from './builderKit'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return { ...actual, useApi: vi.fn() }
+})
+
+addCollection(lucide)
+
+beforeEach(() => {
+	Element.prototype.scrollIntoView = () => undefined
+})
+
+afterEach(unmountAll)
+
+const SAVED_ORDER = [
+	'Title',
+	'Starts on',
+	'Ends on',
+	'Online',
+	'Capacity',
+	'Category',
+	'Description',
+]
+
+describe('What marks a saved field as changed', () => {
+	it.each([
+		['Capacity', async () => setMax('2000')],
+		[
+			'Title',
+			async () => {
+				await selectRow('Title')
+				await typeInto(labelInput(), 'Name of event')
+			},
+		],
+		[
+			'Starts on',
+			async () => {
+				await selectRow('Starts on')
+				await toggle('Required')
+			},
+		],
+		[
+			'Category',
+			async () => {
+				await selectRow('Category')
+				await addChoice('Panel')
+			},
+		],
+		[
+			'Online',
+			async () => {
+				await selectRow('Online')
+				await toggle('On by default')
+			},
+		],
+	])('marks %s Changed in its row and inspector', async (label, edit) => {
+		await mountAt('/schema/events')
+
+		await edit()
+
+		const row = rows().find((candidate) =>
+			text(candidate).includes(label === 'Title' ? 'Name of event' : label),
+		)
+		expect(text(row)).toContain('Changed')
+		expect(text(el('[data-testid="inspector-pane"] h2')!.parentElement)).toContain('Changed')
+		expect(chip()).toBe('Unsaved changes')
+	})
+
+	it('clears the badge when the original value comes back', async () => {
+		await mountAt('/schema/events')
+		await setMax('2000')
+		expect(badgesOf('Capacity')).toContain('Changed')
+
+		await typeInto(limit('max'), '5000')
+
+		expect(badgesOf('Capacity')).not.toContain('Changed')
+		expect(chip()).toBe('Saved')
+		expect(saveButton()!.disabled).toBe(true)
+	})
+
+	it('does not treat a reorder as a change of a field', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Ends on')
+
+		await click(byLabel('Move up'))
+
+		expect(rowLabels().slice(0, 3)).toEqual(['Title', 'Ends on', 'Starts on'])
+		expect(rows().every((row) => !text(row).includes('Changed'))).toBe(true)
+		expect(chip()).toBe('Unsaved changes')
+		expect(saveButton()!.disabled).toBe(false)
+	})
+})
+
+describe('Unsaved changes (design state 4)', () => {
+	it('shows the badges, the undo row, the count, the chip and keeps the notice', async () => {
+		await mountAt('/schema/events')
+
+		await makeUnsavedChanges()
+
+		expect(chip()).toBe('Unsaved changes')
+		expect(saveButton()!.disabled).toBe(false)
+		expect(discardButton()!.disabled).toBe(false)
+		expect(badgesOf('Capacity')).toContain('Changed')
+		expect(badgesOf('Speaker')).toContain('New')
+		expect(badgesOf('Room')).toContain('New')
+		expect(undoRows()).toEqual(['Description will be removed Undo'])
+		expect(el('[data-testid="undo-row"] svg')).not.toBeNull()
+		expect(el('[data-testid="undo-row"]')!.className).toContain('border-dashed')
+		expect(text(el('[data-testid="field-count"]'))).toBe('8 of 50')
+		expect(rowLabels()).not.toContain('Description')
+		expect(notice()).toContain('37 entries')
+	})
+})
+
+describe('Removing a saved field and undoing it', () => {
+	it('selects the previous row at the end, then restores the field at position 7 with no badge', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+
+		await removeSelected()
+
+		expect(rowLabels()).toEqual(SAVED_ORDER.slice(0, 6))
+		expect(inspectorTitle()).toBe('Field: Category')
+		expect(undoRows()).toEqual(['Description will be removed Undo'])
+		expect(chip()).toBe('Unsaved changes')
+
+		await click(undoButtons()[0])
+
+		expect(rowLabels()).toEqual(SAVED_ORDER)
+		expect(badgesOf('Description')).toBe('')
+		expect(undoRows()).toEqual([])
+		expect(chip()).toBe('Saved')
+		expect(saveButton()!.disabled).toBe(true)
+	})
+
+	it('selects the next row when a middle row is removed', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Ends on')
+
+		await removeSelected()
+
+		expect(inspectorTitle()).toBe('Field: Online')
+	})
+
+	it('shows one undo row per removal, in removal order, each restoring its own place', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+		await removeSelected()
+		await selectRow('Ends on')
+		await removeSelected()
+
+		expect(undoRows()).toEqual([
+			'Description will be removed Undo',
+			'Ends on will be removed Undo',
+		])
+
+		await click(undoButtons()[1])
+		expect(rowLabels()).toEqual([
+			'Title',
+			'Starts on',
+			'Ends on',
+			'Online',
+			'Capacity',
+			'Category',
+		])
+		await click(undoButtons()[0])
+		expect(rowLabels()).toEqual(SAVED_ORDER)
+		expect(chip()).toBe('Saved')
+	})
+
+	it('does not offer an undo for a field added and removed since the last save', async () => {
+		await mountAt('/schema/events')
+		await addField('Speaker')
+
+		await removeSelected()
+
+		expect(undoRows()).toEqual([])
+		expect(chip()).toBe('Saved')
+	})
+})
+
+describe('A removed key stays reserved', () => {
+	it('gives a new Description field the key description_2 and still restores description', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+		await removeSelected()
+
+		await addField('Description')
+
+		expect(fieldKeyInput()!.value).toBe('description_2')
+
+		await click(undoButtons()[0])
+
+		const keys = all('[data-testid="field-row-key"]').map(text)
+		expect(keys).toContain('description')
+		expect(keys).toContain('description_2')
+		expect(new Set(keys).size).toBe(keys.length)
+	})
+})
+
+describe('Undo at the limit of 50 fields', () => {
+	it('disables Undo until a field is removed', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+		await removeSelected()
+		for (let count = 0; count < 44; count++) {
+			await click(button('Add field'))
+		}
+		expect(text(el('[data-testid="field-count"]'))).toBe('50 of 50')
+		expect(undoButtons()[0]!.disabled).toBe(true)
+
+		await removeSelected()
+
+		expect(undoButtons()[0]!.disabled).toBe(false)
+	})
+})
+
+describe('Removing every field', () => {
+	it('shows the empty list with its error, the undo rows, one problem and a disabled Save', async () => {
+		await mountAt('/schema/events')
+		for (let count = 0; count < 7; count++) {
+			await removeSelected()
+		}
+
+		expect(el('[data-testid="field-empty"]')).not.toBeNull()
+		expect(text(el('[data-testid="field-empty"]'))).toContain('No fields yet')
+		expect(text(el('[data-testid="field-empty"]'))).toContain(
+			'A content type needs at least one field.',
+		)
+		expect(undoRows()).toHaveLength(7)
+		expect(chip()).toBe('1 problem to fix')
+		expect(saveButton()!.disabled).toBe(true)
+	})
+})
+
+describe('Name edit only', () => {
+	it('keeps the key, marks the form changed and leaves the sidebar and list alone', async () => {
+		await mountAt('/schema/events')
+
+		await typeInto(nameInput(), 'Events and talks')
+
+		expect(keyInput()!.value).toBe('events')
+		expect(chip()).toBe('Unsaved changes')
+		expect(text(document.body.querySelector('nav[aria-label="breadcrumb"]'))).toContain(
+			'Events',
+		)
+		expect(text(document.body.querySelector('nav[aria-label="breadcrumb"]'))).not.toContain(
+			'Events and talks',
+		)
+		expect(rows().every((row) => !text(row).includes('Changed'))).toBe(true)
+	})
+
+	it('flags an empty or blank name under Name and disables Save without sending', async () => {
+		await mountAt('/schema/events')
+
+		await typeInto(nameInput(), '   ')
+
+		expect(text(nameInput()!.closest('[data-orientation]'))).toContain(
+			'Give the content type a name.',
+		)
+		expect(nameInput()!.closest('[data-orientation]')!.querySelector('svg')).not.toBeNull()
+		expect(saveButton()!.disabled).toBe(true)
+		expect(puts).toHaveLength(0)
+	})
+})
+
+describe('Field errors (design state 5)', () => {
+	it('flags three rows, counts three problems and shows the four messages', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Ends on')
+		await typeInto(labelInput(), '')
+		await selectRow('Capacity')
+		await typeInto(limit('min'), '6000')
+		await selectRow('Category')
+		await typeInto(all<HTMLInputElement>('[data-testid="choice-row"] input')[2], '')
+		await addChoice('Talk')
+
+		expect(chip()).toBe('3 problems to fix')
+		expect(saveButton()!.disabled).toBe(true)
+		expect(all('[data-testid="field-row-alert"]')).toHaveLength(3)
+		expect(text(inspector())).toContain("Choices can't be blank.")
+		expect(text(inspector())).toContain('Two choices are the same.')
+		await selectRow('Capacity')
+		expect(text(inspector())).toContain("Lowest value can't be above the highest value.")
+		await selectRow('Untitled field')
+		expect(text(inspector())).toContain('Give the field a label.')
+	})
+
+	it('shows a single key error for a new field and none for a saved field', async () => {
+		await mountAt('/schema/events')
+		await addField('Start date')
+		await click(
+			fieldKeyInput()!
+				.closest<HTMLElement>('[data-orientation]')!
+				.querySelector('button[aria-label="Edit key"]'),
+		)
+		await typeInto(fieldKeyInput(), 'start-date')
+
+		expect(text(inspector())).toContain(
+			'Start with a letter. Use lowercase letters, digits and underscores.',
+		)
+		expect(chip()).toBe('1 problem to fix')
+
+		await selectRow('Title')
+		expect(text(inspector())).not.toContain('Start with a letter')
+	})
+})
+
+describe('The choice list of a saved Choice field (design state 8)', () => {
+	it('lists the saved choices with the removal warning, and works like the create list', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Category')
+
+		expect(
+			all<HTMLInputElement>('[data-testid="choice-row"] input').map((input) => input.value),
+		).toEqual(['Talk', 'Workshop', 'Meetup'])
+		expect(text(inspector())).toContain(
+			'Removing a choice that entries use will be refused when you save.',
+		)
+
+		await addChoice('Panel')
+		expect(text(el('[data-testid="choice-count"]'))).toBe('4 of 50')
+
+		await chooseDefault('Workshop')
+		expect(text(el('button[role="combobox"]'))).toContain('Workshop')
+		await click(byLabel('Remove Workshop'))
+		expect(text(el('button[role="combobox"]'))).toContain('None')
+		expect(defaultInput()).toBeNull()
+	})
+})
+
+describe('Keyboard reorder in edit mode (design state 9)', () => {
+	const grip = (label: string) => byLabel(`Move ${label}`)!
+
+	it('announces the move from position 3, restores on Esc and drops on Space', async () => {
+		await mountAt('/schema/events')
+
+		await press(grip('Ends on'), ' ')
+		await press(grip('Ends on'), 'ArrowUp')
+
+		expect(live()).toBe(
+			'Moving Ends on. Position 2 of 7. Press Up or Down to move, Space to drop, Esc to cancel.',
+		)
+
+		await press(grip('Ends on'), 'Escape')
+		expect(rowLabels()).toEqual(SAVED_ORDER)
+
+		await press(grip('Ends on'), ' ')
+		await press(grip('Ends on'), 'ArrowUp')
+		await press(grip('Ends on'), ' ')
+		expect(rowLabels().slice(0, 3)).toEqual(['Title', 'Ends on', 'Starts on'])
+		expect(chip()).toBe('Unsaved changes')
+	})
+})
+
+describe('API preview in edit mode (design state 10)', () => {
+	it('uses the locked key, follows the fields and keeps the note', async () => {
+		await mountAt('/schema/events')
+		await click(el('[data-testid="api-preview-toggle"]'))
+
+		expect(all('[data-testid="api-route"]').map(text)[0]).toBe(
+			'GET /v1/content-type/events/entry',
+		)
+		expect(text(el('[data-testid="api-json"]'))).toContain('"description"')
+		expect(text(document.body)).toContain(
+			'Updates as you edit. Fields you add or remove here appear after you save.',
+		)
+
+		await selectRow('Description')
+		await removeSelected()
+		await addField('Speaker')
+
+		const json = text(el('[data-testid="api-json"]'))
+		expect(json).not.toContain('"description"')
+		expect(json).toContain('"speaker"')
+		expect(json).toContain('"content_type": "events"')
+	})
+})
+
+describe('Discard', () => {
+	it('returns to the loaded type with the first row selected and nothing sent', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Other')
+		await setMax('2000')
+		await addField('Speaker')
+		await selectRow('Description')
+		await removeSelected()
+
+		await click(discardButton())
+
+		expect(nameInput()!.value).toBe('Events')
+		expect(rowLabels()).toEqual(SAVED_ORDER)
+		expect(rows().every((row) => !/New|Changed/.test(text(row)))).toBe(true)
+		expect(undoRows()).toEqual([])
+		expect(inspectorTitle()).toBe('Field: Title')
+		expect(chip()).toBe('Saved')
+		expect(puts).toHaveLength(0)
+		expect(router.currentRoute.value.path).toBe('/schema/events')
+	})
+})
+
+describe('Leaving with unsaved edits in edit mode', () => {
+	const DIALOG_TITLE = 'Leave without saving?'
+
+	it('navigates with no prompt when nothing was edited', async () => {
+		await mountAt('/schema/events')
+
+		await router.push('/schema')
+		await flushPromises()
+
+		expect(router.currentRoute.value.path).toBe('/schema')
+		expect(text(document.body)).not.toContain(DIALOG_TITLE)
+	})
+
+	it('asks first for an edit, even one only in an undo row', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+		await removeSelected()
+
+		const leaving = router.push('/schema')
+		await flushPromises()
+
+		expect(text(document.body)).toContain(DIALOG_TITLE)
+		await click(button('Keep editing'))
+		await leaving
+		expect(router.currentRoute.value.path).toBe('/schema/events')
+
+		const again = router.push('/schema')
+		await flushPromises()
+		await click(button('Discard changes'))
+		await again
+		await flushPromises()
+		expect(router.currentRoute.value.path).toBe('/schema')
+	})
+
+	it('navigates with no prompt after a Discard', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Other')
+		await click(discardButton())
+
+		await router.push('/schema')
+		await flushPromises()
+
+		expect(router.currentRoute.value.path).toBe('/schema')
+	})
+})
+
+describe('Mobile field sheet in edit mode', () => {
+	it('opens Field: Capacity with the locked key, and Remove closes it and shows the undo row', async () => {
+		await mountAt('/schema/events', { width: MOBILE_WIDTH })
+
+		await click(rows()[4]!.querySelector('[data-field-row]'))
+
+		const sheet = el('[role="dialog"]')!
+		expect(text(sheet)).toContain('Field: Capacity')
+		expect(sheet.querySelector('[data-testid="slug-lock"]')).not.toBeNull()
+		expect(byLabel('Move up')).not.toBeNull()
+		expect(byLabel('Move down')).not.toBeNull()
+		expect(button('Done')).toBeInstanceOf(HTMLButtonElement)
+
+		await click(byLabel('Remove'))
+		await vi.waitFor(() => expect(el('[role="dialog"]')).toBeNull())
+
+		expect(undoRows()).toEqual(['Capacity will be removed Undo'])
+	})
+
+	it('shows the bottom bar with the chip, Discard and Save', async () => {
+		await mountAt('/schema/events', { width: MOBILE_WIDTH })
+		await typeInto(nameInput(), 'Other')
+
+		expect(text(el('.sticky'))).toBe('Unsaved changes Discard Save')
+	})
+})
@@ -0,0 +1,448 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { addCollection } from '@iconify/vue'
+import lucide from 'virtual:lucide-subset'
+import router from '@/router'
+import { MOBILE_WIDTH } from '@/components/__tests__/viewport'
+import { useContentTypesStore } from '@/stores/contentTypes'
+import { useSessionStore } from '@/stores/session'
+import {
+	button,
+	calls,
+	entryPage,
+	failWith,
+	mountAt,
+	networkFailure,
+	pending,
+	text,
+	unmountAll,
+} from './schemaTestKit'
+import {
+	all,
+	badgesOf,
+	chip,
+	click,
+	discardButton,
+	el,
+	fieldKeyInput,
+	inspector,
+	inspectorTitle,
+	keyInput,
+	limit,
+	main,
+	nameInput,
+	notice,
+	pickTile,
+	rowLabels,
+	rows,
+	saveButton,
+	selectRow,
+	tile,
+	typeInto,
+} from './builderKit'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return { ...actual, useApi: vi.fn() }
+})
+
+addCollection(lucide)
+
+afterEach(unmountAll)
+
+const SKELETON_DELAY_MS = 150
+const NOT_FOUND = 'Content type not found'
+const COUNT_ERROR = "Couldn't load content type"
+const COUNT_LINE = 'GET /v1/content-type/events/entry failed. Check your connection and try again.'
+
+describe('Resolving the key of /schema/:key', () => {
+	it('opens the builder in edit mode for a custom type', async () => {
+		await mountAt('/schema/events')
+
+		expect(nameInput()!.value).toBe('Events')
+		expect(keyInput()!.value).toBe('events')
+		expect(rowLabels()).toHaveLength(7)
+	})
+
+	it('keeps the read-only view for a built-in type', async () => {
+		await mountAt('/schema/articles')
+
+		expect(main().querySelector('h1')?.textContent).toBe('Articles')
+		expect(nameInput()).toBeNull()
+	})
+
+	it('says not found for an unknown key', async () => {
+		await mountAt('/schema/unknown')
+
+		expect(text(main())).toContain(NOT_FOUND)
+		expect(nameInput()).toBeNull()
+		expect(calls.some((url) => url.includes('/entry'))).toBe(false)
+	})
+
+	it('keeps /schema/new as the create builder', async () => {
+		await mountAt('/schema/new')
+
+		expect(nameInput()!.value).toBe('')
+		expect(keyInput()!.readOnly).toBe(true)
+		expect(rowLabels()).toEqual(['Title'])
+	})
+})
+
+describe('Loading, the session store and the entry count', () => {
+	it('calls each list once and the count once, and never reads the type on its own', async () => {
+		await mountAt('/schema/events')
+
+		expect(calls.filter((url) => url === '/v1/content-type')).toHaveLength(1)
+		expect(calls.filter((url) => url === '/v1/builtin-type')).toHaveLength(1)
+		expect(
+			calls.filter((url) => url === '/v1/content-type/events/entry?page=1&size=5'),
+		).toHaveLength(1)
+		expect(calls.filter((url) => url === '/v1/content-type/events')).toHaveLength(0)
+	})
+
+	it('shows the skeleton, and no builder, until the count is known', async () => {
+		vi.useFakeTimers()
+		const gate = pending()
+		await mountAt('/schema/events', { entries: () => gate.promise })
+
+		expect(document.body.querySelector('[data-testid="schema-skeleton-row"]')).toBeNull()
+		vi.advanceTimersByTime(SKELETON_DELAY_MS)
+		await flushPromises()
+
+		expect(
+			document.body.querySelectorAll('[data-testid="schema-skeleton-row"]').length,
+		).toBeGreaterThan(0)
+		expect(nameInput()).toBeNull()
+		expect(saveButton()).toBeUndefined()
+
+		gate.resolve(entryPage(37))
+		await flushPromises()
+
+		expect(nameInput()!.value).toBe('Events')
+		expect(document.body.querySelector('[data-testid="schema-skeleton-row"]')).toBeNull()
+	})
+
+	it('shows the skeleton until the built-in list is known', async () => {
+		vi.useFakeTimers()
+		const gate = pending()
+		await mountAt('/schema/events', { builtin: () => gate.promise })
+		vi.advanceTimersByTime(SKELETON_DELAY_MS)
+		await flushPromises()
+
+		expect(nameInput()).toBeNull()
+		expect(calls.filter((url) => url.includes('/entry'))).toHaveLength(0)
+
+		gate.resolve([])
+		await flushPromises()
+
+		expect(nameInput()!.value).toBe('Events')
+	})
+})
+
+describe('The count cannot be loaded', () => {
+	it.each([
+		['answers 500', failWith(500)],
+		['fails (network)', networkFailure],
+	])('shows the error when the count %s, then opens on Try again', async (_, failure) => {
+		let respond = failure as () => unknown
+		await mountAt('/schema/events', { entries: () => respond() })
+
+		expect(text(main())).toContain(COUNT_ERROR)
+		expect(text(main())).toContain(COUNT_LINE)
+		expect(nameInput()).toBeNull()
+		expect(saveButton()).toBeUndefined()
+
+		respond = () => entryPage(37)
+		await click(button('Try again'))
+
+		expect(nameInput()!.value).toBe('Events')
+		expect(
+			calls.filter((url) => url === '/v1/content-type/events/entry?page=1&size=5'),
+		).toHaveLength(2)
+		expect(calls.filter((url) => url === '/v1/content-type')).toHaveLength(1)
+	})
+
+	it('says not found when the count answers 404', async () => {
+		await mountAt('/schema/events', { entries: failWith(404) })
+
+		expect(text(main())).toContain(NOT_FOUND)
+		expect(nameInput()).toBeNull()
+	})
+
+	it('shows the access page when the count answers 403', async () => {
+		await mountAt('/schema/events', { entries: failWith(403) })
+
+		expect(text(main())).toContain("You don't have access to Schema")
+		expect(nameInput()).toBeNull()
+	})
+
+	it('shows the list error when the custom list fails, and retries it', async () => {
+		let respond = failWith(500) as () => unknown
+		await mountAt('/schema/events', { content: () => respond() })
+
+		expect(text(main())).toContain("Couldn't load content types")
+		expect(nameInput()).toBeNull()
+
+		const { customTypes } = await import('./schemaTestKit')
+		respond = () => [...customTypes]
+		await click(button('Try again'))
+
+		expect(nameInput()!.value).toBe('Events')
+	})
+})
+
+describe('Roles and sessions in edit mode', () => {
+	it.each(['owner', 'admin'])('shows the builder to a verified %s', async (role) => {
+		await mountAt('/schema/events', { role })
+
+		expect(nameInput()!.value).toBe('Events')
+	})
+
+	it('tells a verified user who is neither to go home, leaving the URL', async () => {
+		await mountAt('/schema/events', { role: 'user' })
+
+		expect(text(main())).toContain("You don't have access to Schema")
+		expect(button('Go to Home')).toBeInstanceOf(HTMLButtonElement)
+		expect(router.currentRoute.value.path).toBe('/schema/events')
+		expect(calls.filter((url) => url.includes('/entry'))).toHaveLength(0)
+	})
+
+	it('redirects an unverified user to /register/pending', async () => {
+		await mountAt('/schema/events', { verified: false })
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/register/pending'))
+	})
+
+	it('redirects a signed-out visitor to /login', async () => {
+		await mountAt('/schema/events')
+		useSessionStore().clear()
+		await router.push('/schema/events')
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/login'))
+	})
+})
+
+describe('Session-owned store', () => {
+	it('resets both lists on sign-out and reloads them for the next session', async () => {
+		await mountAt('/schema/events')
+		const store = useContentTypesStore()
+		expect(store.items).toHaveLength(3)
+		expect(store.builtinItems).toHaveLength(5)
+
+		useSessionStore().clear()
+		await flushPromises()
+
+		expect(store.items).toEqual([])
+		expect(store.builtinItems).toEqual([])
+		expect(store.status).toBe('idle')
+		expect(store.builtinStatus).toBe('idle')
+	})
+
+	it('starts a second visit from the store, not from an old draft', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Events and talks')
+		await unmountAll()
+
+		await mountAt('/schema/events')
+
+		expect(nameInput()!.value).toBe('Events')
+		expect(chip()).toBe('Saved')
+	})
+})
+
+describe('Editing an existing type, desktop (design state 2)', () => {
+	it('shows the breadcrumb, a locked key, the chip, the notice and the list', async () => {
+		await mountAt('/schema/events')
+
+		const crumbs = text(document.body.querySelector('nav[aria-label="breadcrumb"]'))
+		expect(crumbs).toContain('Schema')
+		expect(crumbs).toContain('Events')
+		expect(
+			document.body.querySelector('nav[aria-label="breadcrumb"] a[href="/schema"]'),
+		).not.toBeNull()
+		expect(nameInput()!.readOnly).toBe(false)
+		expect(nameInput()!.disabled).toBe(false)
+		expect(keyInput()!.readOnly).toBe(true)
+		expect(keyInput()!.className).toContain('font-mono')
+		expect(el('[data-testid="slug-lock"]')).not.toBeNull()
+		expect(document.body.querySelector('button[aria-label="Edit key"]')).toBeNull()
+		expect(text(main())).not.toContain('Auto')
+		expect(text(main())).not.toContain('Reset to match the name')
+		expect(chip()).toBe('Saved')
+		expect(notice()).toBe(
+			'37 entries use this content type. Changes are checked against them when you save.',
+		)
+		expect(text(el('[data-testid="field-count"]'))).toBe('7 of 50')
+		expect(rowLabels()).toEqual([
+			'Title',
+			'Starts on',
+			'Ends on',
+			'Online',
+			'Capacity',
+			'Category',
+			'Description',
+		])
+		expect(rows().every((row) => !/New|Changed/.test(text(row)))).toBe(true)
+		expect(button('Add field')).toBeInstanceOf(HTMLButtonElement)
+		expect(inspectorTitle()).toBe('Field: Title')
+		expect(text(el('[data-testid="inspector-pane"] h2')!.parentElement)).not.toContain('New')
+		expect(saveButton()!.disabled).toBe(true)
+		expect(discardButton()!.disabled).toBe(true)
+		expect(el('[data-testid="api-preview-toggle"]')!.getAttribute('aria-expanded')).toBe(
+			'false',
+		)
+	})
+
+	it('puts the notice under the type bar and above the list', async () => {
+		await mountAt('/schema/events')
+
+		const bar = el('[data-testid="entries-notice"]')!
+		const header = el('[data-testid="field-count"]')!
+		expect(bar.compareDocumentPosition(header) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+		expect(
+			nameInput()!.compareDocumentPosition(bar) & Node.DOCUMENT_POSITION_FOLLOWING,
+		).toBeTruthy()
+	})
+})
+
+describe('Editing an existing type, mobile (design state 2)', () => {
+	it('stacks the type bar, the notice, the rows and the API row, with the bottom bar', async () => {
+		await mountAt('/schema/events', { width: MOBILE_WIDTH })
+
+		expect(text(main())).not.toContain('Field: Title')
+		expect(el('[data-testid="inspector-pane"]')).toBeNull()
+		const order = [
+			nameInput(),
+			keyInput(),
+			el('[data-testid="entries-notice"]'),
+			rows()[0],
+			el('[data-testid="api-row"]'),
+		]
+		order.forEach((node, index) => {
+			expect(node).not.toBeNull()
+			if (index > 0) {
+				expect(
+					order[index - 1]!.compareDocumentPosition(node!) &
+						Node.DOCUMENT_POSITION_FOLLOWING,
+				).toBeTruthy()
+			}
+		})
+		const bar = el('.sticky')!
+		expect(text(bar)).toBe('Saved Discard Save')
+		expect(text(document.body)).toContain('Events')
+	})
+})
+
+describe('The notice follows the count', () => {
+	it.each([
+		[0, null],
+		[1, '1 entry uses this content type. Changes are checked against it when you save.'],
+		[37, '37 entries use this content type. Changes are checked against them when you save.'],
+		[
+			1200,
+			'1,200 entries use this content type. Changes are checked against them when you save.',
+		],
+	])('for %s entries', async (total, copy) => {
+		await mountAt('/schema/events', { entries: () => entryPage(total) })
+
+		if (copy === null) {
+			expect(el('[data-testid="entries-notice"]')).toBeNull()
+		} else {
+			expect(notice()).toBe(copy)
+		}
+	})
+})
+
+describe('The locked type key (design state 3)', () => {
+	const TIP = "The key is used in URLs and the API, so it can't change after the type is created."
+
+	it('opens a tooltip on focus, closes it on blur and Esc, and refuses typing', async () => {
+		await mountAt('/schema/events')
+
+		keyInput()!.focus()
+		await flushPromises()
+		expect(text(document.body)).toContain(TIP)
+
+		keyInput()!.blur()
+		await flushPromises()
+		expect(text(document.body)).not.toContain(TIP)
+
+		keyInput()!.focus()
+		await flushPromises()
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+		await flushPromises()
+		expect(text(document.body)).not.toContain(TIP)
+
+		await typeInto(keyInput(), 'changed')
+		expect(keyInput()!.readOnly).toBe(true)
+		expect(text(main())).not.toContain('Use 2 to 40 lowercase letters')
+	})
+})
+
+describe('Saved fields are locked', () => {
+	it('shows the lock, the help and the dimmed tiles for a saved field', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Starts on')
+
+		expect(fieldKeyInput()!.value).toBe('starts_on')
+		expect(fieldKeyInput()!.readOnly).toBe(true)
+		expect(inspector()!.querySelector('[data-testid="slug-lock"]')).not.toBeNull()
+		expect(text(inspector())).toContain("Used in the API, so it can't change.")
+		expect(inspector()!.querySelector('button[aria-label="Edit key"]')).toBeNull()
+		expect(text(inspector())).toContain("Can't change after saving")
+		expect(all('[role="radio"]')).toHaveLength(6)
+		expect(tile('Date').getAttribute('data-state')).toBe('checked')
+		const others = all<HTMLButtonElement>('[role="radio"]').filter(
+			(radio) => radio !== tile('Date'),
+		)
+		expect(others.every((radio) => radio.disabled || radio.hasAttribute('data-disabled'))).toBe(
+			true,
+		)
+		expect(tile('Date').hasAttribute('data-disabled')).toBe(false)
+	})
+
+	it('does not change the type when another tile is activated', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Starts on')
+
+		await pickTile('Number')
+
+		expect(tile('Date').getAttribute('data-state')).toBe('checked')
+		expect(chip()).toBe('Saved')
+	})
+
+	it('keeps label, Required, Unique, default and limits editable', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Capacity')
+
+		expect(limit('max')!.disabled).toBe(false)
+		expect(limit('min')!.disabled).toBe(false)
+		expect(el<HTMLInputElement>('input[name="label"]')!.disabled).toBe(false)
+		expect(el<HTMLInputElement>('input[name="default"]')!.disabled).toBe(false)
+	})
+})
+
+describe('Fields added since the last save', () => {
+	it('selects a new row with New, an Auto key, six selectable tiles and no lock', async () => {
+		await mountAt('/schema/events')
+		await click(button('Add field'))
+
+		expect(inspectorTitle()).toBe('Field: Untitled field')
+		expect(text(el('[data-testid="inspector-pane"]')!)).toContain('New')
+		expect(badgesOf('Untitled field')).toContain('New')
+		expect(inspector()!.querySelector('[data-testid="slug-lock"]')).toBeNull()
+		expect(text(inspector())).not.toContain("Can't change after saving")
+		expect(all<HTMLButtonElement>('[role="radio"]').every((radio) => !radio.disabled)).toBe(
+			true,
+		)
+	})
+
+	it('derives a key for a typed label that does not collide with a saved key', async () => {
+		await mountAt('/schema/events')
+		await click(button('Add field'))
+
+		await typeInto(el<HTMLInputElement>('input[name="label"]'), 'Title')
+
+		expect(fieldKeyInput()!.value).toBe('title_2')
+		expect(text(inspector())).toContain('Auto')
+		expect(chip()).toBe('Unsaved changes')
+	})
+})
@@ -0,0 +1,846 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises } from '@vue/test-utils'
+import { addCollection } from '@iconify/vue'
+import lucide from 'virtual:lucide-subset'
+import router from '@/router'
+import BuilderActions from '@/components/BuilderActions.vue'
+import { MOBILE_WIDTH } from '@/components/__tests__/viewport'
+import { useContentTypesStore } from '@/stores/contentTypes'
+import {
+	button,
+	calls,
+	eventsFields,
+	failWithBody,
+	mountAt,
+	networkFailure,
+	pending,
+	puts,
+	text,
+	unmountAll,
+	updatedType,
+} from './schemaTestKit'
+import {
+	addField,
+	all,
+	badgesOf,
+	byLabel,
+	chip,
+	click,
+	dialog,
+	discardButton,
+	el,
+	fieldKeyInput,
+	keyInput,
+	labelInput,
+	main,
+	makeUnsavedChanges,
+	nameInput,
+	notice,
+	rowLabels,
+	rows,
+	saveButton,
+	selectRow,
+	setMax,
+	typeInto,
+	undoButtons,
+	undoRows,
+} from './builderKit'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return { ...actual, useApi: vi.fn() }
+})
+
+addCollection(lucide)
+
+beforeEach(() => {
+	Element.prototype.scrollIntoView = () => undefined
+})
+
+afterEach(async () => {
+	vi.restoreAllMocks()
+	await unmountAll()
+})
+
+const SAVE_FAILED_TITLE = "Couldn't save the content type"
+const SAVE_FAILED_TEXT =
+	'Something went wrong on our side. Your changes are still here. Try again in a moment.'
+const SAVED_AT = /^Saved at \d{2}:\d{2}$/
+const FIELD_KEYS = [
+	'key',
+	'label',
+	'type',
+	'required',
+	'unique',
+	'default',
+	'min',
+	'max',
+	'options',
+]
+
+async function editRecipes() {
+	await selectRow('Servings')
+	await typeInto(labelInput(), 'Portions')
+}
+
+describe('Saving a type that has no entries', () => {
+	it('sends one PUT with no review and exactly name, icon and fields', async () => {
+		await mountAt('/schema/recipes')
+
+		await editRecipes()
+		await click(saveButton())
+
+		expect(puts).toHaveLength(1)
+		expect(puts[0]!.url).toBe('/v1/content-type/recipes')
+		expect(dialog()).toBeNull()
+		const body = puts[0]!.body as {
+			name: string
+			icon: unknown
+			fields: Record<string, unknown>[]
+		}
+		expect(Object.keys(body)).toEqual(['name', 'icon', 'fields'])
+		expect(body.icon).toBeNull()
+		expect(body.fields.map((field) => field.label)).toEqual([
+			'Title',
+			'Portions',
+			'Vegetarian',
+			'Method',
+		])
+		expect(body.fields.every((field) => Object.keys(field).join() === FIELD_KEYS.join())).toBe(
+			true,
+		)
+	})
+})
+
+describe('The PUT body', () => {
+	it('keeps the loaded icon, sends no key, trims the name and keeps the saved keys and types', async () => {
+		await mountAt('/schema/events')
+
+		await typeInto(nameInput(), '  Events and talks ')
+		await click(saveButton())
+
+		expect(puts).toHaveLength(1)
+		const body = puts[0]!.body as {
+			name: string
+			icon: unknown
+			fields: Record<string, unknown>[]
+		}
+		expect(Object.keys(body)).toEqual(['name', 'icon', 'fields'])
+		expect(body.name).toBe('Events and talks')
+		expect(body.icon).toBe('files')
+		expect('key' in body).toBe(false)
+		expect(body.fields.map((field) => [field.key, field.type])).toEqual(
+			eventsFields.map((field) => [field.key, field.type]),
+		)
+		expect(body.fields[3]).toMatchObject({
+			key: 'online',
+			default: null,
+			options: [],
+		})
+		expect(body.fields[4]).toMatchObject({ min: 1, max: 5000 })
+		expect(body.fields[5]).toMatchObject({
+			options: ['Talk', 'Workshop', 'Meetup'],
+		})
+	})
+
+	it('keeps a null icon null and leaves undone removals out', async () => {
+		await mountAt('/schema/recipes')
+		await selectRow('Method')
+		await click(byLabel('Remove'))
+
+		await click(saveButton())
+
+		const body = puts[0]!.body as {
+			icon: unknown
+			fields: { key: string }[]
+		}
+		expect(body.icon).toBeNull()
+		expect(body.fields.map((field) => field.key)).toEqual(['title', 'servings', 'vegetarian'])
+	})
+})
+
+describe('Saving (design state 11, no entries)', () => {
+	async function startSaving() {
+		const gate = pending()
+		await mountAt('/schema/recipes', { update: () => gate.promise })
+		await editRecipes()
+		await selectRow('Method')
+		await click(byLabel('Remove'))
+		await click(saveButton())
+		return gate
+	}
+
+	it('shows the chip and the loader, dims and disables everything, and sends once', async () => {
+		await startSaving()
+
+		expect(chip()).toBe('Saving…')
+		expect(el('[data-testid="builder-chip"] svg')).not.toBeNull()
+		expect(saveButton()).toBeUndefined()
+		const saving = button('Saving…') as HTMLButtonElement
+		expect(saving.disabled).toBe(true)
+		expect(saving.querySelector('svg')).not.toBeNull()
+		expect(discardButton()!.disabled).toBe(true)
+		expect(nameInput()!.disabled).toBe(true)
+		expect(labelInput()!.disabled).toBe(true)
+		expect((button('Add field') as HTMLButtonElement).disabled).toBe(true)
+		expect(all<HTMLButtonElement>('[data-grip]').every((grip) => grip.disabled)).toBe(true)
+		expect((byLabel('Move up') as HTMLButtonElement).disabled).toBe(true)
+		expect((byLabel('Remove') as HTMLButtonElement).disabled).toBe(true)
+		expect(undoButtons().every((undo) => undo.disabled)).toBe(true)
+
+		saving.click()
+		await flushPromises()
+		expect(puts).toHaveLength(1)
+	})
+
+	it('ignores a second Save however it is activated', async () => {
+		const gate = pending()
+		const mounted = await mountAt('/schema/recipes', {
+			update: () => gate.promise,
+		})
+		await editRecipes()
+		await click(saveButton())
+		const actions = mounted.findComponent(BuilderActions)
+
+		actions.vm.$emit('save')
+		actions.vm.$emit('save')
+		await flushPromises()
+
+		expect(puts).toHaveLength(1)
+	})
+})
+
+describe('Saved (design state 12)', () => {
+	it('toasts, stays, clears the marks, locks the new fields and reads Saved at', async () => {
+		await mountAt('/schema/recipes')
+		await editRecipes()
+		await click(button('Add field'))
+		await typeInto(labelInput(), 'Notes')
+		await selectRow('Method')
+		await click(byLabel('Remove'))
+
+		await click(saveButton())
+		await flushPromises()
+
+		expect(text(document.body)).toContain('Content type saved')
+		expect(text(document.body)).toContain('Recipes now has 4 fields.')
+		expect(router.currentRoute.value.path).toBe('/schema/recipes')
+		expect(rows().every((row) => !/New|Changed/.test(text(row)))).toBe(true)
+		expect(undoRows()).toEqual([])
+		expect(chip()).toMatch(SAVED_AT)
+		expect(saveButton()!.disabled).toBe(true)
+		expect(discardButton()!.disabled).toBe(true)
+		await selectRow('Notes')
+		expect(fieldKeyInput()!.readOnly).toBe(true)
+		expect(el('[data-testid="field-inspector"] [data-testid="slug-lock"]')).not.toBeNull()
+		expect(text(el('[data-testid="field-inspector"]'))).toContain("Can't change after saving")
+	})
+
+	it('writes the answered type into the store, the list and the sidebar with no second GET', async () => {
+		await mountAt('/schema/events', {
+			update: (body) => ({
+				...updatedType('events', body),
+				name: 'Events and talks',
+			}),
+		})
+		await typeInto(nameInput(), 'Events and talks')
+
+		await click(saveButton())
+		await flushPromises()
+
+		const store = useContentTypesStore()
+		expect(store.items[0]!.name).toBe('Events and talks')
+		expect(el('nav a[href="/content/events"]')!.textContent).toContain('Events and talks')
+		expect(calls.filter((url) => url === '/v1/content-type')).toHaveLength(1)
+		await router.push('/schema')
+		await flushPromises()
+		expect(
+			all('[data-testid="schema-row"]').some((row) => text(row).includes('Events and talks')),
+		).toBe(true)
+	})
+
+	it('reads "1 field" for a single field', async () => {
+		await mountAt('/schema/recipes')
+		for (let count = 0; count < 3; count++) {
+			await click(byLabel('Remove'))
+		}
+
+		await click(saveButton())
+		await flushPromises()
+
+		expect(text(document.body)).toContain('Recipes now has 1 field.')
+	})
+
+	it('does not prompt when leaving afterwards', async () => {
+		await mountAt('/schema/recipes')
+		await editRecipes()
+		await click(saveButton())
+		await flushPromises()
+
+		await router.push('/schema')
+		await flushPromises()
+
+		expect(router.currentRoute.value.path).toBe('/schema')
+		expect(text(document.body)).not.toContain('Leave without saving?')
+	})
+
+	it('goes back to Unsaved changes on an edit and Discard returns to the last saved state', async () => {
+		await mountAt('/schema/recipes')
+		await editRecipes()
+		await click(saveButton())
+		await flushPromises()
+
+		await typeInto(nameInput(), 'Dishes')
+
+		expect(chip()).toBe('Unsaved changes')
+		await click(discardButton())
+
+		expect(nameInput()!.value).toBe('Recipes')
+		expect(rowLabels()).toEqual(['Title', 'Portions', 'Vegetarian', 'Method'])
+		expect(chip()).toMatch(SAVED_AT)
+	})
+})
+
+describe('Save on a type with entries opens the review (group 3, state 1)', () => {
+	it('sends nothing yet and opens the dialog with the summary, the rows in order and the note', async () => {
+		await mountAt('/schema/events')
+		await makeUnsavedChanges()
+
+		await click(saveButton())
+
+		expect(puts).toHaveLength(0)
+		const open = dialog()!
+		expect(text(open)).toContain('Review changes to Events')
+		expect(text(open)).toContain('Apply them to save the content type.')
+		expect(text(el('[data-testid="review-summary"]'))).toBe('Add 2 fields, change 1, remove 1')
+		expect(text(open)).toContain(
+			'Events has 37 entries. Each one is checked against the new fields when you apply.',
+		)
+		expect(all('[data-testid="change-title"]').map(text)).toEqual([
+			'Add Speaker',
+			'Add Room',
+			'Change Capacity',
+			'Remove Description',
+		])
+		expect(all('[data-testid="change-text"]').map(text)).toEqual([
+			'Text, optional.',
+			'Choice, required, default "Main hall". Existing entries get the default, so they still fit.',
+			'Highest value goes from 5000 to 2000.',
+			'Entries stop returning its values.',
+		])
+		expect(all('[data-testid="change-flag"]').map(text)).toEqual([
+			'Entries may not fit',
+			'Removes data',
+		])
+		expect(text(open)).toContain(
+			"Flagged changes can be refused if existing entries don't fit. If that happens, nothing is changed.",
+		)
+		expect(button('Back to editing')).toBeInstanceOf(HTMLButtonElement)
+		expect(button('Apply changes')).toBeInstanceOf(HTMLButtonElement)
+	})
+
+	it('opens as a bottom sheet on mobile', async () => {
+		await mountAt('/schema/events', { width: MOBILE_WIDTH })
+		await click(rows()[6]!.querySelector('[data-field-row]'))
+		await click(byLabel('Remove'))
+		await vi.waitFor(() => expect(el('[data-testid="field-sheet-title"]')).toBeNull())
+		await click(saveButton())
+
+		expect(dialog()).not.toBeNull()
+		expect(dialog()!.className).toContain('max-sm:')
+		expect(text(dialog())).toContain('Review changes to Events')
+	})
+})
+
+describe('When the review opens', () => {
+	it('sends a name-only edit straight away', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Events and talks')
+
+		await click(saveButton())
+
+		expect(dialog()).toBeNull()
+		expect(puts).toHaveLength(1)
+	})
+
+	it('sends a reorder-only edit straight away', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Ends on')
+		await click(byLabel('Move up'))
+
+		await click(saveButton())
+
+		expect(dialog()).toBeNull()
+		expect(puts).toHaveLength(1)
+	})
+
+	it.each([
+		['a field added', async () => addField('Speaker')],
+		['a field changed', async () => setMax('2000')],
+		[
+			'a field removed',
+			async () => {
+				await selectRow('Description')
+				await click(byLabel('Remove'))
+			},
+		],
+	])('opens for %s', async (_, edit) => {
+		await mountAt('/schema/events')
+		await edit()
+
+		await click(saveButton())
+
+		expect(dialog()).not.toBeNull()
+		expect(puts).toHaveLength(0)
+	})
+
+	it('lists only the field change when the name changed too', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Events and talks')
+		await setMax('2000')
+
+		await click(saveButton())
+
+		expect(all('[data-testid="change-title"]').map(text)).toEqual(['Change Capacity'])
+		expect(text(el('[data-testid="review-summary"]'))).toBe('Change 1')
+	})
+})
+
+describe('The review title after a rename', () => {
+	it('reads the saved name, not the name loaded with the page', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput()!, 'Seminars')
+		await setMax('2000')
+		await click(saveButton())
+		await click(button('Apply changes'))
+		await flushPromises()
+		await setMax('3000')
+		await click(saveButton())
+
+		expect(text(dialog()!)).toContain('Review changes to Seminars')
+	})
+})
+
+describe('Back to editing from the review', () => {
+	it('closes with the button and keeps every edit', async () => {
+		await mountAt('/schema/events')
+		await makeUnsavedChanges()
+		await click(saveButton())
+
+		await click(button('Back to editing'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		expect(puts).toHaveLength(0)
+		expect(chip()).toBe('Unsaved changes')
+		expect(badgesOf('Speaker')).toContain('New')
+		expect(undoRows()).toHaveLength(1)
+	})
+
+	it('closes on Esc', async () => {
+		await mountAt('/schema/events')
+		await setMax('2000')
+		await click(saveButton())
+
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		expect(puts).toHaveLength(0)
+	})
+
+	it('returns the focus to Save', async () => {
+		await mountAt('/schema/events')
+		await setMax('2000')
+		const save = saveButton()!
+		save.focus()
+		await click(save)
+
+		await click(button('Back to editing'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		expect(document.activeElement).toBe(save)
+	})
+})
+
+describe('Applying (group 3, state 2) and Applied', () => {
+	async function apply() {
+		const gate = pending()
+		await mountAt('/schema/events', { update: () => gate.promise })
+		await setMax('2000')
+		await click(saveButton())
+		await click(button('Apply changes'))
+		return gate
+	}
+
+	it('sends one PUT, reads Applying… with a loader and cannot be dismissed', async () => {
+		await apply()
+
+		expect(puts).toHaveLength(1)
+		const confirm = button('Applying…') as HTMLButtonElement
+		expect(confirm.disabled).toBe(true)
+		expect(confirm.querySelector('svg')).not.toBeNull()
+		expect((button('Back to editing') as HTMLButtonElement).disabled).toBe(true)
+		expect(dialog()!.getAttribute('aria-busy')).toBe('true')
+
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+		await flushPromises()
+		expect(dialog()).not.toBeNull()
+
+		confirm.click()
+		await flushPromises()
+		expect(puts).toHaveLength(1)
+	})
+
+	it('keeps the focus on the title of the dialog', async () => {
+		await apply()
+
+		await vi.waitFor(() =>
+			expect(document.activeElement?.textContent).toBe('Review changes to Events'),
+		)
+	})
+
+	it('closes the dialog on success with the toast, the cleared marks and Saved at', async () => {
+		const gate = await apply()
+
+		gate.resolve(updatedType('events', puts[0]!.body))
+		await flushPromises()
+
+		expect(dialog()).toBeNull()
+		expect(text(document.body)).toContain('Content type saved')
+		expect(text(document.body)).toContain('Events now has 7 fields.')
+		expect(rows().every((row) => !/New|Changed/.test(text(row)))).toBe(true)
+		expect(chip()).toMatch(SAVED_AT)
+		expect(notice()).toContain('37 entries')
+		expect(text(document.body)).not.toContain('Leave without saving?')
+	})
+})
+
+describe('Refused (design state 15 and group 3, state 3)', () => {
+	const REFUSAL_TEXT =
+		"RenewCMS refused the changes because some entries don't fit the new fields. It doesn't say which entries."
+
+	async function refused(
+		edit: () => Promise<void> = async () => {
+			await setMax('2000')
+			await selectRow('Description')
+			await click(byLabel('Remove'))
+		},
+	) {
+		await mountAt('/schema/events', {
+			update: failWithBody(409, 'schema_incompatible'),
+		})
+		await edit()
+		await click(saveButton())
+		await click(button('Apply changes'))
+	}
+
+	it('replaces the review with the refusal dialog that lists only the flagged change', async () => {
+		await refused()
+
+		const open = dialog()!
+		expect(text(open)).toContain('Nothing was changed')
+		expect(text(open)).toContain(REFUSAL_TEXT)
+		expect(text(open)).toContain('Your content type is as it was')
+		expect(text(open)).toContain('No field was added, changed or removed.')
+		expect(text(open)).toContain('The change that can cause this in your edit')
+		expect(all('[data-testid="change-title"]').map(text)).toEqual(['Change Capacity'])
+		expect(text(el('[data-testid="change-text"]'))).toBe(
+			'Highest value goes from 5000 to 2000. An entry may have a higher value.',
+		)
+		expect(text(el('[data-testid="change-flag"]'))).toBe('Possible cause')
+		expect(text(open)).not.toContain('Description')
+		expect(text(open)).toContain(
+			'This kind of change is refused when an entry is over the new limit, a new required field has no default, a field becomes unique while entries share a value, or a removed choice is still in use.',
+		)
+		expect(button('Discard changes')).toBeInstanceOf(HTMLButtonElement)
+		expect(button('Back to editing')).toBeInstanceOf(HTMLButtonElement)
+		expect(text(open)).not.toContain('37')
+		const store = useContentTypesStore()
+		expect(store.items[0]!.fields).toHaveLength(7)
+		expect((store.items[0]!.fields[4] as { max: number }).max).toBe(5000)
+		expect(nameInput()).not.toBeNull()
+	})
+
+	it('omits the cause section when no change is flagged', async () => {
+		await refused(async () => {
+			await selectRow('Description')
+			await click(byLabel('Remove'))
+		})
+
+		const open = dialog()!
+		expect(text(open)).toContain('Nothing was changed')
+		expect(text(open)).toContain('Your content type is as it was')
+		expect(text(open)).not.toContain('The change that can cause this in your edit')
+		expect(el('[data-testid="refusal-causes"]')).toBeNull()
+		expect(text(open)).toContain('This kind of change is refused')
+	})
+
+	it('returns to a banner with Review changes, marks the flagged row and keeps Save', async () => {
+		await refused()
+
+		await click(button('Back to editing'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		expect(text(main())).toContain('Nothing was changed')
+		expect(text(main())).toContain(
+			"Some entries don't fit the new fields, so the whole change was refused. RenewCMS can't tell which entries. The changes that can cause this are marked.",
+		)
+		expect(badgesOf('Capacity')).toContain('Changed')
+		expect(badgesOf('Capacity')).toContain('Possible cause')
+		expect(chip()).toBe('Unsaved changes')
+		expect(saveButton()!.disabled).toBe(false)
+
+		await click(button('Review changes'))
+
+		expect(text(dialog())).toContain('Review changes to Events')
+		expect(all('[data-testid="change-title"]').map(text)).toEqual([
+			'Change Capacity',
+			'Remove Description',
+		])
+	})
+
+	it('also returns to the banner on Esc or the close icon', async () => {
+		await refused()
+
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		expect(text(main())).toContain('Nothing was changed')
+	})
+
+	it('resets the form on Discard changes, with no banner and no marker', async () => {
+		await refused()
+
+		await click(button('Discard changes'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+		await flushPromises()
+
+		expect(text(main())).not.toContain('Nothing was changed')
+		expect(chip()).toBe('Saved')
+		expect(rowLabels()).toHaveLength(7)
+		expect(badgesOf('Capacity')).toBe('')
+	})
+
+	it('loses the marker when the flagged change is reverted, and the banner on success', async () => {
+		await refused()
+		await click(button('Back to editing'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+
+		await selectRow('Capacity')
+		await typeInto(el('input[name="max"]'), '5000')
+
+		expect(badgesOf('Capacity')).not.toContain('Possible cause')
+		expect(badgesOf('Description')).toBe('')
+		expect(text(main())).toContain('Nothing was changed')
+	})
+
+	it('clears the banner and every marker once a PUT succeeds', async () => {
+		let answer: (body: Record<string, unknown>) => unknown = () => {
+			throw Object.assign(new Error('refused'), {
+				status: 409,
+				body: 'schema_incompatible',
+			})
+		}
+		const { ApiError } = await import('@/composables/useApi')
+		answer = () => {
+			throw new ApiError(409, undefined, 'schema_incompatible')
+		}
+		await mountAt('/schema/events', { update: (body) => answer(body) })
+		await setMax('2000')
+		await click(saveButton())
+		await click(button('Apply changes'))
+		await click(button('Back to editing'))
+		await vi.waitFor(() => expect(dialog()).toBeNull())
+		expect(badgesOf('Capacity')).toContain('Possible cause')
+
+		answer = (body) => updatedType('events', body)
+		await click(button('Review changes'))
+		await click(button('Apply changes'))
+		await flushPromises()
+
+		expect(text(main())).not.toContain('Nothing was changed')
+		expect(badgesOf('Capacity')).toBe('')
+		expect(chip()).toMatch(SAVED_AT)
+	})
+})
+
+describe('Other answers of the PUT', () => {
+	async function answered(failure: () => unknown, edit = async () => setMax('2000')) {
+		await mountAt('/schema/events', { update: failure })
+		await edit()
+		await click(saveButton())
+		if (dialog()) {
+			await click(button('Apply changes'))
+		}
+	}
+
+	it('closes the review and shows the banner for 422 invalid_field, keeping the edits', async () => {
+		await answered(failWithBody(422, 'invalid_field'))
+
+		expect(dialog()).toBeNull()
+		expect(text(main())).toContain('Check the fields marked in the list.')
+		expect(badgesOf('Capacity')).toContain('Changed')
+		expect(saveButton()!.disabled).toBe(false)
+	})
+
+	it('shows the name message for 400 and keeps the edits', async () => {
+		await answered(failWithBody(400, 'Bad request body'))
+
+		expect(dialog()).toBeNull()
+		expect(text(nameInput()!.closest('[data-orientation]'))).toContain(
+			'Give the content type a name.',
+		)
+		expect(badgesOf('Capacity')).toContain('Changed')
+		expect(puts).toHaveLength(1)
+	})
+
+	it('keeps the name message off a 400 that is about the key', async () => {
+		await answered(failWithBody(400, 'invalid_content_type_key'))
+
+		expect(dialog()).toBeNull()
+		expect(text(nameInput()!.closest('[data-orientation]'))).not.toContain(
+			'Give the content type a name.',
+		)
+		expect(badgesOf('Capacity')).toContain('Changed')
+	})
+
+	it('shows the not-found page for 404 and drops the type from the store', async () => {
+		await answered(failWithBody(404, 'content_type_not_found'))
+
+		expect(text(main())).toContain('Content type not found')
+		expect(useContentTypesStore().items.map((type) => type.key)).toEqual([
+			'recipes',
+			'press-mentions',
+		])
+		expect(nameInput()).toBeNull()
+	})
+
+	it('shows the access page for 403', async () => {
+		await answered(failWithBody(403, 'Only owners and admins'))
+
+		expect(text(main())).toContain("You don't have access to Schema")
+		expect(nameInput()).toBeNull()
+	})
+
+	it('leaves the redirect to the API client for 401', async () => {
+		await answered(failWithBody(401, ''))
+
+		expect(dialog()).toBeNull()
+		expect(text(main())).not.toContain(SAVE_FAILED_TITLE)
+	})
+})
+
+describe('Save failed (design state 13)', () => {
+	it.each([
+		['answers 500', failWithBody(500, 'boom')],
+		['fails (network)', networkFailure],
+	])(
+		'closes the review, keeps the edits and retries through the review when the PUT %s',
+		async (_, failure) => {
+			let respond: () => unknown = failure
+			await mountAt('/schema/events', {
+				update: (body) => respond() ?? body,
+			})
+			await setMax('2000')
+			await click(saveButton())
+			await click(button('Apply changes'))
+
+			expect(dialog()).toBeNull()
+			expect(text(main())).toContain(SAVE_FAILED_TITLE)
+			expect(text(main())).toContain(SAVE_FAILED_TEXT)
+			expect(chip()).toBe('Save failed')
+			expect(badgesOf('Capacity')).toContain('Changed')
+			expect(saveButton()!.disabled).toBe(false)
+
+			respond = () => undefined
+			const first = puts[0]!.body
+			await click(button('Try again'))
+
+			expect(dialog()).not.toBeNull()
+			expect(puts).toHaveLength(1)
+			await click(button('Apply changes'))
+			expect(puts).toHaveLength(2)
+			expect(puts[1]!.body).toEqual(first)
+		},
+	)
+})
+
+describe('Offline (design state 16)', () => {
+	function setOnline(value: boolean) {
+		vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(value)
+		window.dispatchEvent(new Event(value ? 'online' : 'offline'))
+	}
+
+	it('shows the banner and the chip, disables Save, keeps the edits and sends nothing on reconnect', async () => {
+		await mountAt('/schema/events')
+		await typeInto(nameInput(), 'Events and talks')
+
+		setOnline(false)
+		await flushPromises()
+
+		expect(text(document.body)).toContain(
+			"You're offline. Changes will be saved when you reconnect.",
+		)
+		expect(chip()).toBe('Waiting for connection')
+		expect(saveButton()!.disabled).toBe(true)
+		expect(nameInput()!.value).toBe('Events and talks')
+
+		setOnline(true)
+		await flushPromises()
+
+		expect(text(document.body)).not.toContain("You're offline.")
+		expect(saveButton()!.disabled).toBe(false)
+		expect(puts).toHaveLength(0)
+	})
+
+	it('disables Apply changes while the review is open offline and keeps the edits', async () => {
+		await mountAt('/schema/events')
+		await setMax('2000')
+		await click(saveButton())
+
+		setOnline(false)
+		await flushPromises()
+
+		expect((button('Apply changes') as HTMLButtonElement).disabled).toBe(true)
+		expect(badgesOf('Capacity')).toContain('Changed')
+
+		setOnline(true)
+		await flushPromises()
+		expect((button('Apply changes') as HTMLButtonElement).disabled).toBe(false)
+	})
+})
+
+describe('Accessibility of the edit mode', () => {
+	it('keeps Undo a reachable button', async () => {
+		await mountAt('/schema/events')
+		await selectRow('Description')
+		await click(byLabel('Remove'))
+
+		const undo = undoButtons()[0]!
+		expect(undo.tagName).toBe('BUTTON')
+		expect(undo.tabIndex).toBe(0)
+		expect(undo.getAttribute('type')).toBe('button')
+	})
+
+	it('ties the lock icons to a text or a help', async () => {
+		await mountAt('/schema/events')
+
+		expect(keyInput()!.readOnly).toBe(true)
+		expect(keyInput()!.closest('[data-orientation]')).not.toBeNull()
+		await selectRow('Starts on')
+		expect(text(el('[data-testid="field-inspector"]'))).toContain(
+			"Used in the API, so it can't change.",
+		)
+		expect(text(el('[data-testid="field-inspector"]'))).toContain("Can't change after saving")
+	})
+
+	it('names the dialog and keeps the focus inside it', async () => {
+		await mountAt('/schema/events')
+		await setMax('2000')
+		await click(saveButton())
+
+		const open = dialog()!
+		expect(open.getAttribute('role')).toBe('alertdialog')
+		expect(open.getAttribute('aria-labelledby')).not.toBeNull()
+		expect(open.contains(document.activeElement)).toBe(true)
+	})
+})
@@ -67,8 +67,8 @@ describe('Reaching the builder', () => {
 		expect(nameInput()).not.toBeNull()
 	})

-	it.each(['/schema/events', '/schema/unknown'])('still says not found at %s', async (path) => {
-		await mountAt(path)
+	it('still says not found at /schema/unknown', async () => {
+		await mountAt('/schema/unknown')

 		expect(text(main())).toContain(NOT_FOUND_TITLE)
 		expect(nameInput()).toBeNull()
@@ -44,7 +44,7 @@ describe('Schema list: built-in rows are links', () => {
 	it('links each built-in row to its view, named after the type, with a chevron', async () => {
 		await mountAt('/schema')

-		const links = [...document.body.querySelectorAll('a[data-testid="schema-row"]')]
+		const links = [...document.body.querySelectorAll('a[data-testid="schema-row"]')].slice(3)
 		expect(links.map((link) => link.getAttribute('href'))).toEqual(
 			builtinTypes.map((type) => `/schema/${type.key}`),
 		)
@@ -52,11 +52,6 @@ describe('Schema list: built-in rows are links', () => {
 			builtinTypes.map((type) => type.name),
 		)
 		expect(links.every((link) => link.querySelectorAll('svg').length === 3)).toBe(true)
-		const rows = [...document.body.querySelectorAll('[data-testid="schema-row"]')]
-		expect(rows.slice(0, 3).every((row) => row.tagName !== 'A')).toBe(true)
-		expect(
-			rows.slice(0, 3).every((row) => row.querySelector('[class*="chevron-right"]') === null),
-		).toBe(true)
 		expect(text(links[0])).toContain('Managed by RenewCMS')
 	})

@@ -64,17 +59,16 @@ describe('Schema list: built-in rows are links', () => {
 		await mountAt('/schema', { width: MOBILE_WIDTH })

 		const cards = [...document.body.querySelectorAll('[data-testid="schema-card"]')]
-		const links = cards.filter((card) => card.tagName === 'A')
+		const links = cards.filter((card) => card.tagName === 'A').slice(3)
 		expect(links).toHaveLength(5)
 		expect(text(links[0])).toBe('Articles Built-in articles · 5 fields')
 		expect(links[0]!.getAttribute('href')).toBe('/schema/articles')
 		expect(links[0]!.querySelector('svg:last-of-type')).not.toBeNull()
-		expect(cards.slice(0, 3).every((card) => card.tagName !== 'A')).toBe(true)
 	})

 	it('opens the type without loading the built-in types a second time', async () => {
 		await mountAt('/schema')
-		;(document.body.querySelector('a[data-testid="schema-row"]') as HTMLElement).click()
+		;(document.body.querySelectorAll('a[data-testid="schema-row"]')[3] as HTMLElement).click()
 		await flushPromises()

 		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/schema/articles'))
@@ -178,18 +172,15 @@ describe('Schema built-in view: loading', () => {
 })

 describe('Schema built-in view: unknown key', () => {
-	it.each(['/schema/unknown', '/schema/events'])(
-		'shows the not-found page at %s without redirecting',
-		async (path) => {
-			await mountAt(path)
+	it('shows the not-found page at /schema/unknown without redirecting', async () => {
+		await mountAt('/schema/unknown')

-			expect(text(main())).toContain(NOT_FOUND_TITLE)
-			expect(text(main())).toContain(NOT_FOUND_TEXT)
-			expect(router.currentRoute.value.path).toBe(path)
-			expect(document.body.querySelector('[data-testid="schema-field-row"]')).toBeNull()
-			expect(main().querySelector('button')).toBeNull()
-		},
-	)
+		expect(text(main())).toContain(NOT_FOUND_TITLE)
+		expect(text(main())).toContain(NOT_FOUND_TEXT)
+		expect(router.currentRoute.value.path).toBe('/schema/unknown')
+		expect(document.body.querySelector('[data-testid="schema-field-row"]')).toBeNull()
+		expect(main().querySelector('button')).toBeNull()
+	})
 })

 describe('Schema built-in view: error', () => {
@@ -83,21 +83,44 @@ describe('Schema list: populated', () => {
 		expect(text(main())).toContain('3 content types · 5 built-in')
 	})

-	it('does not make rows links', async () => {
+	it('makes every row a link to its type, custom rows included', async () => {
 		await mountAt('/schema')

-		expect(document.body.querySelectorAll('[data-testid="schema-row"] a')).toHaveLength(0)
-		await document.body.querySelector<HTMLElement>('[data-testid="schema-row"]')!.click()
+		const links = [...document.body.querySelectorAll('a[data-testid="schema-row"]')]
+		expect(links.map((link) => link.getAttribute('href'))).toEqual([
+			'/schema/events',
+			'/schema/recipes',
+			'/schema/press-mentions',
+			'/schema/articles',
+			'/schema/authors',
+			'/schema/sites',
+			'/schema/media',
+			'/schema/users',
+		])
+		expect(links[0]!.getAttribute('aria-label')).toBe('Events')
+	})
+
+	it('opens the editor when the Events row is activated', async () => {
+		await mountAt('/schema')
+
+		document.body.querySelector<HTMLElement>('a[data-testid="schema-row"]')!.click()
 		await flushPromises()
-		expect(router.currentRoute.value.path).toBe('/schema')
+
+		await vi.waitFor(() => expect(router.currentRoute.value.path).toBe('/schema/events'))
 	})

 	it('turns into cards below 640 px with the same content', async () => {
 		await mountAt('/schema', { width: 390 })

-		const cards = [...document.body.querySelectorAll('[data-testid="schema-card"]')].map(text)
+		const elements = [...document.body.querySelectorAll('[data-testid="schema-card"]')]
+		const cards = elements.map(text)
 		expect(cards).toHaveLength(8)
 		expect(cards[0]).toBe('Events events · 7 fields · Updated 15 Oct 2026')
+		expect(elements.slice(0, 3).map((card) => card.getAttribute('href'))).toEqual([
+			'/schema/events',
+			'/schema/recipes',
+			'/schema/press-mentions',
+		])
 		expect(cards[3]).toBe('Articles Built-in articles · 5 fields')
 		expect(document.body.querySelector('[data-testid="schema-row"]')).toBeNull()
 	})
@@ -348,8 +371,12 @@ describe('Schema route', () => {
 		const to = router.resolve('/schema')

 		expect(to.meta).toMatchObject({ auth: 'verified', title: 'Schema' })
-		expect(resolveAuthRedirect(to, session)).toMatchObject({ path: '/login' })
+		expect(resolveAuthRedirect(to, session)).toMatchObject({
+			path: '/login',
+		})
 		session.session = { verified: false, displayName: '' }
-		expect(resolveAuthRedirect(to, session)).toEqual({ path: '/register/pending' })
+		expect(resolveAuthRedirect(to, session)).toEqual({
+			path: '/register/pending',
+		})
 	})
 })
@@ -105,3 +105,43 @@ export async function buildEvents() {
 	await addChoice('Workshop')
 	await addChoice('Meetup')
 }
+
+export const rowOf = (label: string) =>
+	rows().find((row) => text(row.querySelector('[data-testid="field-row-label"]')) === label)
+export const badgesOf = (label: string) =>
+	text(rowOf(label)?.querySelector('[data-testid="field-row-badges"]'))
+export const undoRows = () => all('[data-testid="undo-row"]').map(text)
+export const undoButtons = () => all<HTMLButtonElement>('[data-testid="undo-action"]')
+export const notice = () => text(el('[data-testid="entries-notice"]'))
+export const dialog = () => el('[role="alertdialog"]')
+export const inspectorTitle = () => text(el('[data-testid="inspector-pane"] h2'))
+
+export async function setMax(value: string, row = 'Capacity') {
+	await selectRow(row)
+	await typeInto(limit('max'), value)
+}
+
+export async function removeSelected() {
+	await click(byLabel('Remove'))
+}
+
+export async function chooseDefault(name: string) {
+	await press(el('button[role="combobox"]'), 'ArrowDown')
+	await press(
+		all('[role="option"]').find((option) => text(option) === name),
+		'Enter',
+	)
+}
+
+export async function makeUnsavedChanges() {
+	await setMax('2000')
+	await addField('Speaker')
+	await addField('Room')
+	await pickTile('Choice')
+	await toggle('Required')
+	await addChoice('Main hall')
+	await addChoice('Studio')
+	await chooseDefault('Main hall')
+	await selectRow('Description')
+	await removeSelected()
+}
@@ -11,6 +11,9 @@ import { ApiError, NetworkError, useApi } from '@/composables/useApi'
 import { useContentTypesStore } from '@/stores/contentTypes'
 import { useSessionStore } from '@/stores/session'
 import { DESKTOP_WIDTH, setViewportWidth } from '@/components/__tests__/viewport'
+import { eventsFields, recipesFields } from '@/lib/__tests__/schemaFixtures'
+
+export { apiField, eventsFields, recipesFields } from '@/lib/__tests__/schemaFixtures'

 export type Responder = () => unknown

@@ -20,7 +23,7 @@ export const customTypes = [
 		key: 'events',
 		name: 'Events',
 		icon: 'files',
-		fields: new Array(7),
+		fields: eventsFields,
 		updated_at: '2026-10-15T09:30:00Z',
 	},
 	{
@@ -28,7 +31,7 @@ export const customTypes = [
 		key: 'recipes',
 		name: 'Recipes',
 		icon: null,
-		fields: new Array(4),
+		fields: recipesFields,
 		updated_at: '2026-10-02T09:30:00Z',
 	},
 	{
@@ -117,9 +120,17 @@ export interface PostedRequest {
 	body: Record<string, unknown>
 }

+export const entryCounts: Record<string, number> = { events: 37, recipes: 0 }
+
+export function entryPage(total: number) {
+	return { items: [], total, page: 1, size: 1 }
+}
+
 export interface SchemaMount {
 	role?: string
 	create?: (body: PostedRequest['body']) => unknown
+	update?: (body: PostedRequest['body'], key: string) => unknown
+	entries?: (key: string) => unknown
 	width?: number
 	content?: Responder
 	builtin?: Responder
@@ -130,10 +141,17 @@ export interface SchemaMount {
 let wrapper: VueWrapper | undefined
 export const calls: string[] = []
 export const posts: PostedRequest[] = []
+export const puts: PostedRequest[] = []
+
+export function updatedType(key: string, body: Record<string, unknown>) {
+	const base = customTypes.find((type) => type.key === key)!
+	return { ...base, ...body, key, updated_at: '2026-10-19T11:02:00Z' }
+}

 export async function mountAt(path: string, options: SchemaMount = {}, shellOnly = false) {
 	calls.length = 0
 	posts.length = 0
+	puts.length = 0
 	localStorage.clear()
 	setViewportWidth(options.width ?? DESKTOP_WIDTH)
 	const pinia = createPinia()
@@ -155,6 +173,12 @@ export async function mountAt(path: string, options: SchemaMount = {}, shellOnly
 	}
 	session.status = 'ready'
 	const request = vi.fn(async (url: string, init?: RequestInit) => {
+		if (init?.method === 'PUT') {
+			const body = JSON.parse(String(init.body)) as PostedRequest['body']
+			const key = url.split('/').pop()!
+			puts.push({ url, body })
+			return (options.update ?? ((sent, target) => updatedType(target, sent)))(body, key)
+		}
 		if (init?.method === 'POST') {
 			const body = JSON.parse(String(init.body)) as PostedRequest['body']
 			posts.push({ url, body })
@@ -164,6 +188,10 @@ export async function mountAt(path: string, options: SchemaMount = {}, shellOnly
 		if (url === '/v1/content-type') {
 			return (options.content ?? (() => [...customTypes]))()
 		}
+		const counted = url.match(/^\/v1\/content-type\/([^/]+)\/entry\?page=1&size=5$/)
+		if (counted) {
+			return (options.entries ?? ((key) => entryPage(entryCounts[key] ?? 0)))(counted[1]!)
+		}
 		if (url === '/v1/builtin-type') {
 			return (options.builtin ?? (() => builtinTypes))()
 		}
@@ -71,6 +71,12 @@ const extraSources: Record<string, Source[]> = {
 			],
 			alias: {},
 		},
+		{
+			board: schemaBoard,
+			group: '3 Review and delete',
+			states: ['Review before saving', 'Applying', 'Refused (schema_incompatible)'],
+			alias: {},
+		},
 	],
 	sites: [
 		{
@@ -6445,20 +6445,6 @@ const editorSeoStates: Record<string, VisualState> = {
 	},
 }

-const schemaCustomTypes = [
-	['events', 'Events', 7, '2026-10-15T09:30:00Z'],
-	['recipes', 'Recipes', 4, '2026-10-02T09:30:00Z'],
-	['press-mentions', 'Press mentions', 5, '2026-09-18T09:30:00Z'],
-].map(([key, name, fieldCount, updatedAt], index) => ({
-	id: index + 1,
-	key,
-	name,
-	icon: 'files',
-	fields: Array.from({ length: fieldCount as number }, (_, field) => ({ key: `field_${field}` })),
-	created_at: '2026-09-01T09:30:00Z',
-	updated_at: updatedAt,
-}))
-
 function schemaField(label: string, key: string, type: string, rest: object = {}) {
 	return {
 		key,
@@ -6474,6 +6460,56 @@ function schemaField(label: string, key: string, type: string, rest: object = {}
 	}
 }

+const schemaEventsFields = [
+	schemaField('Title', 'title', 'text', {
+		required: true,
+		unique: true,
+		max: 80,
+		options: [],
+	}),
+	schemaField('Starts on', 'starts_on', 'date', {
+		required: true,
+		options: [],
+	}),
+	schemaField('Ends on', 'ends_on', 'date', { options: [] }),
+	schemaField('Online', 'online', 'boolean', { default: false, options: [] }),
+	schemaField('Capacity', 'capacity', 'number', {
+		min: 1,
+		max: 5000,
+		options: [],
+	}),
+	schemaField('Category', 'category', 'select', {
+		options: ['Talk', 'Workshop', 'Meetup'],
+	}),
+	schemaField('Description', 'description', 'richtext', { options: [] }),
+]
+
+const schemaRecipesFields = [
+	schemaField('Title', 'title', 'text', { required: true, options: [] }),
+	schemaField('Servings', 'servings', 'number', { min: 1, options: [] }),
+	schemaField('Vegetarian', 'vegetarian', 'boolean', { options: [] }),
+	schemaField('Method', 'method', 'richtext', { options: [] }),
+]
+
+const schemaCustomTypes = [
+	['events', 'Events', schemaEventsFields, '2026-10-15T09:30:00Z'],
+	['recipes', 'Recipes', schemaRecipesFields, '2026-10-02T09:30:00Z'],
+	[
+		'press-mentions',
+		'Press mentions',
+		Array.from({ length: 5 }, (_, field) => ({ key: `field_${field}` })),
+		'2026-09-18T09:30:00Z',
+	],
+].map(([key, name, fields, updatedAt], index) => ({
+	id: index + 1,
+	key,
+	name,
+	icon: 'files',
+	fields,
+	created_at: '2026-09-01T09:30:00Z',
+	updated_at: updatedAt,
+}))
+
 const schemaArticleFields = [
 	schemaField('Title', 'title', 'text', { required: true, max: 200 }),
 	schemaField('Slug', 'slug', 'text', { required: true, unique: true }),
@@ -6502,7 +6538,11 @@ const schemaBuiltinTypes = [
 function schemaSession(role: string): ApiMock {
 	return {
 		status: 200,
-		body: { ...(verifiedSession.body as object), display_name: 'Marta Alves', role },
+		body: {
+			...(verifiedSession.body as object),
+			display_name: 'Marta Alves',
+			role,
+		},
 	}
 }

@@ -6511,16 +6551,119 @@ function schemaApi(overrides: Record<string, ApiMock> = {}): Record<string, ApiM
 		'GET /v1/auth/me': schemaSession('owner'),
 		'GET /v1/content-type': { status: 200, body: schemaCustomTypes },
 		'GET /v1/builtin-type': { status: 200, body: schemaBuiltinTypes },
+		'GET /v1/content-type/events/entry': {
+			status: 200,
+			body: schemaEntryPage(37),
+		},
+		'GET /v1/content-type/recipes/entry': {
+			status: 200,
+			body: schemaEntryPage(0),
+		},
 		...overrides,
 	}
 }

+function schemaEntryPage(total: number) {
+	return { items: [], total, page: 1, size: 1 }
+}
+
+function schemaPut(response: ApiMock): Record<string, ApiMock> {
+	return { 'PUT /v1/content-type/events': response }
+}
+
+async function schemaSettle(page: Page) {
+	for (let pass = 0; pass < 2; pass++) {
+		await page.evaluate(() => {
+			document.querySelectorAll('*').forEach((element) => {
+				element.scrollTop = 0
+			})
+		})
+		await page.waitForTimeout(100)
+	}
+	await page.mouse.move(0, 0)
+}
+
+async function schemaFocusRow(page: Page, label: string) {
+	await schemaOpenRow(page, label)
+	await schemaCloseSheet(page)
+}
+
+async function schemaAddField(page: Page, label: string) {
+	await page.getByRole('button', { name: 'Add field' }).dispatchEvent('click')
+	await page.locator('input[name="label"]').fill(label)
+}
+
+async function schemaAddChoice(page: Page, text: string) {
+	const input = page.getByPlaceholder('Add a choice')
+	await input.fill(text)
+	await input.press('Enter')
+}
+
+async function schemaUnsavedEdits(page: Page) {
+	await schemaOpenRow(page, 'Capacity')
+	await page.locator('input[name="max"]').fill('2000')
+	await schemaCloseSheet(page)
+	await schemaAddField(page, 'Speaker')
+	await schemaCloseSheet(page)
+	await schemaAddField(page, 'Room')
+	await page.locator('label:has([role="radio"][value="select"])').click()
+	await page.getByRole('switch', { name: 'Required' }).click()
+	await schemaAddChoice(page, 'Main hall')
+	await schemaAddChoice(page, 'Studio')
+	await page.locator('[data-testid="field-inspector"] button[role="combobox"]').click()
+	await page.getByRole('option', { name: 'Main hall' }).click()
+	await schemaCloseSheet(page)
+	await schemaOpenRow(page, 'Description')
+	await page.getByRole('button', { name: 'Remove', exact: true }).click()
+	await page.getByText('Description will be removed').waitFor()
+	if (!schemaIsMobile(page)) {
+		await schemaOpenRow(page, 'Capacity')
+	}
+	await schemaSettle(page)
+}
+
+async function schemaApplyEdits(page: Page) {
+	await schemaUnsavedEdits(page)
+	await page.getByRole('button', { name: 'Save', exact: true }).click()
+	await page.getByRole('alertdialog').waitFor()
+	await page.mouse.move(0, 0)
+}
+
+async function schemaApply(page: Page) {
+	await schemaUnsavedEdits(page)
+	await page.getByRole('button', { name: 'Save', exact: true }).click()
+	await page.getByRole('button', { name: 'Apply changes' }).click()
+}
+
+async function schemaFieldErrors(page: Page) {
+	await schemaOpenRow(page, 'Ends on')
+	await page.locator('input[name="label"]').fill('')
+	await schemaCloseSheet(page)
+	await schemaOpenRow(page, 'Capacity')
+	await page.locator('input[name="min"]').fill('6000')
+	await schemaCloseSheet(page)
+	await schemaCategoryChoices(page)
+	if (!schemaIsMobile(page)) {
+		await schemaOpenRow(page, 'Capacity')
+	} else {
+		await schemaCloseSheet(page)
+	}
+	await schemaSettle(page)
+}
+
+async function schemaCategoryChoices(page: Page) {
+	await schemaOpenRow(page, 'Category')
+	await page.locator('[data-testid="choice-row"] input').nth(2).fill('')
+	await schemaAddChoice(page, 'Talk')
+	await page.getByText("Choices can't be blank.").first().waitFor()
+}
+
 function schemaIsMobile(page: Page) {
 	return (page.viewportSize()?.width ?? 0) < 768
 }

 async function schemaOpenRow(page: Page, label: string) {
-	await page.locator('[data-field-row]', { hasText: label }).first().click()
+	await page.locator('[data-field-row]', { hasText: label }).first().dispatchEvent('click')
 }

 async function schemaCloseSheet(page: Page) {
@@ -6550,12 +6693,38 @@ const schemaStates: Record<string, VisualState> = {
 			'GET /v1/auth/me': schemaSession('user'),
 		}),
 	},
-	'Built-in type: read-only view': { path: '/schema/articles', api: schemaApi() },
+	'Built-in type: read-only view': {
+		path: '/schema/articles',
+		api: schemaApi(),
+	},
 	'New type': { path: '/schema/new', api: schemaApi() },
-	'Editing an existing type': { path: '/schema/events', skip: 'pending' },
-	'Locked key: tooltip': { path: '/schema/events', skip: 'pending' },
-	'Unsaved changes': { path: '/schema/events', skip: 'pending' },
-	'Field errors': { path: '/schema/events', skip: 'pending' },
+	'Editing an existing type': { path: '/schema/events', api: schemaApi() },
+	'Locked key: tooltip': {
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: async (page) => {
+			await schemaFocusRow(page, 'Starts on')
+			if (!schemaIsMobile(page)) {
+				await page.locator('input[name="key"]').hover()
+				await page.getByText('The key is used in URLs and the API').first().waitFor()
+			}
+		},
+	},
+	'Unsaved changes': {
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: schemaUnsavedEdits,
+	},
+	'Field errors': {
+		exception: {
+			maxPercent: { desktop: 10, mobile: 11 },
+			reason: 'the board list header shrinks when the list overflows and shifts rows, the app scrolls instead',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: schemaFieldErrors,
+	},
 	'Type-level errors': {
 		path: '/schema/new',
 		api: schemaApi(),
@@ -6571,16 +6740,105 @@ const schemaStates: Record<string, VisualState> = {
 		},
 	},
 	'Field key error': { path: '/schema/new', skip: 'pending' },
-	'Choice list editor': { path: '/schema/events', skip: 'pending' },
-	'Keyboard reorder': { path: '/schema/events', skip: 'pending' },
-	'API preview open': { path: '/schema/events', skip: 'pending' },
-	Saving: { path: '/schema/events', skip: 'pending' },
-	Saved: { path: '/schema/events', skip: 'pending' },
-	'Save failed': { path: '/schema/events', skip: 'pending' },
+	'Choice list editor': {
+		exception: {
+			maxPercent: { desktop: 10, mobile: 25 },
+			reason: 'the accepted spec requires a Move up, Move down and Remove row in the mobile field sheet that the board does not draw',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: async (page) => {
+			await schemaOpenRow(page, 'Category')
+			await schemaAddChoice(page, 'x')
+			await page.locator('[data-testid="choice-row"] input').nth(3).fill('')
+			await schemaAddChoice(page, 'Talk')
+			await page.getByText('Two choices are the same.').first().waitFor()
+			await schemaSettle(page)
+		},
+	},
+	'Keyboard reorder': {
+		exception: {
+			maxPercent: { desktop: 15, mobile: 14 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame, and the board list header shrinks when the list overflows',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: async (page) => {
+			await schemaFocusRow(page, 'Ends on')
+			await page.getByRole('button', { name: 'Move Ends on' }).focus()
+			await page.keyboard.press('Space')
+			await page.keyboard.press('ArrowUp')
+			await page.keyboard.press('Space')
+			await page.getByText('Unsaved changes').first().waitFor()
+			await page.getByRole('button', { name: 'Move Ends on' }).focus()
+			await page.keyboard.press('Space')
+			await page.getByText('Moving Ends on. Position 2 of 7.').first().waitFor()
+		},
+	},
+	'API preview open': {
+		exception: {
+			maxPercent: { desktop: 11, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: async (page) => {
+			if (schemaIsMobile(page)) {
+				await page.locator('[data-testid="api-row"]').click()
+				await page.getByRole('dialog').waitFor()
+			} else {
+				await page.locator('[data-testid="api-preview-toggle"]').click()
+				await page.locator('[data-testid="api-json"]').waitFor()
+			}
+			await schemaSettle(page)
+		},
+	},
+	Saving: {
+		exception: {
+			maxPercent: { desktop: 27, mobile: 17 },
+			reason: 'the board draws Saving with 37 entries and no review, the app always reviews first so the setup has no entries and no info bar; the design board draws a miniature of the board and overlays in the desktop frame',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi({
+			'GET /v1/content-type/events/entry': {
+				status: 200,
+				body: schemaEntryPage(0),
+			},
+			...schemaPut({ status: 200, hang: true }),
+		}),
+		steps: async (page) => {
+			await schemaUnsavedEdits(page)
+			await page.getByRole('button', { name: 'Save', exact: true }).click()
+			await page.getByText('Saving…').first().waitFor()
+			await schemaSettle(page)
+		},
+	},
+	Saved: { path: '/schema/events', skip: 'clock-sensitive' },
+	'Save failed': {
+		exception: {
+			maxPercent: { desktop: 12, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame, and the board list header shrinks when the list overflows',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(schemaPut({ status: 500 })),
+		steps: async (page) => {
+			await schemaApply(page)
+			await page.getByText("Couldn't save the content type").waitFor()
+			await schemaSettle(page)
+		},
+	},
 	'Key already taken': {
 		path: '/schema/new',
 		api: schemaApi({
-			'POST /v1/content-type': { status: 409, body: 'content_type_key_taken' },
+			'POST /v1/content-type': {
+				status: 409,
+				body: 'content_type_key_taken',
+			},
 		}),
 		steps: async (page) => {
 			await page.getByPlaceholder('For example, Events').fill('Events')
@@ -6599,8 +6857,68 @@ const schemaStates: Record<string, VisualState> = {
 			await page.mouse.move(0, 0)
 		},
 	},
-	'Schema incompatible': { path: '/schema/events', skip: 'pending' },
-	Offline: { path: '/schema/events', skip: 'pending' },
+	'Schema incompatible': {
+		exception: {
+			maxPercent: { desktop: 13, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame, and the board list header shrinks when the list overflows',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(schemaPut({ status: 409, body: 'schema_incompatible' })),
+		steps: async (page) => {
+			await schemaApply(page)
+			await page.getByRole('button', { name: 'Back to editing' }).click()
+			await page.getByRole('button', { name: 'Review changes' }).waitFor()
+			await schemaSettle(page)
+		},
+	},
+	Offline: {
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: async (page) => {
+			await schemaUnsavedEdits(page)
+			await goOffline(page)
+			await schemaSettle(page)
+		},
+	},
+	'Review before saving': {
+		exception: {
+			maxPercent: { desktop: 15, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame, and the board list header shrinks when the list overflows',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(),
+		steps: schemaApplyEdits,
+	},
+	Applying: {
+		exception: {
+			maxPercent: { desktop: 42, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame and the overlay of another viewport',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(schemaPut({ status: 200, hang: true })),
+		steps: async (page) => {
+			await schemaApply(page)
+			await page.getByRole('button', { name: 'Applying…' }).waitFor()
+			await schemaSettle(page)
+		},
+	},
+	'Refused (schema_incompatible)': {
+		exception: {
+			maxPercent: { desktop: 43, mobile: 10 },
+			reason: 'the design board draws a miniature of the board and overlays in the desktop frame and the overlay of another viewport',
+			approvedBy: 'user',
+		},
+		path: '/schema/events',
+		api: schemaApi(schemaPut({ status: 409, body: 'schema_incompatible' })),
+		steps: async (page) => {
+			await schemaApply(page)
+			await page.getByText('Your content type is as it was').waitFor()
+			await schemaSettle(page)
+		},
+	},
 }

 export const visualStates: Record<string, Record<string, VisualState>> = {