smoodly 0.0.17 → 0.0.19

package/README.md

@@ -336,9 +336,13 @@ Implemented:
   fetches the record and its tree (draft or published), resolves refs,
   reads the locale's own rows, and returns a `SitePage` — `record`,
   `template`, `tree`, localized `title`, `path`, `ancestors`, `children`,
-  and `paths` (locale → path, for alternates) — or a `SiteEntry` with the
-  locale's merged fields (a versioned collection's published snapshot on
-  the public path) resolved, and `paths` for its published locales.
+  `locale` and `locales` — the page's `{ slug, path }` in every supported
+  locale, null where it is absent or, outside draft mode, unpublished
+  (spec 2026-09-15) — or a `SiteEntry` with the locale's merged fields (a
+  versioned collection's published snapshot on the public path) resolved,
+  `locale`, and the same `locales` map (an entry's slug and path are null
+  where its row claims no URL). `getEntries` items and `getEntry` carry
+  `locale` and `locales` too.
   `resolve(locale, path, { draft? })`
   is the two in sequence — `locate` then `load` — for a caller that just
   wants the hit. A folder (null template), an
@@ -372,13 +376,14 @@ Implemented:
   (`{ id, title, path, url, ancestors, children }`, every ancestor and
   child carrying `url` beside its locale-relative `path`, both put through
   the `href` seam) beside `zones`; a collection
-  entry rendered by its `smoodly.entryPage` as `{ entry, path }`; a folder,
+  entry rendered by its `smoodly.entryPage` as `{ entry, path, locale, locales }`; a folder,
   an absent locale or an unregistered template a 404. The published read is
   cached per (locale, path) and tagged `page:<id>` / `entry:<id>` — the
   `locate` hit runs outside the cache, because the tag needs the id first.
   Draft mode reads drafts uncached, and the editor param mounts
   `EditorBridge`. Metadata is the tree's `meta` plus
-  `alternates.languages`, built through the injectable `href(path, locale)`
+  `alternates.languages`, the locales with a URL in the hit's `locales` map
+  through the injectable `href(path, locale)`
   seam (identity by default, `getPathname` with next-intl) and emitted only
   for a multi-locale site. `renderSmoodlyPage(Paired, …)` and
   `smoodlyPageMetadata` remain as the escape hatch for a FIXED page
@@ -490,6 +495,51 @@ 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-17, admin path spec)
+
+- A root page slugged like the admin path (or `api`) is unreachable:
+  Next's static segment wins over the site catch-all. Refuse it in the
+  slug check once `config.admin.path` exists.
+- A robots `Disallow` for the admin path from `next/meta`.
+
+## Follow-ups (logged 2026-09-17, reference picker and tags spec)
+
+- A `Create…` button in the reference picker: create the target entry
+  without leaving the form. Needs its own answer for modal vs navigation
+  and for the parent form's pending autosave.
+- Server search for ref candidates: `useRefOptions` loads the whole
+  target collection once per locale. When a collection outgrows that,
+  the hook changes (a search op, plus "titles for these ids" for the
+  picked rows); `RefPicker` takes options as a prop and does not.
+- Thumbnails in picker rows: collections have no preview-image
+  convention (`titleField` only).
+- `entries.distinct` flattens in JS over `entries.list`; an RPC over
+  `jsonb_array_elements` when a collection outgrows it.
+- Tags keep insertion order; no drag reorder.
+- Tag suggestions exist on collection entry forms only, and only for
+  top-level `f.tags()` fields: a tags field inside an object, on a
+  section, a global or a page is a plain chip input.
+- The picker's "open" link goes to `/admin/<collection>/<id>` without
+  the edited locale; the form opens in the URL's or the default locale.
+- The Combobox list flips upwards when it does not fit under the input
+  (`opensUp`, measured against the nearest clipping ancestor); it does
+  not yet shrink when neither side has room for it.
+- `RefOption.status` is the three-way `LocaleStatus` now; the old
+  "(draft)" suffix in option titles is gone with the native select.
+- A `refList` on a global item's `settings` still loads no options in
+  the Globals form or the page editor: both collect targets from the
+  item's `fields` only.
+
+## Follow-ups (logged 2026-09-15, locale alternates spec)
+
+- A layout-only language switch, if a real site needs one: a
+  `q().getAlternates(path)` over the `paths` index plus a proxy header
+  carrying the request path. Not built until asked for — the starters
+  render the switch from the page (`components/PageFrame.tsx`,
+  `components/LocaleNav.tsx`).
+- The walk covered the Lorem example only; blank-intl is typechecked, not
+  walked. Walk it on the next blank-intl install.
+
 ## Follow-ups (logged 2026-09-15, custom section spec §6, plan B)
 
 - Inline editing of a column on the canvas is OFF (2026-09-15, after the
@@ -1604,4 +1654,4 @@ the toolbar instead of pushing the content.
 - `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.
-- `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 (`refTargets` + the `ops.entries.list` effect) duplicates `EntryForm`'s and could be one hook. (logged 2026-09-06, updated 2026-09-08)
+- `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/dist/admin/client-ops.js

@@ -1,6 +1,6 @@
 const GROUPS = {
     pages: ["list", "get", "create", "saveDraft", "publish", "unpublish", "discardDraft", "delete", "rename", "move", "setTemplate", "addLocale", "removeLocale", "listVersions", "restore"],
-    entries: ["list", "get", "create", "save", "setStatus", "discardDraft", "delete", "move", "addLocale", "removeLocale", "listVersions", "getVersion", "restore"],
+    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"],
     preview: ["enable", "disable"],

package/dist/admin/editor/CanvasOverlay.js

@@ -6,7 +6,9 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // Positions come from the geometry the bridge reported; the layer
 // itself never touches the iframe.
 import { useState } from "react";
-import { IconButton } from "../ui/primitives.js";
+import { cx, IconButton } from "../ui/primitives.js";
+/** Pixels above a block the riding pill needs (half its height); less and it moves inside. */
+const TAG_CLEARANCE = 14;
 export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }) {
     const [hoverPlus, setHoverPlus] = useState(null);
     return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
@@ -22,7 +24,7 @@ export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, p
                             width: selection.rect.w, height: selection.rect.h,
                             outline: selection.global ? "var(--outline-selection-global)" : "var(--outline-selection)", outlineOffset: -1.5,
                             borderRadius: "var(--selection-radius)",
-                        } }), _jsxs("span", { className: selection.global ? "sm-blocktag sm-blocktag--global" : "sm-blocktag", style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.global && " · global", selection.locked && " · locked"] }), !selection.layout && (_jsx("div", { className: "sm-blocktoolbar", style: {
+                        } }), _jsxs("span", { className: cx("sm-blocktag", selection.global && "sm-blocktag--global", selection.rect.y < TAG_CLEARANCE && "sm-blocktag--inside"), style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.global && " · global", selection.locked && " · locked"] }), !selection.layout && (_jsx("div", { className: "sm-blocktoolbar", style: {
                             position: "absolute", left: selection.rect.x + selection.rect.w - 8, top: selection.rect.y + 8,
                             transform: "translateX(-100%)", pointerEvents: "auto",
                         }, children: selection.locked ? (_jsx("span", { className: "sm-blocktoolbar__note", children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) }))] })), plusButtons.map((p) => {

package/dist/admin/editor/EditorView.js

@@ -32,6 +32,7 @@ import { CSS_KEY, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, globalNameOf } fro
 import { descriptorAt, getAtPath } from "../field-paths.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
+import { useRefOptions } from "../forms/useRefOptions.js";
 import { tabOf, tabsFor } from "../forms/tabs.js";
 import { InspectorFields, valueOf } from "./InspectorFields.js";
 import { allowedSections, canInsert, fillLockedZones, findNode, insertNode, moveNode, moveNodeTo, newNodeId, nodeFromSample, patchNode, patchNodeCss, patchNodePath, patchPage, placementNode, removeNode, zoneOf, } from "../tree-ops.js";
@@ -51,9 +52,8 @@ import { useCanvasBridge } from "./useCanvasBridge.js";
 import { useInlineSession } from "./useInlineSession.js";
 import { usePageLocale } from "./usePageLocale.js";
 import { useGlobalEdit } from "./useGlobalEdit.js";
-import { BASE } from "../shell/base.js";
+import { useAdminHref } 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";
 import { ResizeHandle } from "../ui/ResizeHandle.js";
 import { PublishControl } from "../ui/PublishControl.js";
@@ -63,6 +63,7 @@ export const withEditorParam = (url) => (url.includes("?") ? `${url}&smoodly-edi
 /** The site URL of a stored version — History's iframe (spec 2026-09-13 history §5); no editor parameter, so no bridge. */
 export const withVersionParam = (url, versionId) => `${url}${url.includes("?") ? "&" : "?"}smoodly-version=${encodeURIComponent(versionId)}`;
 export function EditorView({ ops, registry, id }) {
+    const adminHref = useAdminHref();
     const [record, setRecord] = useState(null);
     const [tree, setTree] = useState(null);
     const [loadError, setLoadError] = useState(null);
@@ -96,7 +97,6 @@ export function EditorView({ ops, registry, id }) {
     /** A global edit since the item's last save ack; and any global edit on this canvas yet. */
     const [globalDirty, setGlobalDirty] = useState(false);
     const [globalTouched, setGlobalTouched] = useState(false);
-    const [refOptions, setRefOptions] = useState({});
     // Global item name → row id, loaded once per editor mount: the picker's
     // Global group and a bound locked zone need the id to place a node.
     const [globalIds, setGlobalIds] = useState(null);
@@ -303,31 +303,18 @@ export function EditorView({ ops, registry, id }) {
         }
         return out;
     }, [registry]);
-    useEffect(() => {
-        let cancelled = false;
-        for (const target of new Set(Object.values(refTargets))) {
-            const targetMeta = registry.collections.find((c) => c.name === target);
-            ops.entries.list(target).then((r) => {
-                // A list issued for the previous locale must not overwrite this one's.
-                if (cancelled || !r.ok)
-                    return;
-                const options = r.data
-                    // only entries present in the locale being edited can be referenced there
-                    .filter((e) => e.locales[locale])
-                    .map((e) => ({
-                    id: e.id,
-                    title: targetMeta ? entryTitle(e, targetMeta, registry, locale) : e.id,
-                    status: e.locales[locale].status,
-                }));
-                setRefOptions((prev) => ({ ...prev, [target]: options }));
-            }).catch((e) => {
-                // A rejected transport just leaves this target's options empty —
-                // ref fields degrade to "nothing to pick from," not a stuck load.
-                console.error(e);
-            });
+    // A global item edited from the canvas picks refs too: its targets load beside the sections'.
+    const refTargetList = useMemo(() => {
+        const out = Object.values(refTargets);
+        for (const g of registry.globals) {
+            for (const d of Object.values(g.fields ?? {})) {
+                if ((d.type === "ref" || d.type === "refList") && typeof d.target === "string")
+                    out.push(d.target);
+            }
         }
-        return () => { cancelled = true; };
-    }, [ops, refTargets, registry, locale]);
+        return out;
+    }, [refTargets, registry]);
+    const refOptions = useRefOptions(ops, registry, locale, refTargetList);
     useEffect(() => {
         if (registryRef.current.globals.length === 0) {
             setGlobalIds({});
@@ -759,9 +746,9 @@ export function EditorView({ ops, registry, id }) {
     const tabs = selectedSection ? tabsFor(selectedSection) : selectedItem ? tabsFor(selectedItem) : [];
     const activeTab = tabs.some((t) => t.tab === tab) ? tab : tabs[0]?.tab;
     const activeGroups = tabs.find((t) => t.tab === activeTab)?.groups ?? [];
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/pages`, items: [
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref("/pages"), items: [
                             {
-                                label: "Pages", href: `${BASE}/pages`,
+                                label: "Pages", href: adminHref("/pages"),
                                 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 },
@@ -780,7 +767,7 @@ export function EditorView({ ops, registry, id }) {
                                                     else
                                                         mutate((t) => patchNodePath(t, session.node, session.path, doc));
                                                 }, onEscape: inline.end }));
-                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selectedSection || selectedItem ? (_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 ?? (selectedItem ? `${selectedItem.title} · global` : null) }), selectedItem && (globalTouched || globalEdit.saveState === "error") && _jsx(SaveIndicator, { state: globalEdit.saveState })] }), _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) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
+                                        })()] }) })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", ref: inspectorRef, children: [_jsxs("div", { className: "sm-card", children: [selectedSection || selectedItem ? (_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 ?? (selectedItem ? `${selectedItem.title} · global` : null) }), selectedItem && (globalTouched || globalEdit.saveState === "error") && _jsx(SaveIndicator, { state: globalEdit.saveState })] }), _jsx(IconButton, { label: "Clear selection", onClick: () => setSelectedId(null), children: "\u00D7" })] }), tabs.length > 0 && selectedSection && (_jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }))] })) : record ? (_jsx(PageInspector, { record: record, locale: locale, registry: registry, tree: tree, path: paths[locale], fixed: isFixedNode(record, registry), onRename: onRename, onPatch: doPatchPage, onRemoveLocale: Object.keys(record.locales).length > 1 &&
                                             !isFixedNode(record, registry) &&
                                             !(record.parentId === null && record.locales[registry.locales.default]?.slug === registry.homePageSlug)
                                             ? () => { void doRemoveLocale(); }
@@ -792,7 +779,7 @@ export function EditorView({ ops, registry, id }) {
                                                             doPatch(selected.id, ns, key, value);
                                                         if (ns === "fields")
                                                             syncTexts(selected.id, selectedSection, { ...selected.fields, [key]: value });
-                                                    } }, `${selected.id}.${ns}.${key}`)) })), selectedItem && selectedId && (_jsx(GlobalInspector, { item: selectedItem, edit: globalEdit.items[selectedItem.name] ?? null, locale: locale, groups: activeGroups, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, pending: globalDirty || globalEdit.saveState !== "saved", busy: globalBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
+                                                    } }, `${selected.id}.${ns}.${key}`)) })), selectedItem && selectedId && (_jsx(GlobalInspector, { item: selectedItem, edit: globalEdit.items[selectedItem.name] ?? null, locale: locale, groups: activeGroups, multilingual: registry.locales.supported.length > 1, refOptions: refOptions, tabs: tabs.length > 0 ? _jsx(Tabs, { tabs: tabs.map((t) => t.tab), value: activeTab, onChange: (t) => setTab(t) }) : undefined, pending: globalDirty || globalEdit.saveState !== "saved", busy: globalBusy, inlinePath: inline.session?.node === selectedId ? inline.session.path : undefined, onEditHere: () => { const p = inline.session?.path; inline.end(); if (p)
                                                     reveal(p, selectedItem); }, onChange: (ns, key, value) => {
                                                     patchGlobal(selectedItem.name, globalPath(ns, key), value);
                                                     if (ns === "fields") {
@@ -825,5 +812,5 @@ function refOptionsFor(loaded, targets, section, ns, key, descriptor) {
     if (descriptor.type !== "ref" && descriptor.type !== "refList")
         return undefined;
     const target = targets[`${section.name}.${ns}.${key}`];
-    return target ? loaded[target] ?? [] : [];
+    return target ? loaded[target] : [];
 }

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

@@ -1,9 +1,10 @@
+import type { ReactNode } from "react";
 import type { AdminGlobal } from "../serialize.ts";
 import type { Group } from "../forms/tabs.ts";
 import type { GlobalEditItem } from "./global-edit.ts";
 import { type RefOption } from "../shell/GlobalFields.tsx";
 import { type PublishBusy } from "../ui/PublishControl.tsx";
-export declare function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }: {
+export declare function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, tabs, }: {
     item: AdminGlobal;
     /** null while the item loads. */
     edit: GlobalEditItem | null;
@@ -11,7 +12,7 @@ export declare function GlobalInspector({ item, edit, locale, groups, multilingu
     /** The active tab's groups (spec 2026-09-14 §5). */
     groups: Group[];
     multilingual: boolean;
-    refOptions: Record<string, RefOption[]>;
+    refOptions: Record<string, RefOption[] | undefined>;
     inlinePath?: string;
     onEditHere?(): void;
     onChange(ns: "fields" | "settings" | "styles" | "css", key: string, value: unknown): void;
@@ -21,4 +22,6 @@ export declare function GlobalInspector({ item, edit, locale, groups, multilingu
     onPublish(): void;
     onDiscard(): void;
     onUnpublish(): void;
+    /** The Content / Settings tabs, rendered between the control and the fields. */
+    tabs?: ReactNode;
 }): import("react").JSX.Element;

package/dist/admin/editor/GlobalInspector.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BASE } from "../shell/base.js";
+import { useAdminHref } from "../shell/base.js";
 import { localeStatusOf } from "../shell/pages-tree.js";
 import { GlobalFields } from "../shell/GlobalFields.js";
 import { PublishControl } from "../ui/PublishControl.js";
-export function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, }) {
+export function GlobalInspector({ item, edit, locale, groups, multilingual, refOptions, inlinePath, onEditHere, onChange, pending, busy, onPublish, onDiscard, onUnpublish, tabs, }) {
+    const adminHref = useAdminHref();
     const row = edit?.record.locales[locale];
     // The same three states the global list shows; the control decides what applies.
     const status = row ? localeStatusOf(row) : "draft";
     const pages = edit ? [...new Set(edit.usage.filter((u) => u.sourceKind === "page").map((u) => u.sourceId))] : [];
-    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsx("p", { className: "sm-hint", children: "Global content \u2014 changes every page it is used on." }), edit && (_jsxs("p", { className: "sm-hint", children: [pages.length === 0 ? "Not placed on any page." : `Used on ${pages.length} page${pages.length === 1 ? "" : "s"}: `, pages.map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), _jsx("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: _jsx(PublishControl, { status: row ? status : null, pending: pending, busy: busy, disabled: !edit, onPublish: onPublish, onDiscard: onDiscard, onUnpublish: onUnpublish }) }), edit ? (_jsx(GlobalFields, { item: item, groups: groups, fields: edit.fields, errors: edit.errors, refOptions: refOptions, multilingual: multilingual, inlinePath: inlinePath, onEditHere: onEditHere, onChange: onChange })) : (_jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" }))] }));
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsx("p", { className: "sm-hint", children: "Global content \u2014 changes every page it is used on." }), pages.length > 0 && (_jsxs("p", { className: "sm-hint", children: [`Used on ${pages.length} page${pages.length === 1 ? "" : "s"}: `, pages.map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`), children: id })] }, id)))] })), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8, flexWrap: "wrap" }, children: _jsx(PublishControl, { status: row ? status : null, pending: pending, busy: busy, disabled: !edit, compact: true, onPublish: onPublish, onDiscard: onDiscard, onUnpublish: onUnpublish }) }), tabs, edit ? (_jsx(GlobalFields, { item: item, groups: groups, fields: edit.fields, errors: edit.errors, refOptions: refOptions, multilingual: multilingual, inlinePath: inlinePath, onEditHere: onEditHere, onChange: onChange })) : (_jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" }))] }));
 }

package/dist/admin/editor/NoticePane.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAdminHref } from "../shell/base.js";
 export function NoticePane({ children }) {
-    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [children, _jsx("a", { href: "/admin/pages", children: "\u2190 Back to pages" })] }) }));
+    const adminHref = useAdminHref();
+    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40, background: "var(--bg)" }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [children, _jsx("a", { href: adminHref("/pages"), children: "\u2190 Back to pages" })] }) }));
 }

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

@@ -1,11 +1,12 @@
 import type { ReactElement, ReactNode } from "react";
 import type { AdminField } from "../serialize.ts";
+import type { RefOption } from "./ref-picker.ts";
 /** The two namespaces a `fields.` / `settings.` condition reads (spec 2026-09-14 §12). */
 export type WidgetScope = {
     fields?: Record<string, unknown>;
     settings?: Record<string, unknown>;
 };
-export declare function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions, fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }: {
+export declare function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions, suggestions, fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }: {
     descriptor: AdminField;
     value: unknown;
     onChange(value: unknown): void;
@@ -14,11 +15,10 @@ export declare function FieldWidget({ descriptor: d, value: valueProp, onChange,
     path?: string;
     /** Render the control alone, no label wrapper — list items. */
     bare?: boolean;
-    refOptions?: {
-        id: string;
-        title: string;
-        status: string;
-    }[];
+    /** Every entry of a ref field's target; undefined while loading. */
+    refOptions?: RefOption[];
+    /** Tags the collection's other entries use (an entry form's tags fields only). */
+    suggestions?: string[];
     fieldKey: string;
     prefix?: string;
     /** A glyph after the label — the forms' "same in every language" mark. */

package/dist/admin/forms/FieldWidget.js

@@ -3,20 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { RichtextWidget } from "./RichtextWidget.js";
 import { MediaWidget } from "./MediaWidget.js";
 import { ListField } from "./ListField.js";
+import { RefPicker } from "./RefPicker.js";
+import { TagsField } from "./TagsField.js";
 import { RowsWidget } from "./RowsWidget.js";
 import { optionsOf } from "../../fields.js";
 import { isHidden } from "../../conditions.js";
 import { cssProblem } from "../../css.js";
-import { Button, Field, IconButton, Switch } from "../ui/primitives.js";
+import { Button, Field, Switch } from "../ui/primitives.js";
 import { patchObject } from "./list.js";
 /** A key as a caption, sentence case: `spacingTop` → "Spacing top", `css` → "Custom CSS". */
 const label = (key) => key === "css" ? "Custom CSS" : key.replace(/([A-Z])/g, (c) => ` ${c.toLowerCase()}`).replace(/^./, (c) => c.toUpperCase());
-export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions = [], fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }) {
+export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors, path: pathProp, bare, refOptions, suggestions, fieldKey, prefix, mark, inlinePath, onEditHere, scope, emptyLabel, }) {
     const path = pathProp ?? fieldKey;
-    const message = errors?.[path];
+    // A tags field has no per-chip slot: the first item error shows under the field.
+    const below = d.type === "tags" && errors ? Object.keys(errors).find((k) => k.startsWith(`${path}.`)) : undefined;
+    const message = errors?.[path] ?? (below ? errors?.[below] : undefined);
     // The descriptor's default shows while the value is absent (spec 2026-09-10 page fields §1).
     const value = valueProp === undefined && d.default !== undefined ? d.default : valueProp;
-    const optionTitle = (o) => o.status === "draft" ? `${o.title} (draft)` : o.title;
     // The custom section's rows (spec 2026-09-14 §6): the row cards instead of the generic list.
     if (d.widget === "rows") {
         const rows = _jsx(RowsWidget, { descriptor: d, value: value, onChange: onChange, errors: errors, path: path, inlinePath: inlinePath, onEditHere: onEditHere });
@@ -24,7 +27,7 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
     }
     let control;
     let counter;
-    let asDiv = d.type === "refList";
+    let asDiv = false;
     switch (d.type) {
         case "text":
         case "link":
@@ -76,6 +79,14 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
             control = (_jsx("div", { className: "sm-choices", children: all.map((o) => (_jsxs("label", { className: "sm-choice", children: [_jsx("input", { type: "checkbox", checked: chosen.includes(o.value), onChange: (e) => toggle(o.value, e.target.checked) }), o.label] }, o.value))) }));
             break;
         }
+        case "tags": {
+            asDiv = true; // chips carry buttons
+            const max = typeof d.max === "number" ? d.max : undefined;
+            if (max !== undefined)
+                counter = `${Array.isArray(value) ? value.length : 0} of ${max}`;
+            control = _jsx(TagsField, { value: value, onChange: onChange, max: max, suggestions: suggestions, label: label(fieldKey) });
+            break;
+        }
         case "richtext":
             // The toolbar holds buttons, so this control can never sit in a <label>.
             asDiv = true;
@@ -90,12 +101,13 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
             control = _jsx(MediaWidget, { descriptor: d, value: value, onChange: onChange });
             break;
         case "ref":
-            control = (_jsxs("select", { className: "sm-select", value: String(value ?? ""), onChange: (e) => onChange(e.target.value || undefined), children: [_jsx("option", { value: "", children: "\u2014" }), refOptions.map((o) => _jsx("option", { value: o.id, children: optionTitle(o) }, o.id))] }));
-            break;
         case "refList": {
-            const ids = Array.isArray(value) ? value : [];
-            const byId = new Map(refOptions.map((o) => [o.id, o]));
-            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)))] })] }));
+            asDiv = true; // rows of buttons: never inside one implicit label
+            const multiple = d.type === "refList";
+            const max = typeof d.max === "number" ? d.max : undefined;
+            if (multiple && max !== undefined)
+                counter = `${Array.isArray(value) ? value.length : 0} of ${max}`;
+            control = _jsx(RefPicker, { value: value, onChange: onChange, options: refOptions, multiple: multiple, max: max, target: typeof d.target === "string" ? d.target : "" });
             break;
         }
         case "object": {

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

@@ -0,0 +1,11 @@
+import { type RefOption } from "./ref-picker.ts";
+export declare function RefPicker({ value, onChange, options, multiple, max, target }: {
+    value: unknown;
+    onChange(value: unknown): void;
+    /** Every entry of the target collection; undefined while loading. */
+    options: RefOption[] | undefined;
+    multiple: boolean;
+    max?: number;
+    /** The target collection's name: the rows link to its admin form. */
+    target: string;
+}): import("react").JSX.Element;

package/dist/admin/forms/RefPicker.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// One widget for f.ref and f.refList (spec 2026-09-17 §2): a search input,
+// the picked entries under it. A refList's rows drag like a list's.
+import { ExternalLink } from "lucide-react";
+import { Combobox } from "../ui/Combobox.js";
+import { Grip, IconButton, cx } from "../ui/primitives.js";
+import { statusLabel } from "../ui/status-label.js";
+import { useSortable } from "../ui/useSortable.js";
+import { useAdminHref } from "../shell/base.js";
+import { moveItem } from "./list.js";
+import { pickRef, refCandidates, refIds, refRows, refValue, statusTone } from "./ref-picker.js";
+const titleCase = (name) => name.replace(/^./, (c) => c.toUpperCase());
+function StatusDot({ status }) {
+    if (status === "")
+        return null;
+    return _jsx("span", { className: "sm-dot", title: statusLabel(status), style: { background: `var(--status-${statusTone(status)}-fg)` } });
+}
+export function RefPicker({ value, onChange, options, multiple, max, target }) {
+    const adminHref = useAdminHref();
+    const ids = refIds(value, multiple);
+    const rows = refRows(ids, options);
+    const candidates = refCandidates(ids, options);
+    const byId = new Map(candidates.map((o) => [o.id, o]));
+    const atMax = multiple && typeof max === "number" && ids.length >= max;
+    const set = (next) => onChange(refValue(next, multiple));
+    const sortable = useSortable({ count: multiple ? rows.length : 0, onDrop: (from, to) => set(moveItem(ids, from, to)) });
+    const present = (options ?? []).filter((o) => !o.absent).length;
+    return (_jsxs("div", { className: "sm-refpicker", children: [_jsx(Combobox, { label: `Search ${titleCase(target)}`, keepOpen: multiple, options: candidates.map((o) => ({ value: o.id, label: o.title })), disabled: options === undefined || atMax, placeholder: atMax ? `Maximum ${max}` : options === undefined ? "Loading…" : "Type to search", emptyText: present === 0 ? `No entries in ${titleCase(target)} yet` : "Every entry is already picked", renderOption: (o) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "sm-refpicker__title", children: o.label }), _jsx(StatusDot, { status: byId.get(o.value)?.status ?? "" })] })), onPick: (id) => set(pickRef(ids, id, multiple, max)) }), rows.length > 0 && (_jsx("div", { className: "sm-refpicker__rows", ref: sortable.containerRef, children: rows.map((r, i) => (_jsxs("div", { style: multiple ? sortable.rowStyle(i) : undefined, className: cx("sm-refrow", r.state !== "ok" && "sm-refrow--muted", multiple && sortable.rowClass(i)), children: [multiple && _jsx(Grip, { ...sortable.handleProps(i) }), _jsxs("span", { className: "sm-refpicker__title", children: [r.title, r.state === "absent" && _jsx("span", { className: "sm-refrow__note", children: " \u00B7 Not available in this locale" })] }), _jsx(StatusDot, { status: r.status }), (r.state === "ok" || r.state === "absent") && (_jsx("a", { className: "sm-iconbtn", href: adminHref(`/${target}/${r.id}`), target: "_blank", rel: "noreferrer", "aria-label": "Open entry", title: "Open entry", children: _jsx(ExternalLink, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsx(IconButton, { label: "Remove", onClick: () => set(ids.filter((_, j) => j !== i)), children: "\u00D7" })] }, `${r.id}-${i}`))) }))] }));
+}

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

@@ -0,0 +1,10 @@
+export declare function TagsField({ value, onChange, max, suggestions, label, initialAdding }: {
+    value: unknown;
+    onChange(value: string[]): void;
+    max?: number;
+    /** Tags the collection's other entries use; absent outside a collection form — then no list opens. */
+    suggestions?: string[];
+    label: string;
+    /** Start with the input open (static-markup tests). */
+    initialAdding?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/forms/TagsField.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// f.tags() as chips (spec 2026-09-17 §5): a × per chip, a dashed "+ Add"
+// that becomes an inline Combobox. Enter or a comma commits and keeps the
+// input open, Escape closes, leaving commits what was typed, Backspace on
+// an empty input removes the last chip. Every commit goes through addTags.
+import { useEffect, useRef, useState } from "react";
+import { addTags, sameTag } from "../../tags.js";
+import { Combobox } from "../ui/Combobox.js";
+import { cx } from "../ui/primitives.js";
+export function TagsField({ value, onChange, max, suggestions, label, initialAdding = false }) {
+    const tags = Array.isArray(value) ? value.filter((v) => typeof v === "string") : [];
+    const [adding, setAdding] = useState(initialAdding);
+    const [flash, setFlash] = useState(null);
+    const timer = useRef(null);
+    useEffect(() => () => { if (timer.current)
+        clearTimeout(timer.current); }, []);
+    const atMax = typeof max === "number" && tags.length >= max;
+    const commit = (input) => {
+        const r = addTags(tags, input, { max, known: suggestions });
+        if (r.tags.length !== tags.length)
+            onChange(r.tags);
+        if (r.duplicate !== null) {
+            setFlash(r.duplicate);
+            if (timer.current)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setFlash(null), 600);
+        }
+    };
+    return (_jsxs("div", { className: "sm-tags", children: [tags.map((t, i) => (_jsxs("span", { className: cx("sm-tag", flash === t && "sm-tag--flash"), children: [t, _jsx("button", { type: "button", className: "sm-tag__x", "aria-label": `Remove ${t}`, onClick: () => onChange(tags.filter((_, j) => j !== i)), children: "\u00D7" })] }, t))), adding && !atMax && (_jsx(Combobox, { className: "sm-combo--tag", label: `Add to ${label}`, placeholder: "Add a tag", autoFocus: true, keepOpen: true, initialOpen: true, options: (suggestions ?? []).filter((s) => !tags.some((t) => sameTag(t, s))).map((s) => ({ value: s, label: s })), onPick: commit, onSubmit: commit, createRow: suggestions !== undefined, onQueryChange: (next) => { if (!next.includes(","))
+                    return next; commit(next); return ""; }, onInputKey: (e, query) => {
+                    if (e.key !== "Backspace" || query !== "" || tags.length === 0)
+                        return false;
+                    onChange(tags.slice(0, -1));
+                    return true;
+                }, onClose: (query, reason) => { if (reason === "blur" && query.trim() !== "")
+                    commit(query); setAdding(false); } })), !adding && !atMax && _jsx("button", { type: "button", className: "sm-tag sm-tag--add", onClick: () => setAdding(true), children: "+ Add" })] }));
+}

package/dist/admin/forms/ref-picker.d.ts

@@ -0,0 +1,25 @@
+/** One entry of the target collection. `status` is its LocaleStatus in the edited
+ *  locale; `absent` marks an entry with no row there — never offered, but a picked
+ *  one is named instead of reading as missing. */
+export type RefOption = {
+    id: string;
+    title: string;
+    status: string;
+    absent?: true;
+};
+export type RefRow = {
+    id: string;
+    title: string;
+    status: string;
+    state: "ok" | "absent" | "missing" | "loading";
+};
+export declare const refIds: (value: unknown, multiple: boolean) => string[];
+export declare const refValue: (ids: string[], multiple: boolean) => string | string[] | undefined;
+/** A pick: a single ref is replaced, a list grows — never past `max`, never twice the same entry. */
+export declare function pickRef(ids: string[], id: string, multiple: boolean, max?: number): string[];
+/** What the dropdown offers: present in the edited locale, not picked yet. */
+export declare const refCandidates: (ids: string[], options: RefOption[] | undefined) => RefOption[];
+/** The selected rows under the input. `options` undefined = still loading. */
+export declare function refRows(ids: string[], options: RefOption[] | undefined): RefRow[];
+/** The badge tone of a LocaleStatus (ui/primitives.tsx's STATUS_TONE, keyed by the stored status). */
+export declare const statusTone: (status: string) => "published" | "changes" | "draft";

package/dist/admin/forms/ref-picker.js

@@ -0,0 +1,30 @@
+// The reference picker's value logic as pure functions (spec 2026-09-17 §2):
+// one widget for `ref` (an id) and `refList` (an id array). RefPicker renders.
+export const refIds = (value, multiple) => multiple
+    ? (Array.isArray(value) ? value.filter((v) => typeof v === "string") : [])
+    : (typeof value === "string" && value !== "" ? [value] : []);
+export const refValue = (ids, multiple) => multiple ? ids : ids[0];
+/** A pick: a single ref is replaced, a list grows — never past `max`, never twice the same entry. */
+export function pickRef(ids, id, multiple, max) {
+    if (!multiple)
+        return [id];
+    if (ids.includes(id) || (typeof max === "number" && ids.length >= max))
+        return ids;
+    return [...ids, id];
+}
+/** What the dropdown offers: present in the edited locale, not picked yet. */
+export const refCandidates = (ids, options) => (options ?? []).filter((o) => !o.absent && !ids.includes(o.id));
+/** The selected rows under the input. `options` undefined = still loading. */
+export function refRows(ids, options) {
+    if (options === undefined)
+        return ids.map((id) => ({ id, title: "…", status: "", state: "loading" }));
+    const byId = new Map(options.map((o) => [o.id, o]));
+    return ids.map((id) => {
+        const o = byId.get(id);
+        if (!o)
+            return { id, title: "Missing entry", status: "", state: "missing" };
+        return { id, title: o.title, status: o.status, state: o.absent ? "absent" : "ok" };
+    });
+}
+/** The badge tone of a LocaleStatus (ui/primitives.tsx's STATUS_TONE, keyed by the stored status). */
+export const statusTone = (status) => status === "published" ? "published" : status === "draft edits" ? "changes" : "draft";

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

@@ -0,0 +1,7 @@
+import type { EntryRecord } from "../../entry-store.ts";
+import type { AdminOps } from "../ops.ts";
+import type { AdminCollection, AdminRegistry } from "../serialize.ts";
+import type { RefOption } from "./ref-picker.ts";
+export declare function refOptionsOf(records: EntryRecord[], meta: AdminCollection | undefined, registry: AdminRegistry, locale: string): RefOption[];
+/** Options by target collection; a target is `undefined` until its list arrives. */
+export declare function useRefOptions(ops: AdminOps, registry: AdminRegistry, locale: string, targets: readonly string[]): Record<string, RefOption[] | undefined>;