smoodly 0.0.24 → 0.0.26

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

@@ -0,0 +1,4 @@
+export declare const lockLabel: (names: string[]) => string;
+export declare function LockIcon({ names }: {
+    names: string[];
+}): import("react").JSX.Element | null;

package/dist/admin/ui/LockIcon.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The lock after a list row's title (spec 2026-09-26 concurrency §5): someone else
+// has this target open in this locale. A tooltip names them.
+import { Lock } from "lucide-react";
+export const lockLabel = (names) => names.length === 1 ? `${names[0]} is editing` : `${names.join(", ")} are editing`;
+export function LockIcon({ names }) {
+    if (names.length === 0)
+        return null;
+    const label = lockLabel(names);
+    return (_jsx("span", { className: "sm-lock", role: "img", "aria-label": label, title: label, children: _jsx(Lock, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }) }));
+}

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

@@ -0,0 +1,6 @@
+export type PresenceNoun = "page" | "entry" | "item";
+export declare function presenceLineText(names: string[], noun: PresenceNoun): string;
+export declare function PresenceLine({ names, noun }: {
+    names: string[];
+    noun: PresenceNoun;
+}): import("react").JSX.Element | null;

package/dist/admin/ui/PresenceLine.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function presenceLineText(names, noun) {
+    const who = names.length === 1 ? names[0] : `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+    return `${who} ${names.length === 1 ? "is" : "are"} also editing this ${noun}.`;
+}
+export function PresenceLine({ names, noun }) {
+    if (names.length === 0)
+        return null;
+    return _jsx("p", { className: "sm-presence", role: "status", children: presenceLineText(names, noun) });
+}

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

@@ -0,0 +1,5 @@
+import { type StaleInfo } from "../shell/stale.ts";
+export declare function StaleBanner({ info, onReload }: {
+    info: StaleInfo;
+    onReload: () => void;
+}): import("react").JSX.Element;

package/dist/admin/ui/StaleBanner.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The freeze notice under the top bar (spec 2026-09-26 concurrency §4): the fact,
+// what a reload costs, and the one button. The view puts everything below it inert.
+import { LOAD_THEIRS, STALE_DETAIL, staleText } from "../shell/stale.js";
+import { Banner, Button } from "./primitives.js";
+export function StaleBanner({ info, onReload }) {
+    return (_jsx("div", { className: "sm-stale", "data-testid": "stale-banner", children: _jsxs(Banner, { tone: "error", children: [_jsx("p", { style: { margin: 0 }, children: staleText(info) }), _jsx("p", { style: { margin: "4px 0 10px", color: "inherit", opacity: 0.85 }, children: STALE_DETAIL }), _jsx(Button, { onClick: onReload, children: LOAD_THEIRS })] }) }));
+}

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 = {
@@ -124,12 +129,14 @@ export function SaveIndicator({ state }) {
         saved: { label: "Saved", dot: "var(--status-saved-dot)", color: "var(--text-muted)" },
         saving: { label: "Saving", dot: "var(--warn)", color: "var(--text-muted)" },
         error: { label: "Save failed — retrying", dot: "var(--danger)", color: "var(--danger)" },
+        stale: { label: "Not saved — newer version exists", 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. */

package/dist/admin/ui/resize.js

@@ -8,10 +8,13 @@ export const MIN_INSPECTOR_W = 260;
 export const DEFAULT_INSPECTOR_W = 360;
 /** One arrow-key press. */
 export const RESIZE_STEP = 16;
-/** Half the editor row (canvas + handle + inspector), never below the minimum. */
-export const maxInspectorW = (rowWidth) => Math.max(MIN_INSPECTOR_W, Math.floor(rowWidth / 2));
-/** An integer inside [MIN, half the row]. */
-export const clampInspectorW = (px, rowWidth) => Math.min(maxInspectorW(rowWidth), Math.max(MIN_INSPECTOR_W, Math.round(px)));
+/** What the canvas keeps however far the inspector is dragged (2026-09-26, up from half the row; 340 for an hour). */
+export const MIN_CANVAS_W = 440;
+/** The editor row (canvas + handle + inspector) less the handle and the
+ *  canvas minimum, never below the inspector minimum. */
+export const maxInspectorW = (rowWidth, handleWidth = 0) => Math.max(MIN_INSPECTOR_W, Math.floor(rowWidth - handleWidth - MIN_CANVAS_W));
+/** An integer inside [MIN, the row less the handle and the canvas minimum]. */
+export const clampInspectorW = (px, rowWidth, handleWidth = 0) => Math.min(maxInspectorW(rowWidth, handleWidth), Math.max(MIN_INSPECTOR_W, Math.round(px)));
 /** 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. */

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

@@ -1,7 +1,7 @@
 export declare const ADMIN_CSS: string;
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export declare const THEME_KEY = "smoodly-theme";
-/** TEMPORARY, see the technical block: which look the developer is comparing. */
+/** Which look the developer is comparing (see the warm block): "warm" applies it, anything else is the default. */
 export declare const LOOK_KEY = "smoodly-look";
 /** One <style> element and the theme boot, rendered once by AdminLayout. */
 export declare function AdminStyles(): import("react").JSX.Element;