smoodly 0.0.25 → 0.0.26

package/dist/admin/shell/GlobalForm.js

@@ -31,6 +31,12 @@ 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);
@@ -48,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),
@@ -77,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)
@@ -97,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 });
@@ -131,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." };
@@ -142,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);
@@ -174,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." };
@@ -185,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." });
     };
@@ -210,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;
@@ -259,6 +298,6 @@ export function GlobalForm({ ops, registry, name }) {
                                 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
@@ -15,11 +15,15 @@ import { relativeTime } from "../ui/format.js";
 import { useAdminHref } from "./base.js";
 import { ErrorPane } from "./ErrorPane.js";
 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.locales));
+    const { others } = usePresenceState();
     const multilingual = registry.locales.supported.length > 1;
     const pickLocale = (next) => {
         setLocale(next);
@@ -43,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/PagesList.js

@@ -21,7 +21,11 @@ import { rememberLocale, rememberedLocale } from "./locale-memory.js";
 import { confirmLiveUrl } from "./live-url.js";
 import { confirm } from "../ui/confirm.js";
 import { PageFormDialog } from "./PageDialogs.js";
+import { usePresenceState } from "./presence-context.js";
+import { editorsOf } from "./presence.js";
+import { LockIcon } from "../ui/LockIcon.js";
 export function PagesList({ ops, registry }) {
+    const { others } = usePresenceState();
     const adminHref = useAdminHref();
     const [pages, setPages] = useState(null);
     const [error, setError] = useState(null);
@@ -243,7 +247,7 @@ export function PagesList({ ops, registry }) {
                         key: row.id,
                         onClick: () => onRow(row),
                         cells: [
-                            _jsxs("span", { className: row.hasChildren ? "sm-cell sm-cell--tree sm-cell--parent" : "sm-cell sm-cell--tree", style: { paddingLeft: depth * 20, ...dim }, children: [_jsx("button", { type: "button", className: "sm-chevron", "aria-label": row.expanded ? "Collapse" : "Expand", "aria-expanded": row.hasChildren ? row.expanded : undefined, style: { visibility: row.hasChildren ? "visible" : "hidden" }, onClick: (e) => { e.stopPropagation(); toggle(row.id); }, onKeyDown: (e) => e.stopPropagation(), children: row.expanded ? "▾" : "▸" }), _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: row.title })] }, "t"),
+                            _jsxs("span", { className: row.hasChildren ? "sm-cell sm-cell--tree sm-cell--parent" : "sm-cell sm-cell--tree", style: { paddingLeft: depth * 20, ...dim }, children: [_jsx("button", { type: "button", className: "sm-chevron", "aria-label": row.expanded ? "Collapse" : "Expand", "aria-expanded": row.hasChildren ? row.expanded : undefined, style: { visibility: row.hasChildren ? "visible" : "hidden" }, onClick: (e) => { e.stopPropagation(); toggle(row.id); }, onKeyDown: (e) => e.stopPropagation(), children: row.expanded ? "▾" : "▸" }), _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: row.title }), _jsx(LockIcon, { names: editorsOf(others, { kind: "page", id: row.id, locale }) })] }, "t"),
                             row.present
                                 ? _jsx("span", { className: "sm-cell sm-cell--mono", children: row.path }, "p")
                                 : _jsxs("span", { className: "sm-cell sm-cell--muted", children: ["not in ", locale, " \u2014 click to add"] }, "p"),

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

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

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

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

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

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

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

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

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

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

package/dist/admin/shell/presence.js

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

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

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

package/dist/admin/shell/stale.js

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

package/dist/admin/ui/LockIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const lockLabel: (names: string[]) => string;
+export declare function LockIcon({ names }: {
+    names: string[];
+}): import("react").JSX.Element | null;

package/dist/admin/ui/LockIcon.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The lock after a list row's title (spec 2026-09-26 concurrency §5): someone else
+// has this target open in this locale. A tooltip names them.
+import { Lock } from "lucide-react";
+export const lockLabel = (names) => names.length === 1 ? `${names[0]} is editing` : `${names.join(", ")} are editing`;
+export function LockIcon({ names }) {
+    if (names.length === 0)
+        return null;
+    const label = lockLabel(names);
+    return (_jsx("span", { className: "sm-lock", role: "img", "aria-label": label, title: label, children: _jsx(Lock, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }) }));
+}

package/dist/admin/ui/PresenceLine.d.ts

@@ -0,0 +1,6 @@
+export type PresenceNoun = "page" | "entry" | "item";
+export declare function presenceLineText(names: string[], noun: PresenceNoun): string;
+export declare function PresenceLine({ names, noun }: {
+    names: string[];
+    noun: PresenceNoun;
+}): import("react").JSX.Element | null;

package/dist/admin/ui/PresenceLine.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function presenceLineText(names, noun) {
+    const who = names.length === 1 ? names[0] : `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+    return `${who} ${names.length === 1 ? "is" : "are"} also editing this ${noun}.`;
+}
+export function PresenceLine({ names, noun }) {
+    if (names.length === 0)
+        return null;
+    return _jsx("p", { className: "sm-presence", role: "status", children: presenceLineText(names, noun) });
+}

package/dist/admin/ui/StaleBanner.d.ts

@@ -0,0 +1,5 @@
+import { type StaleInfo } from "../shell/stale.ts";
+export declare function StaleBanner({ info, onReload }: {
+    info: StaleInfo;
+    onReload: () => void;
+}): import("react").JSX.Element;

package/dist/admin/ui/StaleBanner.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The freeze notice under the top bar (spec 2026-09-26 concurrency §4): the fact,
+// what a reload costs, and the one button. The view puts everything below it inert.
+import { LOAD_THEIRS, STALE_DETAIL, staleText } from "../shell/stale.js";
+import { Banner, Button } from "./primitives.js";
+export function StaleBanner({ info, onReload }) {
+    return (_jsx("div", { className: "sm-stale", "data-testid": "stale-banner", children: _jsxs(Banner, { tone: "error", children: [_jsx("p", { style: { margin: 0 }, children: staleText(info) }), _jsx("p", { style: { margin: "4px 0 10px", color: "inherit", opacity: 0.85 }, children: STALE_DETAIL }), _jsx(Button, { onClick: onReload, children: LOAD_THEIRS })] }) }));
+}

package/dist/admin/ui/primitives.js

@@ -129,6 +129,7 @@ export function SaveIndicator({ state }) {
         saved: { label: "Saved", dot: "var(--status-saved-dot)", color: "var(--text-muted)" },
         saving: { label: "Saving", dot: "var(--warn)", color: "var(--text-muted)" },
         error: { label: "Save failed — retrying", dot: "var(--danger)", color: "var(--danger)" },
+        stale: { label: "Not saved — newer version exists", dot: "var(--danger)", color: "var(--danger)" },
     };
     const { label, dot, color } = map[state];
     return (_jsxs("span", { className: "sm-savestate", "data-testid": "save-status", style: { color }, title: label, children: [_jsx("span", { className: "sm-dot", style: { background: dot } }), label] }));

package/dist/admin/ui/theme.js

@@ -794,6 +794,9 @@ body:has(.sm-admin){margin:0}
 .sm-overline,.sm-sectionlabel--caps>.sm-label{
   font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-tag);text-transform:uppercase;color:var(--text-muted);
 }
+.sm-stale{padding:8px 20px 0}
+.sm-lock{display:inline-flex;align-items:center;margin-left:6px;color:var(--text-muted);vertical-align:middle}
+.sm-presence{margin:0;padding:6px 20px 0;font-size:13px;color:var(--text-muted)}
 .sm-banner{
   display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-md);
   font-size:var(--text-md);
@@ -841,6 +844,7 @@ body:has(.sm-admin){margin:0}
    handle and the canvas's 440px minimum — so a window that shrinks after a
    drag never leaves the canvas squeezed. */
 .sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr max(var(--gutter),8px) min(var(--inspector-w),calc(100% - max(var(--gutter),8px) - 440px))}
+.sm-editor[inert],.sm-form[inert]{opacity:.6}
 /* The drag-to-resize handle (spec 2026-09-10 §3): fills its column, draws a
    2px line down its centre on hover and while dragging — a shade off the
    ground, since the col-resize cursor already says it drags (2026-09-10);

package/dist/draft-token.d.ts

@@ -0,0 +1,31 @@
+export type DraftToken = {
+    versionId: string;
+    savedAt: string;
+};
+/** What a locale row carries for the token (both stores' row types satisfy it). */
+export type DraftPointerRow = {
+    draftVersionId: string | null;
+    draftSavedAt: string | null;
+};
+/** The row's token, or null when it has no draft pointer (a folder, a page created without a tree). */
+export declare function draftToken(row: DraftPointerRow): DraftToken | null;
+export declare function sameToken(a: DraftToken | null, b: DraftToken | null): boolean;
+/** An untrusted value is a token when it has the two strings and nothing is missing. */
+export declare function isDraftToken(v: unknown): v is DraftToken;
+export declare class StaleDraftError extends Error {
+    /** The row's token now — what a reload would get. */
+    readonly current: DraftToken | null;
+    /** The audit pair of the row: who wrote last, when. */
+    readonly by: string | null;
+    readonly at: number;
+    constructor(
+    /** The row's token now — what a reload would get. */
+    current: DraftToken | null, 
+    /** The audit pair of the row: who wrote last, when. */
+    by: string | null, at: number);
+}
+/** The read-side check every guarded write runs first. `undefined` = no check. */
+export declare function assertFresh(row: DraftPointerRow & {
+    updatedBy: string | null;
+    updatedAt: number;
+}, expected: DraftToken | null | undefined): void;

package/dist/draft-token.js

@@ -0,0 +1,41 @@
+// The draft token (spec 2026-09-26 concurrency §1): the locale row's
+// draft pointer with that version's saved time. Every state change moves
+// it — a save rewrites saved_at, a discard points at the published
+// version, a restore creates a new draft. Pure and framework-free; both
+// stores throw StaleDraftError, the ops map it, the admin freezes on it.
+/** The row's token, or null when it has no draft pointer (a folder, a page created without a tree). */
+export function draftToken(row) {
+    return row.draftVersionId === null ? null : { versionId: row.draftVersionId, savedAt: row.draftSavedAt ?? "" };
+}
+export function sameToken(a, b) {
+    if (a === null || b === null)
+        return a === b;
+    return a.versionId === b.versionId && a.savedAt === b.savedAt;
+}
+/** An untrusted value is a token when it has the two strings and nothing is missing. */
+export function isDraftToken(v) {
+    return typeof v === "object" && v !== null && !Array.isArray(v)
+        && typeof v.versionId === "string"
+        && typeof v.savedAt === "string";
+}
+export class StaleDraftError extends Error {
+    constructor(
+    /** The row's token now — what a reload would get. */
+    current, 
+    /** The audit pair of the row: who wrote last, when. */
+    by, at) {
+        super("smoodly: the draft changed since it was loaded — reload before saving.");
+        this.current = current;
+        this.by = by;
+        this.at = at;
+        this.name = "StaleDraftError";
+    }
+}
+/** The read-side check every guarded write runs first. `undefined` = no check. */
+export function assertFresh(row, expected) {
+    if (expected === undefined)
+        return;
+    const current = draftToken(row);
+    if (!sameToken(current, expected))
+        throw new StaleDraftError(current, row.updatedBy, row.updatedAt);
+}