@panphora/clayjs 1.24.1 → 1.25.1

package/src/sync/data-guard-notice.js

@@ -1,12 +1,24 @@
 import { saveToken } from "../core/host-attrs.js";
 import { storage } from "../lib/doc-storage.js";
+import { isSaveInProgress } from "../core/save-core.js";
 
-const TITLE = "Saved data was overwritten";
+const TITLE = "Some saved data was removed";
+const TITLES = {
+  recent: "A change from outside this page removed something you typed",
+  "all-typed": "A change from outside this page removed everything you typed",
+  emptied: "A change from outside this page emptied this page's data",
+  unreadable: "A change from outside this page left its data unreadable",
+};
+const TYPED_SHOWN = 3;
+const HOUR_MS = 3600000;
 const DONE_KEY = "data-guard-done";
 const READ_TIMEOUT_MS = 6000;
 const AFTER_SAVE_MS = 1500;
 const MIN_READ_GAP_MS = 5000;
 const VISIBLE_GAP_MS = 30000;
+const EXTERNAL_WINDOW_MS = 10000;
+const SETTLE_CAP_MS = 6000;
+const SAVE_UNSETTLED_EVENTS = ["clay:save-error", "clay:save-offline", "clay:save-conflict"];
 const UNREACHED = "Could not reach the server. Try again.";
 const REFUSED = "That did not go through. Try again.";
 const SAVE_FIRST = "Save your changes first, then try again.";
@@ -20,7 +32,15 @@ const isPending = (event) => Boolean(event) && typeof event.id === "string" && e
 const allowed = (current, event, choice, flag) => flag === true && !current.refused.has(`${event.id}:${choice}`);
 const canRestore = (current, event) => allowed(current, event, "restore", event.restorable);
 const canRevert = (current, event) => allowed(current, event, "revert", event.canRevert);
+const canPutBack = (current, event) => allowed(current, event, "put-back", event.canPutBack);
+const typed = (event) => (Array.isArray(event.typed) ? event.typed : []);
+const reasoned = (event) => Boolean(event.reason);
+const titleFor = (event) => TITLES[event.reason] ?? TITLE;
+const typedLoss = (event) => event.reason === "recent" || event.reason === "all-typed";
+const toneFor = (event) => (typedLoss(event) ? "info" : "warning");
 const credentials = () => (saveToken() ? "omit" : "same-origin");
+const settling = (current) =>
+  isSaveInProgress() || (current.lastExternal > 0 && Date.now() - current.lastExternal < EXTERNAL_WINDOW_MS);
 const headers = (extra = {}) => ({ "Document-URL": location.href, ...extra });
 
 function removeServerBar() {
@@ -34,7 +54,7 @@ function say(message, type) {
   }, () => {});
 }
 
-function describe(current, event) {
+function sourceOf(event) {
   const summary = event.lossSummary || {};
   const source = summary.provenance === "external" ? "A change from outside this page" : "A save from this page";
   const loss = summary.removedItems > 0
@@ -43,12 +63,54 @@ function describe(current, event) {
   const row = Array.isArray(event.preview) ? event.preview[0] : null;
   const parts = [`${source} ${loss}.`];
   if (row) parts.push(`${row.key}: ${row.yours} before, ${row.now} now.`);
-  if (canRestore(current, event)) {
-    if (event.droppedAdditions > 0) parts.push(`Restoring removes ${plural(event.droppedAdditions, "item")} added or changed since.`);
-  } else if (canRevert(current, event)) {
-    parts.push("This data no longer fits the page, but the whole change can be undone.");
+  return parts;
+}
+
+function labelFor(path) {
+  const parts = String(path ?? "").split(".").filter((part) => part && !/^\[[^\]]*\]$/.test(part));
+  const last = (parts[parts.length - 1] ?? "").replace(/\[[^\]]*\]/g, "").trim();
+  return last.replace(/[_-]+/g, " ") || "value";
+}
+
+function typedLine(event) {
+  const rows = typed(event);
+  if (!rows.length) return "";
+  const shown = rows.slice(0, TYPED_SHOWN).map((row) => `${labelFor(row.path)}: "${row.yours}"`);
+  const more = rows.length - shown.length;
+  return `${shown.join("; ")}${more > 0 ? ` and ${more} more.` : "."}`;
+}
+
+function typedWhen(event) {
+  if (event.reason === "all-typed") return "";
+  const row = typed(event)[0];
+  const at = typeof row?.at === "number" ? row.at : Date.parse(row?.at);
+  if (!Number.isFinite(at)) return "";
+  const ago = Date.now() - at;
+  if (ago < 0 || ago >= HOUR_MS) return "";
+  const minutes = Math.max(1, Math.floor(ago / 60000));
+  return `You typed ${typed(event).length === 1 ? "it" : "them"} ${plural(minutes, "minute")} ago.`;
+}
+
+function detailFor(current, event) {
+  if (!reasoned(event)) {
+    const parts = sourceOf(event);
+    if (canRestore(current, event)) {
+      if (event.droppedAdditions > 0) parts.push(`Restoring removes ${plural(event.droppedAdditions, "item")} added or changed since.`);
+    } else if (canRevert(current, event)) {
+      parts.push("This data no longer fits the page, but the whole change can be undone.");
+    } else {
+      parts.push("It cannot be restored from here.");
+    }
+    if (canRevert(current, event)) parts.push("Undo the change also removes edits made since.");
+    return parts.join(" ");
+  }
+  const parts = [];
+  if (typedLoss(event)) {
+    parts.push(typedLine(event) || sourceOf(event).join(" "));
+    const when = typedWhen(event);
+    if (when) parts.push(when);
   } else {
-    parts.push("It cannot be restored from here.");
+    parts.push(sourceOf(event).join(" "));
   }
   if (canRevert(current, event)) parts.push("Undo the change also removes edits made since.");
   return parts.join(" ");
@@ -56,14 +118,26 @@ function describe(current, event) {
 
 function actionsFor(current, event) {
   const actions = [];
-  if (canRestore(current, event)) actions.push({ label: "Restore", onClick: () => choose(current, event, "restore") });
+  if (!reasoned(event)) {
+    if (canRestore(current, event)) actions.push({ label: "Restore", onClick: () => choose(current, event, "restore") });
+    if (canRevert(current, event)) actions.push({ label: "Undo the change", onClick: () => choose(current, event, "revert") });
+    actions.push({ label: "Keep as is", onClick: () => choose(current, event, "dismiss") });
+    return actions;
+  }
+  if (canPutBack(current, event)) actions.push({ label: "Put it back", onClick: () => choose(current, event, "put-back") });
   if (canRevert(current, event)) actions.push({ label: "Undo the change", onClick: () => choose(current, event, "revert") });
-  actions.push({ label: "Keep as is", onClick: () => choose(current, event, "dismiss") });
+  actions.push({ label: "Keep the change", onClick: () => choose(current, event, "dismiss") });
   return actions;
 }
 
 async function draw(current, event) {
-  const key = [event.id, canRestore(current, event), canRevert(current, event), event.lastWriteAt, describe(current, event)].join("|");
+  const title = titleFor(event);
+  const detail = detailFor(current, event);
+  const key = [
+    event.id, title, event.reason ?? "", JSON.stringify(typed(event)),
+    canRestore(current, event), canPutBack(current, event), canRevert(current, event),
+    event.lastWriteAt, detail,
+  ].join("|");
   if (current.drawn === key) return true;
   current.drawn = key;
   current.eventId = event.id;
@@ -77,15 +151,20 @@ async function draw(current, event) {
     return false;
   }
   if (session !== current || current.drawn !== key) return false;
-  ui.dismissPersistent(TITLE, { now: true });
-  ui.toastPersistent(TITLE, "warning", { detail: describe(current, event), actions: actionsFor(current, event) });
+  const previous = current.title;
+  current.title = title;
+  if (previous && previous !== title) ui.dismissPersistent(previous, { now: true });
+  ui.dismissPersistent(title, { now: true });
+  ui.toastPersistent(title, toneFor(event), { detail, actions: actionsFor(current, event) });
   return true;
 }
 
 function clearNotice(current) {
+  const title = current.title;
   current.drawn = null;
   current.eventId = null;
-  ui?.dismissPersistent(TITLE, { now: true });
+  current.title = null;
+  if (title) ui?.dismissPersistent(title, { now: true });
 }
 
 async function read(current) {
@@ -113,7 +192,11 @@ async function read(current) {
   if (session !== current || turn !== current.turn) return;
   if (!body || typeof body !== "object" || !("event" in body)) return;
   if (isPending(body.event)) {
-    if (current.resolved.has(body.event.id)) return;
+    if (current.resolved.has(body.event.id) || current.waiting === body.event.id) return;
+    if (!current.waited.has(body.event.id) && settling(current)) {
+      waitForSettle(current, body.event.id);
+      return;
+    }
     if (await draw(current, body.event)) removeServerBar();
     return;
   }
@@ -150,7 +233,7 @@ function settle(current, event, choice, status, body) {
   } else if (status === 422) {
     current.refused.add(`${event.id}:${choice}`);
     if (current.eventId === event.id && !current.resolved.has(event.id)) draw(current, event);
-    say(choice === "restore" ? "That data no longer fits this page, so it could not be restored." : "That earlier version is no longer available.", "warning");
+    say(choice === "restore" || choice === "put-back" ? "That data no longer fits this page, so it could not be restored." : "That earlier version is no longer available.", "warning");
   } else if (status === 401 || status === 403) {
     say(RELOAD_FIRST, "error");
   } else {
@@ -202,17 +285,44 @@ function onNotification(current, e) {
     if (typeof data?.id !== "string") return;
     current.turn++;
     current.resolved.add(data.id);
+    if (current.waiting === data.id) stopWaiting(current);
     if (current.eventId === data.id) clearNotice(current);
     return;
   }
   if (action === "raised" && isPending(data) && !current.resolved.has(data.id)) {
     current.turn++;
+    if (current.waiting === data.id) return;
+    if (!current.waited.has(data.id) && settling(current)) {
+      waitForSettle(current, data.id);
+      return;
+    }
     draw(current, data).then((drawn) => { if (drawn) removeServerBar(); }, () => {});
   }
 }
 
 const readAt = (current) => Math.max(current.lastSave + AFTER_SAVE_MS, current.lastRead + MIN_READ_GAP_MS);
 
+function stopWaiting(current) {
+  if (!current.waiting) return false;
+  current.waiting = null;
+  clearTimeout(current.waitTimer);
+  current.waitTimer = null;
+  return true;
+}
+
+function endWait(current, { now = false } = {}) {
+  if (!stopWaiting(current) || session !== current) return;
+  if (now) read(current);
+  else armRead(current);
+}
+
+function waitForSettle(current, id) {
+  current.waited.add(id);
+  current.waiting = id;
+  clearTimeout(current.waitTimer);
+  current.waitTimer = setTimeout(() => endWait(current, { now: true }), SETTLE_CAP_MS);
+}
+
 function armRead(current) {
   if (current.timer) return;
   current.timer = setTimeout(() => {
@@ -235,22 +345,30 @@ export function start({ href, reload = () => window.location.reload() }) {
   const listeners = new AbortController();
   const current = {
     url: url.href, reload, listeners, turn: 0, lastRead: 0, lastSave: 0, timer: null,
-    busy: false, drawn: null, eventId: null, resolved: new Set(), refused: new Set(),
+    lastExternal: 0, waiting: null, waitTimer: null, waited: new Set(),
+    busy: false, drawn: null, eventId: null, title: null, resolved: new Set(), refused: new Set(),
   };
   session = current;
   const { signal } = listeners;
   document.addEventListener("clay:notification", (e) => onNotification(current, e), { signal });
+  document.addEventListener("clay:sync-applied", (e) => {
+    if (e.detail?.source === "disk") current.lastExternal = Date.now();
+  }, { signal });
   document.addEventListener("clay:save-saved", () => {
     current.lastSave = Date.now();
-    armRead(current);
+    if (current.waiting) endWait(current);
+    else armRead(current);
   }, { signal });
+  for (const name of SAVE_UNSETTLED_EVENTS) {
+    document.addEventListener(name, () => endWait(current, { now: true }), { signal });
+  }
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState === "visible" && Date.now() - current.lastRead >= VISIBLE_GAP_MS) read(current);
   }, { signal });
   const done = storage.session.get(DONE_KEY);
   if (done) {
     storage.session.remove(DONE_KEY);
-    say(done === "restore" ? "Your saved data is back." : "The earlier version is back.", "success");
+    say(done === "restore" || done === "put-back" ? "Your saved data is back." : "The earlier version is back.", "success");
   }
   read(current);
 }
@@ -261,5 +379,6 @@ export function stop() {
   session = null;
   current.listeners.abort();
   clearTimeout(current.timer);
+  clearTimeout(current.waitTimer);
   clearNotice(current);
 }

package/src/sync/live-sync.js

@@ -933,7 +933,7 @@ class LiveSync {
     // Whichever wire discovery selected. start() does not call connect() until the
     // profile is known, so this is never null on the normal path.
     const profile = this._profile || WIRE_PROFILES.legacy;
-    const path = profile.streamPath(window.location.href, this.lane, this.resumeId, this.clientId);
+    const path = profile.streamPath(window.location.href, this.lane, this.resumeId, this.clientId, PAGE_FORMAT);
     // A frame scheduled while the page showed waits for an animation frame, which a
     // page hidden since then never runs. Move it to the hidden schedule.
     if (!this._hiddenHandler) {

package/src/sync/wire-profile.js

@@ -25,14 +25,19 @@
 
 import { hostMeta } from '../core/host-meta.js';
 
+// A live tab declares the page format it can read on its own stream, because a tab whose
+// store boots staged never sends /_/sync/data, and the host would otherwise count it as an
+// older editor and refuse every save that raises the page floor.
+const formatParam = (format) => (format == null ? '' : `&blockeditor-format=${format}`);
+
 export const WIRE_PROFILES = {
   spec: {
     name: 'spec',
     relayPath: '/_/sync',
     documentHeader: 'Document-URL',
     snapshotKey: 'snapshot',
-    streamPath: (href, lane, resumeId, clientId) =>
-      `/_/sync?document-url=${encodeURIComponent(href)}&lane=${lane}&resume-id=${resumeId}&client-id=${encodeURIComponent(clientId)}`,
+    streamPath: (href, lane, resumeId, clientId, format) =>
+      `/_/sync?document-url=${encodeURIComponent(href)}&lane=${lane}&resume-id=${resumeId}&client-id=${encodeURIComponent(clientId)}${formatParam(format)}`,
   },
   // What every published clayjs speaks, and what hyperclayjs and the inline script in
   // every Collection dashboard hardcode. Hosts keep these addresses permanently.
@@ -41,8 +46,8 @@ export const WIRE_PROFILES = {
     relayPath: '/_/live-sync/save',
     documentHeader: 'Page-URL',
     snapshotKey: 'html',
-    streamPath: (href, lane, resumeId, clientId) =>
-      `/_/live-sync/stream?page-url=${encodeURIComponent(href)}&lane=${lane}&resume-id=${resumeId}&client-id=${encodeURIComponent(clientId)}`,
+    streamPath: (href, lane, resumeId, clientId, format) =>
+      `/_/live-sync/stream?page-url=${encodeURIComponent(href)}&lane=${lane}&resume-id=${resumeId}&client-id=${encodeURIComponent(clientId)}${formatParam(format)}`,
   },
 };
 

package/src/ui/bevel-controls.js

@@ -186,10 +186,13 @@ export function bevelButton(label, { variant = 'default', small = false, onClick
   return b;
 }
 
-export function bevelIconButton(svg, { label, onClick = null }) {
+export function bevelIconButton(svg, { label, onClick = null, theme = null, parts = [], labelParts = [] }) {
   const b = bevelButton('', {
     small: true,
     onClick,
+    theme,
+    parts,
+    labelParts,
     extra: ['width:26px', 'height:26px', 'padding:0', 'display:inline-grid', 'place-items:center'],
     labelExtra: ['display:inline-grid', 'width:12px', 'height:12px'],
   });

package/src/ui/dialogs.js

@@ -6,9 +6,10 @@ import { bevelBox, bevelButton, bevelInput, bevelText } from "./bevel-controls.j
 import { TOKENS, FONT_SANS, FONT_MONO } from "./bevel.js";
 import { resolveTheme } from "./theme.js";
 
-// Caller markup (promptText, extraContent, tell's paragraphs) goes in as it is: those
-// are markup by design, and callers pass elements through them. Only the frame around
-// it is ClayJS's to style. The prompt is the dialog's title, as in the dashboard.
+// Prompts, titles, paragraphs and labels are text (or a node placed as it is), so a
+// record or a visitor cannot run markup. extraContent is markup (or a node). Only the
+// frame around it is ClayJS's to style. The prompt is the dialog's title, as in the
+// dashboard.
 function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "", yesLabel = "OK") {
   const theme = resolveTheme();
   const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px", `font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`], { theme, parts: ["dialog.content"], role: "text" });
@@ -19,7 +20,8 @@ function createModal(promptText, yesCallback, extraContent = "", includeInput =
     input.required = true;
     content.append(input);
   }
-  content.insertAdjacentHTML("beforeend", extraContent);
+  if (extraContent instanceof Node) content.append(extraContent);
+  else if (extraContent) content.insertAdjacentHTML("beforeend", extraContent);
 
   themodal.title = promptText;
   themodal.html = includeInput || extraContent ? content : "";
@@ -102,7 +104,8 @@ export function tell(promptText, ...content) {
   const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:12px"], { theme, parts: ["dialog.content"] });
   for (const c of content) {
     const paragraph = bevelText("div", [`font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`, "overflow-wrap:anywhere"], undefined, { theme });
-    paragraph.innerHTML = c;
+    if (c instanceof Node) paragraph.append(c);
+    else paragraph.textContent = c;
     box.append(paragraph);
   }
 
@@ -148,7 +151,7 @@ export function snippet(title, content, extraContent = '') {
     `background:${TOKENS.sunk}`, `border:1px solid ${TOKENS["line-2"]}`,
   ], { theme, parts: ["dialog.well"], role: "well" });
   const pre = bevelText("pre", ["display:block", "margin:0", "white-space:nowrap", `font:13px/1.6 ${FONT_MONO}`], undefined, { theme, parts: ["dialog.code"], role: "code" });
-  pre.innerHTML = content;
+  pre.textContent = content;
   well.append(pre);
   const copy = bevelButton("Copy", {
     small: true,
@@ -160,7 +163,8 @@ export function snippet(title, content, extraContent = '') {
     },
   });
   box.append(well, copy);
-  box.insertAdjacentHTML("beforeend", extraContent || "");
+  if (extraContent instanceof Node) box.append(extraContent);
+  else if (extraContent) box.insertAdjacentHTML("beforeend", extraContent);
 
   themodal.title = title;
   themodal.html = box;

package/src/ui/modal.js

@@ -18,12 +18,12 @@ export const SURFACE_THEME = Symbol("clay.surfaceTheme");
   - user confirms
   - everything about the modal resets
 
-  themodal.html = content;   // html, yes and no each take markup, or a node placed as it is
-  themodal.yes = content;
+  themodal.html = content;   // the body: markup, or a node placed as it is
+  themodal.yes = content;    // text, or a node placed as it is
   themodal.no = content;
 
   themodal.closeHtml = "x";  // any non-empty value shows the corner close
-  themodal.title = content;  // markup or a node: a header with the title (optional)
+  themodal.title = content;  // text or a node: a header with the title (optional)
   themodal.width = "440px";  // the panel's width (default 600px)
 
   themodal.disableFocus = true;
@@ -367,12 +367,14 @@ const themodal = (() => {
       modalYesElem.type = 'submit';
       modalButtonsElem.append(modalNoElem, modalYesElem);
 
-      // Markup is parsed in; a node is placed as it is, listeners and all.
-      const place = (target, value) => {
+      // A node is placed as it is. A string is text, except in the body, which is
+      // the one slot that takes markup.
+      const place = (target, value, markup = false) => {
         if (value instanceof Node) target.append(value);
-        else target.innerHTML = value;
+        else if (markup) target.innerHTML = value;
+        else target.textContent = value;
       };
-      place(modalContentElem, html);
+      place(modalContentElem, html, true);
       place(modalYesElem.firstChild, yes);
       place(modalNoElem.firstChild, no);
       if (title) place(shell.heading, title);

package/src/ui/toast.js

@@ -3,9 +3,11 @@
 //
 // The Hyperclay dashboard's toast (Bevel's React toast with the dashboard's overrides),
 // drawn inline: a 3px tone edge, a 16px Bevel glyph, 13.5px semibold text, a quiet close.
-import { set } from "../lib/hostile-css.js";
-import { bevelBox, bevelSurface, bevelText, bevelButton, protectIcon, paintLook } from "./bevel-controls.js";
+import { set, style } from "../lib/hostile-css.js";
+import { bevelBox, bevelSurface, bevelText, bevelButton, protectIcon, paintLook, restyleBox } from "./bevel-controls.js";
 import { TOKENS, RULES, GLYPHS } from "./bevel.js";
+import { resolveTheme } from "./theme.js";
+import { themed, tokenRulesFor, partRules, markParts } from "./theme-parts.js";
 import { mountEditorUI } from "./editor-ui.js";
 
 const TONES = {
@@ -34,48 +36,49 @@ function motion() {
 // body, and a detached stack would swallow every toast after it. The stack sits in its own
 // shadow root: the inline !important rules already beat the page's stylesheets, and the
 // root also keeps out what they cannot, such as a page's ::before content.
-function stack() {
+function stack(theme) {
   const existing = document.querySelector('clay-editor-ui[data-clay-ui="toasts"]')?.shadowRoot.querySelector("[data-clay-toasts]");
   if (existing) return existing;
   const box = bevelBox("div", [
     "position:fixed", "top:18px", "right:18px", "z-index:9999",
     "display:flex", "flex-direction:column", "align-items:flex-end", "gap:10px",
     "width:min(330px, calc(100vw - 36px))", "pointer-events:none",
-  ]);
+  ], { theme, parts: ["toast.stack"] });
   box.setAttribute("data-clay-toasts", "");
   box.setAttribute("aria-live", "polite");
   mountEditorUI({ name: "toasts", content: box });
   return box;
 }
 
-function build(message, type, { detail = "", actions = [] } = {}) {
+function build(message, type, { detail = "", actions = [] } = {}, theme) {
   const tone = TONES[type];
   const el = bevelSurface("div", [
     "display:flex", "align-items:flex-start", ...RULES.toast, "width:100%",
     `border-inline-start:3px solid ${tone.edge}`,
     "cursor:pointer", "pointer-events:auto",
     ...HIDDEN, `transition:${motion()}`,
-  ]);
+  ], { theme, parts: ["toast.panel"] });
+  if (themed(theme)) style(el, [`border-inline-start-color:${tone.edge}`, ...partRules(theme, ["toast.panel"], {})]);
   el.setAttribute("data-clay-toast", type);
-  const body = bevelBox("div", ["flex:1 1 auto", "min-width:0", "display:flex", "flex-direction:column", "gap:8px"]);
-  const head = bevelBox("div", ["display:flex", "align-items:flex-start", "gap:8px"]);
-  const glyph = bevelText("span", ["display:inline-grid", "flex:none", "padding-top:1px", `color:${tone.edge}`]);
+  const body = bevelBox("div", ["flex:1 1 auto", "min-width:0", "display:flex", "flex-direction:column", "gap:8px"], { theme });
+  const head = bevelBox("div", ["display:flex", "align-items:flex-start", "gap:8px"], { theme });
+  const glyph = bevelText("span", ["display:inline-grid", "flex:none", "padding-top:1px", `color:${tone.edge}`], undefined, { theme, parts: ["toast.icon"], role: null });
   glyph.innerHTML = tone.icon;
   protectIcon(glyph.firstElementChild, 16);
   // A message can carry a filename, and a filename is whatever whoever wrote the
   // file chose. It goes in as text so markup in a name can never become markup here.
-  const text = bevelText("span", ["flex:1 1 auto", "min-width:120px", ...RULES.toastTitle, "overflow-wrap:anywhere"], message);
+  const text = bevelText("span", ["flex:1 1 auto", "min-width:120px", ...RULES.toastTitle, "overflow-wrap:anywhere"], message, { theme, parts: ["toast.text"] });
   head.append(glyph, text);
   body.append(head);
   // Detail and actions are the same untrusted text as the title: textContent for
   // both, so a reason string can never become markup in the toast either.
   if (detail) {
-    body.append(bevelText("span", ["display:block", `padding-inline-start:${TEXT_INSET}px`, `color:${TOKENS.muted}`, "overflow-wrap:anywhere"], detail));
+    body.append(bevelText("span", ["display:block", `padding-inline-start:${TEXT_INSET}px`, `color:${TOKENS.muted}`, "overflow-wrap:anywhere"], detail, { theme, parts: ["toast.text"], role: "mutedText" }));
   }
   if (actions.length) {
-    const row = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px", `padding-inline-start:${TEXT_INSET - BUTTON_LABEL_INSET}px`]);
+    const row = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px", `padding-inline-start:${TEXT_INSET - BUTTON_LABEL_INSET}px`], { theme });
     for (const { label, onClick } of actions) {
-      row.append(bevelButton(label, { small: true, variant: "quiet", onClick, extra: ["padding:4px 8px"] }));
+      row.append(bevelButton(label, { small: true, variant: "quiet", onClick, extra: ["padding:4px 8px"], theme }));
     }
     body.append(row);
   }
@@ -84,31 +87,61 @@ function build(message, type, { detail = "", actions = [] } = {}) {
 }
 
 // The dashboard's toast close: a bare 24px square in the muted ink, the sunk ground on hover.
-function closeButton(onClick) {
-  const b = bevelBox("button", [
+function closeButton(onClick, theme) {
+  const base = [
     "flex:none", "display:inline-grid", "place-items:center", ...RULES.toastClose,
     "cursor:pointer",
-  ]);
+  ];
+  const b = bevelBox("button", base);
   b.type = "button";
   b.setAttribute("aria-label", "Dismiss");
   b.title = "Dismiss";
   b.innerHTML = CLOSE_ICON;
-  protectIcon(b.firstElementChild, 14);
-  const paint = (lit) => {
-    set(b, "color", lit ? TOKENS.ink : TOKENS.muted);
-    set(b, "background", lit ? TOKENS.sunk : "transparent");
+  if (!themed(theme)) {
+    protectIcon(b.firstElementChild, 14);
+    const paint = (lit) => {
+      set(b, "color", lit ? TOKENS.ink : TOKENS.muted);
+      set(b, "background", lit ? TOKENS.sunk : "transparent");
+    };
+    b.addEventListener("pointerenter", () => paint(true));
+    b.addEventListener("pointerleave", () => paint(false));
+    b.addEventListener("focus", () => { paint(true); set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "1px"); });
+    b.addEventListener("blur", () => { paint(false); set(b, "outline", "none"); });
+    b.addEventListener("click", onClick);
+    return b;
+  }
+  const names = ["close", "toast.close"];
+  const icon = ["icon", "toast.closeIcon"];
+  markParts(b, theme, names);
+  markParts(b.firstElementChild, theme, icon);
+  const flags = { hover: false, focus: false, pressed: false };
+  const paint = () => {
+    const act = { hover: flags.hover, active: flags.pressed, focus: flags.focus };
+    const svg = b.firstElementChild;
+    svg.style.cssText = "";
+    protectIcon(svg, 14);
+    style(svg, partRules(theme, icon, act));
+    restyleBox(b, [...base, ...tokenRulesFor(theme, "close", act), ...partRules(theme, names, act)]);
   };
-  b.addEventListener("pointerenter", () => paint(true));
-  b.addEventListener("pointerleave", () => paint(false));
-  b.addEventListener("focus", () => { paint(true); set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "1px"); });
-  b.addEventListener("blur", () => { paint(false); set(b, "outline", "none"); });
+  b.addEventListener("pointerenter", () => { flags.hover = true; paint(); });
+  b.addEventListener("pointerleave", () => { flags.hover = false; flags.pressed = false; paint(); });
+  b.addEventListener("pointerdown", (e) => {
+    if (e.button !== undefined && e.button !== 0) return;
+    flags.pressed = true;
+    paint();
+  });
+  b.addEventListener("pointerup", () => { flags.pressed = false; paint(); });
+  b.addEventListener("focus", () => { flags.focus = true; paint(); });
+  b.addEventListener("blur", () => { flags.focus = false; flags.pressed = false; paint(); });
   b.addEventListener("click", onClick);
+  paint();
   return b;
 }
 
-function reveal(el) {
-  stack().append(el);
-  paintLook(el, { background: TOKENS.surface });
+function reveal(el, theme) {
+  stack(theme).append(el);
+  if (themed(theme)) set(el, "color-scheme", theme.scheme === "light dark" ? "light" : theme.scheme);
+  else paintLook(el, { background: TOKENS.surface });
   setTimeout(() => {
     set(el, "opacity", "1");
     set(el, "transform", "none");
@@ -125,9 +158,10 @@ function dismiss(el, after) {
 }
 
 function toast(message, messageType = "success") {
-  const el = build(message, TONES[messageType] ? messageType : "success");
+  const theme = resolveTheme();
+  const el = build(message, TONES[messageType] ? messageType : "success", {}, theme);
   el.addEventListener("click", () => dismiss(el));
-  reveal(el);
+  reveal(el, theme);
   setTimeout(() => dismiss(el), 6600);
 }
 
@@ -142,17 +176,18 @@ function toastPersistent(message, messageType = "warning", { detail = "", action
     activePersistentToasts.delete(message);
   }
 
-  const el = build(message, TONES[messageType] ? messageType : "warning", { detail, actions });
+  const theme = resolveTheme();
+  const el = build(message, TONES[messageType] ? messageType : "warning", { detail, actions }, theme);
   set(el, "cursor", "default");
   const close = closeButton((e) => {
     e.stopPropagation();
     // A newer toast with the same message may have taken this entry since.
     dismiss(el, () => { if (activePersistentToasts.get(message) === el) activePersistentToasts.delete(message); });
-  });
+  }, theme);
   el.append(close);
 
   activePersistentToasts.set(message, el);
-  reveal(el);
+  reveal(el, theme);
 }
 
 // Takes down the persistent toast showing this message, if one is up. `now` takes the