smoodly 0.0.24 → 0.0.25

package/README.md

@@ -495,6 +495,65 @@ 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, 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 +714,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 +877,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 +1172,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 +1505,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 +1621,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 +1827,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,6 +58,7 @@ 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 { 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`);
@@ -107,7 +109,9 @@ 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);
     // 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).
@@ -499,12 +503,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));
@@ -550,7 +561,8 @@ export function EditorView({ ops, registry, id }) {
     };
     /** 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");
@@ -650,7 +662,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");
@@ -752,7 +765,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(); } })] }) }), 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, 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;

package/dist/admin/editor/InsertPicker.d.ts

@@ -1,11 +1,25 @@
 import type { ZonePolicy } from "../../zones.ts";
 import type { AdminRegistry, AdminSection, AdminGlobal } from "../serialize.ts";
+/** Where the "+" put the panel: `y` is 12px under the button's centre (EditorView). */
 export type PickerAt = {
     zone: string;
     index: number;
     x: number;
     y: number;
 };
+export type PickerPlace = {
+    left: number;
+    top?: number;
+    bottom?: number;
+    maxHeight?: number;
+};
+/** Where the panel sits, given its natural height and the viewport: under the
+ *  anchor when it fits there, above it when that side has more room, and never
+ *  taller than the room on its side (the panel scrolls). Pure. */
+export declare function placePicker(at: PickerAt, height: number, viewport: {
+    width: number;
+    height: number;
+}): PickerPlace;
 export declare function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }: {
     at: PickerAt;
     policy: ZonePolicy | undefined;

package/dist/admin/editor/InsertPicker.js

@@ -1,20 +1,50 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// The insert picker a "+" opens: the sections the zone's policy allows,
+// then the Custom section where the zone allows it (spec 2026-09-14 §6),
+// then the global items that can be placed there, or a note that the
+// zone takes nothing. Clicking outside closes it. The panel hangs under
+// the "+" when it fits, opens upward when there is more room above, and
+// scrolls inside the room it has (2026-09-25) — a long section list near
+// the bottom of the window used to run off screen.
+import { useLayoutEffect, useRef, useState } from "react";
 import { allowedSections, allowedGlobals } from "../tree-ops.js";
 import { allowsCustom } from "../custom-section.js";
 import { SectionLabel } from "../ui/primitives.js";
-/** Keep the panel on screen; a static render (no window) leaves it where it was asked. */
-function clamp(at) {
+const PICKER_W = 300;
+const MARGIN = 12;
+/** From `y` back up to the panel's bottom edge when it opens upward: the 12px the
+ *  anchor sits under the button's centre, and the same 12px above it. */
+const ABOVE_GAP = 24;
+/** Where the panel sits, given its natural height and the viewport: under the
+ *  anchor when it fits there, above it when that side has more room, and never
+ *  taller than the room on its side (the panel scrolls). Pure. */
+export function placePicker(at, height, viewport) {
+    const left = Math.max(MARGIN, Math.min(at.x, viewport.width - PICKER_W - MARGIN));
+    const below = viewport.height - MARGIN - at.y;
+    const above = at.y - ABOVE_GAP - MARGIN;
+    if (height <= below || below >= above)
+        return { left, top: at.y, maxHeight: Math.max(below, 0) };
+    return { left, bottom: viewport.height - (at.y - ABOVE_GAP), maxHeight: above };
+}
+/** The first paint, before the panel is measured; a static render (no window) leaves it where it was asked. */
+function firstPlace(at) {
     if (typeof window === "undefined")
         return { left: at.x, top: at.y };
-    return {
-        left: Math.max(12, Math.min(at.x, window.innerWidth - 320)),
-        top: Math.min(at.y, Math.max(12, window.innerHeight - 240)),
-    };
+    return placePicker(at, 0, { width: window.innerWidth, height: window.innerHeight });
 }
 export function InsertPicker({ at, policy, registry, globalIds, onInsert, onInsertGlobal, onInsertCustom, onClose }) {
     const sections = allowedSections(policy, registry.sections);
     const globals = allowedGlobals(policy, registry.globals, globalIds);
     const custom = allowsCustom(policy);
-    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", ...clamp(at) }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: true, style: { padding: "8px 8px 4px" }, children: "Global" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
+    const panel = useRef(null);
+    const [place, setPlace] = useState(() => firstPlace(at));
+    // Measure the panel's full height (scrollHeight ignores a max-height already set), then place it.
+    useLayoutEffect(() => {
+        const el = panel.current;
+        if (!el)
+            return;
+        setPlace(placePicker(at, el.scrollHeight + 2, { width: window.innerWidth, height: window.innerHeight }));
+    }, [at]);
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { ref: panel, className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", overflowY: "auto", ...place }, children: [_jsxs(SectionLabel, { caps: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Site" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
 }

package/dist/admin/editor/InspectorFields.js

@@ -17,6 +17,6 @@ export function InspectorFields({ groups, values, render }) {
             const entries = visibleEntries(g.entries, values);
             if (entries.length === 0)
                 return null;
-            return (_jsxs("div", { className: "sm-inspector__group", children: [g.title && _jsx(SectionLabel, { mono: true, children: g.title }), entries.map((e) => render(e, { emptyLabel: e.ns === "styles" ? "Default" : undefined, scope }))] }, g.title ?? i));
+            return (_jsxs("div", { className: "sm-inspector__group", children: [g.title && _jsx(SectionLabel, { caps: true, children: g.title }), entries.map((e) => render(e, { emptyLabel: e.ns === "styles" ? "Default" : undefined, scope }))] }, g.title ?? i));
         }) }));
 }

package/dist/admin/editor/Outline.js

@@ -10,6 +10,6 @@ function OutlineZone({ zone, locked, canTake, nodes, selectedId, onSelect, onAdd
         count: locked ? 0 : nodes.length,
         onDrop: (from, to) => onMoveTo(nodes[from].node.id, to),
     });
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { mono: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
-                    onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { className: "sm-outline-row__add", children: "+ Add" })] })), locked && nodes.map(({ node, label }) => (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { className: "sm-outline-row__note", children: "Locked" })] }, node.id))), !locked && nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, style: { display: "flex", flexDirection: "column", gap: 4 }, children: nodes.map(({ node, label }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] }, node.id))) }))] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [_jsxs(SectionLabel, { caps: true, children: [zone, locked && " · locked"] }), nodes.length === 0 && (_jsxs("div", { className: cx("sm-outline-row", "sm-outline-row--empty", canTake && "sm-outline-row--clickable"), onClick: () => { if (canTake)
+                    onAddFirst(zone); }, children: [_jsx("span", { className: "sm-outline-row__label", children: "Empty" }), canTake && _jsx("span", { className: "sm-outline-row__add", children: "+ Add" })] })), locked && nodes.map(({ node, label }) => (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", "data-testid": "outline-row", onClick: () => onSelect(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: label }), _jsx("span", { className: "sm-outline-row__note", children: "Locked" })] }, node.id))), !locked && nodes.length > 0 && (_jsx("div", { ref: sortable.containerRef, style: { display: "flex", flexDirection: "column", gap: 4 }, children: nodes.map(({ node, label }, i) => (_jsxs("div", { onClick: () => onSelect(node.id), style: sortable.rowStyle(i), "data-testid": "outline-row", className: cx("sm-outline-row", "sm-outline-row--clickable", "sm-outline-row--grip", node.id === selectedId && "sm-outline-row--selected", sortable.rowClass(i)), children: [_jsx(Grip, { ...sortable.handleProps(i) }), _jsx("span", { className: "sm-outline-row__label", children: label }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); onRemove(node.id); }, children: "\u00D7" })] }, node.id))) }))] }));
 }

package/dist/admin/editor/PageSettings.js

@@ -32,7 +32,7 @@ export function PageSettings({ record, locale, registry, path, fixed, onRename }
             return;
         }
         // A published slug is a live URL: one confirm, Cancel restores the input (members management §5).
-        if (key === "slug" && !confirmLiveUrl({ status: row.status, from: row.slug, to: next })) {
+        if (key === "slug" && !(await confirmLiveUrl({ status: row.status, from: row.slug, to: next }, { name: row.title, path }))) {
             setDraft((d) => ({ ...d, slug: row.slug }));
             return;
         }

package/dist/admin/editor/SeoSettings.js

@@ -11,5 +11,5 @@ function Counter({ n, max }) {
 export function SeoSettings({ meta, onPatch }) {
     const title = str(meta.title);
     const description = str(meta.description);
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Title", counter: _jsx(Counter, { n: title.length, max: SEO_TITLE_MAX }), hint: "Used in search results and link previews. Empty: the page title.", children: _jsx("input", { className: "sm-input", value: title, onChange: (e) => onPatch("title", e.target.value) }) }), _jsx(Field, { label: "Description", counter: _jsx(Counter, { n: description.length, max: SEO_DESCRIPTION_MAX }), children: _jsx("textarea", { className: "sm-textarea", rows: 3, value: description, onChange: (e) => onPatch("description", e.target.value) }) }), _jsx(Field, { label: "Social image", hint: "1200\u00D7630 recommended", asDiv: true, children: _jsx(MediaWidget, { descriptor: { type: "image" }, value: meta.ogImage, onChange: (v) => onPatch("ogImage", v) }) }), _jsx(Field, { label: "Hide from search engines", asDiv: true, children: _jsx(Switch, { checked: meta.noindex === true, onChange: (v) => onPatch("noindex", v), label: "Hide from search engines" }) })] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Title", counter: _jsx(Counter, { n: title.length, max: SEO_TITLE_MAX }), hint: "Used in search results and link previews. Empty: the page title.", children: _jsx("input", { className: "sm-input", value: title, onChange: (e) => onPatch("title", e.target.value) }) }), _jsx(Field, { label: "Description", counter: _jsx(Counter, { n: description.length, max: SEO_DESCRIPTION_MAX }), children: _jsx("textarea", { className: "sm-textarea", rows: 3, value: description, onChange: (e) => onPatch("description", e.target.value) }) }), _jsx(MediaWidget, { descriptor: { type: "image" }, value: meta.ogImage, onChange: (v) => onPatch("ogImage", v), label: "Social image", hint: "1200\u00D7630 recommended" }), _jsx(Field, { label: "Hide from search engines", asDiv: true, children: _jsx(Switch, { checked: meta.noindex === true, onChange: (v) => onPatch("noindex", v), label: "Hide from search engines" }) })] }));
 }

package/dist/admin/editor/locale-url.d.ts

@@ -1,12 +1,15 @@
 import type { AdminRegistry } from "../serialize.ts";
 type Locales = AdminRegistry["locales"];
-/** A supported ?locale from the query string, else the default. */
-export declare function localeFromSearch(search: string, locales: Locales): string;
+/** A supported ?locale from the query string, else the fallback (the default). */
+export declare function localeFromSearch(search: string, locales: Locales, fallback?: string): string;
 /** The same URL pointed at a locale, keeping the rest of the query
  *  string — a bare `?locale=…` would drop every other param. */
 export declare function withLocale(href: string, next: string): string;
+/** The URL's locale, else the remembered one, else the default — and
+ *  remembered from here on. Read once per screen, not per render. */
 export declare function localeFromUrl(registry: AdminRegistry): string;
-/** Point the current URL at a locale in place. A replace, so the router
- *  never asks the leave guard — the form's own confirm covers a switch. */
+/** Point the current URL at a locale in place, remembering it. A replace,
+ *  so the router never asks the leave guard — the form's own confirm
+ *  covers a switch. */
 export declare function writeLocaleToUrl(next: string): void;
 export {};

package/dist/admin/editor/locale-url.js

@@ -1,8 +1,9 @@
 import { navigate } from "../shell/router.js";
-/** A supported ?locale from the query string, else the default. */
-export function localeFromSearch(search, locales) {
+import { rememberLocale, rememberedLocale } from "../shell/locale-memory.js";
+/** A supported ?locale from the query string, else the fallback (the default). */
+export function localeFromSearch(search, locales, fallback = locales.default) {
     const l = new URLSearchParams(search).get("locale");
-    return l && locales.supported.includes(l) ? l : locales.default;
+    return l && locales.supported.includes(l) ? l : fallback;
 }
 /** The same URL pointed at a locale, keeping the rest of the query
  *  string — a bare `?locale=…` would drop every other param. */
@@ -11,20 +12,26 @@ export function withLocale(href, next) {
     u.searchParams.set("locale", next);
     return u.toString();
 }
+/** The URL's locale, else the remembered one, else the default — and
+ *  remembered from here on. Read once per screen, not per render. */
 export function localeFromUrl(registry) {
     try {
-        return localeFromSearch(window.location.search, registry.locales);
+        const locale = localeFromSearch(window.location.search, registry.locales, rememberedLocale(registry.locales));
+        rememberLocale(locale);
+        return locale;
     }
     catch {
         // no window — the default is fine
         return registry.locales.default;
     }
 }
-/** Point the current URL at a locale in place. A replace, so the router
- *  never asks the leave guard — the form's own confirm covers a switch. */
+/** Point the current URL at a locale in place, remembering it. A replace,
+ *  so the router never asks the leave guard — the form's own confirm
+ *  covers a switch. */
 export function writeLocaleToUrl(next) {
+    rememberLocale(next);
     try {
-        navigate(withLocale(window.location.href, next), { replace: true });
+        void navigate(withLocale(window.location.href, next), { replace: true });
     }
     catch {
         // no window (or no history) — the URL is cosmetic here

package/dist/admin/editor/usePageLocale.js

@@ -5,6 +5,7 @@
 import { useState } from "react";
 import { sourceLocaleOf } from "../shell/pages-tree.js";
 import { localeFromUrl, writeLocaleToUrl } from "./locale-url.js";
+import { confirm } from "../ui/confirm.js";
 export function usePageLocale({ registry, ops, id, record, setRecord, flush, fail, clearBanner, reload }) {
     const [locale, setLocale] = useState(() => localeFromUrl(registry));
     const [adding, setAdding] = useState(false);
@@ -59,7 +60,14 @@ export function usePageLocale({ registry, ops, id, record, setRecord, flush, fai
         const remaining = Object.keys(record.locales).filter((l) => l !== locale);
         if (remaining.length === 0)
             return;
-        if (!window.confirm(`Remove this page from ${locale}? Its ${locale} content and history are deleted.`))
+        const ok = await confirm({
+            title: `Remove this page from ${locale}?`,
+            body: `Its ${locale} content and history are deleted. Other languages are not affected.`,
+            confirmLabel: `Remove from ${locale}`,
+            destructive: true,
+            subject: { name: record.locales[locale]?.title ?? id },
+        });
+        if (!ok)
             return;
         // Let a pending save land before the row goes, so no save races the
         // delete — and if it cannot land, stop: a retry mid-flight would