smoodly 0.0.18 → 0.0.19

package/dist/admin/serialize.js

@@ -107,5 +107,6 @@ export function serializeAdminConfig(config) {
         homePageSlug: config.homePageSlug,
         pageDepth: config.pageDepth,
         media: { maxSize: config.media.maxSize, accept: [...config.media.accept] },
+        adminPath: config.admin.path,
     };
 }

package/dist/admin/shell/AdminApp.js

@@ -24,6 +24,8 @@ import { LoginView } from "./LoginView.js";
 import { useAdminSession } from "./session.js";
 import { IconRail } from "./IconRail.js";
 import { useRoute } from "./router.js";
+import { AdminPathProvider } from "./base.js";
+import { mountMismatch } from "../../admin-path.js";
 import { ErrorPane } from "./ErrorPane.js";
 import { MediaScreen } from "./MediaScreen.js";
 import { AssetsProvider } from "../forms/assets-context.js";
@@ -31,13 +33,17 @@ import { ElementsProvider } from "../forms/elements-context.js";
 export function AdminApp({ registry, op, auth }) {
     const session = useAdminSession(auth);
     const [ops] = useState(() => makeClientOps(op, session.token));
-    const route = useRoute();
+    const route = useRoute(registry.adminPath);
     const [head = "pages", tail] = route.segments.length ? route.segments : ["pages"];
     const isCollection = registry.collections.some((c) => c.name === head);
     const email = session.state.status === "signed_in" ? session.state.session.user.email : undefined;
     if (session.state.status === "loading") {
         return (_jsx("div", { style: { height: "100vh", display: "grid", placeItems: "center", color: "var(--text-muted)" }, children: "Loading\u2026" }));
     }
+    const mismatch = mountMismatch(route.pathname, registry.adminPath);
+    if (mismatch) {
+        return _jsx("div", { style: { height: "100vh", display: "flex" }, children: _jsx(ErrorPane, { message: mismatch, back: false }) });
+    }
     if (session.state.status === "signed_out")
         return _jsx(LoginView, { client: session.client, providers: auth.providers });
     let main;
@@ -57,5 +63,5 @@ export function AdminApp({ registry, op, auth }) {
         main = _jsx(MediaScreen, {});
     else
         main = _jsx(ErrorPane, { message: "Not found." });
-    return (_jsx(ElementsProvider, { elements: registry.elements, children: _jsx(AssetsProvider, { ops: ops, media: registry.media, children: _jsxs("div", { className: "sm-shell", children: [_jsx(IconRail, { registry: registry, active: head, email: email, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { className: "sm-main", children: main }, `${head}/${tail ?? ""}`)] }) }) }));
+    return (_jsx(AdminPathProvider, { value: registry.adminPath, children: _jsx(ElementsProvider, { elements: registry.elements, children: _jsx(AssetsProvider, { ops: ops, media: registry.media, children: _jsxs("div", { className: "sm-shell", children: [_jsx(IconRail, { registry: registry, active: head, email: email, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { className: "sm-main", children: main }, `${head}/${tail ?? ""}`)] }) }) }) }));
 }

package/dist/admin/shell/EntriesList.js

@@ -12,7 +12,7 @@ import { statusLabel } from "../ui/status-label.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { relativeTime } from "../ui/format.js";
 import { useSortable } from "../ui/useSortable.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { navigate } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
 const LOCALE_KEY = "smoodly.entries.locale";
@@ -30,6 +30,7 @@ function rememberedLocale(registry) {
     return registry.locales.default;
 }
 export function EntriesList({ ops, registry, collection }) {
+    const adminHref = useAdminHref();
     const meta = registry.collections.find((c) => c.name === collection);
     const [records, setRecords] = useState(null);
     const [error, setError] = useState(null);
@@ -74,7 +75,7 @@ export function EntriesList({ ops, registry, collection }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const open = (id) => {
-        navigate(`${BASE}/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`);
+        navigate(adminHref(`/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
     };
     /** "+ New entry" creates an empty draft in the locale on screen and opens it (spec 2026-09-14 §4). */
     const createEntry = async () => {

package/dist/admin/shell/EntryForm.js

@@ -18,6 +18,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
+import { useRefOptions } from "../forms/useRefOptions.js";
+import { useTagSuggestions } from "../forms/useTagSuggestions.js";
 import { useDraftAutosave } from "../editor/autosave.js";
 import { relativeTime, updatedLine } from "../ui/format.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
@@ -27,10 +29,13 @@ import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
 import { localeStatusOf } from "./pages-tree.js";
 import { ResizeHandle } from "../ui/ResizeHandle.js";
 import { entrySourceLocale, entryTitle, localizedFieldKeys } from "./entries-list.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
 import { navigate, useLeaveGuard } from "./router.js";
+/** A stable empty map for the hooks that run before the "no such collection" return. */
+const NO_FIELDS = {};
 export function EntryForm({ ops, registry, collection, id }) {
+    const adminHref = useAdminHref();
     const meta = registry.collections.find((c) => c.name === collection);
     const multilingual = registry.locales.supported.length > 1;
     const [locale, setLocale] = useState(() => localeFromUrl(registry));
@@ -38,7 +43,6 @@ export function EntryForm({ ops, registry, collection, id }) {
     const [fields, setFields] = useState(null);
     const [urls, setUrls] = useState({});
     const [parentLocales, setParentLocales] = useState(registry.locales.supported);
-    const [refOptions, setRefOptions] = useState({});
     const [notice, setNotice] = useState(null);
     const [fieldErrors, setFieldErrors] = useState({});
     const [adding, setAdding] = useState(false);
@@ -76,6 +80,9 @@ export function EntryForm({ ops, registry, collection, id }) {
         }
         return out;
     }, [meta]);
+    const refTargetList = useMemo(() => Object.values(refTargets), [refTargets]);
+    const refOptions = useRefOptions(ops, registry, locale, refTargetList);
+    const tagSuggestions = useTagSuggestions(ops, collection, meta?.fields ?? NO_FIELDS, locale);
     const localeKeys = useMemo(() => (meta ? localizedFieldKeys(meta) : []), [meta]);
     // Load the locale's merged fields; an absent locale comes back with fields: null.
     useEffect(() => {
@@ -99,27 +106,6 @@ export function EntryForm({ ops, registry, collection, id }) {
             setNotice({ tone: "error", text: "Couldn't reach the server." }); });
         return () => { cancelled = true; };
     }, [ops, collection, id, locale, reloadKey]);
-    // Ref options in the locale being edited: a target absent there is not offered.
-    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
-                    .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(console.error);
-        }
-        return () => { cancelled = true; };
-    }, [ops, refTargets, registry, locale]);
     if (!meta)
         return _jsx("p", { style: { padding: 32 }, children: "No such collection." });
     const row = record?.locales[locale];
@@ -308,7 +294,7 @@ export function EntryForm({ ops, registry, collection, id }) {
             return;
         const r = await ops.entries.delete(collection, id);
         if (r.ok)
-            navigate(`${BASE}/${collection}`, { force: true });
+            navigate(adminHref(`/${collection}`), { force: true });
         else
             fail(r);
     };
@@ -317,19 +303,19 @@ export function EntryForm({ ops, registry, collection, id }) {
     const base = meta.path?.[locale];
     const slugPrefix = base ? `/${base}/` : undefined;
     const present = record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale];
-    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, mark: multilingual && !localeKeys.includes(key) ? _jsx(UnlocalizedMark, {}) : undefined, onChange: (value) => {
+    const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] : undefined, suggestions: tagSuggestions[key], prefix: d.type === "slug" ? slugPrefix : undefined, mark: multilingual && !localeKeys.includes(key) ? _jsx(UnlocalizedMark, {}) : undefined, onChange: (value) => {
             setFields((f) => ({ ...(f ?? {}), [key]: value }));
             setDirty(true);
             setTouched(true);
             mark();
         } }, key));
     const absent = record !== null && fields === null && !record.locales[locale];
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/${collection}`, items: [
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref(`/${collection}`), items: [
                             {
-                                label: meta.title, href: `${BASE}/${collection}`,
+                                label: meta.title, href: adminHref(`/${collection}`),
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: present, parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => void doAddLocale(l) })),
                             },
                             { label: heading },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), urls[locale] && (_jsx(LinkButton, { href: urls[locale], target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsx("fieldset", { disabled: true, className: "sm-history__form", children: Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: snapshot.fields[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: () => { } }, key))) })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), urls[locale] && (_jsx(LinkButton, { href: urls[locale], target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsx("fieldset", { disabled: true, className: "sm-history__form", children: Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: snapshot.fields[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: () => { } }, key))) })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
                                             revealField(formRef.current, path); } })] })), absent ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsxs("p", { children: ["This entry doesn't exist in ", locale, " yet. Adding it copies the ", entrySourceLocale(record, registry), " fields as the first ", locale, " draft."] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs(Button, { onClick: () => void doAddLocale(locale), disabled: adding || !parentLocales.includes(locale), title: parentLocales.includes(locale) ? undefined : `add ${locale} to the parent first`, children: ["Add ", locale] }), _jsxs(Button, { variant: "secondary", onClick: () => { void switchLocale(entrySourceLocale(record, registry)); }, children: ["Back to ", entrySourceLocale(record, registry)] })] })] })) : fields !== null ? (Object.entries(meta.fields).map(widget)) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", children: [record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Created", value: relativeTime(record.createdAt) }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), multilingual && _jsx(InfoRow, { label: "Languages", value: Object.keys(record.locales).join(", ") }), _jsx(InfoRow, { label: "ID", value: id, mono: true })] })), record && (_jsxs("div", { className: "sm-card", children: [multilingual && row && Object.keys(record.locales).length > 1 && (_jsxs(Button, { variant: "secondary", onClick: () => void doRemoveLocale(), children: ["Remove from ", locale] })), _jsx(Button, { variant: "danger", onClick: destroy, children: "Delete" })] }))] })] })] }));
 }

package/dist/admin/shell/ErrorPane.d.ts

@@ -1,4 +1,6 @@
-/** A whole-column failure: nothing to show but the message and a way back. */
-export declare function ErrorPane({ message }: {
+/** A whole-column failure: nothing to show but the message and a way
+ *  back — none when the shell is mounted outside its own path. */
+export declare function ErrorPane({ message, back }: {
     message: string;
+    back?: boolean;
 }): import("react").JSX.Element;

package/dist/admin/shell/ErrorPane.js

@@ -2,8 +2,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Banner } from "../ui/primitives.js";
-import { BASE } from "./base.js";
-/** A whole-column failure: nothing to show but the message and a way back. */
-export function ErrorPane({ message }) {
-    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40 }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [_jsx(Banner, { tone: "error", children: message }), _jsx("a", { href: `${BASE}/pages`, style: { fontSize: "var(--text-md)" }, children: "\u2190 Back to pages" })] }) }));
+import { useAdminHref } from "./base.js";
+/** A whole-column failure: nothing to show but the message and a way
+ *  back — none when the shell is mounted outside its own path. */
+export function ErrorPane({ message, back = true }) {
+    const adminHref = useAdminHref();
+    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40 }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [_jsx(Banner, { tone: "error", children: message }), back && _jsx("a", { href: adminHref("/pages"), style: { fontSize: "var(--text-md)" }, children: "\u2190 Back to pages" })] }) }));
 }

package/dist/admin/shell/GlobalFields.d.ts

@@ -1,11 +1,8 @@
 import type { AdminGlobal } from "../serialize.ts";
 import type { Group } from "../forms/tabs.ts";
 import { type NodeValues } from "../editor/InspectorFields.tsx";
-export type RefOption = {
-    id: string;
-    title: string;
-    status: string;
-};
+import type { RefOption } from "../forms/ref-picker.ts";
+export type { RefOption };
 /** The item's value map as the inspector reads it: the reserved keys pulled out into their namespaces. */
 export declare function globalValues(fields: Record<string, unknown>): NodeValues;
 export declare function GlobalFields({ item, groups, fields, errors, refOptions, multilingual, inlinePath, onEditHere, onChange }: {
@@ -15,7 +12,7 @@ export declare function GlobalFields({ item, groups, fields, errors, refOptions,
     fields: Record<string, unknown>;
     errors?: Record<string, string>;
     /** Loaded ref options by target collection. */
-    refOptions: Record<string, RefOption[]>;
+    refOptions: Record<string, RefOption[] | undefined>;
     multilingual: boolean;
     /** The content field with an active inline session: its richtext widget yields to a note. */
     inlinePath?: string;

package/dist/admin/shell/GlobalFields.js

@@ -14,6 +14,6 @@ export function GlobalFields({ item, groups, fields, errors, refOptions, multili
     return (_jsx(InspectorFields, { groups: groups, values: values, render: ({ key, ns, descriptor }, { emptyLabel, scope }) => {
             const target = (descriptor.type === "ref" || descriptor.type === "refList") && typeof descriptor.target === "string" ? descriptor.target : null;
             const localized = ns === "fields" && item.fields[key]?.localized === true;
-            return (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(values, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, errors: errors, refOptions: target ? refOptions[target] ?? [] : undefined, mark: ns === "fields" && multilingual && !localized ? _jsx(UnlocalizedMark, {}) : undefined, inlinePath: ns === "fields" ? inlinePath : undefined, onEditHere: onEditHere, onChange: (value) => onChange(ns, key, value) }, `${ns}.${key}`));
+            return (_jsx(FieldWidget, { fieldKey: key, descriptor: descriptor, value: valueOf(values, { key, ns, descriptor }), emptyLabel: emptyLabel, scope: scope, errors: errors, refOptions: target ? refOptions[target] : undefined, mark: ns === "fields" && multilingual && !localized ? _jsx(UnlocalizedMark, {}) : undefined, inlinePath: ns === "fields" ? inlinePath : undefined, onEditHere: onEditHere, onChange: (value) => onChange(ns, key, value) }, `${ns}.${key}`));
         } }));
 }

package/dist/admin/shell/GlobalForm.js

@@ -15,6 +15,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { CSS_KEY, SETTINGS_KEY, STYLES_KEY } from "../../global.js";
 import { tabsFor } from "../forms/tabs.js";
 import { revealField } from "../forms/reveal.js";
+import { useRefOptions } from "../forms/useRefOptions.js";
 import { useDraftAutosave } from "../editor/autosave.js";
 import { updatedLine } from "../ui/format.js";
 import { LocaleSwitcher } from "../ui/LocaleSwitcher.js";
@@ -23,19 +24,18 @@ import { PublishControl } from "../ui/PublishControl.js";
 import { HistoryModal, historyRows } from "../ui/HistoryModal.js";
 import { localeStatusOf } from "./pages-tree.js";
 import { ResizeHandle } from "../ui/ResizeHandle.js";
-import { entryTitle } from "./entries-list.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { GlobalFields } from "./GlobalFields.js";
 import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
 import { useLeaveGuard } from "./router.js";
 export function GlobalForm({ ops, registry, name }) {
+    const adminHref = useAdminHref();
     const item = registry.globals.find((s) => s.name === name);
     const multilingual = registry.locales.supported.length > 1;
     const [locale, setLocale] = useState(() => localeFromUrl(registry));
     const [record, setRecord] = useState(null);
     const [fields, setFields] = useState(null);
     const [usage, setUsage] = useState([]);
-    const [refOptions, setRefOptions] = useState({});
     const [notice, setNotice] = useState(null);
     const [fieldErrors, setFieldErrors] = useState({});
     const [dirty, setDirty] = useState(false);
@@ -67,6 +67,8 @@ export function GlobalForm({ ops, registry, name }) {
         }
         return out;
     }, [item]);
+    const refTargetList = useMemo(() => Object.values(refTargets), [refTargets]);
+    const refOptions = useRefOptions(ops, registry, locale, refTargetList);
     useEffect(() => {
         let cancelled = false;
         setFields(null);
@@ -87,22 +89,6 @@ export function GlobalForm({ ops, registry, name }) {
             setNotice({ tone: "error", text: "Couldn't reach the server." }); });
         return () => { cancelled = true; };
     }, [ops, name, locale, reloadKey]);
-    // Ref options in the locale being edited — the entry form's rule.
-    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) => {
-                if (cancelled || !r.ok)
-                    return;
-                const options = r.data
-                    .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(console.error);
-        }
-        return () => { cancelled = true; };
-    }, [ops, refTargets, registry, locale]);
     if (!item)
         return _jsx("p", { style: { padding: 32 }, children: "No such global item." });
     const row = record?.locales[locale];
@@ -247,12 +233,12 @@ export function GlobalForm({ ops, registry, name }) {
         setTouched(true);
         mark();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: `${BASE}/globals`, items: [
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref("/globals"), items: [
                             {
-                                label: "Globals", href: `${BASE}/globals`,
+                                label: "Globals", href: adminHref("/globals"),
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: (l) => { void switchLocale(l); }, onAdd: () => undefined })),
                             },
                             { label: item.title },
                         ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
-                                            revealField(formRef.current, path); } })] })), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: `${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`, children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] }))] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })) })] })] }));
+                                            revealField(formRef.current, path); } })] })), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`), children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] }))] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })) })] })] }));
 }

package/dist/admin/shell/GlobalList.js

@@ -12,7 +12,7 @@ import { statusLabel } from "../ui/status-label.js";
 import { StatusBadge } from "../ui/primitives.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { relativeTime } from "../ui/format.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { ErrorPane } from "./ErrorPane.js";
 const LOCALE_KEY = "smoodly.entries.locale"; // the same choice the collection lists remember
 function rememberedLocale(registry) {
@@ -27,6 +27,7 @@ function rememberedLocale(registry) {
     return registry.locales.default;
 }
 export function GlobalList({ ops, registry }) {
+    const adminHref = useAdminHref();
     const [items, setItems] = useState(null);
     const [error, setError] = useState(null);
     const [locale, setLocale] = useState(() => rememberedLocale(registry));
@@ -54,7 +55,7 @@ export function GlobalList({ ops, registry }) {
             { label: "Status", width: "170px" },
         ], empty: items ? "No globals are registered." : "Loading…", rows: rows.map((row) => ({
             key: row.name,
-            href: `${BASE}/globals/${encodeURIComponent(row.name)}?locale=${encodeURIComponent(locale)}`,
+            href: adminHref(`/globals/${encodeURIComponent(row.name)}?locale=${encodeURIComponent(locale)}`),
             cells: [
                 _jsx("span", { className: "sm-cell sm-cell--title", children: row.title }, "t"),
                 _jsx("span", { className: "sm-cell sm-cell--muted", children: row.flavour }, "k"),

package/dist/admin/shell/IconRail.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { Globe, Image, LibraryBig, PanelTop, Settings } from "lucide-react";
 import { ThemeToggle } from "../ui/primitives.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { RouteLink } from "./RouteLink.js";
 /** Lucide at the rail's size and stroke (the tile's CSS restates both). */
 const ICON = { size: 18, strokeWidth: 2, "aria-hidden": true };
@@ -30,6 +30,7 @@ function AppIcon() {
     return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 89 86", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("path", { fill: "#0038B1", d: "M0 51.5552C0 24.3141 25.0505 0 52.5493 0H52.7761C74.4707 0 89 14.6336 89 34.445C89 61.6862 64.4034 86 36.0066 86C14.0946 86 0 70.9165 0 51.5552Z" }), _jsx("path", { fill: "#FFFFFF", d: "M23.25 46.1188C23.25 33.0027 34.8806 21.2959 47.6479 21.2959H47.7532C57.8257 21.2959 64.5714 28.3417 64.5714 37.8805C64.5714 50.9966 53.1516 62.7033 39.9674 62.7033C29.7939 62.7033 23.25 55.4409 23.25 46.1188Z" })] }));
 }
 export function IconRail({ registry, active, email, onSignOut }) {
+    const adminHref = useAdminHref();
     const root = useRef(null);
     const uid = useId();
     const [open, setOpen] = useState(null);
@@ -77,5 +78,5 @@ export function IconRail({ registry, active, email, onSignOut }) {
     const collectionsOpen = open === "collections" || (hovered && open === null);
     const name = email?.split("@")[0] ?? "Editor";
     const initials = name.slice(0, 2).toUpperCase();
-    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), `${BASE}/pages`), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: `${BASE}/${c.name}`, "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), `${BASE}/media`), registry.globals.length > 0 && link("globals", "Globals", _jsx(Globe, { ...ICON }), `${BASE}/globals`), link("settings", "Settings", _jsx(Settings, { ...ICON }), null)] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
+    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: adminHref(`/${c.name}`), "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), registry.globals.length > 0 && link("globals", "Globals", _jsx(Globe, { ...ICON }), adminHref("/globals")), link("settings", "Settings", _jsx(Settings, { ...ICON }), null)] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
 }

package/dist/admin/shell/PagesList.js

@@ -14,7 +14,7 @@ import { Button, StatusBadge } from "../ui/primitives.js";
 import { statusLabel } from "../ui/status-label.js";
 import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { useSortable } from "../ui/useSortable.js";
-import { BASE } from "./base.js";
+import { useAdminHref } from "./base.js";
 import { navigate } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
 const LOCALE_KEY = "smoodly.pages.locale";
@@ -32,6 +32,7 @@ function rememberedLocale(registry) {
     return registry.locales.default;
 }
 export function PagesList({ ops, registry }) {
+    const adminHref = useAdminHref();
     const [pages, setPages] = useState(null);
     const [error, setError] = useState(null);
     const [collapsed, setCollapsed] = useState(() => new Set());
@@ -80,7 +81,7 @@ export function PagesList({ ops, registry }) {
     });
     /** The editor opens in the locale selected here. */
     const openEditor = (id) => {
-        navigate(`${BASE}/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`);
+        navigate(adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
     };
     /** Run an op; on success reload the list (and maybe navigate), else show the op's message. Resolves to whether it succeeded. */
     const run = async (work, then) => {
@@ -192,7 +193,7 @@ export function PagesList({ ops, registry }) {
         else if (row.template !== null)
             openEditor(row.id);
         else if (row.kind === "mount" && row.collection)
-            navigate(`${BASE}/${row.collection}`);
+            navigate(adminHref(`/${row.collection}`));
         else if (row.hasChildren)
             toggle(row.id);
     };

package/dist/admin/shell/base.d.ts

@@ -1 +1,4 @@
-export declare const BASE = "/admin";
+export declare const AdminPathProvider: import("react").Provider<string>;
+export declare const useAdminPath: () => string;
+/** `adminHref("/pages")` → "/admin/pages" — the path starts with "/". */
+export declare function useAdminHref(): (path: string) => string;

package/dist/admin/shell/base.js

@@ -1,4 +1,16 @@
+"use client";
 // packages/smoodly/src/admin/shell/base.ts
-// The admin's mount path — shared by every shell view and route link so
-// there is exactly one place that knows it.
-export const BASE = "/admin";
+// The admin's mount path inside the shell (spec 2026-09-17 §3): AdminApp
+// provides registry.adminPath, every view builds its links through
+// useAdminHref(). Without a provider the path is the default, so a
+// component rendered alone (a test, a story) links under /admin.
+import { createContext, useCallback, useContext } from "react";
+import { DEFAULT_ADMIN_PATH, adminHref } from "../../admin-path.js";
+const AdminPathContext = createContext(DEFAULT_ADMIN_PATH);
+export const AdminPathProvider = AdminPathContext.Provider;
+export const useAdminPath = () => useContext(AdminPathContext);
+/** `adminHref("/pages")` → "/admin/pages" — the path starts with "/". */
+export function useAdminHref() {
+    const base = useContext(AdminPathContext);
+    return useCallback((path) => adminHref(base, path), [base]);
+}

package/dist/admin/shell/router.d.ts

@@ -1,4 +1,5 @@
 export type Route = {
+    pathname: string;
     segments: string[];
     search: string;
 };
@@ -29,9 +30,9 @@ export declare function navigate(href: string, opts?: {
     replace?: boolean;
     force?: boolean;
 }): boolean;
-/** The current route: empty until mount, then the URL, re-read on
- *  popstate and after navigate(). */
-export declare function useRoute(): Route;
+/** The current route under `base`: empty until mount, then the URL,
+ *  re-read on popstate and after navigate(). */
+export declare function useRoute(base: string): Route;
 /** Register the calling view as dirty: navigate() asks before leaving,
  *  and beforeunload covers reload, closing the tab and a real link out. */
 export declare function useLeaveGuard(dirty: boolean): void;

package/dist/admin/shell/router.js

@@ -1,20 +1,20 @@
 "use client";
 // packages/smoodly/src/admin/shell/router.ts
 // The admin's own router (spec 2026-09-08 client routing): the route is
-// the URL under BASE, held in React state and moved with pushState, so
-// the shell stays mounted and a click is a state change, not a document
-// load. The URL is the only source: the shell's first render is the
+// the URL under the admin path, held in React state and moved with
+// pushState, so the shell stays mounted and a click is a state change,
+// not a document load. The URL is the only source: the shell's first render is the
 // session gate, so no view exists before the mount effect has read it.
 // Next's router is not involved — native pushState updates its
 // usePathname without a refetch — and the admin core stays
 // framework-agnostic.
 import { useEffect, useState } from "react";
-import { BASE } from "./base.js";
+import { DEFAULT_ADMIN_PATH } from "../../admin-path.js";
 /** The segments under `base`: "/admin/articles/x" → ["articles", "x"];
  *  the mount itself, or a pathname outside it, → []. Segments stay as
  *  written; the shell decodes the ones it uses, as it does for the
  *  catch-all's params. */
-export function segmentsOf(pathname, base = BASE) {
+export function segmentsOf(pathname, base = DEFAULT_ADMIN_PATH) {
     if (pathname !== base && !pathname.startsWith(`${base}/`))
         return [];
     return pathname.slice(base.length).split("/").filter((s) => s !== "");
@@ -40,10 +40,13 @@ export function mayLeave(guards, confirm) {
 // ── the live router ──────────────────────────────────────────────────
 const guards = new Set();
 const listeners = new Set();
-function currentRoute() {
-    return { segments: segmentsOf(window.location.pathname), search: window.location.search };
+function currentRoute(base) {
+    const { pathname, search } = window.location;
+    return { pathname, segments: segmentsOf(pathname, base), search };
 }
-const sameRoute = (a, b) => a.search === b.search && a.segments.length === b.segments.length && a.segments.every((s, i) => s === b.segments[i]);
+// The segments derive from the pathname and a base that never changes
+// under a mounted shell, so two strings decide sameness.
+const sameRoute = (a, b) => a.pathname === b.pathname && a.search === b.search;
 /** Move to `href` in place; true when the move happened. A push asks the
  *  leave guard; a replace never leaves the view, so it does not ask.
  *  `force` skips the guard for a view that has just saved or deleted its
@@ -56,17 +59,17 @@ export function navigate(href, opts = {}) {
         listener();
     return true;
 }
-/** The current route: empty until mount, then the URL, re-read on
- *  popstate and after navigate(). */
-export function useRoute() {
-    const [route, setRoute] = useState({ segments: [], search: "" });
+/** The current route under `base`: empty until mount, then the URL,
+ *  re-read on popstate and after navigate(). */
+export function useRoute(base) {
+    const [route, setRoute] = useState({ pathname: "", segments: [], search: "" });
     useEffect(() => {
-        const sync = () => setRoute((prev) => { const next = currentRoute(); return sameRoute(prev, next) ? prev : next; });
+        const sync = () => setRoute((prev) => { const next = currentRoute(base); return sameRoute(prev, next) ? prev : next; });
         sync();
         listeners.add(sync);
         window.addEventListener("popstate", sync);
         return () => { listeners.delete(sync); window.removeEventListener("popstate", sync); };
-    }, []);
+    }, [base]);
     return route;
 }
 /** Register the calling view as dirty: navigate() asks before leaving,

package/dist/admin/ui/Combobox.d.ts

@@ -0,0 +1,30 @@
+import { type KeyboardEvent, type ReactNode } from "react";
+import { type ComboOption } from "./combo-box.ts";
+export type ComboboxProps = {
+    options: ComboOption[];
+    onPick(value: string): void;
+    /** Accessible name of the input. */
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Stay open with the query cleared after a pick (multi-select). */
+    keepOpen?: boolean;
+    /** Shown when there are no options at all; "No matches" covers a filter that leaves nothing. */
+    emptyText?: string;
+    renderOption?(o: ComboOption): ReactNode;
+    /** Free text: Enter with no active row submits the query, and no row starts active. */
+    onSubmit?(query: string): void;
+    /** With `onSubmit`: a last row, `Create "query"`, unless an option's label equals the query. */
+    createRow?: boolean;
+    /** Every query change passes through; the return value is the query kept. */
+    onQueryChange?(next: string): string;
+    /** Keys the owner wants first; return true when handled. */
+    onInputKey?(e: KeyboardEvent<HTMLInputElement>, query: string): boolean;
+    /** Escape, or focus leaving the control; `query` is what was typed and not picked. */
+    onClose?(query: string, reason: "escape" | "blur"): void;
+    autoFocus?: boolean;
+    /** Start open: the tags input, and static-markup tests. */
+    initialOpen?: boolean;
+    className?: string;
+};
+export declare function Combobox({ options, onPick, label, placeholder, disabled, keepOpen, emptyText, renderOption, onSubmit, createRow, onQueryChange, onInputKey, onClose, autoFocus, initialOpen, className, }: ComboboxProps): import("react").JSX.Element;