smoodly 0.0.24 → 0.0.26

package/dist/admin/shell/EntriesList.js

@@ -14,34 +14,23 @@ import { relativeTime } from "../ui/format.js";
 import { useSortable } from "../ui/useSortable.js";
 import { useAdminHref } from "./base.js";
 import { navigate } from "./router.js";
+import { confirm } from "../ui/confirm.js";
 import { ErrorPane } from "./ErrorPane.js";
-const LOCALE_KEY = "smoodly.entries.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 — the default is fine
-    }
-    return registry.locales.default;
-}
+import { rememberLocale, rememberedLocale } from "./locale-memory.js";
+import { usePresenceState } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { LockIcon } from "../ui/LockIcon.js";
 export function EntriesList({ ops, registry, collection }) {
     const adminHref = useAdminHref();
     const meta = registry.collections.find((c) => c.name === collection);
     const [records, setRecords] = useState(null);
     const [error, setError] = useState(null);
-    const [locale, setLocale] = useState(() => rememberedLocale(registry));
+    const [locale, setLocale] = useState(() => rememberedLocale(registry.locales));
+    const { others } = usePresenceState();
     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.entries.list(collection)
         .then((r) => (r.ok ? setRecords(r.data) : setError(r.message)))
@@ -75,7 +64,7 @@ export function EntriesList({ ops, registry, collection }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const open = (id) => {
-        navigate(adminHref(`/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
+        void navigate(adminHref(`/${collection}/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`));
     };
     /** "+ New entry" creates an empty draft in the locale on screen and opens it (spec 2026-09-14 §4). */
     const createEntry = async () => {
@@ -97,7 +86,13 @@ export function EntriesList({ ops, registry, collection }) {
         if (!record)
             return;
         const from = entrySourceLocale(record, registry);
-        if (!window.confirm(`Add "${row.title}" to ${locale}? Its ${from} fields are copied as the first ${locale} draft.`))
+        const ok = await confirm({
+            title: `Add this entry to ${locale}?`,
+            body: `Its ${from} fields are copied as the first ${locale} draft. Nothing is published until you publish it.`,
+            confirmLabel: `Add to ${locale}`,
+            subject: { name: row.title },
+        });
+        if (!ok)
             return;
         let result;
         try {
@@ -122,7 +117,7 @@ export function EntriesList({ ops, registry, collection }) {
                 key: row.id,
                 onClick: () => (row.present ? open(row.id) : void addLocale(row)),
                 cells: [
-                    _jsx("span", { className: "sm-cell sm-cell--title", style: dim, children: row.title }, "t"),
+                    _jsxs("span", { className: "sm-cell sm-cell--title", style: dim, children: [row.title, _jsx(LockIcon, { names: editorsOf(others, { kind: "entry", id: row.id, locale }) })] }, "t"),
                     row.present
                         ? _jsx("span", { className: "sm-cell sm-cell--muted", children: relativeTime(row.updatedAt) }, "u")
                         : _jsxs("span", { className: "sm-cell sm-cell--muted", children: ["not in ", locale, " \u2014 click to add"] }, "u"),

package/dist/admin/shell/EntryForm.js

@@ -15,7 +15,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // publish control. A draft may be incomplete; publish validates it and
 // lists the fields in an amber banner. The safe-delete guard's message
 // renders verbatim — it is product surface.
+import { Eye } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { stillFailing, validateFields } from "../validate.js";
+import { elementSchemas } from "../../richtext-walk.js";
 import { FieldWidget } from "../forms/FieldWidget.js";
 import { revealField } from "../forms/reveal.js";
 import { useRefOptions } from "../forms/useRefOptions.js";
@@ -32,7 +35,14 @@ import { entrySourceLocale, entryTitle, localizedFieldKeys } from "./entries-lis
 import { useAdminHref } from "./base.js";
 import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
 import { navigate, useLeaveGuard } from "./router.js";
-import { LIVE_URL_MESSAGE, liveUrlChanges } from "./live-url.js";
+import { LIVE_URL_CONFIRM, liveUrlChanges } from "./live-url.js";
+import { confirm, DISCARD_CONFIRM } from "../ui/confirm.js";
+import { draftToken } from "../../draft-token.js";
+import { isStale, staleInfoOf } from "./stale.js";
+import { StaleBanner } from "../ui/StaleBanner.js";
+import { usePresence, usePresenceState, useSavedElsewhere, useTrackPresence } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { PresenceLine } from "../ui/PresenceLine.js";
 /** A stable empty map for the hooks that run before the "no such collection" return. */
 const NO_FIELDS = {};
 export function EntryForm({ ops, registry, collection, id }) {
@@ -57,6 +67,7 @@ export function EntryForm({ ops, registry, collection, id }) {
     const [published, setPublished] = useState(false);
     const [history, setHistory] = useState(null);
     const [snapshot, setSnapshot] = useState(null);
+    const [stale, setStale] = useState(null);
     const formRef = useRef(null);
     const fieldsRef = useRef(fields);
     fieldsRef.current = fields;
@@ -65,7 +76,14 @@ export function EntryForm({ ops, registry, collection, id }) {
     /** The slug the editor already confirmed as a live-URL change, so the next autosave does not ask again. */
     const confirmedSlug = useRef(null);
     // The page editor's controller: debounced, retrying, flushable (spec 2026-09-14 §3).
-    const { saveState, mark, flush } = useDraftAutosave({
+    /** The token of the row on screen — what every guarded op sends (spec 2026-09-26 concurrency §1). */
+    const token = () => { const row = recordRef.current?.locales[locale]; return row ? draftToken(row) : null; };
+    // Presence (spec 2026-09-26 concurrency §5): this tab on this row, the others on it, every ack announced.
+    const target = { kind: "entry", id, locale };
+    useTrackPresence(target);
+    const { others } = usePresenceState();
+    const presence = usePresence();
+    const { saveState, mark, flush, reset } = useDraftAutosave({
         read: () => fieldsRef.current,
         persist: async (value) => {
             // A published entry's slug is a live URL: one confirm at the save, Cancel restores it (members management §5).
@@ -73,16 +91,22 @@ export function EntryForm({ ops, registry, collection, id }) {
             const stored = row?.slug ?? null;
             const next = typeof value.slug === "string" ? value.slug : null;
             if (next !== confirmedSlug.current && liveUrlChanges({ status: row?.status, from: stored, to: next })) {
-                if (window.confirm(LIVE_URL_MESSAGE))
+                const current = recordRef.current;
+                const subject = current && meta ? { name: entryTitle(current, meta, registry, locale), path: slugPrefix && stored ? `${slugPrefix}${stored}` : null } : undefined;
+                if (await confirm({ ...LIVE_URL_CONFIRM, subject }))
                     confirmedSlug.current = next;
                 else {
                     value = { ...value, slug: stored };
                     setFields((f) => ({ ...(f ?? {}), slug: stored }));
                 }
             }
-            const r = await ops.entries.save(collection, id, locale, value);
-            if (r.ok)
+            const r = await ops.entries.save(collection, id, locale, value, token());
+            if (r.ok) {
                 setRecord(r.data);
+                presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
+            }
+            else if (isStale(r))
+                setStale(staleInfoOf(r));
             return r;
         },
         onSaved: () => setDirty(false),
@@ -107,6 +131,7 @@ export function EntryForm({ ops, registry, collection, id }) {
         setFields(null);
         setFieldErrors({});
         setDirty(false);
+        setStale(null);
         setTouched(false);
         ops.entries.get(collection, id, locale).then((r) => {
             if (cancelled)
@@ -127,8 +152,28 @@ export function EntryForm({ ops, registry, collection, id }) {
         return _jsx("p", { style: { padding: 32 }, children: "No such collection." });
     const row = record?.locales[locale];
     const status = row ? localeStatusOf(row) : null;
+    // A refused publish's field errors clear one by one as the fields are fixed: every change revalidates
+    // (the same rules the op applies) and keeps only what still fails; the notice's list shrinks with them.
+    const elementDescs = useMemo(() => elementSchemas(registry.elements), [registry]);
+    const hasFieldErrors = Object.keys(fieldErrors).length > 0;
+    useEffect(() => {
+        if (!hasFieldErrors || !fields || !meta)
+            return;
+        const fresh = validateFields(fields, meta.fields, elementDescs);
+        setFieldErrors((prev) => stillFailing(prev, fresh));
+        setNotice((n) => {
+            if (!n?.fields)
+                return n;
+            const left = n.fields.filter((f) => fresh.some((e) => e.field === f.field));
+            return left.length === 0 ? null : left.length === n.fields.length ? n : { ...n, fields: left };
+        });
+    }, [fields, hasFieldErrors, meta, elementDescs]);
     /** An op's failure onto the screen: amber with the fields for a validation result, red otherwise. */
     const fail = (r) => {
+        if (isStale(r)) {
+            setStale(staleInfoOf(r));
+            return;
+        }
         if (r.code === "validation" && r.fields && r.fields.length > 0) {
             setFieldErrors(Object.fromEntries(r.fields.map((f) => [f.field, f.message])));
             setNotice({ tone: "warn", text: r.message, fields: r.fields });
@@ -136,6 +181,17 @@ export function EntryForm({ ops, registry, collection, id }) {
         else
             setNotice({ tone: "error", text: r.message });
     };
+    /** Load their version (spec 2026-09-26 concurrency §4): drop the frozen state and re-get through the ops seam. */
+    const loadTheirs = () => { setStale(null); reset(); setReloadKey((k) => k + 1); };
+    // Someone else saved this row (§5): clean → their version silently; unsaved edits → the freeze at once.
+    useSavedElsewhere(target, (event) => {
+        if (stale)
+            return;
+        if (dirty || saveState !== "saved")
+            setStale({ by: event.email, at: Date.now() });
+        else
+            setReloadKey((k) => k + 1);
+    });
     /** Publish what is on screen: the pending edit is flushed first, and a failed flush cancels the publish. */
     const publish = async () => {
         setNotice(null);
@@ -147,7 +203,7 @@ export function EntryForm({ ops, registry, collection, id }) {
         }
         let r;
         try {
-            r = await ops.entries.setStatus(collection, id, locale, "published");
+            r = await ops.entries.setStatus(collection, id, locale, "published", token());
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -158,6 +214,7 @@ export function EntryForm({ ops, registry, collection, id }) {
             return;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setFieldErrors({});
         setPublished(true);
         setTimeout(() => setPublished(false), 1600);
@@ -180,7 +237,7 @@ export function EntryForm({ ops, registry, collection, id }) {
     };
     /** Discard (spec 2026-09-13 publish flow §4): confirm, flush so a late save cannot re-dirty the row, restore, reload. */
     const discard = async () => {
-        if (!window.confirm("Discard your changes and restore the published version?"))
+        if (!(await confirm({ ...DISCARD_CONFIRM, subject: entrySubject() })))
             return;
         setNotice(null);
         setBusy("discard");
@@ -191,7 +248,7 @@ export function EntryForm({ ops, registry, collection, id }) {
         }
         let r;
         try {
-            r = await ops.entries.discardDraft(collection, id, locale);
+            r = await ops.entries.discardDraft(collection, id, locale, token());
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -202,6 +259,7 @@ export function EntryForm({ ops, registry, collection, id }) {
             return;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1);
         setNotice({ tone: "ok", text: "Changes discarded." });
     };
@@ -229,12 +287,13 @@ export function EntryForm({ ops, registry, collection, id }) {
             fail(r);
     };
     const restore = async (versionId) => {
-        const r = await ops.entries.restore(collection, id, locale, versionId);
+        const r = await ops.entries.restore(collection, id, locale, versionId, token());
         if (!r.ok) {
             fail(r);
             return false;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1);
         setNotice({ tone: "ok", text: "Version restored." });
         return true;
@@ -290,7 +349,14 @@ export function EntryForm({ ops, registry, collection, id }) {
         const remaining = Object.keys(record.locales).filter((l) => l !== locale);
         if (remaining.length === 0)
             return;
-        if (!window.confirm(`Remove this entry from ${locale}? Its ${locale} fields and history are deleted.`))
+        const ok = await confirm({
+            title: `Remove this entry from ${locale}?`,
+            body: `Its ${locale} fields and history are deleted. Other languages are not affected.`,
+            confirmLabel: `Remove from ${locale}`,
+            destructive: true,
+            subject: entrySubject(),
+        });
+        if (!ok)
             return;
         let result;
         try {
@@ -307,11 +373,18 @@ export function EntryForm({ ops, registry, collection, id }) {
         goToLocale(remaining.includes(registry.locales.default) ? registry.locales.default : remaining[0]);
     };
     const destroy = async () => {
-        if (!window.confirm(multilingual ? "Delete this entry in every language?" : "Delete this entry?"))
+        const ok = await confirm({
+            title: "Delete this entry?",
+            body: `The entry${multilingual ? " in every language" : ""} and its history are removed. Anything referencing it loses the reference. This cannot be undone.`,
+            confirmLabel: "Delete entry",
+            destructive: true,
+            subject: entrySubject(),
+        });
+        if (!ok)
             return;
         const r = await ops.entries.delete(collection, id);
         if (r.ok)
-            navigate(adminHref(`/${collection}`), { force: true });
+            void navigate(adminHref(`/${collection}`), { force: true });
         else
             fail(r);
     };
@@ -319,6 +392,11 @@ export function EntryForm({ ops, registry, collection, id }) {
     // The mount's path in the ACTIVE locale prefixes the slug; no path, no prefix.
     const base = meta.path?.[locale];
     const slugPrefix = base ? `/${base}/` : undefined;
+    /** The confirm dialogs' context chip: the entry's title and, on a routed collection, its URL. */
+    const entrySubject = () => {
+        const slug = record?.locales[locale]?.slug;
+        return record ? { name: heading, path: slugPrefix && slug ? `${slugPrefix}${slug}` : null } : undefined;
+    };
     const present = record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale];
     const widget = ([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: fields?.[key], errors: fieldErrors, refOptions: refTargets[key] ? refOptions[refTargets[key]] : undefined, suggestions: tagSuggestions[key], prefix: d.type === "slug" ? slugPrefix : undefined, mark: multilingual && !localeKeys.includes(key) ? _jsx(UnlocalizedMark, {}) : undefined, onChange: (value) => {
             setFields((f) => ({ ...(f ?? {}), [key]: value }));
@@ -333,6 +411,6 @@ export function EntryForm({ ops, registry, collection, id }) {
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: present, parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => void doAddLocale(l) })),
                             },
                             { label: heading },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), urls[locale] && (_jsx(LinkButton, { href: urls[locale], target: "_blank", rel: "noreferrer", title: "Opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: "View live" })), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsx("fieldset", { disabled: true, className: "sm-history__form", children: Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: snapshot.fields[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: () => { } }, key))) })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), urls[locale] && (_jsx(LinkButton, { icon: true, href: urls[locale], target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsx("fieldset", { disabled: true, className: "sm-history__form", children: Object.entries(meta.fields).map(([key, d]) => (_jsx(FieldWidget, { fieldKey: key, descriptor: d, value: snapshot.fields[key], refOptions: refTargets[key] ? refOptions[refTargets[key]] : undefined, prefix: d.type === "slug" ? slugPrefix : undefined, onChange: () => { } }, key))) })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsx(PresenceLine, { names: editorsOf(others, target), noun: "entry" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
                                             revealField(formRef.current, path); } })] })), absent ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [_jsxs("p", { children: ["This entry doesn't exist in ", locale, " yet. Adding it copies the ", entrySourceLocale(record, registry), " fields as the first ", locale, " draft."] }), _jsxs("div", { style: { display: "flex", gap: 8 }, children: [_jsxs(Button, { onClick: () => void doAddLocale(locale), disabled: adding || !parentLocales.includes(locale), title: parentLocales.includes(locale) ? undefined : `add ${locale} to the parent first`, children: ["Add ", locale] }), _jsxs(Button, { variant: "secondary", onClick: () => { void switchLocale(entrySourceLocale(record, registry)); }, children: ["Back to ", entrySourceLocale(record, registry)] })] })] })) : fields !== null ? (Object.entries(meta.fields).map(widget)) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsxs("aside", { className: "sm-inspector", children: [record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Created", value: relativeTime(record.createdAt) }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), multilingual && _jsx(InfoRow, { label: "Languages", value: Object.keys(record.locales).join(", ") }), _jsx(InfoRow, { label: "ID", value: id, mono: true })] })), record && (_jsxs("div", { className: "sm-card", children: [multilingual && row && Object.keys(record.locales).length > 1 && (_jsxs(Button, { variant: "secondary", onClick: () => void doRemoveLocale(), children: ["Remove from ", locale] })), _jsx(Button, { variant: "danger", onClick: destroy, children: "Delete" })] }))] })] })] }));
 }

package/dist/admin/shell/GlobalForm.js

@@ -12,6 +12,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // validates the draft and lists the fields in an amber banner. "Used on
 // N pages" is the refs index's answer.
 import { useEffect, useMemo, useRef, useState } from "react";
+import { stillFailing, validateNode } from "../validate.js";
+import { elementSchemas } from "../../richtext-walk.js";
 import { CSS_KEY, SETTINGS_KEY, STYLES_KEY } from "../../global.js";
 import { tabsFor } from "../forms/tabs.js";
 import { revealField } from "../forms/reveal.js";
@@ -28,6 +30,13 @@ import { useAdminHref } from "./base.js";
 import { GlobalFields } from "./GlobalFields.js";
 import { localeFromUrl, writeLocaleToUrl } from "../editor/locale-url.js";
 import { useLeaveGuard } from "./router.js";
+import { confirm, DISCARD_CONFIRM } from "../ui/confirm.js";
+import { draftToken } from "../../draft-token.js";
+import { isStale, staleInfoOf } from "./stale.js";
+import { StaleBanner } from "../ui/StaleBanner.js";
+import { usePresence, usePresenceState, useSavedElsewhere, useTrackPresence } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { PresenceLine } from "../ui/PresenceLine.js";
 export function GlobalForm({ ops, registry, name }) {
     const adminHref = useAdminHref();
     const item = registry.globals.find((s) => s.name === name);
@@ -45,15 +54,29 @@ export function GlobalForm({ ops, registry, name }) {
     const [reloadKey, setReloadKey] = useState(0);
     const [history, setHistory] = useState(null);
     const [snapshot, setSnapshot] = useState(null);
+    const [stale, setStale] = useState(null);
     const formRef = useRef(null);
     const fieldsRef = useRef(fields);
     fieldsRef.current = fields;
-    const { saveState, mark, flush } = useDraftAutosave({
+    const recordRef = useRef(record);
+    recordRef.current = record;
+    /** The token of the row on screen — what every guarded op sends (spec 2026-09-26 concurrency §1). */
+    const token = () => { const row = recordRef.current?.locales[locale]; return row ? draftToken(row) : null; };
+    // Presence (spec 2026-09-26 concurrency §5): this tab on this item, the others on it, every ack announced.
+    const target = { kind: "global", id: name, locale };
+    useTrackPresence(target);
+    const { others } = usePresenceState();
+    const presence = usePresence();
+    const { saveState, mark, flush, reset } = useDraftAutosave({
         read: () => fieldsRef.current,
         persist: async (value) => {
-            const r = await ops.globals.save(name, locale, value);
-            if (r.ok)
+            const r = await ops.globals.save(name, locale, value, token());
+            if (r.ok) {
                 setRecord(r.data);
+                presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
+            }
+            else if (isStale(r))
+                setStale(staleInfoOf(r));
             return r;
         },
         onSaved: () => setDirty(false),
@@ -74,6 +97,7 @@ export function GlobalForm({ ops, registry, name }) {
         setFields(null);
         setFieldErrors({});
         setDirty(false);
+        setStale(null);
         setTouched(false);
         ops.globals.get(name, locale).then((r) => {
             if (cancelled)
@@ -94,6 +118,10 @@ export function GlobalForm({ ops, registry, name }) {
     const row = record?.locales[locale];
     const status = row ? localeStatusOf(row) : null;
     const fail = (r) => {
+        if (isStale(r)) {
+            setStale(staleInfoOf(r));
+            return;
+        }
         if (r.code === "validation" && r.fields && r.fields.length > 0) {
             setFieldErrors(Object.fromEntries(r.fields.map((f) => [f.field, f.message])));
             setNotice({ tone: "warn", text: r.message, fields: r.fields });
@@ -101,6 +129,23 @@ export function GlobalForm({ ops, registry, name }) {
         else
             setNotice({ tone: "error", text: r.message });
     };
+    // A refused publish's field errors clear as the fields are fixed: every change revalidates the way the
+    // op does (a visual item like a node: fields, `$settings` under `settings.`, `$css`) and keeps what still fails.
+    const elementDescs = useMemo(() => elementSchemas(registry.elements), [registry]);
+    const hasFieldErrors = Object.keys(fieldErrors).length > 0;
+    useEffect(() => {
+        if (!hasFieldErrors || !fields || !item)
+            return;
+        const { [SETTINGS_KEY]: settings, [CSS_KEY]: css, ...values } = fields;
+        const fresh = validateNode({ fields: values, settings: settings !== null && typeof settings === "object" ? settings : {}, css }, { fields: item.fields, settings: item.section !== undefined ? item.settings : undefined }, elementDescs);
+        setFieldErrors((prev) => stillFailing(prev, fresh));
+        setNotice((n) => {
+            if (!n?.fields)
+                return n;
+            const left = n.fields.filter((f) => fresh.some((e) => e.field === f.field));
+            return left.length === 0 ? null : left.length === n.fields.length ? n : { ...n, fields: left };
+        });
+    }, [fields, hasFieldErrors, item, elementDescs]);
     const publish = async () => {
         setNotice(null);
         setBusy("publish");
@@ -111,7 +156,7 @@ export function GlobalForm({ ops, registry, name }) {
         }
         let r;
         try {
-            r = await ops.globals.setStatus(name, locale, "published");
+            r = await ops.globals.setStatus(name, locale, "published", token());
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -122,6 +167,7 @@ export function GlobalForm({ ops, registry, name }) {
             return;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setFieldErrors({});
         setPublished(true);
         setTimeout(() => setPublished(false), 1600);
@@ -143,7 +189,7 @@ export function GlobalForm({ ops, registry, name }) {
             fail(r);
     };
     const discard = async () => {
-        if (!window.confirm("Discard your changes and restore the published version?"))
+        if (!(await confirm({ ...DISCARD_CONFIRM, subject: { name: item.title } })))
             return;
         setNotice(null);
         setBusy("discard");
@@ -154,7 +200,7 @@ export function GlobalForm({ ops, registry, name }) {
         }
         let r;
         try {
-            r = await ops.globals.discardDraft(name, locale);
+            r = await ops.globals.discardDraft(name, locale, token());
         }
         catch {
             r = { ok: false, code: "internal", message: "Couldn't reach the server." };
@@ -165,6 +211,7 @@ export function GlobalForm({ ops, registry, name }) {
             return;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1);
         setNotice({ tone: "ok", text: "Changes discarded." });
     };
@@ -190,13 +237,25 @@ export function GlobalForm({ ops, registry, name }) {
         else
             fail(r);
     };
+    /** Load their version (spec 2026-09-26 concurrency §4): drop the frozen state and re-get through the ops seam. */
+    const loadTheirs = () => { setStale(null); reset(); setReloadKey((k) => k + 1); };
+    // Someone else saved this item (§5): clean → their version silently; unsaved edits → the freeze at once.
+    useSavedElsewhere(target, (event) => {
+        if (stale)
+            return;
+        if (dirty || saveState !== "saved")
+            setStale({ by: event.email, at: Date.now() });
+        else
+            setReloadKey((k) => k + 1);
+    });
     const restore = async (versionId) => {
-        const r = await ops.globals.restore(name, locale, versionId);
+        const r = await ops.globals.restore(name, locale, versionId, token());
         if (!r.ok) {
             fail(r);
             return false;
         }
         setRecord(r.data);
+        presence?.announce(target, r.data.locales[locale]?.draftSavedAt ?? null);
         setReloadKey((k) => k + 1);
         setNotice({ tone: "ok", text: "Version restored." });
         return true;
@@ -235,10 +294,10 @@ export function GlobalForm({ ops, registry, name }) {
     };
     return (_jsxs(_Fragment, { children: [_jsx(TopBar, { left: _jsx(_Fragment, { children: _jsx(Breadcrumb, { backHref: adminHref("/globals"), items: [
                             {
-                                label: "Globals", href: adminHref("/globals"),
+                                label: "Site", href: adminHref("/globals"),
                                 trailing: multilingual && (_jsx(LocaleSwitcher, { registry: registry, present: registry.locales.supported, parentLocales: [], value: locale, adding: false, onSwitch: (l) => { void switchLocale(l); }, onAdd: () => undefined })),
                             },
                             { label: item.title },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsxs("div", { className: "sm-editor", children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState }), _jsx(PublishControl, { status: status, pending: dirty || saveState !== "saved", busy: busy, flash: published, disabled: !row, onPublish: () => { void publish(); }, onUnpublish: () => { void unpublish(); }, onDiscard: () => { void discard(); }, onHistory: () => { void openHistory(); } })] }) }), history && row && (_jsx(HistoryModal, { rows: history, draftId: row.draftVersionId, onSelect: (v) => { void loadSnapshot(v); }, onClose: () => setHistory(null), onRestore: restore, render: (versionId) => snapshot?.id === versionId ? (_jsxs("fieldset", { disabled: true, className: "sm-history__form", children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: snapshot.fields, refOptions: refOptions, multilingual: multilingual, onChange: () => { } })] }))] })) : _jsx("p", { className: "sm-hint", style: { padding: 16 }, children: "Loading\u2026" }) })), _jsx(PresenceLine, { names: editorsOf(others, target), noun: "item" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-form", ref: formRef, children: [notice && (_jsxs(Banner, { tone: notice.tone, onDismiss: () => setNotice(null), children: [_jsx("p", { style: { margin: 0 }, children: notice.text }), _jsx(FieldErrorList, { fields: notice.fields ?? [], onReveal: (path) => { if (formRef.current)
                                             revealField(formRef.current, path); } })] })), record && (_jsxs("p", { className: "sm-hint", children: [pages.size === 0 ? "Not placed on any page yet." : `Used on ${pages.size} page${pages.size === 1 ? "" : "s"}: `, [...pages].map((id, i) => (_jsxs("span", { children: [i > 0 && ", ", _jsx("a", { href: adminHref(`/pages/${encodeURIComponent(id)}?locale=${encodeURIComponent(locale)}`), children: id })] }, id)))] })), fields !== null ? (_jsxs(_Fragment, { children: [_jsx(GlobalFields, { item: item, groups: contentGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange }), settingGroups.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: "Settings" }), _jsx(GlobalFields, { item: item, groups: settingGroups, fields: fields, errors: fieldErrors, refOptions: refOptions, multilingual: multilingual, onChange: onChange })] }))] })) : !notice && _jsx("p", { style: { color: "var(--text-muted)" }, children: "Loading\u2026" })] }), _jsx(ResizeHandle, {}), _jsx("aside", { className: "sm-inspector", children: record && row && (_jsxs("div", { className: "sm-card", children: [_jsx(SectionLabel, { children: "Document info" }), _jsx(InfoRow, { label: "Kind", value: item.section !== undefined ? `Visual · ${item.section}` : "Fields" }), _jsx(InfoRow, { label: "Updated", value: updatedLine(row.updatedAt, row.updatedBy) }), _jsx(InfoRow, { label: "ID", value: record.id, mono: true })] })) })] })] }));
 }

package/dist/admin/shell/GlobalList.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The Globals list (global content, spec 2026-09-07 §6; renamed in the
 // UI 2026-09-09, the route is /globals): every registered item is
 // a row, edited on its own page. Nothing here is created or deleted by
@@ -14,30 +14,20 @@ import { LocalePicker } from "../ui/LocaleSwitcher.js";
 import { relativeTime } from "../ui/format.js";
 import { useAdminHref } from "./base.js";
 import { ErrorPane } from "./ErrorPane.js";
-const LOCALE_KEY = "smoodly.entries.locale"; // the same choice the collection lists remember
-function rememberedLocale(registry) {
-    try {
-        const stored = window.sessionStorage.getItem(LOCALE_KEY);
-        if (stored && registry.locales.supported.includes(stored))
-            return stored;
-    }
-    catch {
-        // storage unavailable — the default is fine
-    }
-    return registry.locales.default;
-}
+import { rememberLocale, rememberedLocale } from "./locale-memory.js";
+import { usePresenceState } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { LockIcon } from "../ui/LockIcon.js";
 export function GlobalList({ ops, registry }) {
     const adminHref = useAdminHref();
     const [items, setItems] = useState(null);
     const [error, setError] = useState(null);
-    const [locale, setLocale] = useState(() => rememberedLocale(registry));
+    const [locale, setLocale] = useState(() => rememberedLocale(registry.locales));
+    const { others } = usePresenceState();
     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.globals.list()
@@ -48,7 +38,7 @@ export function GlobalList({ ops, registry }) {
     if (error)
         return _jsx(ErrorPane, { message: error });
     const rows = items ? globalRows(items, registry, locale) : [];
-    return (_jsx(ListView, { title: "Globals", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
+    return (_jsx(ListView, { title: "Site", titleTrailing: multilingual && _jsx(LocalePicker, { locales: registry.locales.supported, value: locale, onChange: pickLocale }), columns: [
             { label: "Title", width: "minmax(160px,1fr)" },
             { label: "Kind", width: "90px" },
             { label: "Updated", width: "minmax(110px,160px)" },
@@ -57,7 +47,7 @@ export function GlobalList({ ops, registry }) {
             key: row.name,
             href: adminHref(`/globals/${encodeURIComponent(row.name)}?locale=${encodeURIComponent(locale)}`),
             cells: [
-                _jsx("span", { className: "sm-cell sm-cell--title", children: row.title }, "t"),
+                _jsxs("span", { className: "sm-cell sm-cell--title", children: [row.title, _jsx(LockIcon, { names: editorsOf(others, { kind: "global", id: row.name, locale }) })] }, "t"),
                 _jsx("span", { className: "sm-cell sm-cell--muted", children: row.flavour }, "k"),
                 _jsx("span", { className: "sm-cell sm-cell--muted", children: relativeTime(row.updatedAt) }, "u"),
                 _jsx(StatusBadge, { status: statusLabel(row.status) }, "s"),

package/dist/admin/shell/IconRail.js

@@ -26,9 +26,11 @@ import { RouteLink } from "./RouteLink.js";
 /** Lucide at the rail's size and stroke (the tile's CSS restates both). */
 const ICON = { size: 18, strokeWidth: 2, "aria-hidden": true };
 /** The app icon, inlined: a package can't ship a file into the host app's
- *  /public. Brand blue on white in both themes, so no --logo-filter. */
+ *  /public. design_handoff_smoodly_neutral/assets/smoodly-logo.svg — the
+ *  outer and inner shapes take --logo-outer / --logo-inner (white over
+ *  navy on the frame), so a look decides its colours. */
 function AppIcon() {
-    return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 89 86", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("path", { fill: "#0038B1", d: "M0 51.5552C0 24.3141 25.0505 0 52.5493 0H52.7761C74.4707 0 89 14.6336 89 34.445C89 61.6862 64.4034 86 36.0066 86C14.0946 86 0 70.9165 0 51.5552Z" }), _jsx("path", { fill: "#FFFFFF", d: "M23.25 46.1188C23.25 33.0027 34.8806 21.2959 47.6479 21.2959H47.7532C57.8257 21.2959 64.5714 28.3417 64.5714 37.8805C64.5714 50.9966 53.1516 62.7033 39.9674 62.7033C29.7939 62.7033 23.25 55.4409 23.25 46.1188Z" })] }));
+    return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("path", { style: { fill: "var(--logo-outer)" }, d: "M0 16.1859C0 7.6335 7.88106 0 16.5324 0H16.6037C23.429 0 28 4.59428 28 10.8141C28 19.3666 20.2618 27 11.3279 27C4.43425 27 0 22.2645 0 16.1859Z" }), _jsx("path", { style: { fill: "var(--logo-inner)" }, d: "M7 14.7932C7 10.6754 10.6591 7 14.6757 7H14.7089C17.8777 7 20 9.21206 20 12.2068C20 16.3247 16.4072 20 12.2594 20C9.05876 20 7 17.7199 7 14.7932Z" })] }));
 }
 export function IconRail({ registry, active, email, settings = true, onSignOut }) {
     const adminHref = useAdminHref();
@@ -44,14 +46,21 @@ export function IconRail({ registry, active, email, settings = true, onSignOut }
     const close = () => setOpen(null);
     const hoverLeave = () => setHovered(false);
     // A click open moves focus into the menu; a pointer down outside closes it.
+    // Outside means outside the menu and its trigger — the rest of the rail
+    // counts too (2026-09-26); the trigger is left to its own toggle.
     useEffect(() => {
         if (!open || !root.current)
             return;
         if (!hovered)
             root.current.querySelector(`#${CSS.escape(menuId(open))} [role=menuitem]`)?.focus();
         const onPointerDown = (e) => {
-            if (e.target instanceof Node && !root.current?.contains(e.target))
-                close();
+            if (!(e.target instanceof Node))
+                return;
+            const menu = root.current?.querySelector(`#${CSS.escape(menuId(open))}`);
+            const trigger = root.current?.querySelector(`[aria-controls="${menuId(open)}"]`);
+            if (menu?.contains(e.target) || trigger?.contains(e.target))
+                return;
+            close();
         };
         document.addEventListener("pointerdown", onPointerDown);
         return () => document.removeEventListener("pointerdown", onPointerDown);
@@ -79,5 +88,5 @@ export function IconRail({ registry, active, email, settings = true, onSignOut }
     const collectionsOpen = open === "collections" || (hovered && open === null);
     const name = email?.split("@")[0] ?? "Editor";
     const initials = name.slice(0, 2).toUpperCase();
-    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: adminHref(`/${c.name}`), "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), registry.globals.length > 0 && link("globals", "Globals", _jsx(Globe, { ...ICON }), adminHref("/globals")), settings && link("settings", "Settings", _jsx(Settings, { ...ICON }), adminHref("/settings"))] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
+    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: adminHref(`/${c.name}`), "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), registry.globals.length > 0 && link("globals", "Site", _jsx(Globe, { ...ICON }), adminHref("/globals")), settings && link("settings", "Settings", _jsx(Settings, { ...ICON }), adminHref("/settings"))] }), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
 }