smoodly 0.0.4 → 0.0.6

package/dist/admin/shell/AdminApp.js

@@ -4,75 +4,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The admin shell: registry-derived nav (never separately configured),
 // list views in the main area, editor/entry views mounted by segment.
 // Internal routing = the catch-all's segments; plain <a> navigation.
+//
+// Layout is the design system's three columns: a 200px nav, then the main
+// column whose views own their own 48px top bar (the editor adds the third,
+// its 300px inspector). The shell is viewport-height; every column scrolls
+// inside itself.
 import { useEffect, useState } from "react";
 import { makeClientOps } from "../client-ops.js";
-import { ListView, StatusChip } from "./ListView.js";
-import { openTemplates, pagesRows } from "./pages-list.js";
-import { pagePath } from "../page-path.js";
+import { ListView } from "./ListView.js";
+import { PagesList } from "./PagesList.js";
 import { EntryForm } from "./EntryForm.js";
 import { EditorView } from "../editor/EditorView.js";
 import { LoginView } from "./LoginView.js";
 import { useAdminSession } from "./session.js";
-const BASE = "/admin";
-function Nav({ registry, active, onSignOut }) {
-    const item = (href, label, isActive) => (_jsx("a", { href: href ?? undefined, "aria-disabled": href ? undefined : true, style: {
-            display: "block", padding: "9px 14px", borderRadius: 9, marginBottom: 2, textDecoration: "none",
-            color: href ? "#17141f" : "#a7a1b8", fontWeight: isActive ? 700 : 500, fontSize: 14,
-            background: isActive ? "#e7e2f6" : "transparent", cursor: href ? "pointer" : "default",
-        }, children: label }, label));
-    return (_jsxs("nav", { style: { width: 210, flexShrink: 0, padding: 18, borderRight: "1px solid #e7e4f0", background: "#faf9fd", minHeight: "100vh", boxSizing: "border-box" }, children: [_jsxs("div", { style: { fontWeight: 800, fontSize: 17, margin: "4px 0 22px" }, children: ["smoodly", _jsx("span", { style: { color: "#6d4aff" }, children: "." })] }), item(`${BASE}/pages`, "Pages", active === "pages"), registry.collections.map((c) => item(`${BASE}/${c.name}`, c.title, active === c.name)), _jsx("div", { style: { borderTop: "1px solid #e7e4f0", margin: "14px 0" } }), item(null, "Global Content", false), item(null, "Media", false), item(null, "Settings", false), _jsx("div", { style: { borderTop: "1px solid #e7e4f0", margin: "14px 0" } }), _jsx("button", { onClick: onSignOut, style: { display: "block", width: "100%", textAlign: "left", padding: "9px 14px", borderRadius: 9, border: 0, background: "transparent", color: "#6b7280", fontSize: 14, cursor: "pointer" }, children: "Sign out" })] }));
-}
-function PagesList({ ops, registry }) {
-    const [pages, setPages] = useState(null);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        ops.pages.list()
-            .then((r) => (r.ok ? setPages(r.data) : setError(r.message)))
-            .catch(() => setError("Couldn't reach the server."));
-    }, [ops]);
-    const rows = pages ? pagesRows(pages, registry.pages) : [];
-    const creatable = openTemplates(registry.pages);
-    const noOpen = creatable.length === 0;
-    /** Create a page, then open it in the editor — or surface the op's message. */
-    const createAndOpen = async (slug, template) => {
-        const result = await ops.pages.create({ slug, template });
-        if (result.ok)
-            window.location.href = `${BASE}/pages/${encodeURIComponent(slug)}`;
-        else
-            window.alert(result.message);
-    };
-    const newPage = async () => {
-        if (noOpen)
-            return;
-        const slug = window.prompt("Slug for the new page (e.g. about):");
-        if (!slug)
-            return;
-        const template = creatable.length === 1
-            ? creatable[0].name
-            : window.prompt(`Template? (${creatable.map((p) => p.name).join(", ")})`) ?? "";
-        await createAndOpen(slug, template);
-    };
-    if (error)
-        return _jsx("p", { style: { padding: 32, color: "#b91c1c" }, children: error });
-    return (_jsx(ListView, { title: "Pages", actions: _jsx("button", { onClick: newPage, disabled: noOpen, title: noOpen ? "Every page registration is fixed to its own route file — add an open one (a page schema with no `slug`) to create pages here." : undefined, style: { background: "#6d4aff", color: "#fff", border: 0, borderRadius: 9, padding: "9px 16px", fontWeight: 600, cursor: noOpen ? "not-allowed" : "pointer", opacity: noOpen ? 0.5 : 1 }, children: "New page" }), columns: ["Slug", "Template", "Status"], rows: rows.map((row) => row.kind === "missing"
-            ? {
-                key: `missing:${row.slug}`,
-                onClick: () => createAndOpen(row.slug, row.template),
-                cells: [
-                    _jsx("strong", { children: pagePath(row.slug, registry.homePageSlug) }, "s"),
-                    row.templateTitle,
-                    _jsx("em", { style: { color: "#6b7280" }, children: "not created" }, "c"),
-                ],
-            }
-            : {
-                key: row.record.id,
-                href: `${BASE}/pages/${encodeURIComponent(row.record.slug)}`,
-                cells: [
-                    _jsx("strong", { children: pagePath(row.record.slug, registry.homePageSlug) }, "s"),
-                    row.templateTitle,
-                    _jsx(StatusChip, { status: row.record.publishedVersionId ? (row.record.publishedVersionId === row.record.draftVersionId ? "published" : "draft edits") : "draft" }, "c"),
-                ],
-            }) }));
+import { Button, Logo, StatusBadge, ThemeToggle } from "../ui/primitives.js";
+import { relativeTime } from "../ui/format.js";
+import { BASE } from "./base.js";
+import { ErrorPane } from "./ErrorPane.js";
+/** Nav items the registry can't produce yet: shown, disabled, so the shape
+ *  of the product is visible — the same set the design system's SideNav has. */
+const PLANNED = ["Shared Content", "Media", "Settings"];
+function Nav({ registry, active, email, onSignOut }) {
+    const item = (href, label, key) => (_jsx("a", { className: "sm-nav-item", href: href ?? undefined, "aria-disabled": href ? undefined : true, "aria-current": href && key === active ? "page" : undefined, children: label }, key));
+    const name = email?.split("@")[0] ?? "Editor";
+    const initials = name.slice(0, 2).toUpperCase();
+    return (_jsxs("nav", { className: "sm-nav", children: [_jsx(Logo, {}), _jsxs("div", { className: "sm-nav__list", children: [item(`${BASE}/pages`, "Pages", "pages"), registry.collections.map((c) => item(`${BASE}/${c.name}`, c.title, c.name)), PLANNED.map((label) => item(null, label, label))] }), _jsxs("div", { className: "sm-nav__foot", children: [_jsx(ThemeToggle, {}), _jsxs("div", { className: "sm-nav__user", children: [_jsx("span", { className: "sm-avatar", children: initials }), _jsxs("span", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [_jsx("span", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: name }), _jsx("span", { style: { fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Editor" })] })] }), _jsx("button", { className: "sm-nav-item", onClick: onSignOut, style: { color: "var(--text-muted)" }, children: "Sign out" })] })] }));
 }
 function EntriesList({ ops, registry, collection }) {
     const meta = registry.collections.find((c) => c.name === collection);
@@ -84,17 +40,21 @@ function EntriesList({ ops, registry, collection }) {
             .catch(() => setError("Couldn't reach the server."));
     }, [ops, collection]);
     if (!meta)
-        return _jsx("p", { style: { padding: 32 }, children: "No such collection." });
+        return _jsx(ErrorPane, { message: "No such collection." });
     if (error)
-        return _jsx("p", { style: { padding: 32, color: "#b91c1c" }, children: error });
+        return _jsx(ErrorPane, { message: error });
     const title = (e) => String((meta.titleField && e.fields[meta.titleField]) ?? Object.values(e.fields).find((v) => typeof v === "string") ?? e.id);
-    return (_jsx(ListView, { title: meta.title, actions: _jsx("a", { href: `${BASE}/${collection}/new`, style: { background: "#6d4aff", color: "#fff", borderRadius: 9, padding: "9px 16px", fontWeight: 600, textDecoration: "none" }, children: "New entry" }), columns: ["Title", "Status", "Updated"], rows: (rows ?? []).map((e) => ({
+    return (_jsx(ListView, { title: meta.title, count: rows?.length, actions: _jsx(Button, { onClick: () => { window.location.href = `${BASE}/${collection}/new`; }, children: "+ New entry" }), columns: [
+            { label: "Title", width: "minmax(160px,1fr)" },
+            { label: "Updated", width: "minmax(110px,160px)" },
+            { label: "Status", width: "120px" },
+        ], empty: rows ? "Nothing here yet." : "Loading…", rows: (rows ?? []).map((e) => ({
             key: e.id,
             href: `${BASE}/${collection}/${encodeURIComponent(e.id)}`,
             cells: [
-                _jsx("strong", { children: title(e) }, "t"),
-                _jsx(StatusChip, { status: e.status }, "c"),
-                new Date(e.updatedAt).toLocaleString(),
+                _jsx("span", { className: "sm-cell sm-cell--title", children: title(e) }, "t"),
+                _jsx("span", { className: "sm-cell sm-cell--muted", children: relativeTime(e.updatedAt) }, "u"),
+                _jsx(StatusBadge, { status: e.status }, "c"),
             ],
         })) }));
 }
@@ -103,20 +63,22 @@ export function AdminApp({ registry, segments, op, auth }) {
     const [ops] = useState(() => makeClientOps(op, session.token));
     const [head = "pages", tail] = segments.length ? segments : ["pages"];
     const isCollection = registry.collections.some((c) => c.name === head);
-    if (session.state.status === "loading")
-        return _jsx("p", { style: { padding: 32, color: "#6b7280" }, children: "Loading\u2026" });
+    const email = session.state.status === "signed_in" ? session.state.session.user.email : undefined;
+    if (session.state.status === "loading") {
+        return (_jsx("div", { style: { height: "100vh", display: "grid", placeItems: "center", color: "var(--text-muted)" }, children: "Loading\u2026" }));
+    }
     if (session.state.status === "signed_out")
         return _jsx(LoginView, { client: session.client, providers: auth.providers });
     let main;
     if (head === "pages" && !tail)
         main = _jsx(PagesList, { ops: ops, registry: registry });
     else if (head === "pages" && tail)
-        main = _jsx(EditorView, { ops: ops, registry: registry, slug: decodeURIComponent(tail) });
+        main = _jsx(EditorView, { ops: ops, registry: registry, id: decodeURIComponent(tail) });
     else if (isCollection && !tail)
         main = _jsx(EntriesList, { ops: ops, registry: registry, collection: head });
     else if (isCollection && tail)
         main = _jsx(EntryForm, { ops: ops, registry: registry, collection: head, id: tail === "new" ? "new" : decodeURIComponent(tail) });
     else
-        main = _jsxs("p", { style: { padding: 32 }, children: ["Not found. ", _jsx("a", { href: `${BASE}/pages`, children: "Back to pages" }), "."] });
-    return (_jsxs("div", { style: { display: "flex", alignItems: "stretch" }, children: [_jsx(Nav, { registry: registry, active: head, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { style: { flex: 1, minWidth: 0 }, children: main })] }));
+        main = _jsx(ErrorPane, { message: "Not found." });
+    return (_jsxs("div", { className: "sm-shell", children: [_jsx(Nav, { registry: registry, active: head, email: email, onSignOut: () => session.client.auth.signOut() }), _jsx("main", { className: "sm-main", children: main })] }));
 }

package/dist/admin/shell/EntryForm.js

@@ -1,17 +1,24 @@
 // packages/smoodly/src/admin/shell/EntryForm.tsx
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The classic field view: same FieldWidget renderer as the editor sidebar,
 // no tabs (collections are fields-only by design). The safe-delete guard's
 // message renders verbatim — it is product surface, not an error detail.
+//
+// Layout follows the design system's article-edit screen: top bar with the
+// breadcrumb and the save action, a roomy field column, and a 300px sidebar
+// holding status and document info.
 import { useEffect, useMemo, useState } from "react";
 import { FieldWidget } from "../forms/FieldWidget.js";
-import { StatusChip } from "./ListView.js";
+import { relativeTime } from "../ui/format.js";
+import { Banner, Breadcrumb, Button, Divider, SectionLabel, Segmented, TopBar, } from "../ui/primitives.js";
+const STATUSES = ["Draft", "Published"];
 export function EntryForm({ ops, registry, collection, id }) {
     const meta = registry.collections.find((c) => c.name === collection);
     const isNew = id === "new";
     const [fields, setFields] = useState({});
     const [status, setStatus] = useState("draft");
+    const [stamps, setStamps] = useState(null);
     const [refOptions, setRefOptions] = useState({});
     const [banner, setBanner] = useState(null);
     const [fieldErrors, setFieldErrors] = useState({});
@@ -31,6 +38,7 @@ export function EntryForm({ ops, registry, collection, id }) {
                     setFields(r.data.fields);
                     setStatus(r.data.status);
                     setLoaded(true);
+                    setStamps({ createdAt: r.data.createdAt, updatedAt: r.data.updatedAt });
                 }
                 else
                     setBanner({ tone: "error", text: r.message });
@@ -70,11 +78,14 @@ export function EntryForm({ ops, registry, collection, id }) {
             }
         }
         else {
-            applyResult(await ops.entries.save(collection, id, fields), "Saved.");
+            const r = await ops.entries.save(collection, id, fields);
+            if (applyResult(r, "Saved.") && r.ok)
+                setStamps({ createdAt: r.data.createdAt, updatedAt: r.data.updatedAt });
         }
     };
-    const flipStatus = async () => {
-        const next = status === "published" ? "draft" : "published";
+    const setPublished = async (next) => {
+        if (next === status)
+            return;
         const r = await ops.entries.setStatus(collection, id, next);
         if (applyResult(r, next === "published" ? "Published." : "Unpublished."))
             setStatus(next);
@@ -88,9 +99,22 @@ export function EntryForm({ ops, registry, collection, id }) {
         else
             setBanner({ tone: "error", text: r.message });
     };
-    const btn = (bg, fg = "#fff", disabled = false) => ({
-        background: bg, color: fg, border: 0, borderRadius: 9, padding: "9px 16px", fontWeight: 600,
-        cursor: disabled ? "default" : "pointer", opacity: disabled ? 0.5 : 1,
-    });
-    return (_jsxs("section", { style: { maxWidth: 640, margin: "0 auto", padding: "32px 24px" }, children: [_jsxs("header", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }, children: [_jsx("h1", { style: { fontSize: 22, margin: 0 }, children: isNew ? `New ${meta.title}` : `Edit ${meta.title}` }), !isNew && _jsx(StatusChip, { status: status })] }), _jsx("p", { style: { margin: "0 0 20px" }, children: _jsxs("a", { href: `/admin/${collection}`, style: { fontSize: 13, opacity: 0.6 }, children: ["\u2190 ", meta.title] }) }), banner && (_jsx("p", { style: { padding: "10px 14px", borderRadius: 9, fontSize: 14, background: banner.tone === "ok" ? "#e5f6ec" : "#fdecec", color: banner.tone === "ok" ? "#116b38" : "#b91c1c" }, children: banner.text })), loaded && (_jsx("div", { style: { background: "#fff", borderRadius: 12, border: "1px solid #e7e4f0", padding: 20 }, children: Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], error: fieldErrors[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, onChange: (value) => setFields((f) => ({ ...f, [key]: value })) }, key))) })), _jsxs("footer", { style: { display: "flex", gap: 10, marginTop: 18 }, children: [_jsx("button", { onClick: save, disabled: !loaded, style: btn("#6d4aff", "#fff", !loaded), children: isNew ? "Create" : "Save" }), !isNew && _jsx("button", { onClick: flipStatus, disabled: !loaded, style: btn("#17141f", "#fff", !loaded), children: status === "published" ? "Unpublish" : "Publish" }), !isNew && _jsx("button", { onClick: destroy, disabled: !loaded, style: btn("#fdecec", "#b91c1c", !loaded), children: "Delete" })] })] }));
+    const titleValue = meta.titleField ? fields[meta.titleField] : undefined;
+    const heading = isNew ? "New entry" : (typeof titleValue === "string" && titleValue) || id;
+    // The mount's path in the default locale prefixes the slug (spec §7);
+    // a collection without a path has no URLs and shows no prefix.
+    const base = meta.path?.[registry.locales.default];
+    const slugPrefix = base ? `/${base}/` : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(Breadcrumb, { backHref: `/admin/${collection}`, items: [{ label: meta.title, href: `/admin/${collection}` }, { label: heading }] }), right: _jsx(Button, { onClick: save, disabled: !loaded, children: isNew ? "Create" : "Save" }) }), _jsxs("div", { style: { flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr var(--inspector-w)" }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 18, padding: "24px 32px", minWidth: 0, overflow: "auto" }, children: [banner && _jsx(Banner, { tone: banner.tone, onDismiss: () => setBanner(null), children: banner.text }), loaded
+                                ? Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields[key], error: fieldErrors[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] ?? [] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: (value) => setFields((f) => ({ ...f, [key]: value })) }, key)))
+                                : !banner && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsxs("aside", { style: {
+                            display: "flex", flexDirection: "column", gap: 16, padding: "16px 14px",
+                            minHeight: 0, overflow: "auto", borderLeft: "var(--border)",
+                        }, children: [_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(SectionLabel, { children: "Status" }), _jsx(Segmented, { options: STATUSES, stretch: true, disabled: isNew || !loaded, value: status === "published" ? "Published" : "Draft", onChange: (v) => { void setPublished(v === "Published" ? "published" : "draft"); } }), isNew && _jsx("span", { className: "sm-hint", children: "Create the entry first \u2014 it starts as a draft." })] }), !isNew && stamps && (_jsxs(_Fragment, { children: [_jsx(Divider, { bleed: 14 }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Created", value: relativeTime(stamps.createdAt) }), _jsx(InfoRow, { label: "Updated", value: relativeTime(stamps.updatedAt) }), _jsx(InfoRow, { label: "ID", value: id, mono: true })] })] })), !isNew && (_jsxs(_Fragment, { children: [_jsx(Divider, { bleed: 14 }), _jsx(Button, { variant: "danger", disabled: !loaded, onClick: destroy, children: "Delete" })] }))] })] })] }));
+}
+function InfoRow({ label, value, mono }) {
+    return (_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 10, fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: [_jsx("span", { children: label }), _jsx("span", { style: {
+                    color: "var(--text)", fontFamily: mono ? "var(--font-mono)" : undefined,
+                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+                }, children: value })] }));
 }

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

@@ -0,0 +1,4 @@
+/** A whole-column failure: nothing to show but the message and a way back. */
+export declare function ErrorPane({ message }: {
+    message: string;
+}): import("react").JSX.Element;

package/dist/admin/shell/ErrorPane.js

@@ -0,0 +1,9 @@
+// packages/smoodly/src/admin/shell/ErrorPane.tsx
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner } from "../ui/primitives.js";
+import { BASE } from "./base.js";
+/** A whole-column failure: nothing to show but the message and a way back. */
+export function ErrorPane({ message }) {
+    return (_jsx("div", { style: { display: "grid", placeItems: "center", flex: 1, padding: 40 }, children: _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, maxWidth: 420 }, children: [_jsx(Banner, { tone: "error", children: message }), _jsx("a", { href: `${BASE}/pages`, style: { fontSize: "var(--text-md)" }, children: "\u2190 Back to pages" })] }) }));
+}

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

@@ -1,15 +1,18 @@
 import type { ReactNode } from "react";
-export declare function ListView({ title, actions, columns, rows }: {
+export type ListColumn = {
+    label: string;
+    width: string;
+};
+export declare function ListView({ title, count, actions, columns, rows, empty }: {
     title: string;
+    count?: number;
     actions?: ReactNode;
-    columns: string[];
+    columns: ListColumn[];
     rows: {
         key: string;
         href?: string;
         onClick?: () => void;
         cells: ReactNode[];
     }[];
-}): import("react").JSX.Element;
-export declare function StatusChip({ status }: {
-    status: string;
+    empty?: ReactNode;
 }): import("react").JSX.Element;

package/dist/admin/shell/ListView.js

@@ -1,14 +1,15 @@
 // packages/smoodly/src/admin/shell/ListView.tsx
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ListView({ title, actions, columns, rows }) {
-    return (_jsxs("section", { style: { maxWidth: 780, margin: "0 auto", padding: "32px 24px" }, children: [_jsxs("header", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }, children: [_jsx("h1", { style: { fontSize: 22, margin: 0 }, children: title }), _jsx("div", { children: actions })] }), _jsx("div", { style: { background: "#fff", borderRadius: 12, border: "1px solid #e7e4f0", overflow: "hidden" }, children: _jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 14 }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { style: { textAlign: "left", padding: "10px 14px", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.5, borderBottom: "1px solid #e7e4f0" }, children: c }, c))) }) }), _jsxs("tbody", { children: [rows.map((r) => (_jsx("tr", { style: { borderBottom: "1px solid #f0eef6", cursor: r.href || r.onClick ? "pointer" : "default" }, onClick: r.onClick ?? (r.href ? () => (window.location.href = r.href) : undefined), children: r.cells.map((cell, i) => _jsx("td", { style: { padding: "12px 14px" }, children: cell }, i)) }, r.key))), rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: columns.length, style: { padding: 24, opacity: 0.5 }, children: "Nothing here yet." }) }))] })] }) })] }));
-}
-export function StatusChip({ status }) {
-    const palette = {
-        published: { bg: "#e5f6ec", fg: "#116b38" },
-        draft: { bg: "#f1eefb", fg: "#5b3df0" },
-    };
-    const c = palette[status] ?? { bg: "#eee", fg: "#444" };
-    return (_jsx("span", { style: { background: c.bg, color: c.fg, borderRadius: 99, padding: "3px 10px", fontSize: 12, fontWeight: 600 }, children: status }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TopBar } from "../ui/primitives.js";
+export function ListView({ title, count, actions, columns, rows, empty }) {
+    const grid = { gridTemplateColumns: columns.map((c) => c.width).join(" ") };
+    return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsxs(_Fragment, { children: [_jsx("span", { className: "sm-title", children: title }), count !== undefined && _jsx("span", { className: "sm-count", children: count })] }), right: actions }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: "auto" }, children: _jsxs("div", { className: "sm-table", children: [_jsx("div", { className: "sm-table__head", style: grid, children: columns.map((c) => _jsx("span", { children: c.label }, c.label)) }), _jsxs("div", { className: "sm-table__body", children: [rows.map((r) => {
+                                    const clickable = Boolean(r.href || r.onClick);
+                                    const go = r.onClick ?? (r.href ? () => { window.location.href = r.href; } : undefined);
+                                    return (_jsx("div", { style: grid, role: clickable ? "button" : undefined, tabIndex: clickable ? 0 : undefined, className: clickable ? "sm-row sm-row--clickable" : "sm-row", onClick: go, onKeyDown: (e) => { if (go && (e.key === "Enter" || e.key === " ")) {
+                                            e.preventDefault();
+                                            go();
+                                        } }, children: r.cells.map((cell, i) => _jsx("span", { className: "sm-cell", children: cell }, i)) }, r.key));
+                                }), rows.length === 0 && _jsx("div", { className: "sm-empty", children: empty ?? "Nothing here yet." })] })] }) })] }));
 }

package/dist/admin/shell/LoginView.js

@@ -5,6 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Supabase Auth verbatim. Being an editor is checked by the server on
 // the first op — a signed-in non-editor sees that message in the shell.
 import { useState } from "react";
+import { Banner, Button, Field, Logo } from "../ui/primitives.js";
 const LABELS = { google: "Continue with Google", github: "Continue with GitHub" };
 export function LoginView({ client, providers = [] }) {
     const [email, setEmail] = useState("");
@@ -42,6 +43,9 @@ export function LoginView({ client, providers = [] }) {
             setBusy(false);
         }
     };
-    const field = { display: "block", width: "100%", boxSizing: "border-box", padding: "10px 12px", border: "1px solid #d9d5e6", borderRadius: 9, marginBottom: 12, fontSize: 14 };
-    return (_jsx("div", { style: { minHeight: "100vh", display: "grid", placeItems: "center" }, children: _jsxs("form", { onSubmit: submit, style: { width: 340, background: "#fff", padding: 28, borderRadius: 14, border: "1px solid #e7e4f0" }, children: [_jsxs("div", { style: { fontWeight: 800, fontSize: 20, marginBottom: 18 }, children: ["smoodly", _jsx("span", { style: { color: "#6d4aff" }, children: "." })] }), _jsxs("label", { style: { fontSize: 13, fontWeight: 600 }, children: ["Email", _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", style: field })] }), _jsxs("label", { style: { fontSize: 13, fontWeight: 600 }, children: ["Password", _jsx("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), required: true, autoComplete: "current-password", style: field })] }), error && _jsx("p", { style: { color: "#b91c1c", fontSize: 13, margin: "0 0 12px" }, children: error }), _jsx("button", { type: "submit", disabled: busy, style: { width: "100%", background: "#6d4aff", color: "#fff", border: 0, borderRadius: 9, padding: "10px 16px", fontWeight: 600, cursor: "pointer" }, children: busy ? "Signing in…" : "Sign in" }), providers.map((p) => (_jsx("button", { type: "button", disabled: busy, onClick: () => oauth(p), style: { width: "100%", marginTop: 10, background: "#fff", border: "1px solid #d9d5e6", borderRadius: 9, padding: "10px 16px", fontWeight: 600, cursor: "pointer" }, children: LABELS[p] }, p)))] }) }));
+    return (_jsx("div", { style: { minHeight: "100vh", display: "grid", placeItems: "center", background: "var(--bg)" }, children: _jsxs("form", { onSubmit: submit, style: {
+                width: 320, display: "flex", flexDirection: "column", gap: 14,
+                background: "var(--surface)", padding: 24, borderRadius: "var(--radius-md)",
+                border: "var(--border)", boxShadow: "var(--shadow-page)",
+            }, children: [_jsx(Logo, { height: 20 }), _jsx(Field, { label: "Email", children: _jsx("input", { className: "sm-input", type: "email", value: email, required: true, autoComplete: "email", onChange: (e) => setEmail(e.target.value) }) }), _jsx(Field, { label: "Password", children: _jsx("input", { className: "sm-input", type: "password", value: password, required: true, autoComplete: "current-password", onChange: (e) => setPassword(e.target.value) }) }), error && _jsx(Banner, { tone: "error", children: error }), _jsx("button", { type: "submit", disabled: busy, className: "sm-btn sm-btn--primary sm-btn--lg", children: busy ? "Signing in…" : "Sign in" }), providers.map((p) => (_jsx(Button, { variant: "secondary", size: "lg", disabled: busy, onClick: () => oauth(p), children: LABELS[p] }, p)))] }) }));
 }

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

@@ -0,0 +1,6 @@
+import type { AdminOps } from "../ops.ts";
+import type { AdminRegistry } from "../serialize.ts";
+export declare function PagesList({ ops, registry }: {
+    ops: AdminOps;
+    registry: AdminRegistry;
+}): import("react").JSX.Element;

package/dist/admin/shell/PagesList.js

@@ -0,0 +1,148 @@
+// packages/smoodly/src/admin/shell/PagesList.tsx
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The Pages list: the tree of the design system's TreeTable, plus the
+// row menu (New subpage/subfolder, Add page here, Rename, Move, Delete)
+// as a floating popover positioned from the triggering click.
+import { useCallback, useEffect, useState } from "react";
+import { ListView } from "./ListView.js";
+import { openTemplates, pagesTreeRows } from "./pages-tree.js";
+import { Button, StatusBadge } from "../ui/primitives.js";
+import { BASE } from "./base.js";
+import { ErrorPane } from "./ErrorPane.js";
+export function PagesList({ ops, registry }) {
+    const [pages, setPages] = useState(null);
+    const [error, setError] = useState(null);
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    const [menu, setMenu] = useState(null);
+    const locale = registry.locales.default;
+    const load = useCallback(() => {
+        ops.pages.list()
+            .then((r) => (r.ok ? setPages(r.data) : setError(r.message)))
+            .catch(() => setError("Couldn't reach the server."));
+    }, [ops]);
+    useEffect(load, [load]);
+    const rows = pages ? pagesTreeRows(pages, registry, locale, collapsed) : [];
+    const creatable = openTemplates(registry.pages);
+    const noOpen = creatable.length === 0;
+    const toggle = (id) => setCollapsed((c) => { const next = new Set(c); if (next.has(id))
+        next.delete(id);
+    else
+        next.add(id); return next; });
+    const openEditor = (id) => { window.location.href = `${BASE}/pages/${encodeURIComponent(id)}`; };
+    /** Run an op; on success reload the list (and maybe navigate), else show the op's message. */
+    const run = async (work, then) => {
+        let result;
+        try {
+            result = await work();
+        }
+        catch {
+            result = { ok: false, code: "internal", message: "Couldn't reach the server." };
+        }
+        if (!result.ok) {
+            window.alert(result.message);
+            return;
+        }
+        then?.(result.data);
+        load();
+    };
+    const pickTemplate = () => {
+        if (noOpen)
+            return null;
+        if (creatable.length === 1)
+            return creatable[0].name;
+        return window.prompt(`Template? (${creatable.map((p) => p.name).join(", ")})`) || null;
+    };
+    const newNode = (parentId, kind) => {
+        if (kind === "page" && noOpen)
+            return;
+        const slug = window.prompt(`Slug for the new ${kind} (e.g. about):`);
+        if (!slug)
+            return;
+        const template = kind === "page" ? pickTemplate() : null;
+        if (kind === "page" && !template)
+            return;
+        void run(() => ops.pages.create({ parentId, slug, template }), (page) => { if (template)
+            openEditor(page.id); });
+    };
+    const addPageHere = (row) => {
+        const template = pickTemplate();
+        if (!template)
+            return;
+        void run(() => ops.pages.setTemplate(row.id, template), (page) => openEditor(page.id));
+    };
+    const rename = (row) => {
+        const title = window.prompt("Title:", row.record.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):", row.record.slug);
+        if (slug === null)
+            return;
+        void run(() => ops.pages.rename(row.id, { locale, title, slug }));
+    };
+    const move = (row, dir) => void run(() => ops.pages.move(row.id, { parentId: row.parentId, index: row.index + dir }));
+    const destroy = (row) => {
+        if (!window.confirm(`Delete "${row.title}"?`))
+            return;
+        void run(() => ops.pages.delete(row.id));
+    };
+    const menuItems = (row) => {
+        const items = [];
+        if (row.kind === "mount" && row.template !== null)
+            items.push({ label: "Edit index page", run: () => openEditor(row.id) });
+        if (row.canHaveChildren && !noOpen)
+            items.push({ label: "New subpage", run: () => newNode(row.id, "page") });
+        if (row.canHaveChildren)
+            items.push({ label: "New subfolder", run: () => newNode(row.id, "folder") });
+        if (row.kind === "folder" && !noOpen)
+            items.push({ label: "Add page here", run: () => addPageHere(row) });
+        if (!row.fixed)
+            items.push({ label: "Rename…", run: () => rename(row) });
+        if (!row.fixed && !row.isHome && row.index > 0)
+            items.push({ label: "Move up", run: () => move(row, -1) });
+        if (!row.fixed && !row.isHome && row.index < row.siblingCount - 1)
+            items.push({ label: "Move down", run: () => move(row, 1) });
+        if (!row.fixed && !row.isHome && !row.hasChildren)
+            items.push({ label: "Delete", run: () => destroy(row) });
+        return items;
+    };
+    const onRow = (row) => {
+        if (row.kind === "mount" && row.collection)
+            window.location.href = `${BASE}/${row.collection}`;
+        else if (row.template !== null)
+            openEditor(row.id);
+        else if (row.hasChildren)
+            toggle(row.id);
+    };
+    if (error)
+        return _jsx(ErrorPane, { message: error });
+    const items = menu ? menuItems(menu.row) : [];
+    return (_jsxs(_Fragment, { children: [_jsx(ListView, { title: "Pages", count: pages?.length, actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", onClick: () => newNode(null, "folder"), children: "+ New folder" }), _jsx(Button, { onClick: () => newNode(null, "page"), disabled: noOpen, title: noOpen ? "Every page registration is fixed — add an open one (a page schema with no `slug`) to create pages here." : undefined, children: "+ New page" })] }), columns: [
+                    { label: "Title", width: "minmax(160px,1fr)" },
+                    { label: "Path", width: "minmax(140px,260px)" },
+                    { label: "Template", width: "minmax(100px,160px)" },
+                    { label: "Status", width: "110px" },
+                    { label: "", width: "32px" },
+                ], empty: pages ? "No pages yet." : "Loading…", rows: rows.map((row) => ({
+                    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: row.depth * 20 }, 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"),
+                        _jsx("span", { className: "sm-cell sm-cell--mono", children: row.path }, "p"),
+                        _jsx("span", { className: "sm-cell sm-cell--muted", children: row.templateTitle }, "k"),
+                        row.status
+                            ? _jsx(StatusBadge, { status: row.status }, "s")
+                            : _jsx("span", { className: "sm-cell sm-cell--muted", children: "\u2014" }, "s"),
+                        _jsx("button", { type: "button", className: "sm-rowmenu", "aria-label": "Row menu", onClick: (e) => { e.stopPropagation(); setMenu({ row, x: e.clientX, y: e.clientY }); }, onKeyDown: (e) => e.stopPropagation(), children: "\u00B7\u00B7\u00B7" }, "m"),
+                    ],
+                })) }), menu && (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: () => setMenu(null), children: _jsxs("div", { className: "sm-picker", onClick: (e) => e.stopPropagation(), style: {
+                        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." }))] }) }))] }));
+}

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

@@ -0,0 +1 @@
+export declare const BASE = "/admin";

package/dist/admin/shell/base.js

@@ -0,0 +1,4 @@
+// packages/smoodly/src/admin/shell/base.ts
+// The admin's mount path — shared by every shell view and route link so
+// there is exactly one place that knows it.
+export const BASE = "/admin";

package/dist/admin/shell/pages-tree.d.ts

@@ -0,0 +1,39 @@
+import type { PageRecord } from "../../store.ts";
+import type { AdminCollection, AdminPageTemplate, AdminRegistry } from "../serialize.ts";
+/** Registrations editors may create pages against: fixed ones are
+ *  materialized by Smoodly, never offered. */
+export declare function openTemplates(templates: AdminPageTemplate[]): AdminPageTemplate[];
+/** The collection a ROOT record is the mount of, if any — known from the
+ *  registry, never from a column (spec 2026-09-05 §4). */
+export declare function mountOf(record: {
+    parentId: string | null;
+    slug: string;
+}, registry: AdminRegistry): AdminCollection | null;
+/** Fixed pages and mounts: never renamed, moved or deleted by editors. */
+export declare function isFixedNode(record: {
+    parentId: string | null;
+    slug: string;
+}, registry: AdminRegistry): boolean;
+export type PagesTreeRow = {
+    id: string;
+    parentId: string | null;
+    depth: number;
+    /** Position among the siblings, and how many there are — for Move up/down. */
+    index: number;
+    siblingCount: number;
+    hasChildren: boolean;
+    expanded: boolean;
+    title: string;
+    path: string;
+    kind: "page" | "folder" | "mount";
+    collection: string | null;
+    fixed: boolean;
+    /** The record serving "/" — never moved or deleted, and its default-locale slug is the config's. */
+    isHome: boolean;
+    template: string | null;
+    templateTitle: string;
+    status: "published" | "draft edits" | "draft" | null;
+    canHaveChildren: boolean;
+    record: PageRecord;
+};
+export declare function pagesTreeRows(records: PageRecord[], registry: AdminRegistry, locale: string, collapsed: ReadonlySet<string>): PagesTreeRow[];

package/dist/admin/shell/pages-tree.js

@@ -0,0 +1,65 @@
+// Pure view-model for the Pages list — the tree of the design system's
+// TreeTable (indent per depth, chevron on parents, the derived path as
+// the slug column). The shell is not DOM-tested; every decision that
+// matters lives here.
+import { titleFor } from "../../localize.js";
+import { buildPageTree } from "../../paths.js";
+/** Registrations editors may create pages against: fixed ones are
+ *  materialized by Smoodly, never offered. */
+export function openTemplates(templates) {
+    return templates.filter((t) => t.slug === undefined);
+}
+/** The collection a ROOT record is the mount of, if any — known from the
+ *  registry, never from a column (spec 2026-09-05 §4). */
+export function mountOf(record, registry) {
+    if (record.parentId !== null)
+        return null;
+    return registry.collections.find((c) => c.path?.[registry.locales.default] === record.slug) ?? null;
+}
+/** Fixed pages and mounts: never renamed, moved or deleted by editors. */
+export function isFixedNode(record, registry) {
+    return record.parentId === null && (registry.pages.some((t) => t.slug === record.slug) || mountOf(record, registry) !== null);
+}
+export function pagesTreeRows(records, registry, locale, collapsed) {
+    const opts = { locales: registry.locales, homePageSlug: registry.homePageSlug };
+    const templateTitle = (name) => registry.pages.find((t) => t.name === name)?.title ?? name;
+    const rows = [];
+    const walk = (nodes, depth, parentId) => {
+        nodes.forEach((node, index) => {
+            const r = node.record;
+            const mount = mountOf(r, registry);
+            const isHome = r.parentId === null && r.slug === registry.homePageSlug;
+            const expanded = !collapsed.has(r.id);
+            rows.push({
+                id: r.id,
+                parentId,
+                depth,
+                index,
+                siblingCount: nodes.length,
+                hasChildren: node.children.length > 0,
+                expanded,
+                title: titleFor(r, locale, registry.locales),
+                path: node.path,
+                kind: mount ? "mount" : r.template === null ? "folder" : "page",
+                collection: mount?.name ?? null,
+                fixed: isFixedNode(r, registry),
+                isHome,
+                template: r.template,
+                templateTitle: mount
+                    ? r.template === null ? "Collection" : `Collection · ${templateTitle(r.template)}`
+                    : r.template === null ? "Folder" : templateTitle(r.template),
+                status: r.template === null
+                    ? null
+                    : r.publishedVersionId
+                        ? r.publishedVersionId === r.draftVersionId ? "published" : "draft edits"
+                        : "draft",
+                canHaveChildren: !mount && !isHome && depth + 1 < registry.pageDepth,
+                record: r,
+            });
+            if (expanded)
+                walk(node.children, depth + 1, r.id);
+        });
+    };
+    walk(buildPageTree(records, locale, opts), 0, null);
+    return rows;
+}