smoodly 0.0.24 → 0.0.26

package/dist/admin/shell/InviteModal.js

@@ -2,13 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/smoodly/src/admin/shell/InviteModal.tsx
 // Invite a member (spec 2026-09-25 members management §4): an email, a
-// role, Send. The op's error shows inside; success closes it and the
-// page reports what happened.
+// role, Send. The role is a radio list with a line under each option
+// saying what it may do — the one place the difference is explained in
+// the admin (the Roles page was dropped 2026-09-25). The op's error
+// shows inside; success closes it and the page reports what happened.
 import { useState } from "react";
 import { MEMBER_ROLES } from "../../permissions.js";
 import { Modal } from "../ui/Modal.js";
-import { Banner, Button, Field, Segmented } from "../ui/primitives.js";
-import { roleLabel } from "./members-list.js";
+import { Banner, Button, Field } from "../ui/primitives.js";
+import { ROLE_DESCRIPTION, roleLabel } from "./members-list.js";
 export function InviteModal({ onClose, onInvite }) {
     const [email, setEmail] = useState("");
     const [role, setRole] = useState("editor");
@@ -20,5 +22,7 @@ export function InviteModal({ onClose, onInvite }) {
         setError(await onInvite({ email: email.trim(), role }));
         setBusy(false);
     };
-    return (_jsx(Modal, { title: "Invite a member", width: 420, onClose: onClose, children: _jsxs("form", { onSubmit: submit, style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Email", children: _jsx("input", { className: "sm-input", type: "email", required: true, autoFocus: true, value: email, onChange: (e) => setEmail(e.target.value) }) }), _jsx(Field, { label: "Role", asDiv: true, children: _jsx(Segmented, { options: MEMBER_ROLES, value: role, onChange: setRole, label: roleLabel }) }), error && _jsx(Banner, { tone: "error", children: error }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", className: "sm-btn sm-btn--primary", disabled: busy, children: busy ? "Sending…" : "Send invite" })] })] }) }));
+    // Editor first: the default, and the one most invites want.
+    const roles = [...MEMBER_ROLES].reverse();
+    return (_jsx(Modal, { title: "Invite a member", width: 420, onClose: onClose, children: _jsxs("form", { onSubmit: submit, style: { display: "flex", flexDirection: "column", gap: 14 }, children: [_jsx(Field, { label: "Email", children: _jsx("input", { className: "sm-input", type: "email", required: true, autoFocus: true, value: email, onChange: (e) => setEmail(e.target.value) }) }), _jsx(Field, { label: "Role", asDiv: true, children: _jsx("div", { className: "sm-choices", role: "radiogroup", children: roles.map((r) => (_jsxs("label", { className: "sm-choice sm-choice--desc", children: [_jsx("input", { type: "radio", name: "role", value: r, checked: role === r, onChange: () => setRole(r) }), _jsxs("span", { children: [_jsx("span", { className: "sm-choice__label", children: roleLabel(r) }), _jsx("span", { className: "sm-choice__desc", children: ROLE_DESCRIPTION[r] })] })] }, r))) }) }), error && _jsx(Banner, { tone: "error", children: error }), _jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", className: "sm-btn sm-btn--primary", disabled: busy, children: busy ? "Sending…" : "Send invite" })] })] }) }));
 }

package/dist/admin/shell/ListView.js

@@ -6,10 +6,10 @@ import { navigate } from "./router.js";
 export function ListView({ title, titleTrailing, actions, notice, columns, rows, empty, sortable }) {
     const widths = sortable ? ["24px", ...columns.map((c) => c.width)] : columns.map((c) => c.width);
     const grid = { gridTemplateColumns: widths.join(" ") };
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx("span", { className: "sm-title", children: title }), titleTrailing] }), right: actions }), notice, _jsx("div", { className: "sm-listwrap", children: _jsxs("div", { className: "sm-table", children: [_jsxs("div", { className: "sm-table__head", style: grid, children: [sortable && _jsx("span", { "aria-hidden": "true" }), columns.map((c) => _jsx("span", { children: c.label }, c.label))] }), _jsxs("div", { className: "sm-table__body", ref: sortable?.hook.containerRef, children: [rows.map((r, i) => {
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx("span", { className: "sm-title", children: title }), titleTrailing] }), right: actions }), notice && _jsx("div", { className: "sm-listnotice", children: notice }), _jsx("div", { className: "sm-listwrap", children: _jsxs("div", { className: "sm-table", children: [_jsxs("div", { className: "sm-table__head", style: grid, children: [sortable && _jsx("span", { "aria-hidden": "true" }), columns.map((c) => _jsx("span", { children: c.label }, c.label))] }), _jsxs("div", { className: "sm-table__body", ref: sortable?.hook.containerRef, children: [rows.map((r, i) => {
                                     const clickable = Boolean(r.href || r.onClick);
                                     const href = r.href;
-                                    const go = r.onClick ?? (href ? () => { navigate(href); } : undefined);
+                                    const go = r.onClick ?? (href ? () => { void navigate(href); } : undefined);
                                     return (_jsxs("div", { style: { ...grid, ...sortable?.hook.rowStyle(i) }, role: clickable ? "button" : undefined, tabIndex: clickable ? 0 : undefined, className: cx("sm-row", clickable && "sm-row--clickable", sortable?.hook.rowClass(i)), onClick: go, onKeyDown: (e) => { if (go && (e.key === "Enter" || e.key === " ")) {
                                             e.preventDefault();
                                             go();

package/dist/admin/shell/MediaScreen.js

@@ -9,6 +9,7 @@ import { useAssets } from "../forms/assets-context.js";
 import { uploadFile } from "../forms/upload.js";
 import { MediaGrid } from "../forms/MediaGrid.js";
 import { Banner, Button, Field, Segmented, TopBar } from "../ui/primitives.js";
+import { confirm } from "../ui/confirm.js";
 import { RouteLink } from "./RouteLink.js";
 import { KIND_FILTERS, acceptFor, formatBytes, kindOfFilter, usageLabel } from "./media-list.js";
 const META = ["title", "alt", "caption", "credit"];
@@ -70,7 +71,16 @@ export function MediaScreen({ initialItems = [], initialSelected = null, initial
         load();
     };
     const remove = async () => {
-        if (!selected || !window.confirm(`Delete "${selected.title ?? selected.filename}"? This cannot be undone.`))
+        if (!selected)
+            return;
+        const ok = await confirm({
+            title: "Delete this file?",
+            body: "The file is removed from the media library and from storage. This cannot be undone.",
+            confirmLabel: "Delete file",
+            destructive: true,
+            subject: { name: selected.title ?? selected.filename },
+        });
+        if (!ok)
             return;
         const r = await assets.ops.delete(selected.id);
         if (!r.ok) {

package/dist/admin/shell/MembersPage.js

@@ -2,18 +2,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // packages/smoodly/src/admin/shell/MembersPage.tsx
 // The Members page (spec 2026-09-25 §7; management §4): the admission
-// table with Invite, an in-place role control and Remove — all off when
-// the control plane manages the space (the console URL banner stays).
-// Own row and the last admin render their controls disabled with the
-// guard's reason, so the rule is visible before it is hit.
+// table with Invite, the role as a badge and a row menu with Change role
+// (to the other role, after a confirm) and Remove member (2026-09-26; the
+// in-place pills before) — all off when the control plane manages the
+// space (the console URL banner stays). Own row and the last admin render
+// their menu disabled with the guard's reason, so the rule is visible
+// before it is hit.
 import { useEffect, useState } from "react";
-import { MEMBER_ROLES } from "../../permissions.js";
 import { ActionMenu } from "../ui/ActionMenu.js";
-import { Banner, Button, Segmented, StatusBadge } from "../ui/primitives.js";
+import { Banner, Button, StatusBadge } from "../ui/primitives.js";
+import { confirm } from "../ui/confirm.js";
 import { ErrorPane } from "./ErrorPane.js";
 import { InviteModal } from "./InviteModal.js";
 import { ListView } from "./ListView.js";
-import { GUARD_TITLE, memberRows, roleLabel } from "./members-list.js";
+import { GUARD_TITLE, ROLE_DESCRIPTION, memberRows, roleLabel } from "./members-list.js";
 export function MembersPage({ ops, userId, initial = null }) {
     const [data, setData] = useState(initial);
     const [error, setError] = useState(null);
@@ -38,8 +40,16 @@ export function MembersPage({ ops, userId, initial = null }) {
         void load();
         return null;
     };
-    const setRole = async (row, role) => {
-        if (role === row.value)
+    /** Two roles: the change is to the other one, confirmed with what it may do. */
+    const changeRole = async (row) => {
+        const role = row.value === "admin" ? "editor" : "admin";
+        const ok = await confirm({
+            title: `Change role to ${roleLabel(role).toLowerCase()}?`,
+            body: `${roleLabel(role)}: ${ROLE_DESCRIPTION[role]}`,
+            confirmLabel: "Change role",
+            subject: { name: row.email },
+        });
+        if (!ok)
             return;
         const r = await ops.members.setRole(row.key, role);
         if (!r.ok) {
@@ -49,7 +59,14 @@ export function MembersPage({ ops, userId, initial = null }) {
         setData((d) => d && { ...d, members: d.members.map((m) => (m.userId === row.key ? r.data : m)) });
     };
     const remove = async (row) => {
-        if (!window.confirm(`Remove ${row.email} from this site? They keep their account and lose access to the admin.`))
+        const ok = await confirm({
+            title: "Remove this member?",
+            body: "They keep their account and lose access to this site's admin. You can invite them again later.",
+            confirmLabel: "Remove member",
+            destructive: true,
+            subject: { name: row.email },
+        });
+        if (!ok)
             return;
         const r = await ops.members.remove(row.key);
         if (!r.ok) {
@@ -65,18 +82,19 @@ export function MembersPage({ ops, userId, initial = null }) {
     const guardTitle = (r) => (r.own ? GUARD_TITLE.own : r.lastAdmin ? GUARD_TITLE.lastAdmin : undefined);
     return (_jsxs(_Fragment, { children: [_jsx(ListView, { title: "Members", actions: !managed && data && _jsx(Button, { onClick: () => setInviting(true), children: "Invite" }), notice: _jsxs(_Fragment, { children: [data?.consoleUrl && (_jsxs(Banner, { tone: "ok", children: ["Members are managed at smoodly.io.", " ", _jsx("a", { href: data.consoleUrl, target: "_blank", rel: "noreferrer", children: "Open the console" })] })), notice && _jsx(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: notice.text })] }), columns: [
                     { label: "Email", width: "minmax(200px,1fr)" },
-                    { label: "Role", width: managed ? "120px" : "180px" },
+                    { label: "Role", width: "120px" },
                     ...(managed ? [] : [{ label: "", width: "48px" }]),
                 ], rows: rows.map((r) => ({
                     key: r.key,
                     cells: [
                         r.fallback ? _jsx("span", { style: { color: "var(--text-muted)" }, children: r.email }) : r.email,
-                        managed
-                            ? _jsx(StatusBadge, { status: r.role })
-                            : _jsx(Segmented, { options: MEMBER_ROLES, value: r.value, onChange: (v) => void setRole(r, v), label: roleLabel, disabled: r.own || r.lastAdmin, option: () => (guardTitle(r) ? { title: guardTitle(r) } : undefined) }),
+                        _jsx(StatusBadge, { status: r.role }),
                         ...(managed ? [] : [
                             // ActionMenu has no title of its own when disabled: the span carries the guard's reason.
-                            _jsx("span", { title: guardTitle(r), children: _jsx(ActionMenu, { label: "Member actions", small: true, disabled: r.own || r.lastAdmin, items: [{ label: "Remove", danger: true, run: () => void remove(r) }] }) }),
+                            _jsx("span", { title: guardTitle(r), children: _jsx(ActionMenu, { label: "Member actions", small: true, disabled: r.own || r.lastAdmin, items: [
+                                        { label: "Change role", run: () => void changeRole(r) },
+                                        { label: "Remove member", danger: true, run: () => void remove(r) },
+                                    ] }) }),
                         ]),
                     ],
                 })), empty: "No members yet" }), inviting && _jsx(InviteModal, { onClose: () => setInviting(false), onInvite: invite })] }));

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

@@ -0,0 +1,26 @@
+import { type ReactElement } from "react";
+import type { AdminPageTemplate } from "../serialize.ts";
+export type PageFormValues = {
+    title: string;
+    slug: string;
+    template: string | null;
+};
+export declare function PageFormDialog({ title: heading, submitLabel, fields, templates, parentPath, initial, onClose, onSubmit }: {
+    /** The dialog's heading ("New page", "Rename page"). */
+    title: string;
+    submitLabel: string;
+    /** Which fields the dialog shows. */
+    fields: {
+        title?: boolean;
+        slug?: boolean;
+        template?: boolean;
+    };
+    /** The open page registrations, for the page-type select (shown when `fields.template` and there is more than one). */
+    templates?: AdminPageTemplate[];
+    /** The parent's path, shown before the slug ("/company/"); the root's is "/". */
+    parentPath?: string;
+    initial?: Partial<PageFormValues>;
+    onClose(): void;
+    /** Resolves to an error message, or null when the op landed (the caller closes). */
+    onSubmit(values: PageFormValues): Promise<string | null>;
+}): ReactElement;

package/dist/admin/shell/PageDialogs.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The Pages list's form dialogs on the dialog card (ui/Dialog.tsx), in
+// place of window.prompt (2026-09-25): New page / New path / New subpage
+// / New subpath (a title, a slug that follows the title until edited, the
+// page type when more than one open registration exists), Add page here
+// (the page type alone) and Rename (title and slug; the home page's title
+// alone, its slug being the config's). Enter submits; the op's error
+// shows inside; success closes it from the caller.
+import { useId, useState } from "react";
+import { DialogCard } from "../ui/Dialog.js";
+import { Banner, Button, Field } from "../ui/primitives.js";
+import { followsTitle, slugify } from "./page-dialogs.js";
+export function PageFormDialog({ title: heading, submitLabel, fields, templates = [], parentPath, initial, onClose, onSubmit }) {
+    const [values, setValues] = useState({
+        title: initial?.title ?? "",
+        slug: initial?.slug ?? "",
+        template: initial?.template ?? (templates[0]?.name ?? null),
+    });
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const chooseTemplate = fields.template && templates.length > 1;
+    const prefix = parentPath === undefined ? undefined : parentPath === "/" ? "/" : `${parentPath}/`;
+    const setTitle = (title) => setValues((v) => ({ ...v, title, slug: fields.slug && followsTitle(v.slug, v.title) ? slugify(title) : v.slug }));
+    const submit = async (e) => {
+        e.preventDefault();
+        if (busy)
+            return;
+        setError(null);
+        setBusy(true);
+        setError(await onSubmit({ ...values, title: values.title.trim(), slug: values.slug.trim() }));
+        setBusy(false);
+    };
+    const formId = `sm-page-form${useId()}`;
+    return (_jsx(DialogCard, { title: heading, onClose: onClose, actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "submit", form: formId, className: "sm-btn sm-btn--primary", disabled: busy, children: busy ? "Saving…" : submitLabel })] }), children: _jsxs("form", { id: formId, className: "sm-dialog__form", onSubmit: submit, children: [fields.title && (_jsx(Field, { label: "Title", children: _jsx("input", { className: "sm-input", required: true, autoFocus: true, value: values.title, onChange: (e) => setTitle(e.target.value) }) })), fields.slug && (_jsx(Field, { label: "Slug", hint: "The URL segment: lowercase letters, digits and hyphens.", children: prefix
+                        ? (_jsxs("span", { className: "sm-inputwrap", children: [_jsx("span", { className: "sm-prefix", children: prefix }), _jsx("input", { className: "sm-input sm-input--mono", required: true, autoFocus: !fields.title, value: values.slug, onChange: (e) => setValues((v) => ({ ...v, slug: e.target.value })) })] }))
+                        : (_jsx("input", { className: "sm-input sm-input--mono", required: true, autoFocus: !fields.title, value: values.slug, onChange: (e) => setValues((v) => ({ ...v, slug: e.target.value })) })) })), chooseTemplate && (_jsx(Field, { label: "Page type", children: _jsx("select", { className: "sm-select", autoFocus: !fields.title && !fields.slug, value: values.template ?? "", onChange: (e) => setValues((v) => ({ ...v, template: e.target.value })), children: templates.map((t) => _jsx("option", { value: t.name, children: t.title }, t.name)) }) })), error && _jsx(Banner, { tone: "error", children: error })] }) }));
+}

package/dist/admin/shell/PagesList.js

@@ -17,35 +17,26 @@ import { useSortable } from "../ui/useSortable.js";
 import { useAdminHref } from "./base.js";
 import { navigate } from "./router.js";
 import { ErrorPane } from "./ErrorPane.js";
+import { rememberLocale, rememberedLocale } from "./locale-memory.js";
 import { confirmLiveUrl } from "./live-url.js";
-const LOCALE_KEY = "smoodly.pages.locale";
-/** The selected locale survives a reload within the session; a stored
- *  value that is no longer supported falls back to the default. */
-function rememberedLocale(registry) {
-    try {
-        const stored = window.sessionStorage.getItem(LOCALE_KEY);
-        if (stored && registry.locales.supported.includes(stored))
-            return stored;
-    }
-    catch {
-        // storage unavailable (private mode, no window) — the default is fine
-    }
-    return registry.locales.default;
-}
+import { confirm } from "../ui/confirm.js";
+import { PageFormDialog } from "./PageDialogs.js";
+import { usePresenceState } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { LockIcon } from "../ui/LockIcon.js";
 export function PagesList({ ops, registry }) {
+    const { others } = usePresenceState();
     const adminHref = useAdminHref();
     const [pages, setPages] = useState(null);
     const [error, setError] = useState(null);
     const [collapsed, setCollapsed] = useState(() => new Set());
     const [menu, setMenu] = useState(null);
-    const [locale, setLocale] = useState(() => rememberedLocale(registry));
+    const [dialog, setDialog] = useState(null);
+    const [locale, setLocale] = useState(() => rememberedLocale(registry.locales));
     const multilingual = registry.locales.supported.length > 1;
     const pickLocale = (next) => {
         setLocale(next);
-        try {
-            window.sessionStorage.setItem(LOCALE_KEY, next);
-        }
-        catch { /* see rememberedLocale */ }
+        rememberLocale(next);
     };
     const load = useCallback(() => ops.pages.list()
         .then((r) => (r.ok ? setPages(r.data) : setError(r.message)))
@@ -77,7 +68,7 @@ export function PagesList({ ops, registry }) {
                 return;
             // A published page under a new parent is a new live URL (members management §5).
             const current = row.record.locales[locale];
-            if (!confirmLiveUrl({ status: current?.status, from: row.parentId ?? "", to: projection.parentId ?? "" }))
+            if (!(await confirmLiveUrl({ status: current?.status, from: row.parentId ?? "", to: projection.parentId ?? "" }, { name: row.title, path: row.path })))
                 return;
             const ok = await run(() => ops.pages.move(row.id, { parentId: projection.parentId, index: projection.index }));
             if (!ok)
@@ -86,10 +77,10 @@ export function PagesList({ ops, registry }) {
     });
     /** The editor opens in the locale selected here. */
     const openEditor = (id) => {
-        navigate(adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
+        void navigate(adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
     };
-    /** Run an op; on success reload the list (and maybe navigate), else show the op's message. Resolves to whether it succeeded. */
-    const run = async (work, then) => {
+    /** Run an op; on success reload the list (and maybe navigate). Resolves to the op's message, or null when it landed. */
+    const attempt = async (work, then) => {
         let result;
         try {
             result = await work();
@@ -97,74 +88,107 @@ export function PagesList({ ops, registry }) {
         catch {
             result = { ok: false, code: "internal", message: "Couldn't reach the server." };
         }
-        if (!result.ok) {
-            window.alert(result.message);
-            return false;
-        }
+        if (!result.ok)
+            return result.message;
         then?.(result.data);
         await load();
-        return true;
+        return null;
     };
-    const pickTemplate = () => {
-        if (noOpen)
-            return null;
-        if (creatable.length === 1)
-            return creatable[0].name;
-        return window.prompt(`Page type? (${creatable.map((p) => p.name).join(", ")})`) || null;
+    /** `attempt` for an action outside a dialog: the message goes to an alert. Resolves to whether it succeeded. */
+    const run = async (work, then) => {
+        const message = await attempt(work, then);
+        if (message)
+            window.alert(message);
+        return message === null;
     };
-    /** New page and New path (a folder in the tree) create in the SELECTED locale (spec §6). */
+    /** New page and New path (a folder in the tree) create in the SELECTED locale (spec §6),
+     *  Add page here gives a folder a template, Rename edits the title and slug — all in a dialog (PageDialogs). */
     const newNode = (parentId, kind) => {
         if (kind === "page" && noOpen)
             return;
-        const slug = window.prompt(`Slug for the new ${kind === "folder" ? "path" : "page"} (e.g. about):`);
-        if (!slug)
-            return;
-        const template = kind === "page" ? pickTemplate() : null;
-        if (kind === "page" && !template)
-            return;
-        void run(() => ops.pages.create({ parentId, locale, slug, template }), (page) => { if (template)
-            openEditor(page.id); });
+        setDialog({ kind: "new", parentId, node: kind });
     };
     const addPageHere = (row) => {
-        const template = pickTemplate();
-        if (!template)
+        if (noOpen)
             return;
-        void run(() => ops.pages.setTemplate(row.id, template), (page) => openEditor(page.id));
+        if (creatable.length === 1) {
+            void run(() => ops.pages.setTemplate(row.id, creatable[0].name), (page) => openEditor(page.id));
+            return;
+        }
+        setDialog({ kind: "template", row });
+    };
+    const rename = (row) => { if (row.record.locales[locale])
+        setDialog({ kind: "rename", row }); };
+    const closeDialog = () => setDialog(null);
+    /** The parent's path from a row's own: "/company/about-us" → "/company", "/about" → "/". */
+    const parentPathOf = (path) => {
+        if (!path)
+            return "/";
+        const cut = path.lastIndexOf("/");
+        return cut <= 0 ? "/" : path.slice(0, cut);
+    };
+    /** What the open dialog submits. Resolves to the op's message, or null and the caller closes. */
+    const submitDialog = async (values) => {
+        if (!dialog)
+            return null;
+        if (dialog.kind === "new") {
+            const template = dialog.node === "page" ? values.template : null;
+            if (dialog.node === "page" && !template)
+                return "Choose a page type.";
+            return attempt(() => ops.pages.create({ parentId: dialog.parentId, locale, slug: values.slug, title: values.title, template }), (page) => { if (template)
+                openEditor(page.id); });
+        }
+        if (dialog.kind === "template") {
+            if (!values.template)
+                return "Choose a page type.";
+            return attempt(() => ops.pages.setTemplate(dialog.row.id, values.template), (page) => openEditor(page.id));
+        }
+        const { row } = dialog;
+        const current = row.record.locales[locale];
+        if (!current)
+            return null;
+        // The site root's slug is the config's homePageSlug — title only there.
+        if (row.isHome)
+            return attempt(() => ops.pages.rename(row.id, { locale, title: values.title }));
+        if (!(await confirmLiveUrl({ status: current.status, from: current.slug, to: values.slug }, { name: row.title, path: row.path })))
+            return null;
+        return attempt(() => ops.pages.rename(row.id, { locale, title: values.title, slug: values.slug }));
     };
-    const addLocale = (row) => {
+    const addLocale = async (row) => {
         const from = sourceLocaleOf(row.record, registry);
-        if (!window.confirm(`Add "${row.title}" to ${locale}? Its ${from} content is copied as the first ${locale} draft.`))
+        const ok = await confirm({
+            title: `Add this page to ${locale}?`,
+            body: `Its ${from} content is copied as the first ${locale} draft. Nothing is published until you publish it.`,
+            confirmLabel: `Add to ${locale}`,
+            subject: { name: row.title, path: row.record.locales[from] ? row.path : null },
+        });
+        if (!ok)
             return;
         void run(() => ops.pages.addLocale(row.id, locale, { from }), (page) => { if (page.template !== null)
             openEditor(page.id); });
     };
-    const removeLocale = (row) => {
-        if (!window.confirm(`Remove "${row.title}" from ${locale}? Its ${locale} content and history are deleted.`))
+    const removeLocale = async (row) => {
+        const ok = await confirm({
+            title: `Remove this page from ${locale}?`,
+            body: `Its ${locale} content and history are deleted. Other languages are not affected.`,
+            confirmLabel: `Remove from ${locale}`,
+            destructive: true,
+            subject: { name: row.title, path: row.path },
+        });
+        if (!ok)
             return;
         void run(() => ops.pages.removeLocale(row.id, locale));
     };
-    const rename = (row) => {
-        const current = row.record.locales[locale];
-        if (!current)
-            return;
-        const title = window.prompt("Title:", current.title);
-        if (title === null)
-            return;
-        // The site root's slug is the config's homePageSlug — title only here.
-        if (row.isHome) {
-            void run(() => ops.pages.rename(row.id, { locale, title }));
-            return;
-        }
-        const slug = window.prompt("Slug (the URL segment):", current.slug);
-        if (slug === null)
-            return;
-        if (!confirmLiveUrl({ status: current.status, from: current.slug, to: slug }))
-            return;
-        void run(() => ops.pages.rename(row.id, { locale, title, slug }));
-    };
-    const destroy = (row) => {
+    const destroy = async (row) => {
         const scope = row.locales.length > 1 ? ` in every language (${row.locales.join(", ")})` : "";
-        if (!window.confirm(`Delete "${row.title}"${scope}?`))
+        const ok = await confirm({
+            title: row.hasChildren ? "Delete this page and everything under it?" : "Delete this page?",
+            body: `The page${scope} and its history are removed. Links pointing to it stop working. This cannot be undone.`,
+            confirmLabel: "Delete page",
+            destructive: true,
+            subject: { name: row.title, path: row.path },
+        });
+        if (!ok)
             return;
         void run(() => ops.pages.delete(row.id));
     };
@@ -200,7 +224,7 @@ export function PagesList({ ops, registry }) {
         else if (row.template !== null)
             openEditor(row.id);
         else if (row.kind === "mount" && row.collection)
-            navigate(adminHref(`/${row.collection}`));
+            void navigate(adminHref(`/${row.collection}`));
         else if (row.hasChildren)
             toggle(row.id);
     };
@@ -223,7 +247,7 @@ export function PagesList({ ops, registry }) {
                         key: row.id,
                         onClick: () => onRow(row),
                         cells: [
-                            _jsxs("span", { className: row.hasChildren ? "sm-cell sm-cell--tree sm-cell--parent" : "sm-cell sm-cell--tree", style: { paddingLeft: depth * 20, ...dim }, children: [_jsx("button", { type: "button", className: "sm-chevron", "aria-label": row.expanded ? "Collapse" : "Expand", "aria-expanded": row.hasChildren ? row.expanded : undefined, style: { visibility: row.hasChildren ? "visible" : "hidden" }, onClick: (e) => { e.stopPropagation(); toggle(row.id); }, onKeyDown: (e) => e.stopPropagation(), children: row.expanded ? "▾" : "▸" }), _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: row.title })] }, "t"),
+                            _jsxs("span", { className: row.hasChildren ? "sm-cell sm-cell--tree sm-cell--parent" : "sm-cell sm-cell--tree", style: { paddingLeft: depth * 20, ...dim }, children: [_jsx("button", { type: "button", className: "sm-chevron", "aria-label": row.expanded ? "Collapse" : "Expand", "aria-expanded": row.hasChildren ? row.expanded : undefined, style: { visibility: row.hasChildren ? "visible" : "hidden" }, onClick: (e) => { e.stopPropagation(); toggle(row.id); }, onKeyDown: (e) => e.stopPropagation(), children: row.expanded ? "▾" : "▸" }), _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: row.title }), _jsx(LockIcon, { names: editorsOf(others, { kind: "page", id: row.id, locale }) })] }, "t"),
                             row.present
                                 ? _jsx("span", { className: "sm-cell sm-cell--mono", children: row.path }, "p")
                                 : _jsxs("span", { className: "sm-cell sm-cell--muted", children: ["not in ", locale, " \u2014 click to add"] }, "p"),
@@ -238,5 +262,8 @@ export function PagesList({ ops, registry }) {
                         position: "absolute",
                         left: Math.max(12, Math.min(menu.x - 280, window.innerWidth - 312)),
                         top: Math.min(menu.y + 8, Math.max(12, window.innerHeight - 300)),
-                    }, children: [items.map((item) => (_jsx("button", { type: "button", className: "sm-picker__item", onClick: () => { setMenu(null); item.run(); }, children: item.label }, item.label))), items.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "Owned by code \u2014 nothing to change here." }))] }) }))] }));
+                    }, children: [items.map((item) => (_jsx("button", { type: "button", className: "sm-picker__item", onClick: () => { setMenu(null); item.run(); }, children: item.label }, item.label))), items.length === 0 && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "Owned by code \u2014 nothing to change here." }))] }) })), dialog?.kind === "new" && (_jsx(PageFormDialog, { title: dialog.node === "page" ? (dialog.parentId ? "New subpage" : "New page") : (dialog.parentId ? "New subpath" : "New path"), submitLabel: dialog.node === "page" ? "Create page" : "Create path", fields: { title: true, slug: true, template: dialog.node === "page" }, templates: creatable, parentPath: dialog.parentId ? (rows.find((r) => r.id === dialog.parentId)?.path ?? "/") : "/", onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
+                    closeDialog(); return message; }) })), dialog?.kind === "template" && (_jsx(PageFormDialog, { title: "Add page here", submitLabel: "Add page", fields: { template: true }, templates: creatable, onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
+                    closeDialog(); return message; }) })), dialog?.kind === "rename" && (_jsx(PageFormDialog, { title: "Rename page", submitLabel: "Rename", fields: { title: true, slug: !dialog.row.isHome }, initial: { title: dialog.row.record.locales[locale]?.title ?? "", slug: dialog.row.record.locales[locale]?.slug ?? "" }, parentPath: dialog.row.isHome ? undefined : parentPathOf(dialog.row.path), onClose: closeDialog, onSubmit: (values) => submitDialog(values).then((message) => { if (message === null)
+                    closeDialog(); return message; }) }))] }));
 }

package/dist/admin/shell/RouteLink.js

@@ -6,7 +6,7 @@ export function RouteLink({ href, onClick, ...rest }) {
             onClick?.(e);
             if (isPlainLeftClick(e, rest.target)) {
                 e.preventDefault();
-                navigate(href);
+                void navigate(href);
             }
         } }));
 }

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

@@ -0,0 +1,4 @@
+import type { SchemaStatus } from "../ops.ts";
+export declare function SchemaNotice({ status }: {
+    status: SchemaStatus;
+}): import("react").JSX.Element;

package/dist/admin/shell/SchemaNotice.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SchemaNotice({ status }) {
+    return (_jsx("div", { style: { height: "100vh", display: "grid", placeItems: "center", padding: 24, color: "var(--text)" }, children: _jsxs("div", { style: { maxWidth: 520, display: "grid", gap: 12 }, children: [_jsx("h1", { className: "sm-title", style: { fontSize: 22, margin: 0 }, children: "The database needs an update" }), _jsxs("p", { style: { margin: 0 }, children: ["The database schema is at version ", status.database ?? "none", ". This version of Smoodly needs version ", status.required, "."] }), _jsx("p", { style: { margin: 0 }, children: "From the site's folder:" }), _jsx("pre", { className: "sm-code", children: _jsx("code", { children: "npx smoodly migrate" }) }), _jsx("p", { style: { margin: 0 }, children: "then apply it:" }), _jsx("pre", { className: "sm-code", children: _jsx("code", { children: "supabase db push" }) }), _jsxs("p", { style: { margin: 0, color: "var(--text-muted)" }, children: ["That is for a hosted project; for the local stack run ", _jsx("code", { children: "supabase db reset" }), ". Reload this page afterwards."] })] }) }));
+}

package/dist/admin/shell/SettingsView.js

@@ -1,27 +1,28 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/smoodly/src/admin/shell/SettingsView.tsx
 // The Settings area (spec 2026-09-25 §5): a 200px secondary nav at the
-// left of the main column, then the page with its own top bar. The head
-// segment alone replaces itself with the default page, so Back skips the
-// empty URL. An unknown page is the shell's Not found pane. Admins only
-// (members management §2): an editor gets the error pane, and until the
-// role is known the area is loading.
+// left of the main column, its card starting where the page's card starts (no heading since 2026-09-26) —
+// then the page with its own top bar. The head segment alone replaces
+// itself with the default page, so Back skips the empty URL. An unknown
+// page is the shell's Not found pane. Admins only (members management
+// §2): an editor gets the error pane, and until the role is known the
+// area is loading. Members is the only page (the Roles table moved into
+// the invite modal's role descriptions; API Keys never had contents).
 import { useEffect } from "react";
 import { can } from "../../permissions.js";
-import { TopBar } from "../ui/primitives.js";
 import { useAdminHref } from "./base.js";
 import { ErrorPane } from "./ErrorPane.js";
 import { MembersPage } from "./MembersPage.js";
 import { RouteLink } from "./RouteLink.js";
 import { navigate } from "./router.js";
-import { DEFAULT_SETTINGS_PAGE, SETTINGS_PAGES, settingsPage, settingsTitle } from "./settings.js";
+import { DEFAULT_SETTINGS_PAGE, SETTINGS_PAGES, settingsPage } from "./settings.js";
 export function SettingsView({ ops, tail, role, userId }) {
     const adminHref = useAdminHref();
     const page = settingsPage(tail);
     useEffect(() => {
         if (tail === undefined)
-            navigate(adminHref(`/settings/${DEFAULT_SETTINGS_PAGE}`), { replace: true });
+            void navigate(adminHref(`/settings/${DEFAULT_SETTINGS_PAGE}`), { replace: true });
     }, [tail, adminHref]);
     if (role === null)
         return _jsx("div", { className: "sm-empty", children: "Loading\u2026" });
@@ -29,21 +30,5 @@ export function SettingsView({ ops, tail, role, userId }) {
         return _jsx(ErrorPane, { message: "Settings are for admins." });
     if (!page)
         return _jsx(ErrorPane, { message: "Not found." });
-    return (_jsxs("div", { className: "sm-settings", children: [_jsx("nav", { className: "sm-settings__nav", "aria-label": "Settings", children: SETTINGS_PAGES.map((p) => (_jsx(RouteLink, { className: "sm-settings__link", href: adminHref(`/settings/${p.id}`), "aria-current": p.id === page ? "page" : undefined, children: p.title }, p.id))) }), _jsx("section", { className: "sm-settings__page", children: page === "members"
-                    ? _jsx(MembersPage, { ops: ops, userId: userId })
-                    : page === "roles"
-                        ? _jsx(RolesPage, {})
-                        : _jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx("span", { className: "sm-title", children: settingsTitle(page) }) }), _jsx("div", { className: "sm-listwrap" })] }) })] }));
-}
-// The two roles, read-only (members management §1): what each may do.
-// A row per capability group, not per Capability — the table explains,
-// permissions.ts decides.
-const ROLE_ROWS = [
-    ["Edit, publish, unpublish and delete content; upload and delete media", true, true],
-    ["Open Settings and every page under it", true, false],
-    ["Invite, re-role and remove members", true, false],
-];
-function RolesPage() {
-    const grid = { gridTemplateColumns: "minmax(240px,1fr) 100px 100px" };
-    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx("span", { className: "sm-title", children: "Roles" }) }), _jsx("div", { className: "sm-listwrap", children: _jsxs("div", { className: "sm-table", children: [_jsxs("div", { className: "sm-table__head", style: grid, children: [_jsx("span", { children: "What a role may do" }), _jsx("span", { children: "Admin" }), _jsx("span", { children: "Editor" })] }), _jsx("div", { className: "sm-table__body", children: ROLE_ROWS.map(([what, admin, editor]) => (_jsxs("div", { className: "sm-row", style: grid, children: [_jsx("span", { className: "sm-cell", children: what }), _jsx("span", { className: "sm-cell", children: admin ? "yes" : "no" }), _jsx("span", { className: "sm-cell", children: editor ? "yes" : "no" })] }, what))) })] }) })] }));
+    return (_jsxs("div", { className: "sm-settings", children: [_jsx("nav", { className: "sm-settings__nav", "aria-label": "Settings", children: SETTINGS_PAGES.map((p) => (_jsx(RouteLink, { className: "sm-settings__link", href: adminHref(`/settings/${p.id}`), "aria-current": p.id === page ? "page" : undefined, children: p.title }, p.id))) }), _jsx("section", { className: "sm-settings__page", children: _jsx(MembersPage, { ops: ops, userId: userId }) })] }));
 }

package/dist/admin/shell/live-url.d.ts

@@ -1,9 +1,10 @@
-export declare const LIVE_URL_MESSAGE = "This changes the live URL. Old links stop working until a redirect exists (there are none yet). Continue?";
+import { type ConfirmOptions, type ConfirmSubject } from "../ui/confirm.ts";
+export declare const LIVE_URL_CONFIRM: Omit<ConfirmOptions, "subject">;
 /** `from` null = there was no URL part to change (a new row, a collection without a path). */
 export declare function liveUrlChanges(input: {
     status: "draft" | "published" | undefined;
     from: string | null;
     to: string | null;
 }): boolean;
-/** True when the change may go ahead: not a live change, or confirmed. */
-export declare const confirmLiveUrl: (input: Parameters<typeof liveUrlChanges>[0]) => boolean;
+/** Resolves true when the change may go ahead: not a live change, or confirmed. */
+export declare function confirmLiveUrl(input: Parameters<typeof liveUrlChanges>[0], subject?: ConfirmSubject): Promise<boolean>;

package/dist/admin/shell/live-url.js

@@ -1,10 +1,19 @@
 // The one confirm on anything that changes a live URL (spec 2026-09-25
 // members management §5): a published page's or entry's slug, or a
 // published page's parent. Whoever the role — the mistake is the same.
-export const LIVE_URL_MESSAGE = "This changes the live URL. Old links stop working until a redirect exists (there are none yet). Continue?";
+// Asked in the admin's own dialog (ui/confirm.ts); the subject chip names
+// the record and the URL part that is about to change.
+import { confirm } from "../ui/confirm.js";
+export const LIVE_URL_CONFIRM = {
+    title: "Change the live URL?",
+    body: "This is published. Old links to it stop working until a redirect exists, and Smoodly has none yet.",
+    confirmLabel: "Change URL",
+};
 /** `from` null = there was no URL part to change (a new row, a collection without a path). */
 export function liveUrlChanges(input) {
     return input.status === "published" && input.from !== null && input.to !== input.from;
 }
-/** True when the change may go ahead: not a live change, or confirmed. */
-export const confirmLiveUrl = (input) => !liveUrlChanges(input) || window.confirm(LIVE_URL_MESSAGE);
+/** Resolves true when the change may go ahead: not a live change, or confirmed. */
+export async function confirmLiveUrl(input, subject) {
+    return !liveUrlChanges(input) || confirm({ ...LIVE_URL_CONFIRM, subject });
+}