@panphora/clayjs 1.15.1 → 1.16.0

package/src/sync/wire-profile.js

@@ -0,0 +1,81 @@
+/**
+ * wire-profile.js — the two live-sync wires, and the rule for choosing between them.
+ *
+ * Spec §10 puts both halves on `/_/sync`. Not every host serves that yet, and the
+ * ones that do not cannot be upgraded on our schedule: hyperclay-local ships behind
+ * Apple notarization, while this library reaches every document within one 10-minute
+ * cache TTL. So the client is the half that has to know both.
+ *
+ * The choice is DISCOVERED, never guessed. Spec §5 makes `/_/meta` the only way to
+ * learn what a host can do, and §10 says a client that has not discovered `sync`
+ * never opens either half of the route. Probing is also a bad instrument here: an
+ * EventSource reports a 404, an auth refusal and an offline browser through one
+ * error path, so a failed connection cannot tell you which address was wrong.
+ *
+ * One profile is chosen once and used for BOTH directions for the life of the page.
+ * Letting send and receive decide independently is exactly the bug this replaces: a
+ * client that posted to the spec address while streaming from the legacy one.
+ *
+ * Both stream addresses carry `client-id`, in the same kebab spelling as the rest of
+ * the query. It is the tab's own sender id — the one every outbound frame already
+ * carries — so a host that reads it at admission knows this connection by the value
+ * its frames arrive under, and can tell two tabs of one cookie-less guest apart. A
+ * host that does not read it ignores an unknown parameter.
+ */
+
+import { hostMeta } from '../core/host-meta.js';
+
+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)}`,
+  },
+  // What every published clayjs speaks, and what hyperclayjs and the inline script in
+  // every Collection dashboard hardcode. Hosts keep these addresses permanently.
+  legacy: {
+    name: 'legacy',
+    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)}`,
+  },
+};
+
+/**
+ * Which wire this host speaks, and which of the current worker transports it can
+ * carry. Absence of `sync` selects the legacy wire rather than disabling live sync.
+ * That is deliberate transition debt (§10 says an undiscovered capability is not
+ * opened at all), but both deployed first-party hosts ran live sync for a long time
+ * without advertising anything, and refusing them would regress every published
+ * version. A malformed answer, a 404 or a timeout all land on legacy too.
+ *
+ * @returns {Promise<{profile: Object, sharedSync: boolean, sharedData: boolean, liveData: boolean}>}
+ */
+export function resolveWireProfile() {
+  return hostMeta()
+    .then((meta) => {
+      const extensions = meta?.extensions || [];
+      const hasSync = extensions.includes('sync');
+      const hasLiveData = extensions.includes('live-data');
+      const hasPresence = extensions.includes('presence');
+      const sharedData = hasSync && hasLiveData && extensions.includes('sync-worker-data') && !hasPresence;
+      const sharedSync = hasSync && !hasPresence && (sharedData || (extensions.includes('sync-worker') && !hasLiveData));
+      return {
+        profile: hasSync ? WIRE_PROFILES.spec : WIRE_PROFILES.legacy,
+        sharedSync,
+        sharedData,
+        liveData: hasLiveData,
+      };
+    })
+    .catch(() => ({
+      profile: WIRE_PROFILES.legacy,
+      sharedSync: false,
+      sharedData: false,
+      liveData: false,
+    }));
+}

package/src/ui/bevel-controls.js

@@ -11,6 +11,7 @@
 import { style, make, set } from '../lib/hostile-css.js';
 import { RULES, MEDIA, FONT_SANS, TOKENS } from './bevel.js';
 import { themed, tokenRulesFor, partRules, markParts, floorRules } from './theme-parts.js';
+import { pageScheme } from './page-scheme.js';
 
 export const RUNTIME_ONLY = 'no-save no-watch no-snapshot';
 
@@ -325,13 +326,6 @@ export function bevelInput(tag = 'input', opts = {}) {
   return paintInput(el, opts);
 }
 
-// The scheme a UI root gives its subtree: the page's own when it declares one, so
-// light-dark() matches what the person is looking at, else the reader's preference.
-export function pageScheme() {
-  const s = getComputedStyle(document.documentElement).colorScheme;
-  return s === 'light' || s === 'dark' ? s : 'light dark';
-}
-
 // `hidden` loses to an inline !important display, so showing and hiding a control
 // sets both: the attribute for assistive tech and callers, the declaration for looks.
 export function setShown(el, shown, display = 'block') {
@@ -340,4 +334,4 @@ export function setShown(el, shown, display = 'block') {
   else set(el, 'display', shown ? display : 'none');
 }
 
-export { protectIcon };
+export { pageScheme, protectIcon };

package/src/ui/page-scheme.js

@@ -0,0 +1,7 @@
+// The scheme a UI root gives its subtree: the page's own when it declares one, so
+// light-dark() matches what the person is looking at, else the reader's preference.
+// It lives alone so a reader can ask for it without the controls.
+export function pageScheme() {
+  const s = getComputedStyle(document.documentElement).colorScheme;
+  return s === 'light' || s === 'dark' ? s : 'light dark';
+}

package/src/ui/skins/cms.js

@@ -1,4 +1,4 @@
 // GENERATED from src/vendor/hypercms.vendor.js by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
-export const SOURCE_SHA256 = "a1757cdc7333f40185cb497dd0a7db863289aac55e96c9d9f24239d56ceeacc2";
+export const SOURCE_SHA256 = "f4a8bf46fe5d4f1037810077d8068d59cd996896c59977abc2d2baa6ad3f0abd";
 export const ROOTS = [".hcms-shell"];
 export const CSS = "@layer clay-skin{\n:is(.hcms-shell):not([data-theme]),:is(.hcms-shell):not([data-theme]) *{--mirk-canvas:light-dark(#FDF8F0, #0B0C13) !important;--mirk-bg:light-dark(#FFFCF6, #11131E) !important;--mirk-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-accent:light-dark(#F4ECDF, #1A1D2C) !important;--mirk-destructive:light-dark(#A83A2C, #FF5566) !important;--mirk-focus-color:light-dark(#8F6310, #D9A445) !important;--mirk-bevel-bg:light-dark(#F1E7D4, #22273E) !important;--mirk-bevel-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-bevel-tl:light-dark(#FFF9ED, #3C4260) !important;--mirk-bevel-br:light-dark(#D6C3A5, #1B2033) !important;--mirk-bevel-hover-bg:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%) !important;--mirk-pill-inner-top:light-dark(#FFF9ED, #3C4260) !important;--mirk-input-border:light-dark(#D8C8AF, #353B52) !important;--mirk-placeholder-color:light-dark(#9A8A70, #6A7090) !important;--mirk-ctrl-bg:light-dark(#6B5942, #8A90AB) !important;--mirk-toggle-bg:light-dark(#FCF8F1, #4A5275) !important;--mirk-toggle-hi:light-dark(#FFF9ED, #6C759A) !important;--mirk-toggle-lo:light-dark(#D6C3A5, #1B2033) !important;--mirk-mark-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-sortable-dot:light-dark(#D8C8AF, #353B52) !important;--mirk-sortable-shadow:light-dark(#D6C3A5, #1B2033) !important;--mirk-sortable-label:light-dark(#6B5942, #8A90AB) !important;--mirk-sortable-placeholder:light-dark(#9A8A70, #6A7090) !important;--mirk-slider-fill:light-dark(#F0E4CC, #3A2F17) !important;--mirk-slider-nub-bg:light-dark(#FCF8F1, #4A5275) !important;--mirk-slider-nub-hi:light-dark(#FFF9ED, #6C759A) !important;--mirk-slider-nub-lo:light-dark(#D6C3A5, #1B2033) !important;--mirk-chip-surface:light-dark(#FFFCF6, #11131E) !important;--mirk-chip-edge:light-dark(#D8C8AF, #353B52) !important;--mirk-chip-primary-bg:light-dark(#2B241B, #ECEAF2) !important;--mirk-chip-primary-fg:light-dark(#FDF8F0, #0B0C13) !important;--mirk-chip-alert:light-dark(#A83A2C, #FF5566) !important;--mirk-radius:0px !important;--mirk-focus-offset:2px !important}\n:is(.hcms-shell){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important}\n.hcms-shell .mirk-chip__actions .mirk-chip__action--primary{--mirk-bevel-bg:var(--mirk-chip-primary-bg) !important;--mirk-bevel-fg:var(--mirk-chip-primary-fg) !important;--mirk-bevel-tl:color-mix(in srgb, var(--mirk-chip-primary-bg), white 24%) !important;--mirk-bevel-br:color-mix(in srgb, var(--mirk-chip-primary-bg), black 32%) !important;--mirk-bevel-hover-bg:color-mix(in srgb, var(--mirk-chip-primary-bg), white 10%) !important}\n}";

package/src/ui/theme-config.js

@@ -0,0 +1,150 @@
+// Theme configuration for the UI ClayJS draws on a page: dialogs, prompts, toasts,
+// notices. A page configures it (window.clayTheme at first use, or clay.theme());
+// the surfaces that paint it are elsewhere, so a reader that never opens one never
+// loads them. Configuration is synchronous: clay.theme() answers and throws without
+// waiting for a stylesheet, an element or an import.
+
+export const TOKEN_PROPS = {
+  font: "font-family",
+  headingFont: "font-family",
+  text: "color",
+  mutedText: "color",
+  background: "background-color",
+  surface: "background-color",
+  border: "border-color",
+  accent: "background-color",
+  accentText: "color",
+  danger: "background-color",
+  dangerText: "color",
+  success: "color",
+  warning: "color",
+  radius: "border-radius",
+  shadow: "box-shadow",
+  overlay: "background-color",
+  spacing: "outline-offset",
+  buttonHeight: "min-height",
+};
+
+export const STATES = ["base", "hover", "active", "focus", "disabled"];
+
+const DIALOG = ["root", "overlay", "panel", "header", "title", "body", "footer", "close", "closeIcon", "content", "input", "hint", "actions", "button", "buttonLabel", "well", "code", "copyButton"];
+const NOTICE = ["root", "panel", "header", "title", "text", "icon", "dot", "actions", "button", "buttonLabel", "close", "well", "list", "row", "location", "valueLabel", "value", "before", "after", "mine", "theirs", "warning", "previewRing"];
+
+export const PART_NAMES = new Set([
+  "button", "button.default", "button.primary", "button.quiet", "button.danger",
+  "buttonLabel", "input", "text", "mutedText", "icon", "well", "close",
+  ...["dialog", "people", "crop"].flatMap((s) => DIALOG.map((p) => `${s}.${p}`)),
+  "people.choices", "people.choice", "people.choiceLabel",
+  "crop.stage", "crop.image", "crop.dim", "crop.selection", "crop.handle",
+  "crop.handle.nw", "crop.handle.ne", "crop.handle.sw", "crop.handle.se",
+  "toast.stack", "toast.panel", "toast.icon", "toast.text", "toast.close", "toast.closeIcon",
+  ...["notice", "conflict", "section", "staleHost"].flatMap((s) => NOTICE.map((p) => `${s}.${p}`)),
+]);
+
+const SCHEMES = ["page", "light", "dark"];
+const DEFAULT = Object.freeze({ auto: true, colorScheme: "page", tokens: {}, parts: {} });
+
+let config = null;
+let initialized = false;
+
+// A CSS value a page hands us. It lands inside an inline declaration, so it may
+// never close that declaration or add a priority of its own.
+export function validValue(prop, value) {
+  if (typeof value !== "string") return false;
+  const v = value.trim();
+  if (!v || v.length > 500 || /[;{}]|!\s*important/i.test(v)) return false;
+  const supports = globalThis.CSS?.supports;
+  return typeof supports === "function" ? supports.call(globalThis.CSS, prop, v) : true;
+}
+
+function plainObject(x) {
+  return !!x && typeof x === "object" && Object.getPrototypeOf(x) === Object.prototype;
+}
+
+function normalize(options) {
+  if (!plainObject(options)) throw new TypeError("clay.theme: pass an options object, false or null");
+  const { auto = true, colorScheme = "page", tokens = {}, parts = {}, ...rest } = options;
+  const unknown = Object.keys(rest);
+  if (unknown.length) throw new TypeError(`clay.theme: unknown option "${unknown[0]}"`);
+  if (typeof auto !== "boolean") throw new TypeError("clay.theme: auto must be true or false");
+  if (!SCHEMES.includes(colorScheme)) throw new TypeError(`clay.theme: colorScheme must be one of ${SCHEMES.join(", ")}`);
+  if (!plainObject(tokens)) throw new TypeError("clay.theme: tokens must be an object");
+  if (!plainObject(parts)) throw new TypeError("clay.theme: parts must be an object");
+  const outTokens = {};
+  for (const [name, value] of Object.entries(tokens)) {
+    if (!(name in TOKEN_PROPS)) throw new TypeError(`clay.theme: unknown token "${name}"`);
+    if (!validValue(TOKEN_PROPS[name], value)) throw new TypeError(`clay.theme: token "${name}" is not a valid ${TOKEN_PROPS[name]} value`);
+    outTokens[name] = name === "spacing" && value.trim() === "0" ? "0px" : value.trim();
+  }
+  const outParts = {};
+  for (const [name, states] of Object.entries(parts)) {
+    if (!PART_NAMES.has(name)) throw new TypeError(`clay.theme: unknown part "${name}"`);
+    if (!plainObject(states)) throw new TypeError(`clay.theme: part "${name}" must map states to declarations`);
+    outParts[name] = {};
+    for (const [state, decls] of Object.entries(states)) {
+      if (!STATES.includes(state)) throw new TypeError(`clay.theme: part "${name}" has unknown state "${state}"`);
+      if (!plainObject(decls)) throw new TypeError(`clay.theme: "${name}.${state}" must be an object of CSS declarations`);
+      outParts[name][state] = {};
+      for (const [prop, value] of Object.entries(decls)) {
+        if (!/^-?[a-z][a-z-]*$/.test(prop) || prop.startsWith("--")) throw new TypeError(`clay.theme: "${prop}" in ${name}.${state} is not a CSS property name`);
+        if (!validValue(prop, value)) throw new TypeError(`clay.theme: "${prop}: ${value}" in ${name}.${state} is not valid`);
+        outParts[name][state][prop] = value.trim();
+      }
+    }
+  }
+  return Object.freeze({ auto, colorScheme, tokens: Object.freeze(outTokens), parts: Object.freeze(outParts) });
+}
+
+function copy(c) {
+  if (c === false) return false;
+  return JSON.parse(JSON.stringify(c));
+}
+
+/**
+ * clay.theme(options) replaces the page's theme; clay.theme(false) restores the exact
+ * Bevel look; clay.theme(null) restores the default automatic theme; clay.theme()
+ * returns a copy of the current configuration. Invalid options throw a TypeError and
+ * leave the previous theme in place.
+ */
+export function theme(options) {
+  initTheme();
+  if (arguments.length === 0) return copy(config);
+  if (options === false) config = false;
+  else if (options === null) config = DEFAULT;
+  else config = normalize(options);
+  return copy(config);
+}
+
+// Idempotent. Reads window.clayTheme once and attaches clay.theme. An invalid
+// preloaded theme warns and falls back to the default; it never stops ClayJS booting.
+export function initTheme() {
+  if (initialized) return;
+  initialized = true;
+  const pre = typeof window !== "undefined" ? window.clayTheme : undefined;
+  if (pre === false) config = false;
+  else if (pre === undefined || pre === null) config = DEFAULT;
+  else {
+    try {
+      config = normalize(pre);
+    } catch (err) {
+      console.warn(`clayjs: ignoring window.clayTheme: ${err.message}`);
+      config = DEFAULT;
+    }
+  }
+  if (typeof window !== "undefined") {
+    const clay = (window.clay = window.clay || {});
+    clay.theme = theme;
+  }
+}
+
+// The configuration a surface resolves against. One owner: theme() writes it here
+// and a surface reads it here, so a split module cannot hold a stale copy.
+export function currentConfig() {
+  return config;
+}
+
+// Test hook: forget configuration so the next call re-reads window.clayTheme.
+export function _resetTheme() {
+  config = null;
+  initialized = false;
+}

package/src/ui/theme.js

@@ -2,142 +2,15 @@
 // A page configures it with window.clayTheme (read at first use) or clay.theme().
 // resolveTheme() captures one surface's theme when that surface is built; a later
 // clay.theme() call affects the next surface, never one already open.
-import { pageScheme } from "./bevel-controls.js";
+import { TOKEN_PROPS, currentConfig, initTheme, validValue } from "./theme-config.js";
+import { pageScheme } from "./page-scheme.js";
 
-export const TOKEN_PROPS = {
-  font: "font-family",
-  headingFont: "font-family",
-  text: "color",
-  mutedText: "color",
-  background: "background-color",
-  surface: "background-color",
-  border: "border-color",
-  accent: "background-color",
-  accentText: "color",
-  danger: "background-color",
-  dangerText: "color",
-  success: "color",
-  warning: "color",
-  radius: "border-radius",
-  shadow: "box-shadow",
-  overlay: "background-color",
-  spacing: "outline-offset",
-  buttonHeight: "min-height",
-};
+// The configuration itself lives in theme-config.js, which the loader reads at
+// boot; these names stay here because every surface imported them from here.
+export { PART_NAMES, STATES, TOKEN_PROPS, _resetTheme, initTheme, theme, validValue } from "./theme-config.js";
 
-export const STATES = ["base", "hover", "active", "focus", "disabled"];
-
-const DIALOG = ["root", "overlay", "panel", "header", "title", "body", "footer", "close", "closeIcon", "content", "input", "hint", "actions", "button", "buttonLabel", "well", "code", "copyButton"];
-const NOTICE = ["root", "panel", "header", "title", "text", "icon", "dot", "actions", "button", "buttonLabel", "close", "well", "list", "row", "location", "valueLabel", "value", "before", "after", "mine", "theirs", "warning", "previewRing"];
-
-export const PART_NAMES = new Set([
-  "button", "button.default", "button.primary", "button.quiet", "button.danger",
-  "buttonLabel", "input", "text", "mutedText", "icon", "well", "close",
-  ...["dialog", "people", "crop"].flatMap((s) => DIALOG.map((p) => `${s}.${p}`)),
-  "people.choices", "people.choice", "people.choiceLabel",
-  "crop.stage", "crop.image", "crop.dim", "crop.selection", "crop.handle",
-  "crop.handle.nw", "crop.handle.ne", "crop.handle.sw", "crop.handle.se",
-  "toast.stack", "toast.panel", "toast.icon", "toast.text", "toast.close", "toast.closeIcon",
-  ...["notice", "conflict", "section", "staleHost"].flatMap((s) => NOTICE.map((p) => `${s}.${p}`)),
-]);
-
-const SCHEMES = ["page", "light", "dark"];
-const DEFAULT = Object.freeze({ auto: true, colorScheme: "page", tokens: {}, parts: {} });
 const kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 
-let config = null;
-let initialized = false;
-
-// A CSS value a page hands us. It lands inside an inline declaration, so it may
-// never close that declaration or add a priority of its own.
-export function validValue(prop, value) {
-  if (typeof value !== "string") return false;
-  const v = value.trim();
-  if (!v || v.length > 500 || /[;{}]|!\s*important/i.test(v)) return false;
-  const supports = globalThis.CSS?.supports;
-  return typeof supports === "function" ? supports.call(globalThis.CSS, prop, v) : true;
-}
-
-function plainObject(x) {
-  return !!x && typeof x === "object" && Object.getPrototypeOf(x) === Object.prototype;
-}
-
-function normalize(options) {
-  if (!plainObject(options)) throw new TypeError("clay.theme: pass an options object, false or null");
-  const { auto = true, colorScheme = "page", tokens = {}, parts = {}, ...rest } = options;
-  const unknown = Object.keys(rest);
-  if (unknown.length) throw new TypeError(`clay.theme: unknown option "${unknown[0]}"`);
-  if (typeof auto !== "boolean") throw new TypeError("clay.theme: auto must be true or false");
-  if (!SCHEMES.includes(colorScheme)) throw new TypeError(`clay.theme: colorScheme must be one of ${SCHEMES.join(", ")}`);
-  if (!plainObject(tokens)) throw new TypeError("clay.theme: tokens must be an object");
-  if (!plainObject(parts)) throw new TypeError("clay.theme: parts must be an object");
-  const outTokens = {};
-  for (const [name, value] of Object.entries(tokens)) {
-    if (!(name in TOKEN_PROPS)) throw new TypeError(`clay.theme: unknown token "${name}"`);
-    if (!validValue(TOKEN_PROPS[name], value)) throw new TypeError(`clay.theme: token "${name}" is not a valid ${TOKEN_PROPS[name]} value`);
-    outTokens[name] = name === "spacing" && value.trim() === "0" ? "0px" : value.trim();
-  }
-  const outParts = {};
-  for (const [name, states] of Object.entries(parts)) {
-    if (!PART_NAMES.has(name)) throw new TypeError(`clay.theme: unknown part "${name}"`);
-    if (!plainObject(states)) throw new TypeError(`clay.theme: part "${name}" must map states to declarations`);
-    outParts[name] = {};
-    for (const [state, decls] of Object.entries(states)) {
-      if (!STATES.includes(state)) throw new TypeError(`clay.theme: part "${name}" has unknown state "${state}"`);
-      if (!plainObject(decls)) throw new TypeError(`clay.theme: "${name}.${state}" must be an object of CSS declarations`);
-      outParts[name][state] = {};
-      for (const [prop, value] of Object.entries(decls)) {
-        if (!/^-?[a-z][a-z-]*$/.test(prop) || prop.startsWith("--")) throw new TypeError(`clay.theme: "${prop}" in ${name}.${state} is not a CSS property name`);
-        if (!validValue(prop, value)) throw new TypeError(`clay.theme: "${prop}: ${value}" in ${name}.${state} is not valid`);
-        outParts[name][state][prop] = value.trim();
-      }
-    }
-  }
-  return Object.freeze({ auto, colorScheme, tokens: Object.freeze(outTokens), parts: Object.freeze(outParts) });
-}
-
-function copy(c) {
-  if (c === false) return false;
-  return JSON.parse(JSON.stringify(c));
-}
-
-/**
- * clay.theme(options) replaces the page's theme; clay.theme(false) restores the exact
- * Bevel look; clay.theme(null) restores the default automatic theme; clay.theme()
- * returns a copy of the current configuration. Invalid options throw a TypeError and
- * leave the previous theme in place.
- */
-export function theme(options) {
-  initTheme();
-  if (arguments.length === 0) return copy(config);
-  if (options === false) config = false;
-  else if (options === null) config = DEFAULT;
-  else config = normalize(options);
-  return copy(config);
-}
-
-// Idempotent. Reads window.clayTheme once and attaches clay.theme. An invalid
-// preloaded theme warns and falls back to the default; it never stops ClayJS booting.
-export function initTheme() {
-  if (initialized) return;
-  initialized = true;
-  const pre = typeof window !== "undefined" ? window.clayTheme : undefined;
-  if (pre === false) config = false;
-  else if (pre === undefined || pre === null) config = DEFAULT;
-  else {
-    try {
-      config = normalize(pre);
-    } catch (err) {
-      console.warn(`clayjs: ignoring window.clayTheme: ${err.message}`);
-      config = DEFAULT;
-    }
-  }
-  if (typeof window !== "undefined") {
-    const clay = (window.clay = window.clay || {});
-    clay.theme = theme;
-  }
-}
-
 // --- colour helpers --------------------------------------------------------
 
 // [r, g, b, a] for rgb()/rgba() or #rgb/#rrggbb, else null.
@@ -251,6 +124,7 @@ function onColor(fill, t) {
  */
 export function resolveTheme() {
   initTheme();
+  const config = currentConfig();
   if (config === false) return { bevel: true, scheme: pageScheme(), tokens: {}, parts: {} };
   const sampled = config.auto ? samplePage() : {};
   const tokens = { ...sampled, ...cssTokens(), ...config.tokens };
@@ -269,9 +143,3 @@ export function resolveTheme() {
   }
   return { bevel: false, scheme: scheme(config.colorScheme, tokens), tokens, parts: config.parts };
 }
-
-// Test hook: forget configuration so the next call re-reads window.clayTheme.
-export function _resetTheme() {
-  config = null;
-  initialized = false;
-}

package/src/ui/toast-lazy.js

@@ -0,0 +1,11 @@
+// The toast stack is fetched the first time a toast shows, so the page editor does
+// not download it to become ready. Calls made before it arrives run in order once it has.
+let loading = null;
+const load = () => (loading ??= import("./toast.js"));
+const later = (name) => (...args) => { load().then((m) => (name ? m[name] : m.default)(...args)); };
+
+export default later(null);
+export const toastPersistent = later("toastPersistent");
+// Dismissing a toast nobody showed does nothing, so it never fetches the stack: a page
+// that tears down without having shown one keeps it unloaded.
+export const dismissPersistent = (...args) => { if (loading) later("dismissPersistent")(...args); };