smoodly 0.0.24 → 0.0.26

package/README.md

@@ -468,6 +468,15 @@ Implemented:
   The media and refs walks descend into documents against the element
   schemas (`elements` beside `sections` in the store, resolve and site
   options).
+- The token guard and presence (spec 2026-09-26 concurrency): every
+  draft write carries `{ versionId, savedAt }` from the locale row's
+  `draftSavedAt` and is refused as `conflict` + `stale` when the draft
+  moved (the write itself is conditional in Supabase); the admin freezes
+  under a notice naming who saved and when and reloads through "Load
+  their version"; one private Realtime channel per space shows who edits
+  what (a lock in the lists, a line under the top bar) and announces
+  saves so a clean view refreshes and a dirty one freezes early. Schema
+  version 2 adds the draft-pointer foreign keys and the channel policies.
 
 Not yet: canvas drag-and-drop (list fields, the outline, manual
 collections and the pages tree drag since 2026-09-09 — spec
@@ -495,6 +504,88 @@ after both are on the registry. From the repo root:
 `prepublishOnly` rebuilds each package. The Claude Code skill
 `.claude/skills/releasing-smoodly` carries the same order with its checks.
 
+## Follow-ups (logged 2026-09-26, concurrency spec)
+
+- A hard lock with takeover, if a real team asks: presence has the facts.
+- Presence on the members and media screens; today only pages, entries and
+  global items track.
+- Postgres Changes for live list refresh; the lists still load on navigation.
+- Field-level merging of two editors' changes; the guard refuses whole documents.
+- Publish, discard and restore compare the token, then move the pointer under a
+  pointer filter: a save that rewrites the same draft row in place between the
+  two is published unseen (one round trip wide). A SQL function would close it.
+- Publish leaves the token unchanged (the pointer and its saved time do not move),
+  so a publish with a token from before another person's publish of the same
+  draft succeeds — the content is the same. Recorded, not a bug.
+- The read client over the read key (DESIGN.md OQ 31) can reuse `publicContent()`.
+- A dropped socket clears presence on Realtime's timeout (tens of seconds); the
+  lock outlives a closed tab by that much.
+- The live suites wipe `members` and the content tables; a pane walk after
+  them needs `npm run reseed` (or `scripts/demo-editor.ts`) first.
+- `e2e/helpers.ts`'s `expectSaved` passes at once when the indicator still
+  reads "Saved" from before the edit (the debounce is 800 ms), so a step that
+  needs the save landed can race it; `concurrency.spec.ts` waits for the
+  save's server response instead. Fold that into the helper for every spec.
+
+## Follow-ups (logged 2026-09-26, browser suite)
+
+- Drag and drop has no browser test (spec §4): the outline, the pages
+  tree and list rows reorder by real pointer drags; the first plan that
+  touches `useSortable` adds them.
+- The suite runs Chromium only; the admin's WebKit and Firefox
+  behaviour is unverified.
+- Three `window.confirm` calls remain outside the confirm dialog (the
+  router's leave guard, `ui/confirm.ts`'s fallback) and are not exercised.
+- The media test uploads a starter photo under a suffixed name rather
+  than a fixture file, so `e2e/fixtures/` from the spec does not exist.
+- ListView rows that are not clickable (Members) carry no role; the
+  members test finds its row by `.sm-table__body > div`. A table role
+  set (`table`/`row`/`cell`) on ListView would give every list a proper
+  locator.
+- Publishing a global the site layout reads (the footer) serves the old
+  layout on the first public request made right after the publish returns;
+  every request after it, and a first request made ~3 s later, is fresh.
+  Pages do not show it (an unpublish answers 404 at once). Seen on
+  `next dev`; `e2e/globals.spec.ts` polls the home page for it. Find out
+  whether `updateTag` over a layout's `getGlobal` read expires late, and
+  whether `next start` behaves the same.
+- Fixed in the same session: an inserted section seeded an unsampled
+  optional object as `{}`, which publish then validated as present — an
+  untouched Image and text `link` refused the publish. The insert now
+  leaves it absent and validation reads a blank optional object as absent.
+
+## Follow-ups (logged 2026-09-26, schema migrations spec)
+
+- Existing databases (every install so far is ours; spec 2026-09-26 §7):
+  a database created before version 1 has the schema but not the table.
+  One time, in the SQL editor or psql:
+  `create table if not exists "smoodly_meta" ("key" text primary key, "value" text not null);`
+  `alter table "smoodly_meta" enable row level security;`
+  `insert into "smoodly_meta" ("key", "value") values ('schema_version', '1') on conflict ("key") do update set "value" = excluded."value";`
+  then re-apply the `smoodly_read` policy on `smoodly_meta` from
+  `migrations/20260926120000_smoodly_v1.sql` (a `drop … if exists` /
+  `create policy` pair). The hand-applied statement lists below stay as
+  history; from version 2 on, every change is a file.
+- Drafting version N+1: `npx tsx scripts/emit-migration.ts` prints the
+  whole schema plus the upsert; keep only the delta, name the file with
+  the current UTC stamp and `_smoodly_v<N+1>.sql`, bump `SCHEMA_VERSION`,
+  run `npm run db:migrate` at the root so the repo copy follows, and
+  `npm run check:migrations`. Additive only; a contraction waits for the
+  compatibility window and carries `-- smoodly:contraction`.
+- The views of a removed collection stay (spec 2026-09-26 §3); a
+  `drop view` is the developer's.
+- `smoodly migrate` never pushes; a `--push` flag if the two-step
+  proves annoying.
+- The CLI loads `smoodly/collections.ts` through tsx; a project that
+  registers collections elsewhere passes `--collections <file>`.
+- The site's one warning fires from the Supabase page store's first
+  `resolvePath`, once per store instance; a site that never locates (a
+  pure `q` reader) never warns, and a long-running server that was
+  current when it booted stays quiet — the admin notice is the real
+  signal.
+- A Deploying guide (nav lists it, unwritten) should show
+  `npx smoodly migrate --check` as a build step.
+
 ## Follow-ups (logged 2026-09-25, docs session)
 
 - `f.slug({ from })` stores `from` on the descriptor, but nothing reads it:
@@ -655,9 +746,15 @@ tool — reset and reseed a development database (`supabase db reset`,
   row; invites from the cloud's `/admin` (they are smoodly.io's); a
   project whose Auth is OAuth-only (the invite mail asks for a password);
   redirects on a published rename (the confirm says "there are none
-  yet"). The API Keys page's contents are DESIGN.md OQ #33.
+  yet").
+- 2026-09-26: the Role column is a badge and the row menu has Change role
+  (confirm, to the other role) and Remove member; `ActionMenu` popovers are
+  fixed-positioned from the button — the cell's overflow clipped them.
 - The members list is not paged (tens of rows, not thousands).
-- The `api-keys` page id is a URL segment; the title reads "API Keys".
+- The Roles and API Keys pages were dropped 2026-09-25 (DESIGN.md §2
+  "Settings"): Members is the only Settings page, the invite modal
+  describes the two roles, and `/settings/roles` and `/settings/api-keys`
+  are Not found.
 
 ## Follow-ups (logged 2026-09-13, history spec)
 
@@ -812,33 +909,109 @@ tool — reset and reseed a development database (`supabase db reset`,
   media projection puts the image on Media; Escape after a card's button
   had taken the focus did not end the session.
 
-## Follow-ups (logged 2026-09-08, admin restyle)
-
-- Remove the temporary `technical` look once the warm restyle is decided:
-  the `TECHNICAL_*` strings (frozen tokens plus the `_SHAPE`/`_EXTRA`
-  additions), the second `cascade` call and the boot script's
-  `smoodly-look` branch in `src/admin/ui/theme.tsx`. The original look
-  stays at tag `look-technical`; restore the file from there if the
-  restyle is dropped instead.
-- The technical block is a token snapshot, not a pixel restore: shared
-  class rules moved with the warm look, so under `data-look="technical"`
-  the inspector is flush cards with a hairline instead of one column with
-  a sticky head, tabs are stretched, inputs have a 1px (not 1.5px)
-  border, rail tiles are 42×34, and a few weights and gaps drifted. Exact
-  comparison is the tag.
-- Signed-in walk of the warm look still pending: the sign-in screen was
-  checked in the browser pane (light and dark), the list, entry form and
-  visual editor were not — the magic-link sign-in carries a token in the
-  URL, which the pane's policy blocks. Walk them, then tune: inspector
-  width (320px here, the handoff says 296px; the field widgets need the
-  room), the canvas meta bar (the handoff has none; ours holds the locale
-  switcher), and the block-toolbar note.
+## Follow-ups (logged 2026-09-25, neutral restyle + confirm dialog)
+
+- The warm look is the comparison block now (`WARM_*` + `WARM_EXTRA` in
+  `src/admin/ui/theme.tsx`, `localStorage.smoodly-look = "warm"`); the
+  technical block is deleted (tag `look-technical` keeps it). Remove the
+  warm block once the neutral look is judged, the same way.
+- Kept from the app on purpose, against the handoff: the 14px base and
+  18px titles (handoff 13/20/22), the 64px top bar (56), the 360px
+  inspector (296), the Lucide rail icons, the `--table-top` air above the
+  list, the 12px block-tag padding. Inputs stay white on focus (the
+  handoff's focused textarea takes the tile grey) and the locked outline
+  row is a white row like the rest (the handoff's is the ground, invisible
+  on a tile of the same grey).
+- The handoff's status chips collapse Draft into amber; the app keeps its
+  three states (Published green, Unpublished changes amber, Draft grey on
+  `--control-hover`).
+- The Pages list's prompts are dialogs on the same card since the same
+  day (`shell/PageDialogs.tsx` over `ui/Dialog.tsx`): New page / New
+  path / New subpage / New subpath (title, slug following the title
+  through `slugify` in `shell/page-dialogs.ts`, page type when more than
+  one open template), Add page here (page type; skipped with one), Rename
+  (title and slug; the home page's title alone). Still native: the
+  `window.alert`s on a refused list op outside a dialog (`run` in
+  PagesList, EntriesList's add/remove) — a notice banner is the follow-up.
+- `slugify` is the admin's first slugifier (title → segment); the slug
+  field widget (`f.slug`) does not use it yet, and neither does the entry
+  create-on-click. OQ 24 (unicode slugs) would relax its grammar.
+- The dialog's fields take the tile tone on the white card
+  (`.sm-dialog__form .sm-input`), the reverse of fields on tiles.
+- The confirm's copy lives at each call site (`title` / `body` /
+  `confirmLabel` / `subject`); the shared ones are `DISCARD_CONFIRM`
+  (`ui/confirm.ts`), `LEAVE_CONFIRM` (router) and `LIVE_URL_CONFIRM`
+  (live-url). A subject path is shown where the screen already holds it;
+  the entries list and the media screen show the name only.
+- `confirm()` without a mounted `<ConfirmHost/>` falls back to
+  `window.confirm` so nothing can hang; the host is mounted once in
+  `AdminApp` beside the shell. The tab-close guard stays native
+  (`beforeunload` cannot await).
 - The handoff's `Styles` tab in the inspector is not built: it exists
   only where a section registers styles, which is the existing `tabsFor`.
-- Wordmark and app icon colour: the wordmark now takes `--logo-color`
-  (accent in the warm look); the rail's app icon is hidden in the warm
-  look and still brand blue in the technical one. A warm app icon is a
-  design question.
+- The wordmark still takes `--logo-color` (accent); the rail's app icon
+  takes `--logo-outer` / `--logo-inner` and is hidden in the warm look.
+- Polish round the same evening (2026-09-25): list row rules are a
+  `.sm-row::after` pseudo-element, since a border follows the rounded
+  hover corners; the admin remembers ONE locale across lists and forms
+  (`shell/locale-memory.ts`, key `smoodly-locale`; the lists' two
+  session-only keys are gone, `localeFromUrl` falls back to it and
+  remembers what it resolved); the section insert picker opens upward
+  when the room below is short and scrolls inside the room it has
+  (`placePicker` in `editor/InsertPicker.tsx`, measured in a layout
+  effect, no window-resize listener); the prefixed slug input keeps a
+  22px line box so its caret reads as one; `.sm-input--mono` is scoped
+  under `.sm-admin` — the `input{font-family:inherit}` reset had beaten
+  it, so every mono input (slugs, IDs) had rendered in the sans font;
+  richtext block-node cards take `--rtcard-bg` / `--rtcard-border` (tile
+  grey with the soft accent border in the neutral look, white and
+  hairlined in the warm). The custom section's row cards and the list
+  field's rows keep the white-on-tile look — only the richtext cards sat
+  on a white field.
+- Richtext cards, second pass (2026-09-25): the default card border is
+  the hairline (`--rtcard-border:var(--line)`), the accent outline marks
+  the selected card alone, and the widget's focus ring steps back while a
+  block node is selected (`:focus:not(:has(.ProseMirror-selectednode))`).
+  The image card's head carries Edit / Replace / Remove as
+  `.sm-field__action` text buttons, the same three the media field now
+  shows in its field head (`MediaWidget` renders its own `Field`;
+  `FieldWidget` returns it directly, `SeoSettings` passes the label). Edit
+  on a richtext image is the crop editor over the node's `image` attr
+  (an `ImageValue`, so crop/hotspot/aspect store there). The bound
+  `smoodly/richtext` renderer applies it through `<SmoodlyImage>`; the
+  root `RichText`'s plain figure does NOT (it may not import the image
+  layer, `richtext-entry.test.ts`), so a framework-neutral renderer
+  (the Astro adapter, OQ 29) must frame it with `frameFor` itself. The
+  card shows the cropped frame (`forms/ImagePreview.tsx`, shared with the
+  media field), the filename and the caption as text; alt and caption are
+  edited in the crop modal (`CropEditor` takes `caption`), so the card
+  holds no inputs. Fields on a modal panel take the tile tone.
+- A refused publish's per-field errors clear as the fields are fixed
+  (2026-09-25): the entry and global forms revalidate on every change with
+  the op's own rules (`validateFields` / `validateNode` over
+  `elementSchemas(registry.elements)`) and keep only what still fails
+  (`stillFailing` in `validate.ts`); the notice's list shrinks and the
+  notice goes when it empties. Typing never adds an error — only a
+  publish does. The page editor's banner list and the canvas global
+  inspector (save errors) are unchanged.
+
+## Follow-ups (logged 2026-09-25, date pickers)
+
+- `f.date()` and `f.datetime()` share one in-house calendar
+  (`admin/forms/DatePicker.tsx` over the pure `date-picker.ts`); the
+  browsers' own pickers were rejected (they differ and take no tokens).
+  Weeks start on Monday and month names come from the browser's language
+  — `weekStart` and a month-name locale as config keys are follow-ups.
+- `defineConfig({ timeZone })` is validated by constructing an
+  `Intl.DateTimeFormat`, so an alias the runtime's database still knows
+  (`Europe/Kiev`) passes and an offset never does. Admin-owned site
+  settings (a per-space `settings` table with a Site page) were designed
+  and dropped for the zone; the design is in the spec's history should a
+  setting turn up that editors must change without a deploy.
+- Not built: a time-only field, a date range, `.min` / `.max` on dates.
+- Publish refuses a malformed date or datetime now (`validate.ts`); a
+  row saved before this with a bad string shows the message on its next
+  publish, as designed.
 
 ## Follow-ups (logged 2026-09-08, block nodes spec)
 
@@ -1031,7 +1204,8 @@ the toolbar instead of pushing the content.
 - ~~Drag-to-resize the inspector~~ — DONE 2026-09-10 (spec
   `docs/superpowers/specs/2026-09-10-inspector-resize-design.md`):
   `ui/ResizeHandle.tsx` writes `--inspector-w` inline on the wrapper,
-  clamped to 260px..half the row (`ui/resize.ts`), remembered under
+  clamped to 260px..the row less the handle and a 440px canvas (`ui/resize.ts`,
+  half the row until 2026-09-26), remembered under
   `smoodly-inspector-w` and applied by the theme's boot script. Walk
   finding: the desktop pane hides its tab on every `navigate`, and a
   hidden tab lays out at zero width, so the handle treats a zero
@@ -1363,10 +1537,10 @@ the toolbar instead of pushing the content.
   `page:<id>:<locale>` tag would halve the revalidations on a bilingual
   site.
 - The Pages list's confirms (`Add <locale>`, `Remove from <locale>`,
-  `Delete … in every language`) are `window.confirm`, and `EntriesList`
-  reports a refused add or remove with `window.alert`; the design
-  system's dialog is the follow-up for both, together with the row menu
-  extraction already logged above.
+  `Delete …`) are the design system's dialog since 2026-09-25;
+  `EntriesList` still reports a refused add or remove with
+  `window.alert` — the follow-up, together with the row menu extraction
+  already logged above.
 - `EditorView.tsx` is ~850 lines now that it also holds the locale switch,
   add and remove flows — see the 2026-09-03 follow-up below for the seams
   (that entry is the one to act on).
@@ -1479,13 +1653,13 @@ the toolbar instead of pushing the content.
   those values in `entry_locales.fields` until the next save of each
   locale (a save writes only the current split) — the drift/codemod
   pipeline (Phase 2) is where "keep en, discard fi" belongs.
-- The repo-root migration (`supabase/migrations/00000000000000_smoodly.sql`)
-  is generated by `packages/smoodly/scripts/emit-sql.ts` from that
-  script's OWN fixture collections, not from
-  `examples/site/smoodly/collections.ts`; the create-smoodly-app template
-  migration IS generated from the example. Since 2026-09-14 both emit the
-  same view shape for every collection, but the repo-root fixture's field
-  lists still drift from the example's — the two should share one source.
+- Resolved 2026-09-26 (schema migrations spec): the repo-root
+  `supabase/migrations/` is the package's core files plus a views file
+  that `npm run db:migrate` writes from
+  `examples/site/smoodly/collections.ts` — the same source the
+  create-smoodly-app templates use; `scripts/emit-sql.ts` and its own
+  fixture collections are gone (`scripts/emit-migration.ts` drafts the
+  next core file).
 - In the entry form, a shared ref field (e.g. an article's author) shows
   `—` in a locale where the target is absent, because the picker offers
   only targets present in the edited locale; the value is kept on the
@@ -1685,5 +1859,5 @@ the toolbar instead of pushing the content.
 - Editor canvas URL mapping: now `homePageSlug` config (done 2026-09-03); remaining follow-up is a registration-declared `path` for fixed pages at arbitrary paths.
 - `serialize.ts` structural cast duplicates `PageSchema`; tighten `Registered.schema` so the cast goes.
 - Catch-all `templates` map should filter to open registrations to state its intent (unreachable today).
-- The no-database build is the real proof that routes never prerender against the stores; the unit test only stubs `next/server`. Script it (`SUPABASE_URL=http://127.0.0.1:9 npx next build` in `examples/site`, expect `ƒ /`) and add it to CI, which today runs only the package's tests and typecheck — so a regression is caught when Next changes `connection()` semantics.
+- The no-database build is the real proof that routes never prerender against the stores; the unit test only stubs `next/server`. Script it (`SUPABASE_URL=http://127.0.0.1:9 npx next build` in `examples/site`, expect `ƒ /`) and add it to CI, which today runs only the package's tests and typecheck — so a regression is caught when Next changes `connection()` semantics. — Partly resolved 2026-09-26: the `browser` job builds the example site and drives it, but with a database; the no-database build is still unscripted.
 - `EditorView` split (autosave extracted 2026-09-03; the rest 2026-09-08, before the TipTap widget): `usePageLocale` (switch/add/remove, over `locale-url.ts`), `useCanvasBridge` (geometry, select/hover, `postToCanvas`, the geometry timeout), `CanvasOverlay` over `overlay-geometry.ts` (`plusButtonsFor`, pure and tested), `InsertPicker`, `Outline`, `NoticePane`. `EditorView.tsx` is ~660 lines of load, gestures, publish and layout. Remaining seam: the inspector's field form (`FieldWidget` rows plus the tabs) stays put until inline editing lands (DESIGN.md §3 puts TipTap in the canvas, not the sidebar). The ref-option loading became `forms/useRefOptions.ts` (2026-09-17). (logged 2026-09-06, updated 2026-09-08)

package/bin/smoodly.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+// `npx smoodly …` — resolves to the app's installed package, so the files
+// it copies belong to the version the app runs (spec 2026-09-26 §2).
+import { main } from "../dist/cli/main.js";
+
+process.exitCode = await main(process.argv.slice(2));

package/dist/admin/client-ops.js

@@ -4,6 +4,7 @@ const GROUPS = {
     globals: ["list", "get", "save", "setStatus", "discardDraft", "listVersions", "getVersion", "restore"],
     assets: ["list", "get", "beginUpload", "finishUpload", "update", "delete", "usage"],
     members: ["list", "me", "invite", "setRole", "remove"],
+    schema: ["status"],
     preview: ["enable", "disable"],
 };
 export function makeClientOps(action, token) {

package/dist/admin/editor/EditorView.js

@@ -27,6 +27,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //
 // Core code: no next/* imports live here — the bridge is the only piece
 // that knows about Next, and it ships to the site, not the admin.
+import { Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { CSS_KEY, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, globalNameOf } from "../../global.js";
 import { descriptorAt, getAtPath } from "../field-paths.js";
@@ -57,7 +58,14 @@ import { isFixedNode, localeStatusOf, sourceLocaleOf } from "../shell/pages-tree
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
 import { ResizeHandle } from "../ui/ResizeHandle.js";
 import { PublishControl } from "../ui/PublishControl.js";
+import { confirm, DISCARD_CONFIRM } from "../ui/confirm.js";
 import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
+import { draftToken } from "../../draft-token.js";
+import { isStale, staleInfoOf } from "../shell/stale.js";
+import { StaleBanner } from "../ui/StaleBanner.js";
+import { usePresence, usePresenceState, useSavedElsewhere, useTrackPresence } from "../shell/presence-context.js";
+import { editorsOf } from "../shell/presence.js";
+import { PresenceLine } from "../ui/PresenceLine.js";
 import { Banner as BannerBox, Breadcrumb, Button, FieldErrorList, IconButton, LinkButton, SaveIndicator, Tabs, TopBar, } from "../ui/primitives.js";
 export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-editor=1` : `${url}?smoodly-editor=1`);
 /** The site URL of a stored version — History's iframe (spec 2026-09-13 history §5); no editor parameter, so no bridge. */
@@ -65,6 +73,10 @@ export const withVersionParam = (url, versionId) => `${url}${url.includes("?") ?
 export function EditorView({ ops, registry, id }) {
     const adminHref = useAdminHref();
     const [record, setRecord] = useState(null);
+    const recordRef = useRef(record);
+    recordRef.current = record;
+    /** The guard's refusal (spec 2026-09-26 concurrency §4): the view freezes under the banner until Load their version. */
+    const [stale, setStale] = useState(null);
     const [tree, setTree] = useState(null);
     const [loadError, setLoadError] = useState(null);
     const [ready, setReady] = useState(false);
@@ -75,6 +87,8 @@ export function EditorView({ ops, registry, id }) {
     // The locales the parent exists in — "Add locale" offers only these.
     const [parentLocales, setParentLocales] = useState([]);
     const [selectedId, setSelectedId] = useState(null);
+    /** A reload after someone else's save (spec 2026-09-26 concurrency §5) keeps what is selected; every other reload clears it. */
+    const keepSelectionRef = useRef(false);
     const [hoverId, setHoverId] = useState(null);
     const [hoverField, setHoverField] = useState(null);
     const [revealReq, setRevealReq] = useState(null);
@@ -107,22 +121,29 @@ export function EditorView({ ops, registry, id }) {
     registryRef.current = registry;
     // The tree in memory belongs to the locale it was loaded for; a switch
     // flushes first (switchLocale), so the ref and the tree always agree.
-    const treeLocaleRef = useRef(localeFromUrl(registry));
+    // (Read once: localeFromUrl also remembers the locale.)
+    const [openedLocale] = useState(() => localeFromUrl(registry));
+    const treeLocaleRef = useRef(openedLocale);
+    /** The token of the row the tree belongs to — what every guarded op sends (spec 2026-09-26 concurrency §1). */
+    const token = () => { const row = recordRef.current?.locales[treeLocaleRef.current]; return row ? draftToken(row) : null; };
     // Every edit marks the draft dirty; a debounced saveDraft persists, with
     // retry on failure, and the bridge refreshes the iframe on the save ack —
     // now, or once an inline session ends (spec 2026-09-10 §7).
-    const { saveState, mark, flush } = useDraftAutosave({
+    const { saveState, mark, flush, reset } = useDraftAutosave({
         read: () => treeRef.current,
         persist: async (t) => {
             const target = treeLocaleRef.current;
-            const r = await ops.pages.saveDraft(id, target, t);
+            const r = await ops.pages.saveDraft(id, target, t, token());
             if (r.ok) {
-                // The badge and Publish follow each save without a re-get: saveDraft answers with the version id.
+                // The badge and Publish follow each save without a re-get: saveDraft answers with the version id and the new token.
                 setRecord((rec) => rec?.locales[target]
-                    ? { ...rec, locales: { ...rec.locales, [target]: { ...rec.locales[target], draftVersionId: r.data.versionId } } }
+                    ? { ...rec, locales: { ...rec.locales, [target]: { ...rec.locales[target], draftVersionId: r.data.versionId, draftSavedAt: r.data.draft?.savedAt ?? null } } }
                     : rec);
                 setDirty(false);
+                presence?.announce(pageTarget(target), r.data.draft?.savedAt ?? null);
             }
+            else if (isStale(r))
+                setStale(staleInfoOf(r));
             return r;
         },
         onSaved: () => inlineRef.current?.onSaved(),
@@ -130,7 +151,7 @@ export function EditorView({ ops, registry, id }) {
     // Edits to a global block go to the global entry through their own
     // autosave (spec 2026-09-13 §4); the save ack refreshes the canvas
     // through the same inline-session deferral as the page's.
-    const globalEdit = useGlobalEdit({ ops, onSaved: () => { setGlobalDirty(false); inlineRef.current?.onSaved(); } });
+    const globalEdit = useGlobalEdit({ ops, onSaved: (name) => { setGlobalDirty(false); inlineRef.current?.onSaved(); presence?.announce({ kind: "global", id: name, locale }, null); } });
     const patchGlobal = (name, path, value) => {
         globalEdit.patch(name, path, value);
         setGlobalDirty(true);
@@ -144,6 +165,12 @@ export function EditorView({ ops, registry, id }) {
         clearBanner: () => setBanner(null),
         reload: () => setReloadKey((k) => k + 1),
     });
+    // Presence (spec 2026-09-26 concurrency §5): tracked once the record exists, the others on it, every ack announced.
+    const target = record ? { kind: "page", id, locale } : null;
+    useTrackPresence(target);
+    const { others } = usePresenceState();
+    const presence = usePresence();
+    const pageTarget = (forLocale) => ({ kind: "page", id, locale: forLocale });
     // The URL that serves this page, per locale, from the store's paths
     // index — the label is the CMS path, the canvas and "View live" take
     // the site URL (href applied server-side by pages.get).
@@ -173,11 +200,18 @@ export function EditorView({ ops, registry, id }) {
             setReady(false);
             setTree(null);
             treeRef.current = null;
-            setSelectedId(null);
-            setHoverId(null);
+            const keepSelection = keepSelectionRef.current;
+            keepSelectionRef.current = false;
+            if (!keepSelection) {
+                setSelectedId(null);
+                setHoverId(null);
+            }
             setFolder(false);
             globalEdit.reset(); // a new locale or a reload is a new canvas; the switch flushed first
+            if (keepSelection && selectedItemName)
+                void globalEdit.load(selectedItemName, locale); // the kept selection is a global item: load it again
             setDirty(false);
+            setStale(null);
             setTouched(false);
             setGlobalDirty(false);
             setGlobalTouched(false);
@@ -346,6 +380,24 @@ export function EditorView({ ops, registry, id }) {
         if (globalEdit.loadError)
             setBanner({ text: globalEdit.loadError });
     }, [globalEdit.loadError]);
+    // A global item's autosave refused by the guard freezes the whole editor too (§4).
+    useEffect(() => {
+        if (globalEdit.stale)
+            setStale(globalEdit.stale);
+    }, [globalEdit.stale]);
+    /** Load their version (§4): drop the frozen state; the load effect resets the tree, the globals and the flags. */
+    const loadTheirs = () => { setStale(null); reset(); setReloadKey((k) => k + 1); };
+    // Someone else saved this page (§5): clean → their version silently; unsaved edits anywhere → the freeze at once.
+    useSavedElsewhere(target, (event) => {
+        if (stale)
+            return;
+        if (dirty || globalDirty || saveState !== "saved" || globalEdit.saveState !== "saved")
+            setStale({ by: event.email, at: Date.now() });
+        else {
+            keepSelectionRef.current = true;
+            setReloadKey((k) => k + 1);
+        }
+    });
     // Selecting from the outline must reveal the block. The canvas column is
     // the scroller now (the iframe has no scrollbar of its own — it is sized to
     // the full document), so scroll it to the rect the bridge reported.
@@ -499,12 +551,19 @@ export function EditorView({ ops, registry, id }) {
         mutate((t) => insertNode(t, zone, index, copy));
         select(copy.id);
     };
-    const doRemove = (id, confirm = true) => {
+    const doRemove = async (id, ask = true) => {
         if (!tree)
             return;
         if (policyOf(zoneOf(tree, id))?.kind === "locked")
             return;
-        if (confirm && !window.confirm("Delete this section?"))
+        const node = findNode(tree, id);
+        if (ask && !(await confirm({
+            title: "Delete this section?",
+            body: "It is removed from the page draft. Nothing changes on the live site until you publish.",
+            confirmLabel: "Delete section",
+            destructive: true,
+            subject: node ? { name: labelOf(node) } : undefined,
+        })))
             return;
         mutate((t) => removeNode(t, id));
         setSelectedId((current) => (current === id ? null : current));
@@ -530,7 +589,7 @@ export function EditorView({ ops, registry, id }) {
         }
         let result;
         try {
-            result = await ops.pages.publish(id, locale);
+            result = await ops.pages.publish(id, locale, token());
         }
         catch (e) {
             console.error(e);
@@ -541,16 +600,21 @@ export function EditorView({ ops, registry, id }) {
         setPageBusy(null);
         if (result.ok) {
             setRecord(result.data);
+            presence?.announce(pageTarget(locale), result.data.locales[locale]?.draftSavedAt ?? null);
             setPublished(true);
             setTimeout(() => setPublished(false), 1600);
         }
+        else if (isStale(result)) {
+            setStale(staleInfoOf(result));
+        }
         else {
             setBanner({ text: result.message, fields: result.fields });
         }
     };
     /** Discard (spec 2026-09-13 publish flow §4): confirm, flush so a late save cannot re-dirty the row, restore, reload the canvas. */
     const doDiscard = async () => {
-        if (!window.confirm("Discard your changes and restore the published version?"))
+        const row = record?.locales[locale];
+        if (!(await confirm({ ...DISCARD_CONFIRM, subject: row ? { name: row.title, path } : undefined })))
             return;
         setBanner(null);
         setPageBusy("discard");
@@ -561,17 +625,21 @@ export function EditorView({ ops, registry, id }) {
         }
         let result;
         try {
-            result = await ops.pages.discardDraft(id, locale);
+            result = await ops.pages.discardDraft(id, locale, token());
         }
         catch {
             result = { ok: false, code: "internal", message: "Couldn't reach the server." };
         }
         setPageBusy(null);
         if (!result.ok) {
-            setBanner({ text: result.message });
+            if (isStale(result))
+                setStale(staleInfoOf(result));
+            else
+                setBanner({ text: result.message });
             return;
         }
         setRecord(result.data);
+        presence?.announce(pageTarget(locale), result.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1); // the tree and the canvas come back from the store
     };
     /** Unpublish (§5): the locale goes off the site; the draft stays for a later Publish. */
@@ -619,16 +687,20 @@ export function EditorView({ ops, registry, id }) {
     const doRestore = async (versionId) => {
         let result;
         try {
-            result = await ops.pages.restore(id, locale, versionId);
+            result = await ops.pages.restore(id, locale, versionId, token());
         }
         catch {
             result = { ok: false, code: "internal", message: "Couldn't reach the server." };
         }
         if (!result.ok) {
-            setBanner({ text: result.message });
+            if (isStale(result))
+                setStale(staleInfoOf(result));
+            else
+                setBanner({ text: result.message });
             return false;
         }
         setRecord(result.data);
+        presence?.announce(pageTarget(locale), result.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1);
         return true;
     };
@@ -638,8 +710,8 @@ export function EditorView({ ops, registry, id }) {
         setGlobalBusy("publish");
         const r = await globalEdit.setStatus(name, "published");
         setGlobalBusy(null);
-        if (!r.ok)
-            setBanner({ text: r.message, fields: r.fields });
+        if (!r.ok && !isStale(r))
+            setBanner({ text: r.message, fields: r.fields }); // a stale refusal arrives through globalEdit.stale
     };
     const doUnpublishGlobal = async (name) => {
         setBanner(null);
@@ -650,7 +722,8 @@ export function EditorView({ ops, registry, id }) {
             setBanner({ text: r.message, fields: r.fields });
     };
     const doDiscardGlobal = async (name) => {
-        if (!window.confirm("Discard your changes and restore the published version?"))
+        const item = registry.globals.find((g) => g.name === name);
+        if (!(await confirm({ ...DISCARD_CONFIRM, subject: item ? { name: `${item.title} · global` } : undefined })))
             return;
         setBanner(null);
         setGlobalBusy("discard");
@@ -660,15 +733,19 @@ export function EditorView({ ops, registry, id }) {
             return;
         }
         let r;
+        const itemRow = globalEdit.items[name]?.record.locales[locale];
         try {
-            r = await ops.globals.discardDraft(name, locale);
+            r = await ops.globals.discardDraft(name, locale, itemRow ? draftToken(itemRow) : null);
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
         }
         setGlobalBusy(null);
         if (!r.ok) {
-            setBanner({ text: r.message });
+            if (isStale(r))
+                setStale(staleInfoOf(r));
+            else
+                setBanner({ text: r.message });
             return;
         }
         // The item reloads from the store; the canvas refreshes through the same path as a save ack.
@@ -752,7 +829,8 @@ export function EditorView({ ops, registry, id }) {
                                 trailing: registry.locales.supported.length > 1 && (_jsx(LocaleSwitcher, { registry: registry, present: record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale], parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => { void doAddLocale(l); } })),
                             },
                             { label },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { href: siteUrl, target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverGlobal: hoverGlobal, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), ready && (_jsx(LinkButton, { icon: true, href: siteUrl, target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), target && _jsx(PresenceLine, { names: editorsOf(others, target), noun: "page" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onClick: (e) => { if (e.target === e.currentTarget)
+                                    setSelectedId(null); }, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverGlobal: hoverGlobal, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
                                             const { session } = inline.richtext;
                                             const item = globalItemOf(session.node);
                                             const node = !item && tree ? findNode(tree, session.node) : null;