smoodly 0.0.7 → 0.0.9

package/README.md

@@ -174,8 +174,9 @@ Implemented:
   for self-host: the anon key now reads published rows straight off the
   base tables (`pages` and `entries` published in any locale, a published
   `page_locales`/`entry_locales` row, the `page_versions`/`entry_versions`
-  row a published locale points at, `global_sections`), not only through
-  the generated views.
+  row a published locale points at — shared content included, since it
+  is stored as entries, spec 2026-09-07), not only through the generated
+  views.
 
 - Admin login: `supabaseAdminAuth` + `gateAdminOp` around the ops seam;
   `LoginView` + `useAdminSession` in the shell; `createSmoodlyAdmin({ auth })`.
@@ -301,8 +302,40 @@ Implemented:
   the only way the node gets there — it also covers pages that existed
   before a locked zone was added to their schema.
 
-Not yet: richtext components (TipTap; `plainToRichtext`/
-`richtextToPlain` exist but no rich editor widget), drag-and-drop
+- Shared content (spec 2026-09-07): `smoodly.shared({ name, title, section })`
+  registers a visual item, `smoodly.shared({ name, title, fields })` an
+  object item; one registration materializes as a singleton entry in
+  every supported locale. `site.getShared(item, { locale })` and the Next
+  glue's `getSmoodlyShared(item, { locale })` fetch it code-side; the
+  editor places a visual item in a zone from the "+" picker as a linked
+  `{ type: "shared", fields: { item, ref } }` node the resolve pass
+  rewrites into the section, and `z.locked(footer)` binds a zone to one.
+  Edited on its own admin page under Shared content (`/admin/shared/<name>`),
+  with "used on N pages" from `refs`. Wired through the `shared` option
+  on the entry store and the site layer.
+
+- Lists and editable objects (spec 2026-09-07 list field): `f.list(item)`
+  holds any builder but another list and refuses a ref or `.localized()`
+  anywhere inside (refs are top-level only; localization is whole-value on
+  a list or object). `.min`/`.max` count items. The admin edits an object
+  as an indented fieldset and a list as rows — summary, collapse, move up
+  and down, remove, "N of max", Add disabled at max — recursively through
+  `FieldWidget`, with the row logic as pure functions in `admin/forms/list.ts`.
+  `validateFields` recurses with dotted paths (`points.2.heading`) and
+  checks list length; the serializer ships a list's `item`.
+
+- Richtext renders and round-trips: `RichText` (package root, pure React,
+  no wrapper) turns the TipTap document into paragraphs, headings, lists,
+  blockquotes, hard breaks and bold/italic/link marks, unknown nodes
+  degrading to their children. The interim textarea widget speaks a line
+  syntax (`#` headings, `- ` and `1. ` lists, `> ` quotes, blank line
+  between paragraphs, hard break between adjacent lines) over the same
+  JSON, so seeded structure survives an edit.
+  A link mark reaches the page only with a safe scheme (http(s), mailto,
+  tel, site-relative).
+
+Not yet: the TipTap richtext widget (the textarea's line syntax is the
+interim editor; `RichText` renders), Elements in richtext, drag-and-drop
 reordering (move-up/move-down buttons in the editor, Move up / Move down
 in the Pages list's row menu), undo/redo, sample/placeholder content
 marking, per-locale section visibility conditions (OQ #3 — each locale
@@ -323,6 +356,193 @@ Both packages move together. From the repo root:
 `examples/site` in that build, so the template always matches the example
 site at the tagged commit.
 
+## Follow-ups (logged 2026-09-07, starter)
+
+- A paired component (`smoodly.section`) accepts only its schema's props, so
+  a layout cannot hand the footer the contact item or the header the locale
+  links through the paired `Footer`/`Header`; the starter's layouts render
+  `FooterView`/`HeaderView` directly with the extra prop. A supported way
+  to pass layout-only props through a paired component (or a `children`
+  slot) would let the layouts use the registered component.
+- Page views and entry pages receive no `locale`; the starter's views get
+  it from the app's strings seam (`next-intl`'s `getLocale`, or a constant
+  in the single-language scaffold). Adding `locale` to `PageContext` and
+  `EntryPageProps` would remove that dependency and let sections that
+  format dates stay synchronous.
+- The content API is published-only, so the Articles index in the editor
+  canvas lists published articles while the hero above it is the draft.
+  A draft-aware `getEntries` for draft mode is the fix if that confuses.
+- The image widget edits the URL only; `alt` is set by the seed and cannot
+  be changed in the admin.
+- A per-locale collection path or fixed slug must name the default locale;
+  the installer rewrites the starter's two lines to name exactly the
+  chosen locales (`articlesSegments` in `scaffold.ts`), since a path
+  claiming a locale the site lacks fails the index-page rule at config
+  load. A "fall back to the first declared segment" rule in
+  `defineConfig` would make the patch unnecessary.
+- The picker offers a shared item only in zones whose allow list includes
+  its section (`allowedShared` in `admin/tree-ops.ts`), so a shared item's
+  section is always also offered as an ordinary section. A "placeable
+  only" mode (a shared item whose section no zone lists) would let the
+  starter keep the quote shared-only.
+- Registry names are one namespace across sections, elements, collections
+  and page shapes (`assertUniqueNames`); the starter names its People
+  section `peopleSection` and its Articles page `articlesIndex` to stay
+  clear of the collections. Namespacing by kind would let a section and a
+  collection share a name.
+- The seed's early exit probes `/` alone, and `createPage` writes the path
+  row before the tree is published, so a crash between the home record and
+  the last page leaves a database every later run reports as "already
+  seeded"; recovery is `supabase db reset`. A probe on the last thing the
+  seed writes, or a per-step check, would make it resumable.
+- With `fi` as the default locale the seed writes the English content into
+  `fi`. Before this fix the index page was seeded at `posts`
+  while the collection's `fi` path is `artikkelit`, so `ensureFixedNodes`
+  materialized a second, empty Articles page at `artikkelit` and the
+  links pointed at `/posts`; the seed now derives the segment from the
+  collection's `path` per locale. Left: the starter's copy in a `fi`
+  default is still English.
+- Config-level section style defaults (`styles.sections` in `defineConfig`)
+  are not filled at render: a node saved without an explicit style emits
+  no `data-spacing`/`data-tone`, so a stylesheet cannot key the default
+  on the attribute. The starter pads body sections by element instead.
+  Filling the resolved defaults in the render pass (as the admin form
+  does) would make the attributes reliable (walk, 2026-09-07).
+- A new list item's `select` subfield shows the first option but stores
+  nothing (`emptyValue` leaves it undefined), so publish fails with
+  `points.3.icon: Required` until the editor re-picks the value that is
+  already on screen. Seed the first option, or render a blank option so
+  the screen matches the value (walk, 2026-09-07).
+- Publish validates the last saved draft, so a click inside the autosave
+  debounce reports fields the editor has just filled as `Required`. Flush
+  the pending save before validating, or disable Publish while a save is
+  pending (walk, 2026-09-07).
+- The entry form cannot republish a published entry's newer draft: Save
+  writes a new draft version, the status control's `setPublished` returns
+  early when the status is unchanged, and nothing shows that the draft
+  differs from the published version. The workaround unpublishes and
+  republishes, which 404s the entry in between. Needs a "Publish changes"
+  action and a draft-edits indicator like the page editor's (walk,
+  2026-09-07).
+- Versions accumulate (`entry_versions` grew to four rows after one edit)
+  but no admin screen lists or restores them (walk, 2026-09-07).
+- A list row's collapsed summary shows the item's first string subfield —
+  the header nav rows read `/`, `/posts` — where the label would identify
+  the row; `itemSummary` could prefer a `label`/`title`/`heading` key
+  (walk, 2026-09-07).
+- New page / New folder ask for the slug through `window.prompt`, which
+  browser automation blocks and which cannot validate as you type; an
+  inline field would do both (walk, 2026-09-07).
+
+## Follow-ups (logged 2026-09-07, list field spec)
+
+- Saving the interim richtext textarea drops marks (bold, italic, link);
+  flattens a hard break inside a heading, list item or blockquote line to a
+  space (a prefixed line cannot carry one, DESIGN.md §3 Richtext); and drops
+  anything the line syntax cannot express at all — nested lists,
+  multi-paragraph list items (joined with a space instead), and unknown
+  nodes such as a horizontal rule. All of it goes away with the TipTap
+  widget.
+- Refs inside lists and objects are refused at build time (`f.list`,
+  `f.object`). A list of objects each holding a ref (a featured entry with
+  its own caption) needs the resolver, the refs index and the admin's
+  ref-option loading to address nested paths; add when a site asks.
+- Heading levels 4–6 render but the line syntax writes `####`…`######`
+  for them; the spec names 1–3 as the supported set.
+- `emptyValue` for an `image`/`video`/`file` item is `undefined`, so a new
+  media row starts empty; a required image item is then a validation
+  error until filled, which is the intended nudge but reads as an error
+  on a row the editor just added.
+- `RichText` drops the anchor of a link mark whose href is not http(s),
+  mailto, tel or site-relative (`/`, `#`, `?`, `.`). The href is normalised
+  the way URL parsers do (tab, LF and CR removed) before the scheme test;
+  `javascript:`, `data:`, protocol-relative `//host` and the backslash form
+  `/\host` are rejected. The admin's link field does not validate on input yet.
+- The list widget has no test for an object item holding a nested list
+  subfield.
+- A list item's subtree still uses the row index as its React key, so a list
+  of objects each holding a list hands the inner rows another item's collapse
+  state when an outer row moves; fix with a stable per-item key when nested
+  lists get real use.
+
+## Follow-ups (logged 2026-09-07, shared content spec)
+
+- `f.shared(() => item)` — a ref field on a section that renders a shared
+  item inside the section's own markup (spec 2026-09-07 decision 3).
+- Instance mode: a shared *type* with many editor-created items; today
+  the answer is a collection plus a section with `f.ref` (decision 1).
+- Zone-shaped shared items (`smoodly.shared({ zone })`) (decision 2).
+- Standalone live preview on a visual item's admin page — needs a
+  preview route in the glue; the page canvas shows placements today (§6).
+- Built-in meta on shared items and on placements (anchor per placement
+  is the likely shape).
+- Per-placement overrides (a shared band with a per-page heading) — out
+  of scope; use a normal section with `f.ref` fields.
+- `fillLockedZones` for a zone bound to a shared item waits for
+  `ops.shared.list()`; a page opened before that resolves fills on the
+  next effect run. Not seen in the walk — the example binds no zone, so
+  the path was never exercised — but a double fill is unreachable by
+  construction: the effect depends on `sharedIds`, `record`, `mutate` and
+  `tree === null`, and `fillLockedZones` only touches EMPTY zones.
+  `z.locked(item)` still has no example usage.
+- `SharedForm` lists linking pages by id; a title needs `ops.pages.get`
+  per page (or a usage op returning titles).
+- `getSmoodlyShared` reads the store per request in draft mode and once
+  per (item, locale) otherwise; a layout calling it for several items
+  makes one round trip each — batch if it shows.
+- A shared item's row id is now uuid v5 of (space, name), so the primary
+  key ends the materialization race — but only for rows created from now
+  on: an item materialized before this change keeps its random
+  `gen_random_uuid()` id, and a second load would still be able to insert
+  a duplicate beside it. Re-materializing such an item (delete the row in
+  SQL, reload the admin) moves it onto the derived id.
+- `SharedForm.tsx` is a near-verbatim fork of `EntryForm.tsx`
+  (`localeFromUrl`, `writeLocaleToUrl`, `applyResult`, `InfoRow`, the
+  ref-options effect) and `SharedList.tsx` is the third copy of the
+  remembered-locale block (`EntriesList`, `PagesList`); extract
+  `shell/locale-url.ts` and a `useFormLocale` hook when the next form
+  arrives.
+- A placement selected in a bound locked zone shows the canvas toolbar's
+  "fields only" label though a placement has no page-level fields; the
+  inspector notice is the real message.
+- A zone whose policy allows a shared item's section also offers that
+  section as an ordinary block, so the picker lists e.g. Testimonials
+  twice (once under Shared); decide whether a section used by a shared
+  item should be hidden from the ordinary list.
+- A placement of an object item or an unregistered item gates the page's
+  publish (the refs edge is emitted without a registry lookup) yet never
+  renders; only a hand-edited tree can produce one.
+- `ops.shared.get` runs `ensureSharedItems` and then lists the item
+  again; one round trip could go.
+- The example's Testimonials `quotes` richtext is required, so the first
+  admin save of the seeded band asks for it; make it optional or seed it.
+- `CollectionSchema.kind` was widened to carry `"shared"`, so a
+  `SharedSchema` typechecks where `registry.collections` is expected;
+  `defineConfig` should throw on a `kind === "shared"` entry listed there.
+- `ensureSharedItems` runs on every `ops.shared.list()` — which is every
+  editor mount, not only the Shared content page — costing one
+  `entries.list` per registration per open.
+- `fanOut` resolves every shared registration's row id (one
+  `entries.list` each) on every entry write, so it can expire
+  `shared:<name>` when something the item references changes; a row-id
+  cache would remove the reads but has to survive materialization.
+- Because `fanOut` lists every shared registration, an entry store built
+  without `options.shared` now fails on every ordinary entry write with
+  "no collection named", not only on `ops.shared.*`; both scaffolds pass
+  the same `shared` array to the store and the config, so this bites only
+  a hand-wired app.
+- `ops.entries.move` expires entry tags directly and does not `fanOut`,
+  so a reorder that changes what a shared item's `refList` renders does
+  not expire `shared:<name>`.
+- The package root (`src/index.ts`) must stay free of Node builtins:
+  every scaffolded section does `import { f, smoodly } from "smoodly"`,
+  and a `"use client"` section's browser build would fail on one.
+  `sharedEntryId` (`src/shared-id.ts`) moved off `node:crypto` onto Web
+  Crypto for this reason (fix pass, 2026-09-07). Nothing tests the
+  invariant itself — a future addition that reaches for `node:fs`,
+  `node:crypto`, etc. from a module reachable through the root would
+  regress it silently.
+
 ## Follow-ups (logged 2026-09-06)
 
 - Drag-and-drop in the Pages list — the ops it needs exist

package/dist/admin/client-ops.js

@@ -1,6 +1,7 @@
 const GROUPS = {
     pages: ["list", "get", "create", "saveDraft", "publish", "delete", "rename", "move", "setTemplate", "addLocale", "removeLocale"],
     entries: ["list", "get", "create", "save", "setStatus", "delete", "move", "addLocale", "removeLocale"],
+    shared: ["list", "get", "save", "setStatus"],
     preview: ["enable", "disable"],
 };
 export function makeClientOps(action, token) {

package/dist/admin/editor/EditorView.js

@@ -19,11 +19,13 @@ 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 { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SHARED_NODE_TYPE } from "../../shared.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { tabsFor } from "../forms/tabs.js";
-import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, removeNode, zoneOf, } from "../tree-ops.js";
+import { allowedSections, allowedShared, canInsert, fillLockedZones, findNode, insertNode, moveNode, newNodeId, nodeFromSample, patchNode, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
 import { useDraftAutosave } from "./autosave.js";
 import { PageSettings } from "./PageSettings.js";
+import { BASE } from "../shell/base.js";
 import { isFixedNode, localeStatusOf, sourceLocaleOf } from "../shell/pages-tree.js";
 import { entryTitle } from "../shell/entries-list.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
@@ -81,6 +83,9 @@ export function EditorView({ ops, registry, id }) {
     const [banner, setBanner] = useState(null);
     const [published, setPublished] = useState(false);
     const [refOptions, setRefOptions] = useState({});
+    // Shared item name → row id, loaded once per editor mount: the picker's
+    // Shared group and a bound locked zone need the id to place a node.
+    const [sharedIds, setSharedIds] = useState(null);
     const [hoverPlus, setHoverPlus] = useState(null);
     const iframeRef = useRef(null);
     const scrollerRef = useRef(null);
@@ -290,6 +295,12 @@ export function EditorView({ ops, registry, id }) {
     const zoneOrder = useMemo(() => Object.keys(template?.zones ?? {}), [template]);
     const policyOf = useCallback((zone) => (zone ? template?.zones[zone] : undefined), [template]);
     const sectionOf = useCallback((type) => registry.sections.find((s) => s.name === type) ?? null, [registry]);
+    /** The shared item a placement node places, or null for any other node. */
+    const sharedOf = useCallback((node) => {
+        if (node.type !== SHARED_NODE_TYPE)
+            return null;
+        return registry.shared.find((s) => s.name === node.fields?.item) ?? null;
+    }, [registry]);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
@@ -329,6 +340,27 @@ export function EditorView({ ops, registry, id }) {
         }
         return () => { cancelled = true; };
     }, [ops, refTargets, registry, locale]);
+    useEffect(() => {
+        if (registryRef.current.shared.length === 0) {
+            setSharedIds({});
+            return;
+        }
+        let cancelled = false;
+        // A failed load leaves the map empty: the picker's Shared group and
+        // any zone bound to an item degrade to nothing to place, not a stuck
+        // editor — so say why in the console, like the ref options above.
+        ops.shared.list()
+            .then((r) => {
+            if (cancelled)
+                return;
+            if (!r.ok)
+                console.error(r.message);
+            setSharedIds(r.ok ? Object.fromEntries(r.data.map((i) => [i.name, i.record.id])) : {});
+        })
+            .catch((e) => { console.error(e); if (!cancelled)
+            setSharedIds({}); });
+        return () => { cancelled = true; };
+    }, [ops]);
     // ── canvas messaging ─────────────────────────────────────────────────
     const postToCanvas = useCallback((m) => {
         iframeRef.current?.contentWindow?.postMessage(m, "*");
@@ -386,6 +418,19 @@ export function EditorView({ ops, registry, id }) {
         });
         mark();
     }, [mark]);
+    // A zone bound to a shared item needs the item's row id (ops.shared.list),
+    // which can land after the draft did. Fill then; nothing else changes.
+    useEffect(() => {
+        if (!tree || !sharedIds || !record)
+            return;
+        const template = registryRef.current.pages.find((p) => p.name === record.template);
+        const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, sharedIds);
+        if (filled !== tree)
+            mutate(() => filled);
+        // `tree` is deliberately not a dependency: this runs when the ids land
+        // or a new draft loads, not on every keystroke.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sharedIds, record, mutate, tree === null]);
     // ── tree gestures ────────────────────────────────────────────────────
     const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
     const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
@@ -395,6 +440,15 @@ export function EditorView({ ops, registry, id }) {
         setPicker(null);
         select(node.id);
     };
+    const doInsertShared = (zone, index, item) => {
+        const ref = sharedIds?.[item.name];
+        if (!ref)
+            return;
+        const node = placementNode(item, ref, newNodeId(SHARED_NODE_TYPE));
+        mutate((t) => insertNode(t, zone, index, node));
+        setPicker(null);
+        select(node.id);
+    };
     const doDuplicate = (node) => {
         if (!tree)
             return;
@@ -477,6 +531,7 @@ export function EditorView({ ops, registry, id }) {
     }
     const selected = tree && selectedId ? findNode(tree, selectedId) : null;
     const selectedSection = selected ? sectionOf(selected.type) : null;
+    const selectedShared = selected ? sharedOf(selected) : null;
     const selZone = tree && selected ? zoneOf(tree, selected.id) : null;
     const selLocked = policyOf(selZone)?.kind === "locked";
     const rectById = new Map(rects.map((r) => [r.id, r]));
@@ -534,12 +589,12 @@ export function EditorView({ ops, registry, id }) {
                                                         width: hoverRect.w, height: hoverRect.h,
                                                         outline: "1.5px solid color-mix(in srgb, var(--selection) 45%, transparent)",
                                                         outlineOffset: -1.5, borderRadius: "var(--radius-sm)",
-                                                    } })), selRect && selected && selectedSection && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                                    } })), selRect && selected && (selectedSection || selectedShared) && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                                                 position: "absolute", left: selRect.x, top: selRect.y,
                                                                 width: selRect.w, height: selRect.h,
                                                                 outline: "var(--outline-selection)", outlineOffset: -1.5,
                                                                 borderRadius: "var(--radius-sm)",
-                                                            } }), _jsxs("span", { className: "sm-blocktag", style: { position: "absolute", left: selRect.x, top: selRect.y }, children: [selectedSection.title, selLocked && " · locked"] }), _jsx("div", { className: "sm-blocktoolbar", style: {
+                                                            } }), _jsxs("span", { className: "sm-blocktag", style: { position: "absolute", left: selRect.x, top: selRect.y }, children: [selectedSection?.title ?? selectedShared?.title, selectedShared && " · shared", selLocked && " · locked"] }), _jsx("div", { className: "sm-blocktoolbar", style: {
                                                                 position: "absolute", left: selRect.x + selRect.w - 8, top: selRect.y + 8,
                                                                 transform: "translateX(-100%)", pointerEvents: "auto",
                                                             }, children: selLocked ? (_jsx("span", { className: "sm-mono", style: { fontSize: "var(--text-xs)", color: "#8C94A8", padding: "4px 8px" }, children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => doMove(selected.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => doMove(selected.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => doDuplicate(selected), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => doRemove(selected.id), children: "\u00D7" })] })) })] })), plusButtons.map((p) => {
@@ -550,11 +605,11 @@ export function EditorView({ ops, registry, id }) {
                                                                     display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                                                                     pointerEvents: "auto",
                                                                 }, children: [_jsx("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => setPicker({ zone: p.zone, index: p.index, x: e.clientX - 150, y: e.clientY + 12 }), children: "+" }), hot && _jsxs("span", { className: "sm-tooltip", children: ["Add to ", p.zone] })] })] }, key));
-                                                })] })] }) })] }), _jsxs("aside", { className: "sm-inspector", children: [selected && selectedSection ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection.title })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsxs(_Fragment, { children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                                })] })] }) })] }), _jsxs("aside", { className: "sm-inspector", children: [selected && (selectedSection || selectedShared) ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sm-inspector__head", children: [_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [_jsx("span", { className: "sm-blockglyph" }), _jsx("span", { className: "sm-title", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: selectedSection?.title ?? selectedShared?.title })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : (_jsx("div", { className: "sm-inspector__head", children: _jsx("span", { className: "sm-label", children: "Nothing selected \u2014 page settings below" }) })), _jsxs("div", { className: "sm-inspector__body", children: [!selected && record && (_jsxs(_Fragment, { children: [_jsx(PageSettings, { record: record, locale: locale, registry: registry, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onRemoveLocale: Object.keys(record.locales).length > 1 &&
                                                     !isFixedNode(record, registry) &&
                                                     !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
                                                     ? () => { void doRemoveLocale(); }
-                                                    : undefined }), _jsx(Divider, { bleed: 14 })] })), selected && selectedSection && entries.map(({ key, ns, descriptor }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: selected[ns]?.[key], refOptions: refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor), onChange: (value) => doPatch(selected.id, ns, key, value) }, `${selected.id}.${ns}.${key}`))), _jsx(Divider, { bleed: 14 }), _jsx(SectionLabel, { children: "Outline" }), zoneOrder.map((zone) => {
+                                                    : undefined }), _jsx(Divider, { bleed: 14 })] })), selected && selectedSection && entries.map(({ key, ns, descriptor }) => (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: selected[ns]?.[key], refOptions: refOptionsFor(refOptions, refTargets, selectedSection, ns, key, descriptor), onChange: (value) => doPatch(selected.id, ns, key, value) }, `${selected.id}.${ns}.${key}`))), selected && selectedShared && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [_jsx("p", { className: "sm-hint", children: "This is shared content. Editing it changes every page it is placed on." }), _jsx("a", { className: "sm-nav-item", href: `${BASE}/shared/${encodeURIComponent(selectedShared.name)}?locale=${encodeURIComponent(locale)}`, children: "Edit shared item \u2192" })] })), _jsx(Divider, { bleed: 14 }), _jsx(SectionLabel, { children: "Outline" }), zoneOrder.map((zone) => {
                                         const locked = policyOf(zone)?.kind === "locked";
                                         const nodes = nodesIn(zone);
                                         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", zoneCanTake(zone) && "sm-outline-row--clickable"), onClick: () => {
@@ -567,15 +622,16 @@ export function EditorView({ ops, registry, id }) {
                                                     const section = sectionOf(node.type);
                                                     const isSelected = node.id === selectedId;
                                                     if (locked) {
-                                                        return (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => select(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? node.type }), _jsx("span", { style: { fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: ".06em" }, children: "LOCKED" })] }, node.id));
+                                                        return (_jsxs("div", { className: "sm-outline-row sm-outline-row--locked sm-outline-row--clickable", onClick: () => select(node.id), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? (sharedOf(node) ? `${sharedOf(node).title} · shared` : node.type) }), _jsx("span", { style: { fontSize: "var(--text-xs)", fontWeight: 600, letterSpacing: ".06em" }, children: "LOCKED" })] }, node.id));
                                                     }
-                                                    return (_jsxs("div", { onClick: () => select(node.id), className: cx("sm-outline-row", "sm-outline-row--clickable", isSelected && "sm-outline-row--selected"), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? node.type }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); doMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); doMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); doRemove(node.id); }, children: "\u00D7" })] })] }, node.id));
+                                                    return (_jsxs("div", { onClick: () => select(node.id), className: cx("sm-outline-row", "sm-outline-row--clickable", isSelected && "sm-outline-row--selected"), children: [_jsx("span", { className: "sm-outline-row__label", children: section?.title ?? (sharedOf(node) ? `${sharedOf(node).title} · shared` : node.type) }), _jsxs("span", { style: { display: "flex", gap: 2, flex: "none" }, children: [_jsx(IconButton, { label: "Move up", size: 22, disabled: i === 0, onClick: (e) => { e.stopPropagation(); doMove(node.id, -1); }, children: "\u2191" }), _jsx(IconButton, { label: "Move down", size: 22, disabled: i === nodes.length - 1, onClick: (e) => { e.stopPropagation(); doMove(node.id, 1); }, children: "\u2193" }), _jsx(IconButton, { label: "Remove", size: 22, onClick: (e) => { e.stopPropagation(); doRemove(node.id); }, children: "\u00D7" })] })] }, node.id));
                                                 })] }, zone));
                                     })] })] })] }), picker && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: () => setPicker(null), children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: {
                         position: "absolute",
                         left: Math.max(12, Math.min(picker.x, window.innerWidth - 320)),
                         top: Math.min(picker.y, Math.max(12, window.innerHeight - 240)),
-                    }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", picker.zone] }), allowedSections(policyOf(picker.zone), registry.sections).map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => doInsert(picker.zone, picker.index, 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))), allowedSections(policyOf(picker.zone), registry.sections).length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }))] }));
+                    }, children: [_jsxs(SectionLabel, { mono: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", picker.zone] }), allowedSections(policyOf(picker.zone), registry.sections).map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => doInsert(picker.zone, picker.index, 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))), allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { mono: true, style: { padding: "8px 8px 4px" }, children: "Shared" }), allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => doInsertShared(picker.zone, picker.index, 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: "Shared \u00B7 edited in one place" })] })] }, `shared-${item.name}`)))] })), allowedSections(policyOf(picker.zone), registry.sections).length === 0 &&
+                            allowedShared(policyOf(picker.zone), registry.shared, sharedIds ?? {}).length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }))] }));
 }
 /** The selected node's ref field (if any) resolves to its target
  * collection's loaded options — the EntryForm shape, section-scoped. */

package/dist/admin/forms/FieldWidget.d.ts

@@ -1,10 +1,14 @@
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 import type { AdminField } from "../serialize.ts";
-export declare function FieldWidget({ descriptor: d, value, onChange, error, refOptions, fieldKey, prefix, }: {
+export declare function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, }: {
     descriptor: AdminField;
     value: unknown;
     onChange(value: unknown): void;
-    error?: string;
+    errors?: Record<string, string>;
+    /** Dotted path of this widget in the form; defaults to `fieldKey`. */
+    path?: string;
+    /** Render the control alone, no label wrapper — list items. */
+    bare?: boolean;
     refOptions?: {
         id: string;
         title: string;

package/dist/admin/forms/FieldWidget.js

@@ -1,11 +1,26 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// One schema descriptor → one labelled control, in the design system's
+// field language: uppercase 9px label, inset control with no border at
+// rest, 1.5px accent border + soft ring on focus (all in ui/theme.tsx).
+// Objects and lists recurse through this same component; the list's
+// logic lives in ./list.ts as pure functions.
+import { useState } from "react";
 import { plainToRichtext, richtextToPlain } from "../richtext.js";
-import { Field, IconButton } from "../ui/primitives.js";
+import { Button, Field, IconButton } from "../ui/primitives.js";
+import { addItem, itemSummary, moveIndex, moveItem, patchObject, removeIndex, removeItem } from "./list.js";
 const label = (key) => key.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase());
-export function FieldWidget({ descriptor: d, value, onChange, error, refOptions = [], fieldKey, prefix, }) {
+export function FieldWidget({ descriptor: d, value, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, }) {
+    const path = pathProp ?? fieldKey;
+    const message = errors?.[path];
+    // Unused for non-list types, but hooks must be unconditional — a list's
+    // rows key their collapse state to this rather than to array position,
+    // so a move or remove doesn't reassign which row looks open.
+    const [collapsed, setCollapsed] = useState(() => new Set());
     const optionTitle = (o) => o.status === "draft" ? `${o.title} (draft)` : o.title;
     let control;
+    let counter;
+    let asDiv = d.type === "refList";
     switch (d.type) {
         case "text":
         case "link":
@@ -26,7 +41,7 @@ export function FieldWidget({ descriptor: d, value, onChange, error, refOptions
             break;
         }
         case "richtext":
-            control = (_jsx("textarea", { className: "sm-textarea", rows: 5, value: richtextToPlain(value), onChange: (e) => onChange(plainToRichtext(e.target.value)) }));
+            control = _jsx(RichtextArea, { value: value, onChange: onChange });
             break;
         case "image":
         case "video":
@@ -44,11 +59,74 @@ export function FieldWidget({ descriptor: d, value, onChange, error, refOptions
             control = (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [ids.map((id, i) => (_jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [_jsx("span", { className: "sm-input", style: { display: "flex", alignItems: "center", flex: 1 }, children: byId.get(id) ? optionTitle(byId.get(id)) : id }), _jsx(IconButton, { label: "Remove", size: 28, onClick: () => onChange(ids.filter((_, j) => j !== i)), children: "\u00D7" })] }, `${id}-${i}`))), _jsxs("select", { className: "sm-select", value: "", onChange: (e) => e.target.value && onChange([...ids, e.target.value]), children: [_jsx("option", { value: "", children: "Add\u2026" }), refOptions.filter((o) => !ids.includes(o.id)).map((o) => (_jsx("option", { value: o.id, children: optionTitle(o) }, o.id)))] })] }));
             break;
         }
+        case "object": {
+            asDiv = true;
+            const obj = (value && typeof value === "object" && !Array.isArray(value) ? value : {});
+            control = (_jsx("div", { className: "sm-group", children: Object.entries(d.fields ?? {}).map(([k, sub]) => (_jsx(FieldWidget, { fieldKey: k, descriptor: sub, value: obj[k], errors: errors, path: `${path}.${k}`, onChange: (v) => onChange(patchObject(obj, k, v, d.optional === true)) }, k))) }));
+            break;
+        }
+        case "list": {
+            asDiv = true;
+            const items = Array.isArray(value) ? value : [];
+            const item = d.item ?? { type: "text" };
+            const atMax = typeof d.max === "number" && items.length >= d.max;
+            if (typeof d.max === "number")
+                counter = `${items.length} of ${d.max}`;
+            control = (_jsxs("div", { className: "sm-list", children: [items.map((it, i) => (_jsx(ListRow, { index: i, count: items.length, summary: itemSummary(it, i), open: !collapsed.has(i), onToggle: () => setCollapsed((prev) => {
+                            const next = new Set(prev);
+                            if (next.has(i))
+                                next.delete(i);
+                            else
+                                next.add(i);
+                            return next;
+                        }), onMove: (to) => {
+                            const moved = moveItem(items, i, to);
+                            if (moved !== items) {
+                                onChange(moved);
+                                setCollapsed((prev) => moveIndex(prev, i, to));
+                            }
+                        }, onRemove: () => {
+                            onChange(removeItem(items, i));
+                            setCollapsed((prev) => removeIndex(prev, i));
+                        }, children: _jsx(FieldWidget, { fieldKey: String(i), descriptor: item, value: it, errors: errors, path: `${path}.${i}`, bare: true, onChange: (v) => onChange(items.map((x, j) => (j === i ? v : x))) }) }, i))), _jsx(Button, { variant: "secondary", disabled: atMax, onClick: () => onChange(addItem(items, d)), children: "Add" })] }));
+            break;
+        }
         default:
             control = _jsx("textarea", { className: "sm-textarea", disabled: true, value: JSON.stringify(value ?? null, null, 2), rows: 2 });
     }
+    if (bare) {
+        return (_jsxs(_Fragment, { children: [control, message && _jsx("span", { className: "sm-error", children: message })] }));
+    }
     // A <label> activates its first labelable descendant, so it may only wrap a
-    // single control — around refList's rows it would turn every click into a
-    // press of the first row's remove button.
-    return (_jsx(Field, { label: label(fieldKey), error: error, asDiv: d.type === "refList", children: control }));
+    // single control — around refList's rows, an object's fieldset or a list's
+    // rows it would turn every click into a press of the first button.
+    return (_jsx(Field, { label: label(fieldKey), counter: counter, error: message, asDiv: asDiv, children: control }));
+}
+/** One list item: a header with the summary and the row controls, the
+ *  item's widget underneath while expanded. Header is a div, not a label.
+ *  Collapse state lives in the parent `FieldWidget`, keyed to the item's
+ *  index rather than to `key={i}` position, so a move or remove doesn't
+ *  hand this row someone else's open/closed state. */
+function ListRow({ index, count, summary, open, onToggle, onMove, onRemove, children }) {
+    return (_jsxs("div", { className: "sm-listrow", children: [_jsxs("div", { className: "sm-listrow__head", children: [_jsxs("button", { type: "button", className: "sm-listrow__toggle", "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { "aria-hidden": "true", children: open ? "▾" : "▸" }), _jsx("span", { className: "sm-listrow__summary", children: summary })] }), _jsx(IconButton, { label: "Move up", disabled: index === 0, onClick: () => onMove(index - 1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", disabled: index === count - 1, onClick: () => onMove(index + 1), children: "\u2193" }), _jsx(IconButton, { label: "Remove", onClick: onRemove, children: "\u00D7" })] }), open && _jsx("div", { className: "sm-listrow__body", children: children })] }));
+}
+/** The interim richtext widget owns its text: the line syntax drops a trailing
+ *  newline on the round trip, so deriving the value from the document each
+ *  render would snap the caret back after Enter at the end of the text. Re-seeds
+ *  when the document changes underneath it (load, locale switch). The parent must
+ *  store the emitted document by reference — a clone or a server copy handed back
+ *  would re-seed the text and bring the caret snap back. */
+function RichtextArea({ value, onChange }) {
+    const [text, setText] = useState(() => richtextToPlain(value));
+    const [seen, setSeen] = useState(value);
+    if (value !== seen) {
+        setSeen(value);
+        setText(richtextToPlain(value));
+    }
+    return (_jsx("textarea", { className: "sm-textarea", rows: 5, value: text, onChange: (e) => {
+            const doc = plainToRichtext(e.target.value);
+            setText(e.target.value);
+            setSeen(doc);
+            onChange(doc);
+        } }));
 }

package/dist/admin/forms/list.d.ts

@@ -0,0 +1,18 @@
+import type { AdminField } from "../serialize.ts";
+/** An empty item: an object of its subfields' defaults, else the default. */
+export declare function emptyValue(d: AdminField): unknown;
+export declare function addItem(items: unknown[], list: AdminField): unknown[];
+export declare function removeItem(items: unknown[], index: number): unknown[];
+export declare function moveItem(items: unknown[], from: number, to: number): unknown[];
+/** Permutes a set of item indices (e.g. collapse state) for the same move
+ *  `moveItem` just applied: the index at `from` becomes `to`; indices strictly
+ *  between the two shift by one toward `from`; every other index is unchanged. */
+export declare function moveIndex(set: Set<number>, from: number, to: number): Set<number>;
+/** Permutes a set of item indices for a removal at `index`: drops it, and
+ *  shifts every higher index down by one. */
+export declare function removeIndex(set: Set<number>, index: number): Set<number>;
+/** The row header's text: the value, or its first non-empty string, or "Item N". */
+export declare function itemSummary(value: unknown, index: number): string;
+/** A subfield change on an object value. `collapseEmpty` (an optional
+ *  object) turns an object with no defined values into `undefined`. */
+export declare function patchObject(obj: Record<string, unknown>, key: string, value: unknown, collapseEmpty: boolean): Record<string, unknown> | undefined;