smoodly 0.0.18 → 0.0.19

package/README.md

@@ -495,6 +495,41 @@ 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
@@ -1619,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/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 },
@@ -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

@@ -12,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;

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, 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." }), 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: `${BASE}/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" }))] }));
+    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>;

package/dist/admin/forms/useRefOptions.js

@@ -0,0 +1,36 @@
+"use client";
+// Ref candidates for a form (spec 2026-09-17 §2): every entry of each target
+// collection, loaded once per locale and filtered in the browser. One hook
+// for the entry form, the Globals form and the page editor — the picker
+// takes options as a prop, so a move to server search changes this file only.
+import { useEffect, useState } from "react";
+import { entryTitle } from "../shell/entries-list.js";
+import { localeStatusOf } from "../shell/pages-tree.js";
+export function refOptionsOf(records, meta, registry, locale) {
+    return records.map((e) => {
+        const row = e.locales[locale];
+        const title = meta ? entryTitle(e, meta, registry, locale) : e.id;
+        return row ? { id: e.id, title, status: localeStatusOf(row) } : { id: e.id, title, status: "", absent: true };
+    });
+}
+/** Options by target collection; a target is `undefined` until its list arrives. */
+export function useRefOptions(ops, registry, locale, targets) {
+    const [loaded, setLoaded] = useState({});
+    const key = [...new Set(targets)].sort().join("\n");
+    useEffect(() => {
+        let cancelled = false;
+        setLoaded({}); // the previous locale's options must not show under this one
+        for (const target of key === "" ? [] : key.split("\n")) {
+            const meta = registry.collections.find((c) => c.name === target);
+            ops.entries.list(target).then((r) => {
+                if (cancelled)
+                    return;
+                // A failed list degrades to "nothing to pick from", not a stuck load.
+                setLoaded((prev) => ({ ...prev, [target]: r.ok ? refOptionsOf(r.data, meta, registry, locale) : [] }));
+            }).catch((e) => { console.error(e); if (!cancelled)
+                setLoaded((prev) => ({ ...prev, [target]: [] })); });
+        }
+        return () => { cancelled = true; };
+    }, [ops, registry, locale, key]);
+    return loaded;
+}

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

@@ -0,0 +1,5 @@
+import type { AdminOps } from "../ops.ts";
+import type { AdminField } from "../serialize.ts";
+/** The top-level tags fields — the op reads top-level keys only. */
+export declare const tagFieldKeys: (fields: Record<string, AdminField>) => string[];
+export declare function useTagSuggestions(ops: AdminOps, collection: string, fields: Record<string, AdminField>, locale: string): Record<string, string[] | undefined>;

package/dist/admin/forms/useTagSuggestions.js

@@ -0,0 +1,22 @@
+"use client";
+// Suggestions for a collection form's f.tags() fields (spec 2026-09-17 §6):
+// one ops.entries.distinct per top-level tags field, once per locale.
+import { useEffect, useState } from "react";
+/** The top-level tags fields — the op reads top-level keys only. */
+export const tagFieldKeys = (fields) => Object.entries(fields).filter(([, d]) => d.type === "tags").map(([key]) => key);
+export function useTagSuggestions(ops, collection, fields, locale) {
+    const [loaded, setLoaded] = useState({});
+    const key = tagFieldKeys(fields).join("\n");
+    useEffect(() => {
+        let cancelled = false;
+        setLoaded({});
+        for (const field of key === "" ? [] : key.split("\n")) {
+            ops.entries.distinct(collection, field, locale).then((r) => {
+                if (!cancelled)
+                    setLoaded((prev) => ({ ...prev, [field]: r.ok ? r.data : [] }));
+            }).catch(console.error);
+        }
+        return () => { cancelled = true; };
+    }, [ops, collection, locale, key]);
+    return loaded;
+}

package/dist/admin/ops-impl.js

@@ -1,6 +1,7 @@
 import { entryFieldsIn, entryTitleIn } from "../entry-store.js";
+import { distinctTags } from "../tags.js";
 import { ASSET_COLLECTION } from "../media.js";
-import { BASE } from "./shell/base.js";
+import { adminHref } from "../admin-path.js";
 import { affectedTargets, collectionTag, entryTag, pageTag, pagesTreeTag, globalTag } from "../revalidate.js";
 import { ensureFixedNodes, fixedNodeOf } from "./fixed-nodes.js";
 import { ensureGlobalItems } from "./global-items.js";
@@ -207,16 +208,16 @@ export function createAdminOps(deps) {
             const record = await pages.getPage(sourceId);
             if (!record)
                 return { title: sourceId, href: null };
-            return { title: record.locales[def]?.title ?? Object.values(record.locales)[0]?.title ?? sourceId, href: `${BASE}/pages/${sourceId}` };
+            return { title: record.locales[def]?.title ?? Object.values(record.locales)[0]?.title ?? sourceId, href: adminHref(config.admin.path, `/pages/${sourceId}`) };
         }
         for (const item of config.registry.globals ?? []) {
             if (await entries.get(item.name, sourceId))
-                return { title: item.title, href: `${BASE}/globals/${encodeURIComponent(item.name)}` };
+                return { title: item.title, href: adminHref(config.admin.path, `/globals/${encodeURIComponent(item.name)}`) };
         }
         for (const c of config.registry.collections ?? []) {
             const record = await entries.get(c.name, sourceId);
             if (record)
-                return { title: entryTitleIn(record, def, c), href: `${BASE}/${c.name}/${sourceId}` };
+                return { title: entryTitleIn(record, def, c), href: adminHref(config.admin.path, `/${c.name}/${sourceId}`) };
         }
         return { title: sourceId, href: null };
     };
@@ -519,6 +520,24 @@ export function createAdminOps(deps) {
         },
         entries: {
             list: (collection) => guard(async () => ok(await entries.list(collection))),
+            // In JS over the list the admin already reads: PostgREST has no DISTINCT over
+            // jsonb_array_elements without an RPC (spec 2026-09-17 §6; the RPC is in the register).
+            distinct: (collection, field, locale) => guard(async () => {
+                const unsupported = supportedLocale(locale);
+                if (unsupported)
+                    return unsupported;
+                const descriptors = collectionFields(collection);
+                if (!descriptors)
+                    return err("not_found", `smoodly: no collection named "${collection}".`);
+                const d = descriptors[field];
+                if (d?.type !== "tags")
+                    return err("validation", `smoodly: "${field}" is not a tags field of "${collection}".`);
+                const records = await entries.list(collection);
+                const values = d.localized === true
+                    ? records.flatMap((r) => (r.locales[locale] ? [r.locales[locale].fields[field]] : []))
+                    : records.map((r) => r.fields[field]);
+                return ok(distinctTags(values));
+            }),
             get: (collection, id, locale) => guard(async () => {
                 const unsupported = supportedLocale(locale);
                 if (unsupported)

package/dist/admin/ops.d.ts

@@ -131,6 +131,10 @@ export type AdminOps = {
     };
     entries: {
         list(collection: string): Promise<OpResult<EntryRecord[]>>;
+        /** The distinct tags one top-level `f.tags()` field holds across the collection's working copies
+         *  (drafts included), for the chip widget's suggestions (spec 2026-09-17 §6). A localized field
+         *  reads `locale`'s rows; a shared one reads every entry. `validation` for any other field. */
+        distinct(collection: string, field: string, locale: string): Promise<OpResult<string[]>>;
         /** not_found only when the entry is missing; an absent locale comes back with `fields: null`. */
         get(collection: string, id: string, locale: string): Promise<OpResult<EntryGetResult>>;
         create(collection: string, input: EntryCreateInput): Promise<OpResult<EntryRecord>>;

package/dist/admin/serialize.d.ts

@@ -85,6 +85,8 @@ export type AdminRegistry = {
         maxSize: number;
         accept: string[];
     };
+    /** The admin's mount path: every link and the client router sit under it (spec 2026-09-17 §3). */
+    adminPath: string;
 };
 /** A registered section's settings descriptors — what a visual global's form shows (spec 2026-09-14 §3). */
 export declare function sectionSettings(config: ResolvedConfig, name: string): Record<string, Descriptor>;