smoodly 0.0.23 → 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:
@@ -640,17 +699,30 @@ tool — reset and reseed a development database (`supabase db reset`,
   `alter table "space_caps" rename to "spaces";`
   `alter table "spaces" alter column "row_cap" drop not null;`
   `alter table "spaces" add column "console_url" text;`
+  `update "members" set "role" = 'admin' where "role" = 'owner';`
   then re-run the regenerated migration's `smoodly_space_row_cap` function
   and the `smoodly_read` policy on `spaces` (both `create or replace` /
   `drop … if exists`, so the whole migration file can be re-applied).
   Policies and triggers follow a table rename. Rows written before the
   column show their user id on the Members page until re-inserted (the
   demo-editor upsert fills it on the next seed).
-- The Members page is read-only; adding, re-roling and removing members
-  in self-host, the role vocabulary and its enforcement at the gate, and
-  the API Keys page's contents are DESIGN.md OQ #33.
+- Members management shipped 2026-09-25 (spec
+  `docs/superpowers/specs/2026-09-25-members-management-design.md`); out
+  of its scope: a pending-invite status and "resend invite" on a row
+  (needs the Auth user's `last_sign_in_at`, which the cloud projection
+  does not carry); removing the Auth account together with the member
+  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").
+- 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)
 
@@ -805,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)
 
@@ -1024,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
@@ -1356,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).
@@ -1472,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
@@ -1664,7 +1813,7 @@ the toolbar instead of pushing the content.
 - Add an index on `pages(published_version_id)`: the `page_versions` read policy's `exists` probe runs on every anon/read-key read and has no supporting index.
 - A malformed `space_id`/`key_id` claim raises `22P02` inside the policy: fails closed but surfaces as a 500. Only reachable from a validly-signed key, so it is a cloud key-minting guard, not a request-path one.
 - Authorization trusts the JWT claims alone; `smoodly_space_key_revoked()` checks only `revoked_at`. When cloud key-minting exists, make it a full key check (the claims must match the `space_keys` row).
-- `isEditor` and `SupabaseMemberStore` read `members` (and `spaces`) with no space filter: under a cloud write key RLS scopes it, but a service-role client bypasses RLS and would admit an editor of any space. Harmless in self-host (one space); never use a service-role client against the shared content project.
+- `memberOf` and `SupabaseMemberStore` read `members` (and `spaces`) with no space filter: under a cloud write key RLS scopes it, but a service-role client bypasses RLS and would admit an editor of any space. Harmless in self-host (one space); never use a service-role client against the shared content project.
 - The `sb_secret_` branch of `clientOptions` (secret key as the sole `apikey`, no bearer) was exercised live on 2026-09-05 against a hosted project: PostgREST reads with the service-role template and the GoTrue admin API (`listUsers`, `createUser`) both accept it; a password sign-in with the matching `sb_publishable_` key returns a session. Unit tests still cover the shape only; the local stack stays on legacy JWT keys.
 - The migration is not re-appliable to a pre-rename (`project_id`) database: `create table if not exists` leaves it untouched and the `space_id` policies then fail. No installs predate the rename; fold into DESIGN.md OQ #2 (schema upgrades).
 - `examples/site/smoodly/server.ts` should carry `import "server-only"` now that it also exports `publicAuth` — a client-side import would fail loudly at build instead of at runtime.
@@ -1678,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/auth.d.ts

@@ -1,13 +1,18 @@
+import { type MemberRole } from "../permissions.ts";
 import type { AdminOpCall, OpResult } from "./ops.ts";
-/** The verified editor: the Auth user id and the email the locale rows record as `updated_by` (spec 2026-09-13 history §2). */
-export type AdminSession = {
+/** What the auth project vouches for: the Auth user id and the email the locale rows record as `updated_by` (spec 2026-09-13 history §2). */
+export type VerifiedUser = {
     userId: string;
     email: string | null;
 };
+/** The verified member: the user plus the normalized role from `members`. */
+export type AdminSession = VerifiedUser & {
+    role: MemberRole;
+};
 export type AdminAuth = {
     /** The user behind a session token, or null when the auth project rejects it. */
-    verify(token: string): Promise<AdminSession | null>;
-    /** Does `editors` hold this user for the current space? */
-    isEditor(userId: string): Promise<boolean>;
+    verify(token: string): Promise<VerifiedUser | null>;
+    /** The stored role of this user in `members` for the current space, or null without a row. */
+    memberOf(userId: string): Promise<string | null>;
 };
 export declare function gateAdminOp(auth: AdminAuth, call: AdminOpCall, run: (call: AdminOpCall, session: AdminSession) => Promise<OpResult<unknown>>): Promise<OpResult<unknown>>;

package/dist/admin/auth.js

@@ -1,3 +1,9 @@
+// Admission to the admin (spec 2026-09-04 §5; roles 2026-09-25 members
+// management §2): a session token from the auth project, then a row in
+// `members` read with the write key, whose role rides on the session.
+// One gate around the ops seam — individual ops ask can(). Framework-
+// free; Supabase-backed implementation in supabase-auth.ts.
+import { normalizeRole } from "../permissions.js";
 const unauthorized = (message) => ({ ok: false, code: "unauthorized", message });
 export async function gateAdminOp(auth, call, run) {
     const token = typeof call === "object" && call !== null && typeof call.token === "string"
@@ -5,24 +11,19 @@ export async function gateAdminOp(auth, call, run) {
         : null;
     if (!token)
         return unauthorized("smoodly: sign in to use the admin.");
-    let session;
-    let editor;
+    let user;
+    let stored;
     try {
-        session = await auth.verify(token);
-        if (!session)
+        user = await auth.verify(token);
+        if (!user)
             return unauthorized("smoodly: your session has expired — sign in again.");
-        editor = await auth.isEditor(session.userId);
+        stored = await auth.memberOf(user.userId);
     }
     catch (e) {
         console.error("smoodly: auth check failed", e);
-        return {
-            ok: false,
-            code: "internal",
-            message: "smoodly: could not check your session.",
-        };
+        return { ok: false, code: "internal", message: "smoodly: could not check your session." };
     }
-    if (!editor) {
+    if (stored === null)
         return unauthorized("smoodly: this account is not an editor of this site.");
-    }
-    return run(call, session);
+    return run(call, { ...user, role: normalizeRole(stored) });
 }

package/dist/admin/client-ops.js

@@ -3,7 +3,8 @@ const GROUPS = {
     entries: ["list", "distinct", "get", "create", "save", "setStatus", "discardDraft", "delete", "move", "addLocale", "removeLocale", "listVersions", "getVersion", "restore"],
     globals: ["list", "get", "save", "setStatus", "discardDraft", "listVersions", "getVersion", "restore"],
     assets: ["list", "get", "beginUpload", "finishUpload", "update", "delete", "usage"],
-    members: ["list"],
+    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))) }))] }));
 }