smoodly 0.0.25 → 0.0.27

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, pending: dirty }), _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, token: string): PresenceChannel;

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

@@ -0,0 +1,32 @@
+"use client";
+// The real channel behind `createPresence` (spec 2026-09-26 concurrency §5–§6;
+// gated 2026-09-26 security pass §1): one supabase-js client on the CONTENT
+// project whose public key (the anon key in self-host, the read key in the
+// cloud) is only the gateway apikey — the socket authenticates with the
+// editor's SESSION token, which the policies read auth.uid() from. A
+// private channel named after the space, presence keyed by the email.
+//
+// The token rides the client's `accessToken` callback, not a bare
+// `realtime.setAuth(token)`: realtime-js treats the callback as the source
+// of truth and re-asks it after every join and reconnect — with the
+// default callback that answer is the public key, which the server then
+// refuses ("no permissions to read"). The join itself waits for the first
+// setAuth, so it never goes out with the apikey alone.
+import { createClient } from "@supabase/supabase-js";
+export function connectRealtime(config, email, token) {
+    let current = token;
+    const client = createClient(config.url, config.key, { accessToken: async () => current });
+    const ready = client.realtime.setAuth(token).catch(() => { });
+    const channel = client.channel(`space:${config.spaceId}`, { config: { private: true, presence: { key: email } } });
+    return {
+        subscribe: (onStatus) => { void ready.then(() => { channel.subscribe((status) => onStatus(status)); }); },
+        setAuth: (fresh) => { current = fresh; return client.realtime.setAuth(fresh); },
+        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,69 @@
+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;
+    /** A session token for the socket (spec 2026-09-26 security pass §1): the channel policies admit by auth.uid(). */
+    setAuth(token: string): Promise<unknown>;
+    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;
+    /** The session token was refreshed: re-authenticate the socket so the channel outlives the old token. No-op unless joined. */
+    setAuth(token: string): 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;
+/** What the shell needs from the auth client to follow refreshes — supabase-js's `auth` satisfies it. */
+export type RefreshSource = {
+    onAuthStateChange(cb: (event: string, session: {
+        access_token: string;
+    } | null) => void): {
+        data: {
+            subscription: {
+                unsubscribe(): void;
+            };
+        };
+    };
+};
+/** Re-send every refreshed session token to the socket (spec 2026-09-26 security pass §1). Returns the stop function. */
+export declare function followTokenRefresh(auth: RefreshSource, presence: Pick<Presence, "setAuth">): () => void;

package/dist/admin/shell/presence.js

@@ -0,0 +1,103 @@
+// 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(() => { });
+        },
+        setAuth(token) {
+            if (!channel)
+                return;
+            void channel.setAuth(token).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(() => { });
+        },
+    };
+}
+/** Re-send every refreshed session token to the socket (spec 2026-09-26 security pass §1). Returns the stop function. */
+export function followTokenRefresh(auth, presence) {
+    const { data } = auth.onAuthStateChange((event, session) => {
+        if (event === "TOKEN_REFRESHED" && session)
+            presence.setAuth(session.access_token);
+    });
+    return () => data.subscription.unsubscribe();
+}

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.d.ts

@@ -120,8 +120,11 @@ export declare function StatusBadge({ status }: {
     status: string;
 }): import("react").JSX.Element;
 /** The autosave indicator: a dot and one uppercase word. */
-export declare function SaveIndicator({ state }: {
+/** `pending`: an edit is waiting on the autosave debounce — shown as Saving, so "Saved" always means the
+ *  store holds what is on screen (the browser suite's `expectSaved` relies on exactly that). */
+export declare function SaveIndicator({ state, pending }: {
     state: SaveState;
+    pending?: boolean;
 }): import("react").JSX.Element;
 /** `caps`: the overline style — small, uppercase, tracked (2026-09-26; the mono face before). */
 export declare function SectionLabel({ children, action, caps, style }: {

package/dist/admin/ui/primitives.js

@@ -124,13 +124,16 @@ export function StatusBadge({ status }) {
         }, children: status }));
 }
 /** The autosave indicator: a dot and one uppercase word. */
-export function SaveIndicator({ state }) {
+/** `pending`: an edit is waiting on the autosave debounce — shown as Saving, so "Saved" always means the
+ *  store holds what is on screen (the browser suite's `expectSaved` relies on exactly that). */
+export function SaveIndicator({ state, pending = false }) {
     const map = {
         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];
+    const { label, dot, color } = map[pending && state === "saved" ? "saving" : 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] }));
 }
 /** `caps`: the overline style — small, uppercase, tracked (2026-09-26; the mono face before). */

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);