smoodly 0.0.23 → 0.0.25

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. */

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;