smoodly 0.0.24 → 0.0.26

package/dist/admin/shell/locale-memory.d.ts

@@ -0,0 +1,8 @@
+import type { AdminRegistry } from "../serialize.ts";
+export declare const LOCALE_KEY = "smoodly-locale";
+type Locales = AdminRegistry["locales"];
+/** The stored locale when the config supports it, else the default. */
+export declare function resolveLocale(stored: string | null | undefined, locales: Locales): string;
+export declare function rememberedLocale(locales: Locales): string;
+export declare function rememberLocale(locale: string): void;
+export {};

package/dist/admin/shell/locale-memory.js

@@ -0,0 +1,23 @@
+export const LOCALE_KEY = "smoodly-locale";
+/** The stored locale when the config supports it, else the default. */
+export function resolveLocale(stored, locales) {
+    return stored && locales.supported.includes(stored) ? stored : locales.default;
+}
+export function rememberedLocale(locales) {
+    let stored = null;
+    try {
+        stored = window.localStorage.getItem(LOCALE_KEY);
+    }
+    catch {
+        // storage unavailable (private mode, no window) — the default is fine
+    }
+    return resolveLocale(stored, locales);
+}
+export function rememberLocale(locale) {
+    try {
+        window.localStorage.setItem(LOCALE_KEY, locale);
+    }
+    catch {
+        // not remembered — the screen still switches
+    }
+}

package/dist/admin/shell/members-list.d.ts

@@ -12,6 +12,8 @@ export type MemberRow = {
     lastAdmin: boolean;
 };
 export declare const roleLabel: (role: string) => string;
+/** What each role may do, in one line — the invite modal's radio descriptions (permissions.ts decides). */
+export declare const ROLE_DESCRIPTION: Record<MemberRole, string>;
 export declare function memberRows(members: MemberRecord[], opts: {
     me: string;
 }): MemberRow[];

package/dist/admin/shell/members-list.js

@@ -1,5 +1,10 @@
 import { normalizeRole } from "../../permissions.js";
 export const roleLabel = (role) => (role ? role[0].toUpperCase() + role.slice(1) : "");
+/** What each role may do, in one line — the invite modal's radio descriptions (permissions.ts decides). */
+export const ROLE_DESCRIPTION = {
+    editor: "Edits, publishes and deletes content and media.",
+    admin: "Everything an editor can, and Settings: invites, re-roles and removes members.",
+};
 export function memberRows(members, opts) {
     const admins = members.filter((m) => normalizeRole(m.role) === "admin").length;
     return members.map((m) => {

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

@@ -0,0 +1,9 @@
+import type { Presence, PresenceState, PresenceTarget, SavedEvent } from "./presence.ts";
+export declare const PresenceProvider: import("react").Provider<Presence | null>;
+export declare const usePresence: () => Presence | null;
+export declare function usePresenceState(): PresenceState;
+/** Track `target` while mounted; null tracks nothing. Keys on the target's three fields. */
+export declare function useTrackPresence(target: PresenceTarget | null): void;
+/** Hear another person's save of exactly `target`. The handler is read at call time
+ *  (re-subscribed every render on purpose: one Set entry, always fresh state). */
+export declare function useSavedElsewhere(target: PresenceTarget | null, handler: (event: SavedEvent) => void): void;

package/dist/admin/shell/presence-context.js

@@ -0,0 +1,35 @@
+"use client";
+// The React side of presence: one controller per signed-in session from AdminApp,
+// the hooks the lists and the three views use.
+import { createContext, useContext, useEffect, useSyncExternalStore } from "react";
+const OFF = { status: "off", others: [] };
+const PresenceContext = createContext(null);
+export const PresenceProvider = PresenceContext.Provider;
+export const usePresence = () => useContext(PresenceContext);
+export function usePresenceState() {
+    const p = usePresence();
+    return useSyncExternalStore(p ? p.subscribe : () => () => { }, p ? p.getState : () => OFF, () => OFF);
+}
+/** Track `target` while mounted; null tracks nothing. Keys on the target's three fields. */
+export function useTrackPresence(target) {
+    const p = usePresence();
+    const kind = target?.kind, id = target?.id, locale = target?.locale;
+    useEffect(() => {
+        if (!p || !kind || !id || !locale)
+            return;
+        p.track({ kind, id, locale });
+        return () => p.track(null);
+    }, [p, kind, id, locale]);
+}
+/** Hear another person's save of exactly `target`. The handler is read at call time
+ *  (re-subscribed every render on purpose: one Set entry, always fresh state). */
+export function useSavedElsewhere(target, handler) {
+    const p = usePresence();
+    const kind = target?.kind, id = target?.id, locale = target?.locale;
+    useEffect(() => {
+        if (!p || !kind || !id || !locale)
+            return;
+        return p.onSaved((event) => { if (event.kind === kind && event.id === id && event.locale === locale)
+            handler(event); });
+    });
+}

package/dist/admin/shell/presence-realtime.d.ts

@@ -0,0 +1,3 @@
+import type { ContentConfig } from "../../env.ts";
+import type { PresenceChannel } from "./presence.ts";
+export declare function connectRealtime(config: ContentConfig, email: string): PresenceChannel;

package/dist/admin/shell/presence-realtime.js

@@ -0,0 +1,22 @@
+"use client";
+// The real channel behind `createPresence` (spec 2026-09-26 concurrency §5–§6): one
+// supabase-js client on the CONTENT project with its public key (the anon key in
+// self-host, the read key in the cloud), a private channel named after the space,
+// presence keyed by the email. A key that is a JWT is also the realtime token.
+import { createClient } from "@supabase/supabase-js";
+export function connectRealtime(config, email) {
+    const client = createClient(config.url, config.key, { auth: { persistSession: false, autoRefreshToken: false } });
+    if (config.key.split(".").length === 3)
+        void client.realtime.setAuth(config.key);
+    const channel = client.channel(`space:${config.spaceId}`, { config: { private: true, presence: { key: email } } });
+    return {
+        subscribe: (onStatus) => { channel.subscribe((status) => onStatus(status)); },
+        track: (state) => channel.track(state),
+        untrack: () => channel.untrack(),
+        send: (message) => channel.send(message),
+        onSync: (listener) => { channel.on("presence", { event: "sync" }, listener); },
+        presenceState: () => channel.presenceState(),
+        onBroadcast: (event, listener) => { channel.on("broadcast", { event }, (m) => listener(m.payload)); },
+        unsubscribe: async () => { await channel.unsubscribe(); await client.removeAllChannels(); },
+    };
+}

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

@@ -0,0 +1,51 @@
+export type PresenceTarget = {
+    kind: "page" | "entry" | "global";
+    id: string;
+    locale: string;
+};
+export type PresenceEntry = PresenceTarget & {
+    email: string;
+};
+export type SavedEvent = PresenceTarget & {
+    email: string;
+    savedAt: string | null;
+};
+export type PresenceStatus = "off" | "joining" | "joined" | "failed";
+export type PresenceState = {
+    status: PresenceStatus;
+    others: PresenceEntry[];
+};
+/** The slice of a Realtime channel presence uses. */
+export type PresenceChannel = {
+    subscribe(onStatus: (status: string) => void): void;
+    track(state: Record<string, unknown>): Promise<unknown>;
+    untrack(): Promise<unknown>;
+    send(message: {
+        type: "broadcast";
+        event: string;
+        payload: Record<string, unknown>;
+    }): Promise<unknown>;
+    onSync(listener: () => void): void;
+    /** key (the email) → that person's tabs' states. */
+    presenceState(): Record<string, Record<string, unknown>[]>;
+    onBroadcast(event: string, listener: (payload: Record<string, unknown>) => void): void;
+    unsubscribe(): Promise<unknown>;
+};
+export type Presence = {
+    join(): void;
+    /** What this tab edits now; null on leaving a view. Re-sent on rejoin. */
+    track(target: PresenceTarget | null): void;
+    /** After a guarded op acked: tell the others. */
+    announce(target: PresenceTarget, savedAt: string | null): void;
+    onSaved(listener: (event: SavedEvent) => void): () => void;
+    getState(): PresenceState;
+    subscribe(listener: () => void): () => void;
+    dispose(): void;
+};
+export declare const shortName: (email: string) => string;
+/** The short names editing `target`, other than me, sorted and deduped. */
+export declare function editorsOf(others: PresenceEntry[], target: PresenceTarget): string[];
+export declare function createPresence(opts: {
+    email: string;
+    connect: () => PresenceChannel;
+}): Presence;

package/dist/admin/shell/presence.js

@@ -0,0 +1,90 @@
+// Editing presence (spec 2026-09-26 concurrency §5): who has what open, and a
+// "saved" announcement, over ONE channel per space. Framework-free: the channel
+// is injected (presence-realtime.ts builds the supabase-js one; tests fake it),
+// the React glue is presence-context.tsx. Never awaited by anything — a failed
+// join leaves the admin exactly as without presence.
+const sameTarget = (a, b) => a.kind === b.kind && a.id === b.id && a.locale === b.locale;
+export const shortName = (email) => email.split("@")[0];
+/** The short names editing `target`, other than me, sorted and deduped. */
+export function editorsOf(others, target) {
+    return [...new Set(others.filter((o) => sameTarget(o, target)).map((o) => shortName(o.email)))].sort();
+}
+const isTarget = (v) => typeof v === "object" && v !== null
+    && ["page", "entry", "global"].includes(v.kind)
+    && typeof v.id === "string" && typeof v.locale === "string";
+export function createPresence(opts) {
+    let state = { status: "off", others: [] };
+    let channel = null;
+    let current = null;
+    const listeners = new Set();
+    const savedListeners = new Set();
+    const set = (next) => { state = { ...state, ...next }; for (const l of listeners)
+        l(); };
+    const readOthers = () => {
+        if (!channel)
+            return [];
+        const out = [];
+        for (const [email, metas] of Object.entries(channel.presenceState())) {
+            if (email === opts.email)
+                continue;
+            for (const meta of metas)
+                if (isTarget(meta))
+                    out.push({ email, kind: meta.kind, id: meta.id, locale: meta.locale });
+        }
+        return out;
+    };
+    return {
+        join() {
+            if (channel)
+                return;
+            try {
+                channel = opts.connect();
+            }
+            catch {
+                set({ status: "failed" });
+                return;
+            }
+            set({ status: "joining" });
+            channel.onSync(() => set({ others: readOthers() }));
+            channel.onBroadcast("saved", (payload) => {
+                const { email, savedAt } = payload;
+                if (!isTarget(payload) || typeof email !== "string" || email === opts.email)
+                    return;
+                const event = { kind: payload.kind, id: payload.id, locale: payload.locale, email, savedAt: typeof savedAt === "string" ? savedAt : null };
+                for (const l of savedListeners)
+                    l(event);
+            });
+            channel.subscribe((status) => {
+                if (status === "SUBSCRIBED") {
+                    set({ status: "joined" });
+                    if (current && channel)
+                        void channel.track(current).catch(() => { });
+                }
+                else if (status === "CHANNEL_ERROR" || status === "TIMED_OUT" || status === "CLOSED") {
+                    set({ status: "failed", others: [] });
+                }
+            });
+        },
+        track(target) {
+            current = target;
+            if (state.status !== "joined" || !channel)
+                return;
+            void (target ? channel.track(target) : channel.untrack()).catch(() => { });
+        },
+        announce(target, savedAt) {
+            if (state.status !== "joined" || !channel)
+                return;
+            void channel.send({ type: "broadcast", event: "saved", payload: { ...target, email: opts.email, savedAt } }).catch(() => { });
+        },
+        onSaved(listener) { savedListeners.add(listener); return () => { savedListeners.delete(listener); }; },
+        getState: () => state,
+        subscribe(listener) { listeners.add(listener); return () => { listeners.delete(listener); }; },
+        dispose() {
+            const c = channel;
+            channel = null;
+            set({ status: "off", others: [] });
+            if (c)
+                void c.unsubscribe().catch(() => { });
+        },
+    };
+}

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

@@ -0,0 +1,28 @@
+import type { OpError, OpResult } from "../ops.ts";
+export type StaleInfo = {
+    by: string | null;
+    at: number;
+};
+/** The views' `fail` helpers take a loose failure shape; the guard's refusal is recognised in either. */
+type FailureLike = {
+    ok: false;
+    code: string;
+    message: string;
+    stale?: true;
+    by?: string | null;
+    at?: number;
+};
+export declare const isStale: (r: OpResult<unknown> | FailureLike) => r is OpError & {
+    stale: true;
+};
+/** The part before the @ — how the members list and history shorten an actor. */
+export declare const shortName: (email: string | null) => string;
+export declare function staleText(info: StaleInfo, now?: number): string;
+export declare const STALE_DETAIL = "Your unsaved changes here will be discarded.";
+export declare const LOAD_THEIRS = "Load their version";
+/** An op result's stale facts, for the views' `fail` paths. */
+export declare const staleInfoOf: (r: {
+    by?: string | null;
+    at?: number;
+}) => StaleInfo;
+export {};

package/dist/admin/shell/stale.js

@@ -0,0 +1,17 @@
+import { versionTime } from "../ui/format.js";
+export const isStale = (r) => !r.ok && r.code === "conflict" && r.stale === true;
+/** The part before the @ — how the members list and history shorten an actor. */
+export const shortName = (email) => (email ? email.split("@")[0] : "someone");
+export function staleText(info, now = Date.now()) {
+    const at = new Date(info.at);
+    const today = new Date(now);
+    const sameDay = at.getFullYear() === today.getFullYear() && at.getMonth() === today.getMonth() && at.getDate() === today.getDate();
+    const when = sameDay
+        ? `${String(at.getHours()).padStart(2, "0")}:${String(at.getMinutes()).padStart(2, "0")}`
+        : versionTime(info.at);
+    return `${shortName(info.by)} saved a newer version at ${when}.`;
+}
+export const STALE_DETAIL = "Your unsaved changes here will be discarded.";
+export const LOAD_THEIRS = "Load their version";
+/** An op result's stale facts, for the views' `fail` paths. */
+export const staleInfoOf = (r) => ({ by: r.by ?? null, at: r.at ?? Date.now() });

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;