smoodly 0.0.24 → 0.0.25

package/dist/admin/shell/page-dialogs.d.ts

@@ -0,0 +1,9 @@
+/** A URL segment from a title: lowercase ASCII letters, digits and
+ *  hyphens (the path grammar, DESIGN.md OQ 24), diacritics stripped
+ *  (ä → a, é → e), everything else a hyphen, no leading, trailing or
+ *  doubled hyphens. */
+export declare function slugify(title: string): string;
+/** The slug field follows the title until the editor types a slug of
+ *  their own; a slug equal to what the previous title produced is still
+ *  "following". */
+export declare function followsTitle(slug: string, previousTitle: string): boolean;

package/dist/admin/shell/page-dialogs.js

@@ -0,0 +1,19 @@
+// Pure helpers for the page dialogs (PageDialogs.tsx).
+/** A URL segment from a title: lowercase ASCII letters, digits and
+ *  hyphens (the path grammar, DESIGN.md OQ 24), diacritics stripped
+ *  (ä → a, é → e), everything else a hyphen, no leading, trailing or
+ *  doubled hyphens. */
+export function slugify(title) {
+    return title
+        .normalize("NFD")
+        .replace(/[̀-ͯ]/g, "")
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+/** The slug field follows the title until the editor types a slug of
+ *  their own; a slug equal to what the previous title produced is still
+ *  "following". */
+export function followsTitle(slug, previousTitle) {
+    return slug === "" || slug === slugify(previousTitle);
+}

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

@@ -1,3 +1,4 @@
+import { type ConfirmOptions } from "../ui/confirm.ts";
 export type Route = {
     pathname: string;
     segments: string[];
@@ -18,18 +19,20 @@ export declare function isPlainLeftClick(e: {
     altKey: boolean;
     defaultPrevented: boolean;
 }, target?: string | null): boolean;
-export declare const LEAVE_MESSAGE = "Discard unsaved changes?";
+/** The leave question, asked in the admin's own dialog (ui/confirm.ts). */
+export declare const LEAVE_CONFIRM: ConfirmOptions;
 /** Leaving is allowed when no guard is dirty, else when the editor
  *  confirms — asked once, however many guards are dirty. */
-export declare function mayLeave(guards: Iterable<() => boolean>, confirm: (message: string) => boolean): boolean;
-/** 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
- *  record — React has not flushed its setDirty(false) yet. */
+export declare function mayLeave(guards: Iterable<() => boolean>, confirm: (options: ConfirmOptions) => boolean | Promise<boolean>): Promise<boolean>;
+/** Move to `href` in place; resolves true when the move happened. A push
+ *  asks the leave guard (in the admin's dialog, so the answer is awaited);
+ *  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 record — React has
+ *  not flushed its setDirty(false) yet. */
 export declare function navigate(href: string, opts?: {
     replace?: boolean;
     force?: boolean;
-}): boolean;
+}): Promise<boolean>;
 /** 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;

package/dist/admin/shell/router.js

@@ -10,6 +10,7 @@
 // framework-agnostic.
 import { useEffect, useState } from "react";
 import { DEFAULT_ADMIN_PATH } from "../../admin-path.js";
+import { confirm } from "../ui/confirm.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
@@ -28,13 +29,20 @@ export function isPlainLeftClick(e, target) {
         return false;
     return !target || target === "_self";
 }
-export const LEAVE_MESSAGE = "Discard unsaved changes?";
+/** The leave question, asked in the admin's own dialog (ui/confirm.ts). */
+export const LEAVE_CONFIRM = {
+    title: "Discard unsaved changes?",
+    body: "Your latest edits have not been saved and will be lost if you leave now.",
+    confirmLabel: "Discard changes",
+    cancelLabel: "Stay",
+    destructive: true,
+};
 /** Leaving is allowed when no guard is dirty, else when the editor
  *  confirms — asked once, however many guards are dirty. */
-export function mayLeave(guards, confirm) {
+export async function mayLeave(guards, confirm) {
     for (const dirty of guards)
         if (dirty())
-            return confirm(LEAVE_MESSAGE);
+            return confirm(LEAVE_CONFIRM);
     return true;
 }
 // ── the live router ──────────────────────────────────────────────────
@@ -47,12 +55,13 @@ function currentRoute(base) {
 // 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
- *  record — React has not flushed its setDirty(false) yet. */
-export function navigate(href, opts = {}) {
-    if (!opts.replace && !opts.force && !mayLeave(guards, (m) => window.confirm(m)))
+/** Move to `href` in place; resolves true when the move happened. A push
+ *  asks the leave guard (in the admin's dialog, so the answer is awaited);
+ *  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 record — React has
+ *  not flushed its setDirty(false) yet. */
+export async function navigate(href, opts = {}) {
+    if (!opts.replace && !opts.force && !(await mayLeave(guards, confirm)))
         return false;
     window.history[opts.replace ? "replaceState" : "pushState"](null, "", href);
     for (const listener of listeners)

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

@@ -1,12 +1,6 @@
 export declare const SETTINGS_PAGES: readonly [{
     readonly id: "members";
     readonly title: "Members";
-}, {
-    readonly id: "roles";
-    readonly title: "Roles";
-}, {
-    readonly id: "api-keys";
-    readonly title: "API Keys";
 }];
 export type SettingsPageId = (typeof SETTINGS_PAGES)[number]["id"];
 export declare const DEFAULT_SETTINGS_PAGE: SettingsPageId;

package/dist/admin/shell/settings.js

@@ -1,10 +1,9 @@
-// The Settings area's pages (spec 2026-09-25 §5): ids are URL segments
-// under /settings, titles are what the secondary nav and each top bar
-// show. Pure, so routing is testable without React.
+// The Settings area's pages (spec 2026-09-25 §5; narrowed 2026-09-25 to
+// Members alone — Roles and API Keys dropped, see DESIGN.md §2): ids are
+// URL segments under /settings, titles are what the secondary nav and
+// each top bar show. Pure, so routing is testable without React.
 export const SETTINGS_PAGES = [
     { id: "members", title: "Members" },
-    { id: "roles", title: "Roles" },
-    { id: "api-keys", title: "API Keys" },
 ];
 export const DEFAULT_SETTINGS_PAGE = "members";
 /** The page for the segment after /settings: the default for none, null for an unknown one. */

package/dist/admin/tree-ops.js

@@ -133,6 +133,9 @@ export function nodeFromSample(section, id) {
             fields[key] = sampled;
         else if (ABSENT_WHEN_UNSAMPLED.has(d.type))
             continue;
+        // An optional object with no sample is absent: `{}` would read as present, its members required at publish.
+        else if (d.type === "object" && d.optional === true)
+            continue;
         else
             fields[key] = EMPTY_BY_TYPE[d.type] ?? "";
     }

package/dist/admin/ui/ActionMenu.js

@@ -5,22 +5,42 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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, hanging from the button's
-// right edge (every control sits at its bar's or card's right).
+// right edge (every control sits at its bar's or card's right). It is
+// position:fixed from the button's rect (2026-09-26): inside a table cell
+// an absolute child was clipped by the cell's overflow, so the Members
+// row menu opened invisibly. A scroll closes it rather than leaving it behind.
 import { useEffect, useRef, useState } from "react";
 import { cx } from "./primitives.js";
 export function ActionMenu({ label, items, disabled, small = false }) {
-    const [open, setOpen] = useState(false);
+    /** Open: the popover's viewport position, under the button's right edge. */
+    const [open, setOpen] = useState(null);
     const ref = useRef(null);
+    const button = useRef(null);
+    const toggle = () => {
+        if (open) {
+            setOpen(null);
+            return;
+        }
+        const r = button.current?.getBoundingClientRect();
+        if (r)
+            setOpen({ top: r.bottom + 6, right: window.innerWidth - r.right });
+    };
     useEffect(() => {
         if (!open)
             return;
+        const close = () => setOpen(null);
         const onDown = (e) => { if (!ref.current?.contains(e.target))
-            setOpen(false); };
+            close(); };
         const onKey = (e) => { if (e.key === "Escape")
-            setOpen(false); };
+            close(); };
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
-        return () => { document.removeEventListener("pointerdown", onDown); document.removeEventListener("keydown", onKey); };
+        document.addEventListener("scroll", close, true);
+        return () => {
+            document.removeEventListener("pointerdown", onDown);
+            document.removeEventListener("keydown", onKey);
+            document.removeEventListener("scroll", close, true);
+        };
     }, [open]);
-    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))) }))] }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { ref: button, type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open !== null, disabled: disabled, onClick: toggle, children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", style: { top: open.top, right: open.right }, 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(null); item.run(); }, children: item.label }, item.label))) }))] }));
 }

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

@@ -27,4 +27,9 @@ export type ComboboxProps = {
     initialOpen?: boolean;
     className?: string;
 };
+/** The vertical band the list may occupy: the nearest clipping ancestor's box, cut to the viewport. */
+export declare function clipBand(el: HTMLElement): {
+    top: number;
+    bottom: number;
+};
 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

@@ -11,7 +11,7 @@ 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) {
+export function clipBand(el) {
     let top = 0;
     let bottom = window.innerHeight;
     for (let p = el.parentElement; p; p = p.parentElement) {

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

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+import { type ConfirmOptions } from "./confirm.ts";
+export declare function ConfirmDialog({ options, onAnswer }: {
+    options: ConfirmOptions;
+    onAnswer(yes: boolean): void;
+}): ReactElement;
+/** Renders the pending question, once, from the shell. */
+export declare function ConfirmHost(): ReactElement | null;

package/dist/admin/ui/ConfirmDialog.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The confirm question on the dialog card (ui/Dialog.tsx; the pattern:
+// design_handoff_smoodly_neutral/screens/ConfirmModal.md): the question,
+// the consequence, an optional context chip naming the subject, then
+// Cancel and the action verb. Focus opens on Cancel for a destructive
+// action and on the primary otherwise, so Enter runs the primary only
+// when it is safe.
+//
+// <ConfirmHost/> renders the pending question from ui/confirm.ts, once,
+// from the shell; the dialog itself is a plain component so a test can
+// render it statically.
+import { useId, useSyncExternalStore } from "react";
+import { DialogCard } from "./Dialog.js";
+import { Button } from "./primitives.js";
+import { pendingConfirm, subscribeConfirm } from "./confirm.js";
+export function ConfirmDialog({ options, onAnswer }) {
+    const { title, body, confirmLabel, cancelLabel = "Cancel", destructive = false, subject } = options;
+    const uid = useId();
+    const bodyId = `sm-confirm-body${uid}`;
+    const cancel = () => onAnswer(false);
+    return (_jsxs(DialogCard, { title: title, role: "alertdialog", describedBy: body ? bodyId : undefined, onClose: cancel, className: "sm-confirm", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", autoFocus: destructive, onClick: cancel, children: cancelLabel }), _jsx(Button, { variant: destructive ? "destructive" : "primary", autoFocus: !destructive, onClick: () => onAnswer(true), children: confirmLabel })] }), children: [body && _jsx("p", { className: "sm-dialog__body", id: bodyId, children: body }), subject && (_jsxs("div", { className: "sm-dialog__context", children: [_jsx("strong", { children: subject.name }), subject.path && _jsx("code", { children: subject.path })] }))] }));
+}
+/** Renders the pending question, once, from the shell. */
+export function ConfirmHost() {
+    const request = useSyncExternalStore(subscribeConfirm, pendingConfirm, () => null);
+    if (!request)
+        return null;
+    return _jsx(ConfirmDialog, { options: request.options, onAnswer: request.answer }, request.id);
+}

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

@@ -0,0 +1,13 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare function DialogCard({ title, role, describedBy, onClose, actions, className, children }: {
+    title: string;
+    /** `alertdialog` for a question that interrupts (the confirm); `dialog` for a form. */
+    role?: "dialog" | "alertdialog";
+    /** The id of the element that describes the dialog (a confirm's body). */
+    describedBy?: string;
+    onClose(): void;
+    /** The action row: Cancel then the verb. */
+    actions: ReactNode;
+    className?: string;
+    children: ReactNode;
+}): ReactElement;

package/dist/admin/ui/Dialog.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The dialog card (design_handoff_smoodly_neutral/components/ConfirmModal.html):
+// a scrim over the whole admin, a 440px card with a title row and a close
+// button, whatever the dialog puts inside, then its actions. Escape and
+// the scrim close it; Tab cycles inside; focus returns to where it was.
+// The confirm question (ConfirmDialog) and the page form dialogs
+// (shell/PageDialogs) are built on it. Portalled into the admin wrapper
+// so it covers the frame and any modal underneath; static rendering (no
+// document) keeps it inline.
+import { useEffect, useId, useRef } from "react";
+import { createPortal } from "react-dom";
+import { cx } from "./primitives.js";
+function adminRoot() {
+    if (typeof document === "undefined")
+        return null;
+    return document.querySelector(".sm-admin") ?? document.body;
+}
+export function DialogCard({ title, role = "dialog", describedBy, onClose, actions, className, children }) {
+    const panel = useRef(null);
+    const uid = useId();
+    const titleId = `sm-dialog-title${uid}`;
+    useEffect(() => {
+        const before = typeof document !== "undefined" ? document.activeElement : null;
+        const onKey = (e) => { if (e.key === "Escape") {
+            e.stopPropagation();
+            onClose();
+        } };
+        window.addEventListener("keydown", onKey, true);
+        return () => {
+            window.removeEventListener("keydown", onKey, true);
+            before?.focus?.();
+        };
+    }, [onClose]);
+    const trap = (e) => {
+        if (e.key !== "Tab" || !panel.current)
+            return;
+        const focusable = Array.from(panel.current.querySelectorAll("button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled)"));
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0], last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    const dialog = (_jsx("div", { className: "sm-scrim", onClick: onClose, children: _jsxs("div", { className: cx("sm-dialog", className), role: role, "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": describedBy, ref: panel, onClick: (e) => e.stopPropagation(), onKeyDown: trap, children: [_jsx("div", { className: "sm-dialog__head", children: _jsxs("div", { className: "sm-dialog__titlerow", children: [_jsx("h2", { className: "sm-dialog__title", id: titleId, children: title }), _jsx("button", { type: "button", className: "sm-dialog__close", "aria-label": "Close", onClick: onClose, children: "\u00D7" })] }) }), children, _jsx("div", { className: "sm-dialog__actions", children: actions })] }) }));
+    const root = adminRoot();
+    return root ? createPortal(dialog, root) : dialog;
+}

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

@@ -1,11 +1,12 @@
 import { type ReactElement, type ReactNode } from "react";
 import type { PageLocale } from "../../store.ts";
 import type { VersionSummary } from "../ops.ts";
+import { type ConfirmOptions } from "./confirm.ts";
 export type HistoryTag = "Draft" | "Live" | null;
 export type HistoryRow = VersionSummary & {
     tag: HistoryTag;
 };
-export declare const RESTORE_CONFIRM = "Restore this version? The current draft will be replaced. Nothing goes live until you publish.";
+export declare const RESTORE_CONFIRM: ConfirmOptions;
 /** The rows for a locale's versions: the unpublished draft is Draft, the
  *  row the site serves Live, an older publish carries nothing. */
 export declare function historyRows(versions: VersionSummary[], row: Pick<PageLocale, "status" | "draftVersionId" | "publishedVersionId">): HistoryRow[];

package/dist/admin/ui/HistoryModal.js

@@ -9,8 +9,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import { versionTime } from "./format.js";
 import { Modal } from "./Modal.js";
+import { confirm } from "./confirm.js";
 import { Button, cx } from "./primitives.js";
-export const RESTORE_CONFIRM = "Restore this version? The current draft will be replaced. Nothing goes live until you publish.";
+export const RESTORE_CONFIRM = {
+    title: "Restore this version?",
+    body: "The current draft is replaced by this version. Nothing goes live until you publish.",
+    confirmLabel: "Restore",
+};
 /** The rows for a locale's versions: the unpublished draft is Draft, the
  *  row the site serves Live, an older publish carries nothing. */
 export function historyRows(versions, row) {
@@ -28,7 +33,7 @@ export function HistoryModal({ rows, draftId, render, onSelect, onRestore, onClo
     useEffect(() => { if (selected)
         onSelect?.(selected); }, [selected]); // eslint-disable-line react-hooks/exhaustive-deps
     const restore = async () => {
-        if (!selected || !window.confirm(RESTORE_CONFIRM))
+        if (!selected || !(await confirm(RESTORE_CONFIRM)))
             return;
         setBusy(true);
         const landed = await onRestore(selected);

package/dist/admin/ui/ResizeHandle.js

@@ -52,7 +52,7 @@ export function ResizeHandle() {
         const { admin, grid } = parts(el);
         if (!admin || !grid)
             return;
-        const next = clampInspectorW(px, grid.clientWidth);
+        const next = clampInspectorW(px, grid.clientWidth, el.offsetWidth);
         apply(admin, next);
         remember(next);
         setNow(next);
@@ -76,7 +76,7 @@ export function ResizeHandle() {
             return;
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
-        drag.current = { id: e.pointerId, startX: e.clientX, startW: aside.offsetWidth, rowW: grid.clientWidth, last: aside.offsetWidth };
+        drag.current = { id: e.pointerId, startX: e.clientX, startW: aside.offsetWidth, rowW: grid.clientWidth, handleW: e.currentTarget.offsetWidth, last: aside.offsetWidth };
         admin.classList.add("sm-admin--resizing");
     };
     const onPointerMove = (e) => {
@@ -87,7 +87,7 @@ export function ResizeHandle() {
         if (!admin)
             return;
         // The handle sits on the inspector's left edge: moving left widens it.
-        d.last = clampInspectorW(d.startW - (e.clientX - d.startX), d.rowW);
+        d.last = clampInspectorW(d.startW - (e.clientX - d.startX), d.rowW, d.handleW);
         apply(admin, d.last);
     };
     // Also fires from releasePointerCapture below, when drag.current is already null.
@@ -116,7 +116,7 @@ export function ResizeHandle() {
         else if (e.key === "Home")
             next = MIN_INSPECTOR_W;
         else if (e.key === "End")
-            next = maxInspectorW(grid.clientWidth);
+            next = maxInspectorW(grid.clientWidth, e.currentTarget.offsetWidth);
         if (next === null)
             return;
         e.preventDefault();

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

@@ -0,0 +1,35 @@
+export type ConfirmSubject = {
+    /** What the action touches — a page title, an entry title, an email. Truncates. */
+    name: string;
+    /** Its URL when it has one; never truncates. */
+    path?: string | null;
+};
+export type ConfirmOptions = {
+    /** The question, as a question: "Delete this page?" */
+    title: string;
+    /** The consequence in one or two plain sentences. */
+    body?: string;
+    /** The action verb on the primary button: "Delete page", never "OK". */
+    confirmLabel: string;
+    /** "Cancel" unless the action needs another word. */
+    cancelLabel?: string;
+    /** A destructive action: red primary, and focus lands on Cancel. */
+    destructive?: boolean;
+    /** The context chip repeating the subject; omit when there is no single subject. */
+    subject?: ConfirmSubject;
+};
+export type ConfirmRequest = {
+    id: number;
+    options: ConfirmOptions;
+    answer(yes: boolean): void;
+};
+/** The Discard changes question, shared by the page editor and the entry and global forms (publish flow §4). */
+export declare const DISCARD_CONFIRM: Omit<ConfirmOptions, "subject">;
+/** Ask; resolves with the answer once the dialog closes. */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+/** The question being asked, if any — the head of the queue. */
+export declare const pendingConfirm: () => ConfirmRequest | null;
+/** For useSyncExternalStore: fires on every queue change. */
+export declare function subscribeConfirm(fn: () => void): () => void;
+/** Test seam: drop every pending question unanswered. */
+export declare function resetConfirms(): void;

package/dist/admin/ui/confirm.js

@@ -0,0 +1,57 @@
+// The admin's one "are you sure" (design_handoff_smoodly_neutral/screens/
+// ConfirmModal.md): a caller awaits `confirm(...)` and gets a boolean, the
+// way it awaited window.confirm — but the question is answered in
+// Smoodly's own dialog, rendered by <ConfirmHost/> (ConfirmDialog.tsx)
+// from this store. Framework-free on purpose: the router (shell/router.ts)
+// asks from outside React.
+//
+// One question at a time; a second request waits for the first answer.
+// Without a mounted host (a test, a stray render outside the shell) the
+// question falls back to window.confirm so no caller can hang.
+/** The Discard changes question, shared by the page editor and the entry and global forms (publish flow §4). */
+export const DISCARD_CONFIRM = {
+    title: "Discard unsaved changes?",
+    body: "The draft goes back to the published version. Every edit since the last publish is lost.",
+    confirmLabel: "Discard changes",
+    destructive: true,
+};
+const listeners = new Set();
+let queue = [];
+let seq = 0;
+const notify = () => { for (const fn of listeners)
+    fn(); };
+/** Ask; resolves with the answer once the dialog closes. */
+export function confirm(options) {
+    if (listeners.size === 0) {
+        const text = [options.title, options.body].filter(Boolean).join("\n\n");
+        return Promise.resolve(typeof window !== "undefined" && typeof window.confirm === "function" ? window.confirm(text) : false);
+    }
+    return new Promise((resolve) => {
+        const id = ++seq;
+        const request = {
+            id,
+            options,
+            answer(yes) {
+                if (!queue.some((r) => r.id === id))
+                    return; // answered already
+                queue = queue.filter((r) => r.id !== id);
+                notify();
+                resolve(yes);
+            },
+        };
+        queue = [...queue, request];
+        notify();
+    });
+}
+/** The question being asked, if any — the head of the queue. */
+export const pendingConfirm = () => queue[0] ?? null;
+/** For useSyncExternalStore: fires on every queue change. */
+export function subscribeConfirm(fn) {
+    listeners.add(fn);
+    return () => { listeners.delete(fn); };
+}
+/** Test seam: drop every pending question unanswered. */
+export function resetConfirms() {
+    queue = [];
+    notify();
+}

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

@@ -13,13 +13,16 @@ export declare function Logo({ height }: {
  *  is right on the very first paint with no state and no hydration mismatch. */
 export declare function ThemeToggle(): import("react").JSX.Element;
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "primary" | "secondary" | "ghost" | "danger" | "ok";
+    /** `danger` is the quiet red-text button; `destructive` the filled red primary of a confirm dialog. */
+    variant?: "primary" | "secondary" | "ghost" | "danger" | "destructive" | "ok";
     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. */
-export declare function LinkButton({ variant, children, ...rest }: {
+export declare function LinkButton({ variant, icon, children, ...rest }: {
     variant?: ButtonProps["variant"];
+    /** An icon-only pill (a square the button's height); give it an aria-label. */
+    icon?: boolean;
     children: ReactNode;
 } & AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
 export declare function IconButton({ label, tone, size, children, ...rest }: {
@@ -102,6 +105,17 @@ export declare function Segmented<T extends string>({ options, value, onChange,
         className?: string;
     } | undefined;
 }): import("react").JSX.Element;
+/** A pill row (the f.radio look, spec 2026-09-14 §5): no track, the chosen pill filled in the
+ *  soft accent. For a small choice inside a table row, where a segmented control reads as tabs. */
+export declare function Pills<T extends string>({ options, value, onChange, disabled, title, label }: {
+    options: readonly T[];
+    value: T;
+    onChange(v: T): void;
+    disabled?: boolean;
+    /** Why the row is off, on every pill. */
+    title?: string;
+    label?(o: T): ReactNode;
+}): import("react").JSX.Element;
 export declare function StatusBadge({ status }: {
     status: string;
 }): import("react").JSX.Element;
@@ -109,10 +123,11 @@ export declare function StatusBadge({ status }: {
 export declare function SaveIndicator({ state }: {
     state: SaveState;
 }): import("react").JSX.Element;
-export declare function SectionLabel({ children, action, mono, style }: {
+/** `caps`: the overline style — small, uppercase, tracked (2026-09-26; the mono face before). */
+export declare function SectionLabel({ children, action, caps, style }: {
     children: ReactNode;
     action?: ReactNode;
-    mono?: boolean;
+    caps?: boolean;
     style?: CSSProperties;
 }): import("react").JSX.Element;
 export declare function Divider({ bleed }: {

package/dist/admin/ui/primitives.js

@@ -45,8 +45,8 @@ 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", 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 }) {
-    return _jsx("a", { className: cx("sm-btn", `sm-btn--${variant}`), ...rest, children: children });
+export function LinkButton({ variant = "secondary", icon = false, children, ...rest }) {
+    return _jsx("a", { className: cx("sm-btn", `sm-btn--${variant}`, icon && "sm-btn--icon"), ...rest, children: children });
 }
 export function IconButton({ label, tone = "default", size = 24, children, ...rest }) {
     return (_jsx("button", { type: "button", "aria-label": label, title: label, className: cx("sm-iconbtn", tone === "inverse" && "sm-iconbtn--inverse"), style: { width: size, height: size }, ...rest, children: children }));
@@ -105,6 +105,11 @@ export function Segmented({ options, value, onChange, stretch, disabled, label,
             return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, onClick: () => onChange(o), children: label ? label(o) : o }, o));
         }) }));
 }
+/** A pill row (the f.radio look, spec 2026-09-14 §5): no track, the chosen pill filled in the
+ *  soft accent. For a small choice inside a table row, where a segmented control reads as tabs. */
+export function Pills({ options, value, onChange, disabled, title, label }) {
+    return (_jsx("div", { className: cx("sm-pills", disabled && "sm-pills--disabled"), role: "radiogroup", children: options.map((o) => (_jsx("button", { type: "button", className: "sm-pill", "aria-pressed": o === value, disabled: disabled, title: title, onClick: () => onChange(o), children: label ? label(o) : o }, o))) }));
+}
 /* ── data ────────────────────────────────────────────────────────────── */
 // Keyed by the product labels of ui/status-label.ts (lowercased by StatusBadge).
 const STATUS_TONE = {
@@ -126,10 +131,11 @@ export function SaveIndicator({ state }) {
         error: { label: "Save failed — retrying", dot: "var(--danger)", color: "var(--danger)" },
     };
     const { label, dot, color } = map[state];
-    return (_jsxs("span", { className: "sm-savestate", style: { color }, title: label, children: [_jsx("span", { className: "sm-dot", style: { background: dot } }), label] }));
+    return (_jsxs("span", { className: "sm-savestate", "data-testid": "save-status", style: { color }, title: label, children: [_jsx("span", { className: "sm-dot", style: { background: dot } }), label] }));
 }
-export function SectionLabel({ children, action, mono, style }) {
-    return (_jsxs("div", { className: cx("sm-sectionlabel", mono && "sm-sectionlabel--mono"), style: style, children: [_jsx("span", { className: "sm-label", children: children }), action && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600, fontSize: "var(--text-sm)" }, children: action })] }));
+/** `caps`: the overline style — small, uppercase, tracked (2026-09-26; the mono face before). */
+export function SectionLabel({ children, action, caps, style }) {
+    return (_jsxs("div", { className: cx("sm-sectionlabel", caps && "sm-sectionlabel--caps"), style: style, children: [_jsx("span", { className: "sm-label", children: children }), action && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600, fontSize: "var(--text-sm)" }, children: action })] }));
 }
 export function Divider({ bleed = 0 }) {
     return _jsx("div", { className: "sm-divider", style: { margin: `0 -${bleed}px` } });

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

@@ -6,10 +6,13 @@ export declare const MIN_INSPECTOR_W = 260;
 export declare const DEFAULT_INSPECTOR_W = 360;
 /** One arrow-key press. */
 export declare const RESIZE_STEP = 16;
-/** Half the editor row (canvas + handle + inspector), never below the minimum. */
-export declare const maxInspectorW: (rowWidth: number) => number;
-/** An integer inside [MIN, half the row]. */
-export declare const clampInspectorW: (px: number, rowWidth: number) => number;
+/** What the canvas keeps however far the inspector is dragged (2026-09-26, up from half the row; 340 for an hour). */
+export declare const MIN_CANVAS_W = 440;
+/** The editor row (canvas + handle + inspector) less the handle and the
+ *  canvas minimum, never below the inspector minimum. */
+export declare const maxInspectorW: (rowWidth: number, handleWidth?: number) => number;
+/** An integer inside [MIN, the row less the handle and the canvas minimum]. */
+export declare const clampInspectorW: (px: number, rowWidth: number, handleWidth?: number) => number;
 /** A stored value is trusted only as a plain integer ≥ MIN; anything else is
  *  ignored (never clamped or rewritten). The boot script in theme.tsx repeats
  *  this test inline — keep the two in step. */