@panphora/clayjs 1.17.0 → 1.18.0

package/src/page/ybind/walk.js

@@ -41,21 +41,24 @@ function walkFlow(pd, index) {
   const liveSources = new Set(liveBySource.keys());
   const movedSources = new Set();
   const retired = [];
+  const copyBoundary = (client, clock) => {
+    const sourceKey = `${client}.${clock}`;
+    const record = index.boundaryOf({ client, clock });
+    if (!record || record.kind !== "copy") return;
+    if (intents.copyActive.has(sourceKey)) { if (record.recoveryOf) movedSources.add(record.recoveryOf); }
+    else if (liveSources.has(sourceKey)) retired.push({ key: copyActiveKey(sourceKey), sourceKey, source: { client, clock }, operationId: null, blockId: record.blockId, end: null, sv: [], legacy: false, implicit: true });
+  };
+  const markers = index.markers?.() ?? null;
   const candidateSets = new Map();
-  for (const key of pd.origins.keys()) {
+  if (markers) {
+    for (const entry of markers.records) if (entry.live && entry.kind === "boundary") copyBoundary(entry.client, entry.clock);
+  } else for (const key of pd.origins.keys()) {
     let parts;
     try { parts = JSON.parse(key); } catch { continue; }
     if (!Array.isArray(parts) || parts.length !== 3 || (parts[0] !== "boundary" && parts[0] !== "alias")) continue;
     const [, client, clock] = parts;
     if (!Number.isSafeInteger(client) || client < 0 || !Number.isSafeInteger(clock) || clock < 0) continue;
-    if (parts[0] === "boundary") {
-      const sourceKey = `${client}.${clock}`;
-      const record = index.boundaryOf({ client, clock });
-      if (record && record.kind === "copy") {
-        if (intents.copyActive.has(sourceKey)) { if (record.recoveryOf) movedSources.add(record.recoveryOf); }
-        else if (liveSources.has(sourceKey)) retired.push({ key: copyActiveKey(sourceKey), sourceKey, source: { client, clock }, operationId: null, blockId: record.blockId, end: null, sv: [], legacy: false, implicit: true });
-      }
-    }
+    if (parts[0] === "boundary") copyBoundary(client, clock);
     const clocks = candidateSets.get(client) ?? candidateSets.set(client, new Set()).get(client);
     clocks.add(clock);
   }
@@ -113,7 +116,7 @@ function walkFlow(pd, index) {
     for (const key of restore.covers) set.add(key);
   }
   const recoveredMarkers = new Map();
-  for (let it = pd.flow._start; it; it = it.right) {
+  if (restoredSources.size) for (let it = pd.flow._start; it; it = it.right) {
     if (it.deleted) continue;
     const source = it.content instanceof Y.ContentEmbed ? markerSource(it, it.content.embed && it.content.embed.b) : null;
     if (source === null) continue;
@@ -131,9 +134,13 @@ function walkFlow(pd, index) {
   const segs = [];
   const orphans = [];
   const hidden = [];
-  const fences = [];
+  const fences = [], stops = [];
   let cur = null, prevId = "start", hiding = null, at = 0;
   const cattrs = {};
+  let styled = null;
+  // The format state a block starts and ends with, so one block can be walked again on its
+  // own (walk-delta.js) and the next block's marks proven unchanged.
+  const fmt = () => { for (const key in cattrs) return { ...cattrs }; return null; };
   const typeOf = (id) => { const m = pd.attrs.get(id); return (m && m.get("t")) || "paragraph"; };
   const hideUnit = (len) => {
     if (!len) return;
@@ -145,12 +152,16 @@ function walkFlow(pd, index) {
     const id = `recovered:${sourceKey}`;
     const t = root ? root.type : "paragraph";
     const opaque = !Object.hasOwn(schema.nodes, t);
-    cur = { kind: "b", id, baseId: id, brk: { client: it.id.client, clock: it.id.clock }, implicit: false, runs: [], len: 1, atom: !opaque && !schema.nodes[t]?.isTextblock, opaque, recovered: true, restored: !moved, sourceKey, t, fields: root ? root.attrs : null };
+    const f = fmt();
+    if (cur) cur.fmtOut = f;
+    cur = { kind: "b", id, baseId: id, brk: { client: it.id.client, clock: it.id.clock }, implicit: false, runs: [], len: 1, atom: !opaque && !schema.nodes[t]?.isTextblock, opaque, recovered: true, restored: !moved, sourceKey, t, fields: root ? root.attrs : null, fmtIn: f, fmtOut: null };
     segs.push(cur);
     prevId = id;
   };
   const open = (id, brk, implicit) => {
-    cur = { kind: "b", id, baseId: id, brk, implicit, runs: [], len: implicit ? 0 : 1, atom: false, items: !implicit && (markerCount.get(id) ?? 0) > 1 ? [] : null };
+    const f = fmt();
+    if (cur) cur.fmtOut = f;
+    cur = { kind: "b", id, baseId: id, brk, implicit, runs: [], len: implicit ? 0 : 1, atom: false, items: !implicit && (markerCount.get(id) ?? 0) > 1 ? [] : null, fmtIn: f, fmtOut: null };
     if (!implicit) {
       cur.t = typeOf(id);
       // A type this runtime has no schema for still owns the text and marks up to
@@ -175,15 +186,15 @@ function walkFlow(pd, index) {
     if (a.legacy && a.text) orphans.push({ key: a.key, id: a.blockId, text: a.text, h: hashText(a.text) });
     hidden.push({ key: a.key, sourceKey: a.sourceKey, blockId: a.blockId, end: a.end, sv: a.sv, at: a.at, live: a.live, items: a.items });
   };
-  const matchesEnd = (it, end) => {
-    if (covers(it, end)) return true;
+  const matchesEnd = (it, end, after = -1) => {
+    if (covers(it, end) && end.clock > after) return true;
     return markerIdsWithin(it).some((id) => {
-      if (!pd.origins.has(aliasKey(id.client, id.clock))) return false;
+      if (id.clock <= after || !pd.origins.has(aliasKey(id.client, id.clock))) return false;
       const resolved = index.resolve(id);
       return resolved.client === end.client && resolved.clock === end.clock;
     });
   };
-  const markerClocks = new Map([...candidateSets].map(([client, clocks]) => [client, [...clocks].sort((a, b) => a - b)]));
+  const markerClocks = markers ? markers.clocks : new Map([...candidateSets].map(([client, clocks]) => [client, [...clocks].sort((a, b) => a - b)]));
   const markerIdsWithin = (it) => {
     const clocks = markerClocks.get(it.id.client) ?? [];
     let lo = 0, hi = clocks.length;
@@ -192,6 +203,16 @@ function walkFlow(pd, index) {
     for (let i = lo; i < clocks.length && clocks[i] < it.id.clock + it.length; i++) ids.push({ client: it.id.client, clock: clocks[i] });
     return ids;
   };
+  const deletedEdgesIn = (it, after = -1) => (it.deleted ? markerIdsWithin(it).flatMap((id) => {
+    if (id.clock <= after) return [];
+    const sourceKey = idKey(index.resolve(id));
+    const record = index.boundaryOf(id);
+    if (!record || (record.kind !== "removed" && record.kind !== "copy") || liveSources.has(sourceKey)) return [];
+    return [{ blockId: record.blockId, sourceKey }];
+  }) : []);
+  // `after` limits an end to what lies past a removal's own source: Yjs merges adjacent deleted
+  // items, so a removal can start and end inside the same one, on some replicas and not others.
+  const endsIn = (it, a, { deletedEdges, boundary = false, edge, after = -1 }) => a.end ? matchesEnd(it, a.end, after) : a.implicit ? boundary || deletedEdges.some((e) => e.sourceKey !== a.sourceKey) : (boundary && edge !== a.blockId) || deletedEdges.some((e) => e.blockId !== a.blockId);
   const proj = [];
   const endsOf = (removal) => ({ blockId: removal.blockId, end: removal.end ? parseKey(removal.end) : null, implicit: removal.implicit === true, sourceKey: removal.sourceKey });
   for (let it = pd.flow._start; it; it = it.right) {
@@ -200,13 +221,8 @@ function walkFlow(pd, index) {
     if (hiding || proj.length) {
       const edge = !it.deleted && it.content instanceof Y.ContentEmbed ? it.content.embed.b : undefined;
       const boundary = edge !== undefined && boundarySource(it, edge) === null;
-      const deletedEdges = it.deleted ? markerIdsWithin(it).flatMap((id) => {
-        const sourceKey = idKey(index.resolve(id));
-        const record = index.boundaryOf(id);
-        if (!record || record.kind !== "removed" || liveSources.has(sourceKey)) return [];
-        return [{ blockId: record.blockId, sourceKey }];
-      }) : [];
-      const ends = (a) => a.end ? matchesEnd(it, a.end) : a.implicit ? boundary || deletedEdges.some((e) => e.sourceKey !== a.sourceKey) : (boundary && edge !== a.blockId) || deletedEdges.some((e) => e.blockId !== a.blockId);
+      const deletedEdges = deletedEdgesIn(it);
+      const ends = (a) => endsIn(it, a, { deletedEdges, boundary, edge });
       if (hiding) {
         const keep = [];
         for (const a of hiding.active) { if (ends(a)) settle(a); else keep.push(a); }
@@ -220,6 +236,7 @@ function walkFlow(pd, index) {
     }
     const removals = removalStarts.get(it);
     if (removals) {
+      if (it.deleted) stops.push({ client: it.id.client, clock: it.id.clock, len: it.length });
       if (!hiding && exposed(removals[0].sourceKey)) {
         if (!it.deleted) hideUnit(it.length);
         proj.push({ active: removals.map(endsOf), sourceKey: removals[0].sourceKey, root: null });
@@ -228,14 +245,17 @@ function walkFlow(pd, index) {
       if (!hiding && it.deleted) fences.push({ client: it.id.client, clock: it.id.clock });
       for (const removal of removals) {
         const a = { legacy: false, implicit: removal.implicit === true, key: removal.key, sourceKey: removal.sourceKey, blockId: removal.blockId, end: removal.end ? parseKey(removal.end) : null, sv: removal.sv, at: here, live: !it.deleted, items: [] };
+        const after = it.deleted && covers(it, removal.source) ? removal.source.clock : null;
+        if (after !== null && endsIn(it, a, { deletedEdges: deletedEdgesIn(it, after), after })) { settle(a); continue; }
         if (hiding) hiding.active.push(a);
         else hiding = { active: [a], len: 0, resume: cur };
       }
-      if (!it.deleted) hiding.len += it.length;
+      if (hiding && !it.deleted) hiding.len += it.length;
       continue;
     }
     const start = starts.get(it);
     if (start) {
+      if (it.deleted) stops.push({ client: it.id.client, clock: it.id.clock, len: it.length });
       if (!hiding && exposed(start.key)) {
         if (!it.deleted) hideUnit(it.length);
         proj.push({ active: [{ blockId: start.blockId, end: start.end }], sourceKey: start.key, root: null });
@@ -249,7 +269,7 @@ function walkFlow(pd, index) {
     }
     if (it.deleted) continue;
     const c = it.content;
-    if (c instanceof Y.ContentFormat) { if (c.value === null) delete cattrs[c.key]; else cattrs[c.key] = c.value; continue; }
+    if (c instanceof Y.ContentFormat) { if (c.value === null) delete cattrs[c.key]; else cattrs[c.key] = c.value; styled = null; continue; }
     if (hiding) {
       if (c instanceof Y.ContentString || c instanceof Y.ContentEmbed) {
         const piece = c instanceof Y.ContentString ? c.str : c.embed.b !== undefined ? "\u00b6" : "\n";
@@ -286,13 +306,18 @@ function walkFlow(pd, index) {
     }
     if (c instanceof Y.ContentString) {
       if (!cur || cur.atom) open(`~${prevId}`, null, true);
-      const marks = marksFromAttributes(cattrs, cur.t);
-      cur.runs.push({ text: c.str, marks, mk: marksKey(marks) });
+      const code = cur.t === "code_block";
+      if (!styled || styled.code !== code) {
+        const marks = marksFromAttributes(cattrs, cur.t);
+        styled = { code, marks, mk: marksKey(marks) };
+      }
+      cur.runs.push({ text: c.str, marks: styled.marks, mk: styled.mk });
       if (cur.items) cur.items.push({ at: here, id: idKey(it.id), client: it.id.client, clock: it.id.clock, length: it.length, kind: "text", text: c.str, blockId: null, raw: { ...cattrs } });
       cur.len += c.str.length;
     }
   }
   if (hiding) { for (const a of hiding.active) settle(a); flush(); }
+  if (cur) cur.fmtOut = fmt();
   const groups = new Map();
   for (const s of segs) {
     if (s.kind !== "b" || s.implicit) continue;
@@ -336,5 +361,5 @@ function walkFlow(pd, index) {
     }
     tokens += s.len;
   }
-  return { visible, holes, orphans, tokens, copies, hidden, removals: lostCopies.length ? [...removals, ...lostCopies] : removals, fences };
+  return { visible, holes, orphans, tokens, copies, hidden, removals: lostCopies.length ? [...removals, ...lostCopies] : removals, fences, stops };
 }

package/src/page/ybind/writer.js

@@ -146,7 +146,7 @@ const fenceAfter = (pd, yIdx, fences) => {
 
 // Yjs places an insertion after every deleted item to its right. A hidden range that starts at a
 // deleted item would then swallow text typed just before it, so the fence counts as live for the call.
-const beforeFence = (pd, yIdx, fences, fn) => {
+export const beforeFence = (pd, yIdx, fences, fn) => {
   const fence = fenceAfter(pd, yIdx, fences);
   if (!fence) return fn();
   fence.deleted = false;

package/src/plugins/ai-edit.js

@@ -44,13 +44,14 @@
 import { loadedEngine, mergeEngine } from "../sync/merge-engine.js";
 import Mutation from "../lib/mutation.js";
 import { startsAtImport } from "../core/is-edit-mode.js";
+import { deepActiveElement } from "../dom/active-element.js";
 import { holdAllSaves, releaseAllSaves } from "../core/save.js";
 import { STRIP_FROM_SAVE, SNAPSHOT_REMOVE_SELECTOR } from "../lib/region-policy.js";
 import { enableContentEditable } from "../core/admin-contenteditable.js";
 import onDomReady from "../lib/dom-ready.js";
 import wire from "./wire.js";
 import { set } from "../lib/hostile-css.js";
-import { bevelBox, bevelButton, bevelSurface, bevelText, bevelInput, bevelIconButton, pageScheme, setShown, RUNTIME_ONLY } from "../ui/bevel-controls.js";
+import { bevelBox, bevelButton, bevelSurface, bevelText, bevelInput, bevelIconButton, pageScheme, paintLook, setShown, RUNTIME_ONLY } from "../ui/bevel-controls.js";
 import { TOKENS, GLYPHS, FONT_SANS, FONT_MONO, SHADOW } from "../ui/bevel.js";
 
 const HELPER = "ai-edit";
@@ -237,7 +238,7 @@ function sessionMorph(s, content, { rewind = false } = {}) {
     }
     HyperMorph.morph(document.body, content, {
       morphStyle: 'outerHTML',
-      restoreFocus: true,
+      restoreFocus: document.activeElement?.localName !== 'clay-editor-ui',
       scripts,
       callbacks: {
         beforeNodeRemoved: node => !(node.nodeType === 1 && node.matches(STRIP_FROM_SAVE))
@@ -711,6 +712,7 @@ function syncBubble() {
   if (!doc) return;
   const wanted = !barMode && helperState === 'ready' && !!doc.querySelector('[data-edit-id]');
   setShown(docBubble, wanted, 'inline-grid');
+  if (wanted) paintLook(docBubble);
 }
 
 // The selected words stay marked while the person types, through the CSS Custom
@@ -757,6 +759,7 @@ function placeBubble() {
     right: beside ? `${Math.round((document.documentElement.clientWidth || window.innerWidth) - rect.left + 8)}px` : '16px',
     bottom: beside ? `${Math.round((document.documentElement.clientHeight || window.innerHeight) - rect.bottom)}px` : '16px',
   });
+  paintLook(docBubble);
 }
 
 // ---------------------------------------------------------------- hover chip
@@ -770,9 +773,9 @@ function showChipFor(unit) {
   chip.pin({
     left: Math.min(rect.right + 8, window.innerWidth - 34) + 'px',
     top: Math.max(8, rect.top) + 'px',
-    'color-scheme': pageScheme(),
   });
   setShown(chip, true, 'inline-grid');
+  paintLook(chip);
 }
 
 function hideChip() {
@@ -808,9 +811,9 @@ function showChipForSelection() {
   chip.pin({
     left: Math.min(end.right + 6, window.innerWidth - 34) + 'px',
     top: Math.max(8, end.top + end.height / 2 - 13) + 'px',
-    'color-scheme': pageScheme(),
   });
   setShown(chip, true, 'inline-grid');
+  paintLook(chip);
 }
 
 // Compose-only messages: the host's switch being off and a request too large to send
@@ -850,10 +853,10 @@ function showBar(mode) {
     setShown(control, controls.includes(control), 'inline-flex');
   }
   hideChip();
-  set(bar, 'color-scheme', pageScheme());
   setShown(bar, true, 'flex');
   syncBubble();
   positionChrome();
+  paintLook(bar);
   // The bar opens on the control that belongs to its state, and a state change moves
   // focus only when the button holding it has just gone away.
   const first = controls[0];
@@ -950,8 +953,6 @@ function openPanel(el, quote) {
   anchorEl = el;
   anchorRange = range ? range.cloneRange() : null;
   hideChip();
-  set(panel, 'color-scheme', pageScheme());
-  set(ring, 'color-scheme', pageScheme());
   setShown(panel, true);
   pendingSelection = quote;
   const shown = quote ? (quote.text.trim().length > 400 ? quote.text.trim().slice(0, 400) + '\u2026' : quote.text.trim()) : '';
@@ -962,6 +963,8 @@ function openPanel(el, quote) {
   applyHelperState();
   positionChrome();
   fitTextarea();
+  paintLook(panel);
+  paintLook(ring);
   textarea.focus();
   refreshHelperState();
 }
@@ -1001,6 +1004,7 @@ function closePanelForSend() {
   textarea.value = '';
   fitTextarea();
   positionChrome();
+  paintLook(ring);
 }
 
 // The target is gone from the page: whatever was live for it ends, and no observer,
@@ -1031,7 +1035,7 @@ function isShortcut(event) {
 
 // A field the page owns keeps its own Ctrl+J, and so does the panel's own box.
 function pageOwnsFocus() {
-  const el = document.activeElement;
+  const el = deepActiveElement();
   if (!el || el === document.body) return false;
   if (panel && panel.contains(el)) return !panel.hidden;
   return el.matches('input,textarea,select');
@@ -1045,7 +1049,7 @@ const PAGE_FIELD = 'input,textarea,select,[contenteditable=""],[contenteditable=
 function escapeIsMine(event) {
   if (event.defaultPrevented) return false;
   if (document.querySelector(MODAL_SELECTOR)) return false;
-  const el = document.activeElement;
+  const el = deepActiveElement();
   if (!el || el === document.body) return true;
   if (panel.contains(el) || bar.contains(el)) return true;
   if (el.isContentEditable === true) return false;

package/src/plugins/indicator-chip.js

@@ -0,0 +1,91 @@
+// The save chip's drawing: loaded at the person's first input or the first save state,
+// so a page nobody edits never pays for the surface it is drawn with.
+import { set, style } from "../lib/hostile-css.js";
+import { bevelSurface, pageScheme, paintLook } from "../ui/bevel-controls.js";
+import { TOKENS, FONT_SANS } from "../ui/bevel.js";
+import { saveFeedback } from "../core/save-feedback.js";
+
+// No 'conflict' here on purpose. core/conflict-notice.js owns that state now,
+// and it ships in every document rather than only the ones that turned this chip on.
+// Both listen to clay:save-conflict, so keeping a label here put a chip in the corner
+// saying the same thing as the bar at the same moment. Dropping it from this side
+// leaves core unaware that this plugin exists, which is the direction that
+// dependency has to point.
+const LABELS = {
+  saving: "Saving…",
+  saved: "Saved",
+  error: "Couldn't save",
+  offline: "Offline, not saved",
+  retrying: "Saving…",
+  blocked: "Can't save here",
+  pending: "Saving…",
+  acknowledged: "Saving…",
+  checkpointed: "Saved",
+  unavailable: "Can't store changes: download a copy",
+};
+
+// States that stay on screen instead of fading: a save still in flight, one that keeps
+// trying, one the host will not take without help, and where the journal says the work is.
+const STICKY = new Set(["saving", "retrying", "blocked", "pending", "acknowledged", "unavailable"]);
+
+const ALARMING = new Set(["error", "offline", "blocked", "unavailable"]);
+
+const REST = [`background:${TOKENS.surface}`, `color:${TOKENS.ink}`, `border-color:${TOKENS["line-2"]}`];
+const ALARM = [
+  `background:${TOKENS["ox-soft"]}`,
+  `color:${TOKENS.ox}`,
+  `border-color:color-mix(in srgb, ${TOKENS.ox} 28%, ${TOKENS["ox-soft"]})`,
+];
+
+let el = null;
+let hideTimer = null;
+
+function ensure() {
+  // Looked up on every call, never trusted once detached: a live-sync morph or a
+  // caller can empty the body, and a detached chip would swallow every later state.
+  if (el && el.isConnected) return el;
+  const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  el = bevelSurface("div", [
+    "position:fixed", "right:16px", "bottom:16px", "z-index:2147483000",
+    "padding:4px 12px", `font:500 13px/1.6 ${FONT_SANS}`,
+    "opacity:0", `transition:${reduced ? "none" : "opacity .25s"}`, "pointer-events:none",
+    `color-scheme:${pageScheme()}`,
+  ]);
+  el.setAttribute("data-clay-indicator", "");
+  el.setAttribute("role", "status");
+  document.body.appendChild(el);
+  return el;
+}
+
+export function show(state) {
+  if (!LABELS[state]) return;
+  // A failed or offline save is the persistent toast's to report when clay-ui is loaded,
+  // and so is saved when the page turned on clay.saveToast. Blocked is the exception:
+  // the page cannot save at all, so the chip stays even beside the generic toast.
+  const ownedByToast = state !== "blocked" &&
+    (ALARMING.has(state) || (state === "saved" && saveFeedback.savedToast));
+  if (saveFeedback.toasts && ownedByToast) {
+    clearTimeout(hideTimer);
+    if (el) {
+      set(el, "opacity", "0");
+      el.textContent = "";
+      delete el.dataset.state;
+    }
+    return;
+  }
+  const node = ensure();
+  node.textContent = LABELS[state];
+  node.dataset.state = state;
+  style(node, ALARMING.has(state) ? ALARM : REST);
+  paintLook(node, { background: ALARMING.has(state) ? null : TOKENS.surface });
+  set(node, "opacity", "1");
+  clearTimeout(hideTimer);
+  if (!STICKY.has(state)) hideTimer = setTimeout(() => { set(node, "opacity", "0"); }, 2200);
+}
+
+export function remove() {
+  clearTimeout(hideTimer);
+  hideTimer = null;
+  el?.remove();
+  el = null;
+}

package/src/plugins/indicator.js

@@ -1,83 +1,15 @@
 import { startsAtImport } from "../core/is-edit-mode.js";
 import onDomReady from "../lib/dom-ready.js";
-import { set, style } from "../lib/hostile-css.js";
-import { bevelSurface, pageScheme } from "../ui/bevel-controls.js";
-import { TOKENS, FONT_SANS } from "../ui/bevel.js";
 import { saveFeedback } from "../core/save-feedback.js";
 
-// No 'conflict' here on purpose. core/conflict-notice.js owns that state now,
-// and it ships in every document rather than only the ones that turned this chip on.
-// Both listen to clay:save-conflict, so keeping a label here put a chip in the corner
-// saying the same thing as the bar at the same moment. Dropping it from this side
-// leaves core unaware that this plugin exists, which is the direction that
-// dependency has to point.
-const LABELS = {
-  saving: "Saving…",
-  saved: "Saved",
-  error: "Couldn't save",
-  offline: "Offline, not saved",
-  retrying: "Saving…",
-  blocked: "Can't save here",
-};
-
-// States that stay on screen instead of fading: a save still in flight, one that
-// keeps trying, and one the host will not take without a person's help.
-const STICKY = new Set(["saving", "retrying", "blocked"]);
-
-const ALARMING = new Set(["error", "offline", "blocked"]);
+const SAVE_EVENTS = ["saving", "saved", "error", "offline", "retrying", "blocked"];
 
-const REST = [`background:${TOKENS.surface}`, `color:${TOKENS.ink}`, `border-color:${TOKENS["line-2"]}`];
-const ALARM = [
-  `background:${TOKENS["ox-soft"]}`,
-  `color:${TOKENS.ox}`,
-  `border-color:color-mix(in srgb, ${TOKENS.ox} 28%, ${TOKENS["ox-soft"]})`,
-];
-
-let el = null;
-let hideTimer = null;
-
-function ensure() {
-  // Looked up on every call, never trusted once detached: a live-sync morph or a
-  // caller can empty the body, and a detached chip would swallow every later state.
-  if (el && el.isConnected) return el;
-  const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-  el = bevelSurface("div", [
-    "position:fixed", "right:16px", "bottom:16px", "z-index:2147483000",
-    "padding:4px 12px", `font:500 13px/1.6 ${FONT_SANS}`,
-    "opacity:0", `transition:${reduced ? "none" : "opacity .25s"}`, "pointer-events:none",
-    `color-scheme:${pageScheme()}`,
-  ]);
-  el.setAttribute("data-clay-indicator", "");
-  el.setAttribute("role", "status");
-  document.body.appendChild(el);
-  return el;
-}
-
-function show(state) {
-  if (!LABELS[state]) return;
-  // A failed or offline save is the persistent toast's to report when clay-ui is loaded,
-  // and so is saved when the page turned on clay.saveToast. Blocked is the exception:
-  // the page cannot save at all, so the chip stays even beside the generic toast.
-  const ownedByToast = state !== "blocked" &&
-    (ALARMING.has(state) || (state === "saved" && saveFeedback.savedToast));
-  if (saveFeedback.toasts && ownedByToast) {
-    clearTimeout(hideTimer);
-    if (el) {
-      set(el, "opacity", "0");
-      el.textContent = "";
-      delete el.dataset.state;
-    }
-    return;
-  }
-  const node = ensure();
-  node.textContent = LABELS[state];
-  node.dataset.state = state;
-  set(node, "color-scheme", pageScheme());
-  style(node, ALARMING.has(state) ? ALARM : REST);
-  set(node, "opacity", "1");
-  clearTimeout(hideTimer);
-  if (!STICKY.has(state)) hideTimer = setTimeout(() => { set(node, "opacity", "0"); }, 2200);
-}
+// The drawing arrives on demand; states that come before it are shown in order once it has.
+let chip = null;
+const loadChip = () => (chip ??= import("./indicator-chip.js"));
+const show = (state) => {
+  loadChip().then((m) => { if (listeners) m.show(state); }, () => {});
+};
 
 let listeners = null;
 
@@ -88,7 +20,11 @@ function arm() {
   if (listeners) return;
   listeners = new AbortController();
   const { signal } = listeners;
-  for (const state of Object.keys(LABELS)) {
+  // Typing is the first sign a save is coming: fetch the drawing then, not at boot.
+  for (const type of ["beforeinput", "keydown", "pointerdown"]) {
+    document.addEventListener(type, loadChip, { signal, once: true, capture: true });
+  }
+  for (const state of SAVE_EVENTS) {
     document.addEventListener("clay:save-" + state, () => show(state), { signal });
   }
   document.addEventListener("clay:page-save-state", (event) => show(event.detail?.state), { signal });
@@ -97,10 +33,7 @@ function arm() {
 function disarm() {
   listeners?.abort();
   listeners = null;
-  clearTimeout(hideTimer);
-  hideTimer = null;
-  el?.remove();
-  el = null;
+  chip?.then((m) => m.remove(), () => {});
 }
 
 function init() {