smoodly 0.0.17 → 0.0.19

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/ActionMenu.d.ts

@@ -4,8 +4,10 @@ export type ActionMenuItem = {
     disabled?: boolean;
     danger?: boolean;
 };
-export declare function ActionMenu({ label, items, disabled }: {
+export declare function ActionMenu({ label, items, disabled, small }: {
     label: string;
     items: ActionMenuItem[];
     disabled?: boolean;
+    /** The smaller round button, next to a small Publish. */
+    small?: boolean;
 }): import("react").JSX.Element;

package/dist/admin/ui/ActionMenu.js

@@ -4,10 +4,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // publish flow §2). Items are always rendered and disabled when they do
 // not apply — the layout never shifts and the editor learns what exists.
 // The popover is the Pages list's row menu shape (`.sm-picker`), anchored
-// under the button instead of at the pointer.
+// under the button instead of at the pointer, hanging from the button's
+// right edge (every control sits at its bar's or card's right).
 import { useEffect, useRef, useState } from "react";
 import { cx } from "./primitives.js";
-export function ActionMenu({ label, items, disabled }) {
+export function ActionMenu({ label, items, disabled, small = false }) {
     const [open, setOpen] = useState(false);
     const ref = useRef(null);
     useEffect(() => {
@@ -21,5 +22,5 @@ export function ActionMenu({ label, items, disabled }) {
         document.addEventListener("keydown", onKey);
         return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
     }, [open]);
-    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { type: "button", className: "sm-dotmenu", "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, onClick: () => setOpen((o) => !o), children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(false); item.run(); }, children: item.label }, item.label))) }))] }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open, disabled: disabled, onClick: () => setOpen((o) => !o), children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(false); item.run(); }, children: item.label }, item.label))) }))] }));
 }

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;

package/dist/admin/ui/Combobox.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A text input with a listbox under it (spec 2026-09-17 §1): the reference
+// picker and the tags input are both this. It knows nothing about entries
+// or tags — options in, a pick out. Decisions live in ./combo-box.ts.
+// Rows keep the input focused (mousedown is swallowed), so "focus left the
+// control" is the one close signal besides Escape.
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cx } from "./primitives.js";
+import { filterOptions, opensUp, showsCreate, stepActive } from "./combo-box.js";
+const keepFocus = (e) => e.preventDefault();
+/** The vertical band the list may occupy: the nearest clipping ancestor's box, cut to the viewport. */
+function clipBand(el) {
+    let top = 0;
+    let bottom = window.innerHeight;
+    for (let p = el.parentElement; p; p = p.parentElement) {
+        if (/(auto|scroll|hidden|clip)/.test(getComputedStyle(p).overflowY)) {
+            const r = p.getBoundingClientRect();
+            top = Math.max(top, r.top);
+            bottom = Math.min(bottom, r.bottom);
+            break;
+        }
+    }
+    return { top, bottom };
+}
+export function Combobox({ options, onPick, label, placeholder, disabled, keepOpen, emptyText, renderOption, onSubmit, createRow, onQueryChange, onInputKey, onClose, autoFocus, initialOpen = false, className, }) {
+    const rest = onSubmit ? -1 : 0; // the active row a fresh query starts from
+    const [query, setQuery] = useState("");
+    const [open, setOpen] = useState(initialOpen);
+    const [active, setActive] = useState(rest);
+    const root = useRef(null);
+    const list = useRef(null);
+    const [up, setUp] = useState(false);
+    const id = useId();
+    const shown = filterOptions(options, query);
+    const create = onSubmit !== undefined && createRow === true && showsCreate(options, query);
+    const count = shown.length + (create ? 1 : 0);
+    // Free text with nothing to offer shows no popover; a picker says why it is empty.
+    const popover = open && !disabled && (count > 0 || !onSubmit);
+    // A field at the bottom of a scrolling form has no room under it: the list hangs above instead.
+    useLayoutEffect(() => {
+        if (!popover || !root.current || !list.current)
+            return;
+        const box = root.current.getBoundingClientRect();
+        const band = clipBand(root.current);
+        setUp(opensUp({ below: band.bottom - box.bottom - 4, above: box.top - band.top - 4, height: list.current.offsetHeight }));
+    }, [popover, count]);
+    const reset = () => { setQuery(""); setActive(rest); };
+    const close = (reason) => {
+        setOpen(false);
+        onClose?.(query, reason);
+        reset();
+    };
+    const pick = (i) => {
+        if (i < shown.length)
+            onPick(shown[i].value);
+        else
+            onSubmit?.(query);
+        reset();
+        if (!keepOpen)
+            setOpen(false);
+    };
+    const onKeyDown = (e) => {
+        if (onInputKey?.(e, query))
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+            setActive((a) => stepActive(a, count, e.key === "ArrowDown" ? 1 : -1));
+        }
+        else if (e.key === "Enter") {
+            e.preventDefault();
+            if (open && active >= 0 && active < count)
+                pick(active);
+            else if (onSubmit && query.trim() !== "") {
+                onSubmit(query);
+                reset();
+            }
+        }
+        else if (e.key === "Escape") {
+            if (open)
+                e.stopPropagation(); // a modal behind it stays open
+            close("escape");
+        }
+    };
+    return (_jsxs("div", { ref: root, className: cx("sm-combo", className), children: [_jsx("input", { className: "sm-input", role: "combobox", "aria-label": label, "aria-autocomplete": "list", "aria-expanded": popover, "aria-controls": `${id}-list`, "aria-activedescendant": popover && active >= 0 ? `${id}-opt-${active}` : undefined, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, value: query, onFocus: () => setOpen(true), onClick: () => setOpen(true), onChange: (e) => { setQuery(onQueryChange ? onQueryChange(e.target.value) : e.target.value); setActive(rest); setOpen(true); }, onKeyDown: onKeyDown, onBlur: (e) => { if (open && !root.current?.contains(e.relatedTarget))
+                    close("blur"); } }), _jsx(ChevronDown, { className: "sm-combo__chevron", size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), popover && (_jsxs("div", { ref: list, id: `${id}-list`, role: "listbox", "aria-label": label, className: cx("sm-picker sm-combo__list", up && "sm-combo__list--up"), children: [count === 0 && _jsx("div", { className: "sm-combo__empty", children: options.length === 0 ? emptyText ?? "No matches" : "No matches" }), shown.map((o, i) => (_jsx("button", { id: `${id}-opt-${i}`, type: "button", role: "option", "aria-selected": i === active, className: cx("sm-picker__item", i === active && "sm-picker__item--active"), onMouseDown: keepFocus, onClick: () => pick(i), children: renderOption ? renderOption(o) : o.label }, o.value))), create && (_jsxs("button", { id: `${id}-opt-${shown.length}`, type: "button", role: "option", "aria-selected": active === shown.length, className: cx("sm-picker__item", active === shown.length && "sm-picker__item--active"), onMouseDown: keepFocus, onClick: () => pick(shown.length), children: ["Create \u201C", query.trim(), "\u201D"] }))] }))] }));
+}

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

@@ -13,7 +13,7 @@ export declare function publishMenu(opts: {
     onUnpublish(): void;
     onHistory?(): void;
 }): ActionMenuItem[];
-export declare function PublishControl({ status, pending, busy, flash, disabled, onPublish, onDiscard, onUnpublish, onHistory, }: {
+export declare function PublishControl({ status, pending, busy, flash, disabled, compact, onPublish, onDiscard, onUnpublish, onHistory, }: {
     /** The locale's stored state; null while the document loads or before it exists. */
     status: LocaleStatus | null;
     /** The editor holds a change the store has not confirmed (dirty, or a save pending / in flight / failed). */
@@ -28,4 +28,6 @@ export declare function PublishControl({ status, pending, busy, flash, disabled,
     onUnpublish(): void;
     /** Opens History (spec 2026-09-13 history §5). Absent = no History item (the canvas card). */
     onHistory?(): void;
+    /** The small button and menu — the global inspector's control, so it never reads as the page's Publish. */
+    compact?: boolean;
 }): import("react").JSX.Element;

package/dist/admin/ui/PublishControl.js

@@ -16,9 +16,9 @@ export function publishMenu(opts) {
         { label: "Unpublish", disabled: !opts.can.unpublish, run: opts.onUnpublish },
     ];
 }
-export function PublishControl({ status, pending = false, busy = null, flash = false, disabled = false, onPublish, onDiscard, onUnpublish, onHistory, }) {
+export function PublishControl({ status, pending = false, busy = null, flash = false, disabled = false, compact = false, onPublish, onDiscard, onUnpublish, onHistory, }) {
     const can = publishActions(status, pending);
     const inert = disabled || busy !== null;
     const word = busy ? BUSY_WORD[busy] : flash ? "Published ✓" : "Publish";
-    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [status && _jsx(StatusBadge, { status: statusLabel(status) }), _jsx(Button, { variant: flash && !busy ? "ok" : "primary", disabled: inert || !can.publish, onClick: onPublish, children: word }), _jsx(ActionMenu, { label: "More actions", disabled: inert || status === null, items: publishMenu({ can, onDiscard, onUnpublish, onHistory }) })] }));
+    return (_jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 }, children: [status && _jsx(StatusBadge, { status: statusLabel(status) }), _jsx(Button, { variant: flash && !busy ? "ok" : "primary", size: compact ? "sm" : "md", disabled: inert || !can.publish, onClick: onPublish, children: word }), _jsx(ActionMenu, { label: "More actions", disabled: inert || status === null, small: compact, items: publishMenu({ can, onDiscard, onUnpublish, onHistory }) })] }));
 }

package/dist/admin/ui/combo-box.d.ts

@@ -0,0 +1,16 @@
+export type ComboOption = {
+    value: string;
+    label: string;
+};
+/** A case-insensitive substring match on the label; an empty query keeps every option. */
+export declare function filterOptions(options: ComboOption[], query: string): ComboOption[];
+/** Whether `Create "query"` is offered: something is typed and no label equals it. */
+export declare function showsCreate(options: ComboOption[], query: string): boolean;
+/** The next active row, wrapping. -1 is "no row" (free text): ↓ enters at the top, ↑ at the bottom. */
+export declare function stepActive(active: number, count: number, dir: 1 | -1): number;
+/** Whether the list hangs above the input: only when it does not fit below and there is more room above. */
+export declare const opensUp: (room: {
+    below: number;
+    above: number;
+    height: number;
+}) => boolean;

package/dist/admin/ui/combo-box.js

@@ -0,0 +1,21 @@
+const fold = (s) => s.trim().toLocaleLowerCase();
+/** A case-insensitive substring match on the label; an empty query keeps every option. */
+export function filterOptions(options, query) {
+    const q = fold(query);
+    return q === "" ? options : options.filter((o) => o.label.toLocaleLowerCase().includes(q));
+}
+/** Whether `Create "query"` is offered: something is typed and no label equals it. */
+export function showsCreate(options, query) {
+    const q = fold(query);
+    return q !== "" && !options.some((o) => fold(o.label) === q);
+}
+/** The next active row, wrapping. -1 is "no row" (free text): ↓ enters at the top, ↑ at the bottom. */
+export function stepActive(active, count, dir) {
+    if (count === 0)
+        return -1;
+    if (active < 0)
+        return dir === 1 ? 0 : count - 1;
+    return (active + dir + count) % count;
+}
+/** Whether the list hangs above the input: only when it does not fit below and there is more room above. */
+export const opensUp = (room) => room.height > room.below && room.above > room.below;

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

@@ -14,7 +14,7 @@ export declare function Logo({ height }: {
 export declare function ThemeToggle(): import("react").JSX.Element;
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: "primary" | "secondary" | "ghost" | "danger" | "ok";
-    size?: "md" | "lg";
+    size?: "sm" | "md" | "lg";
 };
 export declare function Button({ variant, size, className, ...rest }: ButtonProps): import("react").JSX.Element;
 /** The same shape as Button, for navigations that must stay real links. */

package/dist/admin/ui/primitives.js

@@ -42,7 +42,7 @@ export function ThemeToggle() {
     return (_jsxs("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: toggle, children: [_jsxs("span", { className: "sm-when-light", children: [_jsx(Moon, { ...ICON }), "Dark mode"] }), _jsxs("span", { className: "sm-when-dark", children: [_jsx(Sun, { ...ICON }), "Light mode"] })] }));
 }
 export function Button({ variant = "primary", size = "md", className, ...rest }) {
-    return (_jsx("button", { type: "button", className: cx("sm-btn", `sm-btn--${variant}`, size === "lg" && "sm-btn--lg", className), ...rest }));
+    return (_jsx("button", { type: "button", className: cx("sm-btn", `sm-btn--${variant}`, size === "lg" && "sm-btn--lg", size === "sm" && "sm-btn--sm", className), ...rest }));
 }
 /** The same shape as Button, for navigations that must stay real links. */
 export function LinkButton({ variant = "secondary", children, ...rest }) {

package/dist/admin/ui/theme.js

@@ -96,13 +96,13 @@ const SCALE = `
   --title-font:var(--font-sans); --title-size:18px; --title-weight:600; --title-tracking:-0.01em;
   --doc-title-size:30px;
   --blocktag-font:var(--font-sans); --blocktag-size:11px; --blocktag-transform:none; --blocktag-tracking:0;
-  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%);
+  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%); --blocktag-shift-inside:translate(16px,8px);
   --badge-h:24px; --badge-dot:inline-block;
 
   --radius-xs:2px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;
   --radius-card:14px; --radius-card-lg:16px; --radius-btn:999px; --radius-round:999px;
   --page-radius:4px 4px 0 0; --selection-radius:4px;
-  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --row-h:48px; --topbar-h:64px;
+  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --button-h-sm:28px; --row-h:48px; --topbar-h:64px;
   --outline-row-h:36px; --seg-pad-y:7px; --tabs-pad:3px;
   --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
   --nav-w:72px; --inspector-w:360px; --gutter:20px; --frame-pad:24px;
@@ -202,11 +202,11 @@ const TECHNICAL_SHAPE = `
   --title-font:var(--font-sans); --title-size:var(--text-xl); --title-weight:600; --title-tracking:0;
   --doc-title-size:var(--text-2xl);
   --blocktag-font:var(--font-mono); --blocktag-size:var(--text-2xs); --blocktag-transform:uppercase; --blocktag-tracking:var(--tracking-tag);
-  --blocktag-radius:var(--radius-sm) 0 var(--radius-sm) 0; --blocktag-shift:none;
+  --blocktag-radius:var(--radius-sm) 0 var(--radius-sm) 0; --blocktag-shift:none; --blocktag-shift-inside:none;
   --badge-h:20px; --badge-dot:none;
   --radius-lg:var(--radius-md); --radius-card:var(--radius-md); --radius-card-lg:var(--radius-md); --radius-btn:var(--radius-md);
   --page-radius:var(--radius-md); --selection-radius:var(--radius-sm);
-  --control-h-sm:24px; --button-h:var(--control-h);
+  --control-h-sm:24px; --button-h:var(--control-h); --button-h-sm:24px;
   --outline-row-h:var(--control-h); --seg-pad-y:3px; --tabs-pad:0 14px;
   --plus-h:24px; --plus-pad:0; --plus-label:none;
   --gutter:0px; --frame-pad:0px;
@@ -377,6 +377,7 @@ body:has(.sm-admin){margin:0}
   text-decoration:none;
 }
 .sm-btn--lg{height:var(--control-h-lg);padding:0 20px}
+.sm-btn--sm,.sm-btn--sm.sm-btn--primary,.sm-btn--sm.sm-btn--ok{height:var(--button-h-sm);padding:0 12px;font-size:var(--text-sm)}
 .sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 18px}
 .sm-btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
 .sm-btn--secondary{background:var(--btn-secondary-bg);color:var(--text)}
@@ -635,6 +636,7 @@ body:has(.sm-admin){margin:0}
 .sm-dotmenu:hover{background:var(--btn-secondary-hover);color:var(--text)}
 .sm-dotmenu:disabled{opacity:.4;cursor:default}
 .sm-dotmenu:disabled:hover{background:var(--btn-secondary-bg);color:var(--text-muted)}
+.sm-dotmenu--sm{width:var(--button-h-sm);height:var(--button-h-sm);font-size:var(--text-sm)}
 .sm-picker--menu{position:absolute;top:calc(100% + 6px);right:0;width:220px;z-index:60}
 
 /* Status pill: a dot before the word in the warm look (none in the technical). */
@@ -794,6 +796,7 @@ body:has(.sm-admin){margin:0}
   border-radius:var(--blocktag-radius);white-space:nowrap;
 }
 .sm-blocktag--global{background:var(--selection-global)}
+.sm-blocktag--inside{transform:var(--blocktag-shift-inside)}
 .sm-blocktoolbar{
   display:flex;gap:2px;padding:3px;background:var(--toolbar-bg);border-radius:var(--radius-btn);
   box-shadow:var(--shadow-float);
@@ -855,6 +858,42 @@ body:has(.sm-admin){margin:0}
   width:26px;height:26px;flex:none;border-radius:var(--radius-sm);background:var(--accent-soft);
   color:var(--accent);display:grid;place-items:center;font-size:13px;
 }
+/* Combobox (spec 2026-09-17 §1): the input owns the width, the list hangs under it. */
+.sm-combo{position:relative}
+.sm-combo .sm-input{width:100%;padding-right:30px}
+.sm-combo__chevron{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}
+.sm-combo__list{position:absolute;top:calc(100% + 4px);left:0;right:0;width:auto;max-height:280px;overflow-y:auto;z-index:60}
+.sm-combo__list--up{top:auto;bottom:calc(100% + 4px)}
+.sm-combo__empty{padding:8px 10px;color:var(--text-muted);font-size:var(--text-sm)}
+/* Reference picker (spec 2026-09-17 §2): the picked entries under the search input. */
+.sm-refpicker{display:flex;flex-direction:column;gap:6px;min-width:0}
+.sm-refpicker__rows{display:flex;flex-direction:column;gap:4px}
+.sm-refpicker__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-refrow{
+  display:flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 6px 0 10px;
+  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0;
+}
+.sm-refrow:has(.sm-grip){padding-left:6px}
+.sm-refrow:hover .sm-grip{opacity:1}
+.sm-refrow--muted .sm-refpicker__title{color:var(--text-muted)}
+.sm-refrow__note{font-size:var(--text-sm)}
+.sm-refrow a.sm-iconbtn{text-decoration:none}
+/* Tags (spec 2026-09-17 §5): chips that wrap, a dashed + Add, the inline input in its place. */
+.sm-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
+.sm-tag{
+  display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 10px;border:0;
+  border-radius:var(--radius-sm);background:var(--surface-inset);color:var(--text);font:inherit;font-size:var(--text-sm);white-space:nowrap;
+  transition:background .2s;
+}
+.sm-tag--flash{background:var(--accent-soft)}
+.sm-tag__x{border:0;background:transparent;padding:0;color:var(--text-muted);cursor:pointer;font:inherit;line-height:1}
+.sm-tag__x:hover{color:var(--text)}
+.sm-tag--add{background:transparent;border:1px dashed var(--line);color:var(--text-muted);cursor:pointer}
+.sm-tag--add:hover{color:var(--text);border-color:var(--text-muted)}
+.sm-combo--tag{width:180px}
+.sm-combo--tag .sm-input{height:var(--control-h-sm);padding-right:10px}
+.sm-combo--tag .sm-combo__chevron{display:none}
+.sm-combo--tag .sm-combo__list{right:auto;width:240px}
 .sm-dashed{
   border:1px dashed var(--line-dashed);border-radius:var(--radius-lg);
   display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-subtle);

package/dist/admin/validate.js

@@ -8,6 +8,7 @@
 import { optionValues } from "../fields.js";
 import { isHidden } from "../conditions.js";
 import { cssProblem } from "../css.js";
+import { normalizeTag, sameTag } from "../tags.js";
 import { hasContent } from "./richtext-doc.js";
 import { ELEMENT_NODE, richtextBlocks } from "../richtext-walk.js";
 import { rowsProblems } from "../custom/rows.js";
@@ -89,6 +90,44 @@ function validateValue(path, value, d, errors, elements, scope) {
         }
         return;
     }
+    // Refs (spec 2026-09-17 §3): the shape and the count. Whether a target exists
+    // and is published is publish integrity's question (store.ts), not this one's.
+    if (d.type === "ref") {
+        if (typeof value !== "string")
+            errors.push({ field: path, message: "Must be an entry." });
+        return;
+    }
+    if (d.type === "refList") {
+        if (!Array.isArray(value) || value.some((v) => typeof v !== "string" || v === "")) {
+            errors.push({ field: path, message: "Must be a list of entries." });
+            return;
+        }
+        if (typeof d.min === "number" && value.length < d.min)
+            errors.push({ field: path, message: `At least ${plural(d.min, "item")}.` });
+        if (typeof d.max === "number" && value.length > d.max)
+            errors.push({ field: path, message: `At most ${plural(d.max, "item")}.` });
+        // The refs index keys on (source, field, target): a repeat renders twice and indexes once.
+        if (new Set(value).size !== value.length)
+            errors.push({ field: path, message: "The same entry is listed twice." });
+        return;
+    }
+    if (d.type === "tags") {
+        if (!Array.isArray(value)) {
+            errors.push({ field: path, message: "Must be a list of tags." });
+            return;
+        }
+        if (typeof d.min === "number" && value.length < d.min)
+            errors.push({ field: path, message: `At least ${plural(d.min, "item")}.` });
+        if (typeof d.max === "number" && value.length > d.max)
+            errors.push({ field: path, message: `At most ${plural(d.max, "item")}.` });
+        value.forEach((v, i) => {
+            if (typeof v !== "string" || v === "" || normalizeTag(v) !== v)
+                errors.push({ field: `${path}.${i}`, message: "Must be a trimmed, non-empty tag." });
+            else if (value.slice(0, i).some((u) => typeof u === "string" && sameTag(u, v)))
+                errors.push({ field: `${path}.${i}`, message: "Duplicate tag." });
+        });
+        return;
+    }
     if (d.type === "checkboxes") {
         if (!Array.isArray(value)) {
             errors.push({ field: path, message: "Must be a list." });

package/dist/admin-path.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_ADMIN_PATH = "/admin";
+/** One or more `/segment`s: no trailing slash, never "/". */
+export declare function assertAdminPath(path: unknown): asserts path is string;
+/** `path` is "" or starts with "/": adminHref("/studio", "/pages") → "/studio/pages". */
+export declare const adminHref: (base: string, path: string) => string;
+/** The message for a shell mounted outside its base — the route folder
+ *  and `admin.path` disagree (spec §4). Null inside the base, and before
+ *  mount, when the pathname is still "". */
+export declare function mountMismatch(pathname: string, base: string): string | null;

package/dist/admin-path.js

@@ -0,0 +1,24 @@
+// packages/smoodly/src/admin-path.ts
+// The admin's mount path (spec 2026-09-17): "/admin" unless the config
+// moves it. Pure and framework-free — the config, the ops and the shell
+// all read it from here.
+import { isSegment } from "./paths.js";
+export const DEFAULT_ADMIN_PATH = "/admin";
+/** One or more `/segment`s: no trailing slash, never "/". */
+export function assertAdminPath(path) {
+    const ok = typeof path === "string" && path.startsWith("/") && path.slice(1).split("/").every(isSegment);
+    if (!ok) {
+        throw new Error(`smoodly: admin.path "${String(path)}" is not a valid path — use one or more /segments of lowercase letters, digits and single hyphens, like "/admin" or "/cms/admin".`);
+    }
+}
+/** `path` is "" or starts with "/": adminHref("/studio", "/pages") → "/studio/pages". */
+export const adminHref = (base, path) => `${base}${path}`;
+/** The message for a shell mounted outside its base — the route folder
+ *  and `admin.path` disagree (spec §4). Null inside the base, and before
+ *  mount, when the pathname is still "". */
+export function mountMismatch(pathname, base) {
+    if (pathname === "" || pathname === base || pathname.startsWith(`${base}/`))
+        return null;
+    const suggestion = `/${pathname.split("/").filter((s) => s !== "")[0] ?? ""}`;
+    return `The admin is open at ${pathname}, but admin.path in the Smoodly config is ${base}. Set admin: { path: "${suggestion}" } in the config, or move the route folder back.`;
+}

package/dist/config.d.ts

@@ -57,8 +57,13 @@ export type SmoodlyConfig = {
         maxSize?: number;
         accept?: string[];
     };
+    /** Where the admin is mounted (spec 2026-09-17): must match the route
+     *  folder under app/(smoodly)/. Default "/admin". */
+    admin?: {
+        path?: string;
+    };
 };
-export type ResolvedConfig = Omit<SmoodlyConfig, "styles" | "custom"> & {
+export type ResolvedConfig = Omit<SmoodlyConfig, "styles" | "custom" | "admin"> & {
     homePageSlug: string;
     /** How deep editors may nest pages in the tree. Default 1 (flat). */
     pageDepth: number;
@@ -74,6 +79,10 @@ export type ResolvedConfig = Omit<SmoodlyConfig, "styles" | "custom"> & {
         maxSize: number;
         accept: string[];
     };
+    /** The admin's mount path, always present. */
+    admin: {
+        path: string;
+    };
 };
 /** `global`: the placement node type and an admin route; `asset`: the refs
  *  target of every media edge; `media`: the admin's Media screen route. */

package/dist/config.js

@@ -1,5 +1,6 @@
 import { assertSegment, fixedPageSegments, perLocaleSegments } from "./paths.js";
 import { DEFAULT_MEDIA } from "./media.js";
+import { DEFAULT_ADMIN_PATH, assertAdminPath } from "./admin-path.js";
 import { resolveStyleValues, styleDescriptors } from "./styles.js";
 import { resolveCustom } from "./custom/index.js";
 /** `global`: the placement node type and an admin route; `asset`: the refs
@@ -195,11 +196,14 @@ export function defineConfig(config) {
     if (!Number.isInteger(media.maxSize) || media.maxSize <= 0) {
         throw new Error("smoodly: media.maxSize must be a positive integer of bytes.");
     }
+    const adminPath = config.admin?.path ?? DEFAULT_ADMIN_PATH;
+    assertAdminPath(adminPath);
     return {
         ...config,
         homePageSlug,
         pageDepth: depth,
         media,
+        admin: { path: adminPath },
         styles,
         css: config.css === true,
         custom,

package/dist/entry-page.d.ts

@@ -1,14 +1,19 @@
 import type { ComponentType, ReactElement } from "react";
 import type { CollectionSchema } from "./collections.ts";
 import type { EntryRecord } from "./entry-store.ts";
+import type { LocaleAlternate } from "./paths.ts";
 export type EntryPageSchema = {
     kind: "entryPage";
     name: string;
     collection: string;
 };
+/** What an entry page renders: the entry in the render locale, its path
+ *  there, and its address in every supported locale (spec 2026-09-15 §1). */
 export type EntryPageProps = {
     entry: EntryRecord;
     path: string;
+    locale: string;
+    locales: Record<string, LocaleAlternate | null>;
 };
 export type PairedEntryPage = ((props: EntryPageProps) => ReactElement) & {
     schema: EntryPageSchema;

package/dist/entry-page.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function entryPage(collection, View) {
-    const Component = ((props) => _jsx(View, { entry: props.entry, path: props.path }));
+    const Component = ((props) => _jsx(View, { ...props }));
     Component.schema = { kind: "entryPage", name: `entry:${collection.name}`, collection: collection.name };
     return Component;
 }

package/dist/entry-store.js

@@ -19,7 +19,7 @@ import { assertDepth, assertSupportedLocale, chainOf, entryPathRows, slugOf, uns
 /** The field types whose value is an array: a scalar `where` on one is
  *  containment, and any-of on one is refused by the site layer (both
  *  adapters read the text form of the whole array, never its elements). */
-export const ARRAY_FIELD_TYPES = new Set(["checkboxes", "refList", "list"]);
+export const ARRAY_FIELD_TYPES = new Set(["checkboxes", "refList", "list", "tags"]);
 /** PostgREST's `->>`: a scalar's text, an array's or object's JSON text (Postgres
  *  spaces an object's text differently, but no scalar equals either form). */
 const textForm = (value) => (value !== null && typeof value === "object" ? JSON.stringify(value) : String(value));

package/dist/fields.d.ts

@@ -94,6 +94,9 @@ export declare const f: {
     radio: <const O extends readonly OptionInput[]>(options: O) => FieldBuilder<OptionValue<O[number]>, {}>;
     /** Several values from a list, stored as an array, shown as a checkbox list. */
     checkboxes: <const O extends readonly OptionInput[]>(options: O) => FieldBuilder<OptionValue<O[number]>[], {}>;
+    /** Short labels edited as chips, stored as a string array: trimmed, no
+     *  case-insensitive duplicates (spec 2026-09-17 §4). `.min`/`.max` count tags. */
+    tags: () => FieldBuilder<string[], {}>;
     object: <S extends Record<string, FieldBuilder<any, any>>>(shape: S & { [K in keyof S]: NotLocalized<S[K]>; }) => FieldBuilder<{ [K in keyof S]: ValueOf<S[K]>; }, {}>;
     /** A repeating item: any builder, but no list at any depth inside the item
      *  — a list in an object in a list is still a nested list on screen, and a