@panphora/clayjs 1.23.0 → 1.24.1

package/src/sync/page-relay.js

@@ -1,20 +1,20 @@
 import { importMap } from "../vendor/hyper-morph-identity.vendor.js";
 import { noscriptsAsText, serializeForSync } from "../core/snapshot.js";
 
-const PAGE = /^page(\.[0-9]+)?$/;
+const PAGE = /^blockeditor(\.[0-9]+)?$/;
 const tags = (root) => [...root.querySelectorAll('script[merge][clay~="live"]')]
   .filter((el) => PAGE.test(el.getAttribute("merge")));
 
 export function pageRelay(pending, acceptedHtml, identity) {
   // A capture with no page article has nothing to overlay, and a document without
   // one is not parsed at all: nothing outside the article would change.
-  if (!pending.html.includes("data-page")) return pending;
+  if (!pending.html.includes("data-blockeditor")) return pending;
   const parse = (html) => noscriptsAsText(new DOMParser().parseFromString(html, "text/html"));
   const outgoing = parse(pending.html);
-  const article = outgoing.querySelector("article[data-page]");
+  const article = outgoing.querySelector("article[data-blockeditor]");
   if (!article) return pending;
   const accepted = parse(acceptedHtml);
-  const savedArticle = accepted.querySelector("article[data-page]");
+  const savedArticle = accepted.querySelector("article[data-blockeditor]");
   if (!savedArticle) return null;
   const oldIds = importMap(outgoing.documentElement, pending.identityMap);
 

package/src/sync/presence-store.js

@@ -315,7 +315,7 @@ export class PresenceStore {
         const awareness = meta?.document && typeof meta.document === 'object' ? meta.document.awareness : null;
         if (
           awareness && awareness.transport === 'broadcast' &&
-          (extensions.includes('page-awareness-v1') || extensions.includes('record-awareness-v1'))
+          (extensions.includes('blockeditor-awareness-v1') || extensions.includes('record-awareness-v1'))
         ) {
           const scope = typeof awareness.scope === 'string' && awareness.scope ? awareness.scope : null;
           return import('./local-presence.js').then(({ localPresence }) => {

package/src/sync/presence-target.js

@@ -13,7 +13,7 @@
  *   null                      nobody is anywhere
  *   "1.2"                     the legacy dotted block path, unchanged
  *   {kind:"record", id, field?}  a Kanban/Journal record (fieldless journals too)
- *   {kind:"page", v:1, epoch, generation, selection}  a Document's page target
+ *   {kind:"blockeditor", v:1, epoch, generation, selection}  a Document's page target
  *
  * Anything else is refused rather than repaired: a frame this module cannot read
  * draws nothing, and a target it cannot read is never published.
@@ -148,7 +148,7 @@ function pageTarget(value) {
   if (!Number.isSafeInteger(value.generation) || value.generation < 0) return refuse('generation');
   const selection = selectionOf(value.selection);
   if (!selection) return refuse('selection');
-  const target = { kind: 'page', v: PRESENCE_VERSION, epoch: value.epoch, generation: value.generation, selection };
+  const target = { kind: 'blockeditor', v: PRESENCE_VERSION, epoch: value.epoch, generation: value.generation, selection };
   return withinSize(target) ? accept(target) : refuse('size');
 }
 
@@ -163,7 +163,7 @@ export function validateTarget(value) {
   if (typeof value === 'string') return EDITING_PATH.test(value) ? accept(value) : refuse('path');
   if (!isObject(value)) return refuse('shape');
   if (value.kind === 'record') return recordTarget(value);
-  if (value.kind === 'page') return pageTarget(value);
+  if (value.kind === 'blockeditor') return pageTarget(value);
   return refuse('kind');
 }
 

package/src/sync/presence.js

@@ -127,7 +127,7 @@ class Presence {
       this._gate = Promise.all([
         hostSupports('presence'),
         hostSupports('record-awareness-v1'),
-        hostSupports('page-awareness-v1'),
+        hostSupports('blockeditor-awareness-v1'),
       ]).then(([supported, recordAwareness, pageAwareness]) => {
         store.setCapabilities({ supported, recordAwareness, pageAwareness });
         return supported === true;

package/src/sync/stream.js

@@ -6,22 +6,26 @@ let workspaceBackground = window.__clayWorkspaceBackground === true;
 document.addEventListener('clay:workspace-background', () => { workspaceBackground = true; });
 document.addEventListener('clay:workspace-foreground', () => { workspaceBackground = false; });
 
-const pageHidden = () => document.hidden || workspaceBackground;
+export const pageHidden = () => document.hidden || workspaceBackground;
 
 export class SyncStream extends EventTarget {
-  constructor(url, { shared = false, sharedData = false, documentURL, lane, clientId, startupCheck = false, keepAliveWhenHidden = false } = {}) {
+  constructor(url, { shared = false, sharedData = false, documentURL, lane, clientId, startupCheck = false, keepAliveWhenHidden = false, workerFeatures = ['live-data'] } = {}) {
     super();
     this.url = url;
     this.readyState = 0;
     this.onopen = null;
     this.onmessage = null;
     this.onerror = null;
-    this._shared = shared && typeof SharedWorker === 'function';
+    // Readers keep their own stream on a data-worker host: a reader already lets go
+    // of it five seconds after it is hidden, and joining the shared stream would
+    // rebuild it under every editor each time a reader tab is shown or hidden.
+    this._shared = shared && typeof SharedWorker === 'function' && (!sharedData || lane === 'live');
     this._sharedData = sharedData;
     this._documentURL = documentURL;
     this._lane = lane;
     this._clientId = clientId;
     this._keepAliveWhenHidden = keepAliveWhenHidden;
+    this._workerFeatures = workerFeatures;
     this._since = 0;
     this._closed = false;
     this._suspended = false;
@@ -39,7 +43,7 @@ export class SyncStream extends EventTarget {
       clearTimeout(this._hiddenTimer);
       if (pageHidden()) {
         if (this._worker) this._postWorker(this._worker, 'hidden');
-        if (!this._keepAliveWhenHidden) this._hiddenTimer = setTimeout(() => this._suspend(), HIDDEN_DELAY);
+        if (!this._keepHidden()) this._hiddenTimer = setTimeout(() => this._suspend(), HIDDEN_DELAY);
       } else {
         if (this._suspended) this._resume();
         else if (this._worker) {
@@ -48,7 +52,7 @@ export class SyncStream extends EventTarget {
       }
     };
     this._pagehide = () => this._suspend(true);
-    this._pageshow = () => { if (!pageHidden() || this._keepAliveWhenHidden) this._resume(); };
+    this._pageshow = () => { if (!pageHidden() || this._keepHidden()) this._resume(); };
     document.addEventListener('visibilitychange', this._visibility);
     document.addEventListener('clay:workspace-background', this._visibility);
     document.addEventListener('clay:workspace-foreground', this._visibility);
@@ -86,12 +90,16 @@ export class SyncStream extends EventTarget {
         this._shared = false;
         this._repair = true;
         this._reopen();
+        // Its own connection now: a page already hidden starts letting it go.
+        if (pageHidden()) this._visibility();
       };
       this._startTimer = setTimeout(worker.onerror, START_TIMEOUT);
       worker.port.onmessage = ({ data }) => {
         if (this._worker !== worker || data?.v !== (this._sharedData ? 2 : 1)) return;
         if (this._sharedData) {
-          if (data.type === 'unsupported') {
+          // `capacity`: the worker already carries as many documents as one stream
+          // may, so this page keeps a stream of its own rather than none.
+          if (data.type === 'unsupported' || data.type === 'capacity') {
             worker.onerror();
             return;
           }
@@ -103,7 +111,7 @@ export class SyncStream extends EventTarget {
           }
           if (!greeted) {
             if (data.type !== 'hello') return;
-            if (!Array.isArray(data.features) || !data.features.includes('live-data')) {
+            if (!Array.isArray(data.features) || !this._workerFeatures.every((feature) => data.features.includes(feature))) {
               worker.onerror();
               return;
             }
@@ -137,7 +145,7 @@ export class SyncStream extends EventTarget {
         } else if (data.type === 'frame' && typeof data.data === 'string') {
           this._remember(data.data);
           this._emit('message', data.data);
-        } else if (this._sharedData && data.type === 'event' && ['data', 'data-state', 'data-writer'].includes(data.event)
+        } else if (this._sharedData && data.type === 'event' && ['data', 'data-state', 'data-writer', 'presence'].includes(data.event)
           && data.data !== null && typeof data.data === 'object' && !Array.isArray(data.data)) {
           try { this._emit(data.event, JSON.stringify(data.data)); } catch {}
         } else if (data.type === 'gone') {
@@ -151,24 +159,47 @@ export class SyncStream extends EventTarget {
       const subscription = { document: this._documentURL, lane: this._lane, since: this._since };
       if (this._sharedData && this._lane === 'live') subscription.clientId = this._clientId;
       this._postWorker(worker, 'subscribe', subscription);
+      // A worker is dead when a ping goes unanswered for three intervals, not when
+      // three intervals pass between replies: Chrome runs a hidden tab's timers once
+      // a minute, so a healthy hidden page sees a minute between its own pings.
+      // A tick far later than even that means the page itself was suspended (a
+      // sleeping laptop, a frozen tab), and the worker may have swept its port
+      // meanwhile without a word: reopen at once rather than wait out the pings.
+      let awaitingSince = 0;
+      let lastTick = Date.now();
       this._pingTimer = setInterval(() => {
         if (this._worker !== worker) return;
-        if (Date.now() - lastReply > PING_INTERVAL * 3) {
+        const now = Date.now();
+        const resumed = now - lastTick > PING_INTERVAL * 6;
+        lastTick = now;
+        if (lastReply >= awaitingSince) awaitingSince = 0;
+        if (resumed || (awaitingSince && now - awaitingSince >= PING_INTERVAL * 3)) {
           this._repair = true;
           this._reopen();
-        } else this._postWorker(worker, 'ping');
+          return;
+        }
+        if (!awaitingSince) awaitingSince = now;
+        this._postWorker(worker, 'ping');
       }, PING_INTERVAL);
     } catch {
       this._shared = false;
       this._reopen();
+      if (pageHidden()) this._visibility();
     }
   }
 
   _openDirect() {
     const source = new EventSource(this.url);
     this._source = source;
+    let opened = false;
+    let hostSentCursor = false;
     source.onopen = () => {
       if (this._source !== source) return;
+      // The browser reconnected this stream on its own. A host that keeps no frames
+      // never sends a cursor, so nothing says the gap was covered: repair as if it
+      // had said `resync`. A host that sends cursors decides that itself.
+      if (opened && !hostSentCursor) this._repair = true;
+      opened = true;
       this.readyState = 1;
       this._emit('open');
       if (this._repair || this._startup) {
@@ -192,7 +223,9 @@ export class SyncStream extends EventTarget {
     // `data`, `data-state` and `data-writer` are clay.live's fast lane (stream-bridge.js).
     for (const type of ['cursor', 'presence', 'data', 'data-state', 'data-writer']) {
       source.addEventListener(type, event => {
-        if (this._source === source) this._emit(type, event.data);
+        if (this._source !== source) return;
+        if (type === 'cursor') hostSentCursor = true;
+        this._emit(type, event.data);
       });
     }
   }
@@ -221,8 +254,16 @@ export class SyncStream extends EventTarget {
     }
   }
 
+  // `keepAliveWhenHidden`: true keeps the stream while hidden (a live-data room);
+  // 'shared' keeps it only while it rides the shared worker, so a page that fell
+  // back to its own connection still lets go and leaves the browser's six HTTP/1.1
+  // connections to the pages on screen.
+  _keepHidden() {
+    return this._keepAliveWhenHidden === true || (this._keepAliveWhenHidden === 'shared' && this._shared);
+  }
+
   _reopen() {
-    const notify = (this._sharedData || this._keepAliveWhenHidden) && this.readyState === 1;
+    const notify = (this._sharedData || this._keepAliveWhenHidden === true) && this.readyState === 1;
     this.readyState = 0;
     if (notify) this._emit('error');
     this._disconnect();
@@ -235,7 +276,7 @@ export class SyncStream extends EventTarget {
     this._suspended = true;
     this._repair = true;
     this.readyState = 0;
-    if (pageExit && this._keepAliveWhenHidden) this._emit('error');
+    if (pageExit && this._keepAliveWhenHidden === true) this._emit('error');
     this._disconnect();
   }
 

package/src/sync/wire-profile.js

@@ -54,7 +54,7 @@ export const WIRE_PROFILES = {
  * 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}>}
+ * @returns {Promise<{profile: Object, sharedSync: boolean, sharedData: boolean, liveData: boolean, workerFeatures: string[]}>}
  */
 export function resolveWireProfile() {
   return hostMeta()
@@ -63,13 +63,17 @@ export function resolveWireProfile() {
       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));
+      // The data worker carries the roster too, so presence no longer keeps a
+      // live-data host on one connection per tab. It must say so in its hello:
+      // a worker that predates that would leave the page with no roster.
+      const sharedData = hasSync && hasLiveData && extensions.includes('sync-worker-data');
+      const sharedSync = hasSync && (sharedData || (extensions.includes('sync-worker') && !hasLiveData && !hasPresence));
       return {
         profile: hasSync ? WIRE_PROFILES.spec : WIRE_PROFILES.legacy,
         sharedSync,
         sharedData,
         liveData: hasLiveData,
+        workerFeatures: hasPresence ? ['live-data', 'presence'] : ['live-data'],
       };
     })
     .catch(() => ({
@@ -77,5 +81,6 @@ export function resolveWireProfile() {
       sharedSync: false,
       sharedData: false,
       liveData: false,
+      workerFeatures: ['live-data'],
     }));
 }

package/src/ui/bevel.js

@@ -1,5 +1,5 @@
 // GENERATED from bevel/bevel.css and bevel/icons by scripts/build-bevel-subset.mjs. Run `npm run build:bevel`.
-export const SOURCE_SHA256 = "0b54b9f2165dcd7d79a4b9749fe4ea5666f14b6f83461d952f5f6c034d224ab9";
+export const SOURCE_SHA256 = "dc3a7565b5ab18780f812c6ce4fa5f4d73a7b1911a5d6f661f1e651bb973d515";
 export const FONT_SANS = "system-ui,-apple-system,\"Segoe UI\",sans-serif";
 export const FONT_MONO = "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace";
 export const SHADOW = "0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35)";

package/src/ui/index.js

@@ -22,14 +22,13 @@ clay.modal = themodal;
 if (typeof window.toast === "undefined") window.toast = toast;
 if (typeof window.toastPersistent === "undefined") window.toastPersistent = toastPersistent;
 
-// Automatic save feedback. clay:save-saving stays deliberately silent (a toast for
-// a sub-second transient is noise). With the indicator plugin loaded, saved belongs
-// to its chip; a failed or offline save stays up as a toast until the next save
-// lands. Keep your own toast lib? The events are public. clay.saveToast moves saved
-// from the chip to a toast.
+// Automatic save feedback says something only when a save does not go through: a
+// failed or offline save stays up as a toast until the next save lands. Saving and
+// saved stay silent unless the page asks for Saved with clay.saveToast. Keep your own
+// toast lib? The events are public.
 saveFeedback.toasts = true;
-// clay.saveToast = true shows Saved as a toast (with the host's message) instead of on
-// the chip. A page may set it before this loads (window.clay = { saveToast: true }).
+// clay.saveToast = true shows Saved as a toast, with the host's message. A page may set
+// it before this loads (window.clay = { saveToast: true }).
 saveFeedback.savedToast = !!clay.saveToast;
 Object.defineProperty(clay, "saveToast", {
   get: () => saveFeedback.savedToast,
@@ -39,12 +38,12 @@ Object.defineProperty(clay, "saveToast", {
 });
 document.addEventListener("clay:save-saved", (e) => {
   dismissPersistent("Couldn't save");
-  dismissPersistent("Offline, not saved");
+  dismissPersistent("Offline, will retry");
   if (e.detail?.msgType === "warning") toast(e.detail.msg || "Saved", "warning");
-  else if (!saveFeedback.chip || saveFeedback.savedToast) toast(e.detail?.msg || "Saved", "success");
+  else if (saveFeedback.savedToast) toast(e.detail?.msg || "Saved", "success");
 });
 document.addEventListener("clay:save-error", () => toastPersistent("Couldn't save", "error"));
-document.addEventListener("clay:save-offline", () => toastPersistent("Offline, not saved", "warning"));
+document.addEventListener("clay:save-offline", () => toastPersistent("Offline, will retry", "warning"));
 document.addEventListener("clay:live-notice", (e) => {
   if (e.detail?.code === "save-uncertain") toastPersistent(e.detail.message, "warning");
   if (e.detail?.code === "op-too-large") toast(e.detail.message, "warning");

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 = "34ad22f65c67a35a9e8062b83bd00395ecd5620badabfa012598840bdd980f32";
+export const SOURCE_SHA256 = "20157bc26ece1b9c3ff29a6b8ad83bbbbcc9b242a1a67e90201537ba242c9e94";
 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/skins/quickcrop.js

@@ -1,4 +1,4 @@
 // GENERATED from src/vendor/quickcrop.vendor.js and bevel/integrations/quickcrop.css by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
-export const SOURCE_SHA256 = "c7f2d2e24de702a5932c49e16c4599f7e4a2c60f05e80ea0fa17b635ccd3b39e";
+export const SOURCE_SHA256 = "2022cba77a08af5f6942c05613b3ee456f89deec70cc14d49fc86e61039103ce";
 export const ROOTS = [".qc-stage",".qc-backdrop"];
 export const CSS = "@layer clay-skin{\n:is(.qc-stage, .qc-backdrop),:is(.qc-stage, .qc-backdrop) *{--qc-surface:light-dark(#FFFCF6, #11131E) !important;--qc-text:light-dark(#2B241B, #ECEAF2) !important;--qc-border:light-dark(#D8C8AF, #353B52) !important;--qc-radius:0px !important;--qc-font:system-ui,-apple-system,\"Segoe UI\",sans-serif !important;--qc-surface-hover:light-dark(#F4ECDF, #1A1D2C) !important;--qc-text-hover:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), light-dark(#FDF8F0, #0B0C13) 12%) !important;--qc-on-dark:light-dark(#FDF8F0, #0B0C13) !important;--qc-overlay:color-mix(in srgb, light-dark(#FDF8F0, #0B0C13) 70%, transparent) !important;--qc-dim:rgba(0,0,0,.55) !important;--qc-crop-line:#fff !important}\n.qc-stage{margin-inline:auto !important;inline-size:fit-content !important;background:light-dark(#F4ECDF, #1A1D2C) !important}\n.qc-stage img{display:block !important;max-inline-size:100% !important}\n.qc-backdrop{position:fixed !important;inset:0 !important;background:var(--qc-overlay) !important;display:grid !important;place-items:center !important;z-index:1000 !important;animation:qc-fade .15s ease !important}\n.qc-modal{background:var(--qc-surface) !important;border:1px solid var(--qc-border) !important;border-radius:var(--qc-radius) !important;padding:16px !important;max-width:92vw !important;font-family:var(--qc-font) !important}\n.qc-bar{display:flex !important;justify-content:flex-end !important;gap:10px !important;margin-top:12px !important}\n.qc-btn{font:inherit !important;font-family:var(--qc-font) !important;font-size:.85rem !important;padding:.3rem .75rem !important;border:1px solid var(--qc-border) !important;border-radius:6px !important;background:var(--qc-surface) !important;color:var(--qc-text) !important;cursor:pointer !important}\n.qc-btn:hover{background:var(--qc-surface-hover) !important}\n.qc-btn-primary{background:var(--qc-text) !important;border-color:var(--qc-text) !important;color:var(--qc-on-dark) !important;font-weight:600 !important}\n.qc-btn-primary:hover{background:var(--qc-text-hover) !important;border-color:var(--qc-text-hover) !important}\n.qc-stage{position:relative !important;line-height:0 !important;user-select:none !important;-webkit-user-select:none !important;touch-action:none !important}\n.qc-stage img{display:block !important;max-width:100% !important;pointer-events:none !important}\n.qc-dim{position:absolute !important;inset:0 !important;background:var(--qc-dim) !important;pointer-events:none !important}\n.qc-box{position:absolute !important;cursor:move !important;outline:1px solid var(--qc-crop-line) !important;background:linear-gradient(var(--qc-crop-line),var(--qc-crop-line)) 0 33.33%/100% 1px no-repeat,linear-gradient(var(--qc-crop-line),var(--qc-crop-line)) 0 66.66%/100% 1px no-repeat,linear-gradient(var(--qc-crop-line),var(--qc-crop-line)) 33.33% 0/1px 100% no-repeat,linear-gradient(var(--qc-crop-line),var(--qc-crop-line)) 66.66% 0/1px 100% no-repeat !important;background-blend-mode:overlay !important}\n.qc-handle{position:absolute !important;box-sizing:border-box !important;width:28px !important;height:28px !important;border:7px solid transparent !important;background:var(--qc-crop-line) !important;background-clip:padding-box !important;border-radius:9px !important}\n.qc-nw{left:-14px !important;top:-14px !important;cursor:nwse-resize !important}\n.qc-ne{right:-14px !important;top:-14px !important;cursor:nesw-resize !important}\n.qc-sw{left:-14px !important;bottom:-14px !important;cursor:nesw-resize !important}\n.qc-se{right:-14px !important;bottom:-14px !important;cursor:nwse-resize !important}\n.qc-mount{line-height:0 !important}\n.qc-stage img[hidden]{display:none !important}\n.qc-backdrop[hidden]{display:none !important}\n.qc-bar[hidden]{display:none !important}\n}";

package/src/ui/skins/richclay.js

@@ -1,4 +1,4 @@
 // GENERATED from src/vendor/richclay.vendor.js and bevel/integrations/richclay.css by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
-export const SOURCE_SHA256 = "1989b03f549880bea355a97b4946ee3a6922e8f3c9612406ba18e440878def3a";
+export const SOURCE_SHA256 = "504c647d597c4f03c946a5ea593a35bbff19dd7ff9c942eacfe5b8fb914abae4";
 export const ROOTS = [".richclay-toolbar",".richclay-float",".richclay-dialog"];
-export const CSS = "@layer clay-skin{\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog),:is(.richclay-toolbar, .richclay-float, .richclay-dialog) *{--richclay-surface:light-dark(#FFFCF6, #11131E) !important;--richclay-surface-alt:light-dark(#F4ECDF, #1A1D2C) !important;--richclay-text:light-dark(#2B241B, #ECEAF2) !important;--richclay-muted:light-dark(#6B5942, #8A90AB) !important;--richclay-border:light-dark(#D8C8AF, #353B52) !important;--richclay-accent:light-dark(#8F6310, #D9A445) !important;--richclay-accent-ink:light-dark(#FDF8F0, #0B0C13) !important;--richclay-focus:light-dark(#8F6310, #D9A445) !important;--richclay-danger:light-dark(#A83A2C, #FF5566) !important;--richclay-radius:0px !important;--richclay-control-size:32px !important;--richclay-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog){font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:where(.richclay-float, .richclay-dialog):is(.richclay-toolbar, .richclay-float, .richclay-dialog){color:light-dark(#2B241B, #ECEAF2) !important;background:light-dark(#FFFCF6, #11131E) !important;border:1px solid light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-toolbar{gap:3px !important;margin:0 !important;padding:8px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important}\n.richclay-toolbar:is(.richclay-toolbar, .richclay-float, .richclay-dialog){gap:3px !important;padding:8px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button{min-width:32px !important;height:32px !important;padding:0 7px !important;gap:6px !important;border:2px solid !important;border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;border-radius:0 !important;background:light-dark(#F1E7D4, #22273E) !important;font:14px system-ui,-apple-system,\"Segoe UI\",sans-serif !important;cursor:pointer !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:is([aria-pressed=\"true\"], [aria-expanded=\"true\"]){background:light-dark(#E3D0B3, #28304D) !important;border-color:light-dark(#B89F7B, #1F2339) light-dark(#F0E1C9, #4D587A) light-dark(#F0E1C9, #4D587A) light-dark(#B89F7B, #1F2339) !important;box-shadow:none !important;color:light-dark(#2B241B, #ECEAF2) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button[aria-pressed=\"true\"] > svg{translate:1px 1px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:disabled{opacity:.45 !important;cursor:not-allowed !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:hover:not([aria-pressed=\"true\"], [aria-expanded=\"true\"], :disabled){border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;background:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-separator{align-self:center !important;height:22px !important;margin:0 5px !important;background:light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu{inset-block-start:38px !important;min-width:210px !important;padding:5px !important;border-radius:0 !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu-item{padding:8px 10px !important;border:0 !important;border-radius:0 !important;font:14px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu-item[aria-checked=\"true\"]{background:light-dark(#F4ECDF, #1A1D2C) !important;box-shadow:inset 2px 0 light-dark(#8F6310, #D9A445) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog){width:min(100%, 360px) !important;padding:14px 16px 12px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#FFFCF6, #11131E) !important;color:light-dark(#2B241B, #ECEAF2) !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog)::before{content:\"\" !important;position:absolute !important;left:calc(var(--richclay-dialog-arrow, 28px) - 6px) !important;top:-7px !important;width:12px !important;height:12px !important;background:light-dark(#FFFCF6, #11131E) !important;border-top:1px solid light-dark(#D8C8AF, #353B52) !important;border-left:1px solid light-dark(#D8C8AF, #353B52) !important;transform:rotate(45deg) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog)[data-richclay-side=\"above\"]::before{top:auto !important;bottom:-7px !important;border:0 !important;border-right:1px solid light-dark(#D8C8AF, #353B52) !important;border-bottom:1px solid light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-dialog-title{margin-bottom:2px !important;font:500 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;text-transform:uppercase !important;letter-spacing:.12em !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-field{gap:5px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-field > span{color:light-dark(#4A4033, #C9CDE0) !important;font-size:12px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-input{min-height:30px !important;padding:4px 8px !important;border:2px solid !important;border-color:light-dark(#B89F7B, #1F2339) light-dark(#F0E1C9, #4D587A) light-dark(#F0E1C9, #4D587A) light-dark(#B89F7B, #1F2339) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important;font:13px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-dialog-actions{margin-top:4px !important;padding-top:12px !important;border-top:1px solid light-dark(#E8DCC6, #262B42) !important;flex-wrap:wrap !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) :is(.richclay-primary, .richclay-secondary){min-height:30px !important;padding:4px 10px !important;border:2px solid !important;border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;border-radius:0 !important;background:light-dark(#F1E7D4, #22273E) !important;color:light-dark(#2B241B, #ECEAF2) !important;font:13px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-primary{background:light-dark(#2B241B, #ECEAF2) !important;color:light-dark(#FDF8F0, #0B0C13) !important;border-color:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) !important}\n.richclay-float:is(.richclay-toolbar, .richclay-float, .richclay-dialog){border-radius:0 !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n.richclay-float:is(.richclay-toolbar, .richclay-float, .richclay-dialog) > .richclay-toolbar{padding:5px !important}\n.richclay-toolbar{align-items:center !important;background:var(--richclay-surface-alt) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;color:var(--richclay-text) !important;display:flex !important;flex-wrap:wrap !important;gap:2px !important;margin-block:0 6px !important;padding:4px !important}\n.richclay-toolbar:has(+ .richclay-editor){margin-block-end:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}\n.richclay-button{align-items:center !important;appearance:none !important;background:transparent !important;border:1px solid transparent !important;border-radius:5px !important;color:currentColor !important;display:inline-flex !important;height:var(--richclay-control-size) !important;justify-content:center !important;margin:0 !important;min-width:var(--richclay-control-size) !important;padding:0 !important;position:relative !important}\n.richclay-button:hover,.richclay-button[aria-expanded=\"true\"],.richclay-menu-item:hover{background:var(--richclay-surface) !important;border-color:var(--richclay-border) !important}\n.richclay-button.is-active,.richclay-button[aria-pressed=\"true\"],.richclay-menu-item.is-active{background:rgb(0 0 0 / 0.13) !important;border-color:rgb(0 0 0 / 0.22) !important;color:var(--richclay-text) !important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 0.26) !important}\n.richclay-button:focus-visible,.richclay-menu-item:focus-visible,.richclay-input:focus-visible,.richclay-primary:focus-visible,.richclay-secondary:focus-visible{outline:3px solid var(--richclay-focus) !important;outline-offset:2px !important}\n.richclay-button:disabled{color:var(--richclay-muted) !important;cursor:not-allowed !important;opacity:0.55 !important}\n.richclay-separator{align-self:stretch !important;background:var(--richclay-border) !important;display:inline-block !important;margin:5px 4px !important;width:1px !important}\n.richclay-menu-wrap{display:inline-flex !important;position:relative !important}\n.richclay-menu{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;box-shadow:var(--richclay-shadow) !important;color:var(--richclay-text) !important;display:grid !important;gap:2px !important;inset-block-start:calc(100% + 4px) !important;inset-inline-start:0 !important;min-width:160px !important;padding:4px !important;position:absolute !important;z-index:1000 !important}\n.richclay-menu[hidden]{display:none !important}\n.richclay-menu-item{align-items:center !important;appearance:none !important;background:transparent !important;border:1px solid transparent !important;border-radius:4px !important;color:inherit !important;display:flex !important;font:inherit !important;gap:8px !important;min-height:32px !important;padding:5px 9px !important;text-align:start !important}\n.richclay-float{left:0 !important;position:fixed !important;top:0 !important;will-change:transform !important;z-index:99999 !important}\n.richclay-float .richclay-toolbar{box-shadow:var(--richclay-shadow) !important;margin-block:0 !important}\n.richclay-float-rail .richclay-toolbar{--richclay-control-size:28px !important;flex-direction:column !important;flex-wrap:nowrap !important}\n.richclay-float-rail .richclay-toolbar svg{height:15px !important;width:15px !important}\n.richclay-float-rail .richclay-separator{align-self:stretch !important;height:1px !important;margin:4px 5px !important;width:auto !important}\n.richclay-float-rail .richclay-menu{inset-block-start:0 !important;inset-inline-start:calc(100% + 4px) !important}\n.richclay-dialog{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;box-shadow:var(--richclay-shadow) !important;color:var(--richclay-text) !important;display:grid !important;gap:10px !important;box-sizing:border-box !important;width:min(420px, calc(100vw - 16px)) !important;z-index:99999 !important;padding:12px !important}\n.richclay-dialog-title{font-weight:650 !important}\n.richclay-field{display:grid !important;gap:4px !important}\n.richclay-field span{color:var(--richclay-muted) !important;font-size:0.875rem !important}\n.richclay-input{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:4px !important;color:var(--richclay-text) !important;font:inherit !important;min-height:36px !important;padding:6px 8px !important}\n.richclay-dialog-actions{display:flex !important;gap:8px !important;justify-content:flex-end !important}\n.richclay-dialog-actions [data-richclay-remove-link]{margin-inline-end:auto !important}\n.richclay-primary,.richclay-secondary{appearance:none !important;border:1px solid var(--richclay-border) !important;border-radius:4px !important;font:inherit !important;min-height:34px !important;padding:5px 10px !important}\n.richclay-primary{background:var(--richclay-accent) !important;border-color:var(--richclay-accent) !important;color:var(--richclay-accent-ink) !important}\n.richclay-secondary{background:var(--richclay-surface-alt) !important;color:var(--richclay-text) !important}\n.richclay-sr-only{border:0 !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}\n@media (forced-colors: active){\n.richclay-toolbar,.richclay-menu,.richclay-input{border-color:CanvasText !important}\n.richclay-dialog{border-color:CanvasText !important}\n.richclay-button.is-active,.richclay-button[aria-pressed=\"true\"],.richclay-menu-item.is-active,.richclay-primary{background:Highlight !important;color:HighlightText !important}\n.richclay-button:focus-visible,.richclay-menu-item:focus-visible,.richclay-input:focus-visible{outline-color:Highlight !important}\n}\n.richclay-toolbar[hidden]{display:none !important}\n.richclay-button[hidden]{display:none !important}\n.richclay-separator[hidden]{display:none !important}\n.richclay-menu-wrap[hidden]{display:none !important}\n.richclay-menu[hidden]{display:none !important}\n.richclay-menu-item[hidden]{display:none !important}\n.richclay-dialog[hidden]{display:none !important}\n.richclay-field[hidden]{display:none !important}\n.richclay-dialog-actions[hidden]{display:none !important}\n}";
+export const CSS = "@layer clay-skin{\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog),:is(.richclay-toolbar, .richclay-float, .richclay-dialog) *{--richclay-surface:light-dark(#FFFCF6, #11131E) !important;--richclay-surface-alt:light-dark(#F4ECDF, #1A1D2C) !important;--richclay-text:light-dark(#2B241B, #ECEAF2) !important;--richclay-muted:light-dark(#6B5942, #8A90AB) !important;--richclay-border:light-dark(#D8C8AF, #353B52) !important;--richclay-accent:light-dark(#8F6310, #D9A445) !important;--richclay-accent-ink:light-dark(#FDF8F0, #0B0C13) !important;--richclay-focus:light-dark(#8F6310, #D9A445) !important;--richclay-danger:light-dark(#A83A2C, #FF5566) !important;--richclay-radius:0px !important;--richclay-control-size:32px !important;--richclay-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog){font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:where(.richclay-float, .richclay-dialog):is(.richclay-toolbar, .richclay-float, .richclay-dialog){color:light-dark(#2B241B, #ECEAF2) !important;background:light-dark(#FFFCF6, #11131E) !important;border:1px solid light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-toolbar{gap:3px !important;margin:0 !important;padding:8px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important}\n.richclay-toolbar:is(.richclay-toolbar, .richclay-float, .richclay-dialog){gap:3px !important;padding:8px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button{min-width:32px !important;height:32px !important;padding:0 7px !important;gap:6px !important;border:2px solid !important;border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;border-radius:0 !important;background:light-dark(#F1E7D4, #22273E) !important;font:14px system-ui,-apple-system,\"Segoe UI\",sans-serif !important;cursor:pointer !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:is([aria-pressed=\"true\"], [aria-expanded=\"true\"]){background:light-dark(#E3D0B3, #28304D) !important;border-color:light-dark(#B89F7B, #1F2339) light-dark(#F0E1C9, #4D587A) light-dark(#F0E1C9, #4D587A) light-dark(#B89F7B, #1F2339) !important;box-shadow:none !important;color:light-dark(#2B241B, #ECEAF2) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button[aria-pressed=\"true\"] > svg{translate:1px 1px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:disabled{opacity:.45 !important;cursor:not-allowed !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-button:hover:not([aria-pressed=\"true\"], [aria-expanded=\"true\"], :disabled){border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;background:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-separator{align-self:center !important;height:22px !important;margin:0 5px !important;background:light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu{inset-block-start:38px !important;min-width:210px !important;padding:5px !important;border-radius:0 !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu-item{padding:8px 10px !important;border:0 !important;border-radius:0 !important;font:14px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-menu-item[aria-checked=\"true\"]{background:light-dark(#F4ECDF, #1A1D2C) !important;box-shadow:inset 2px 0 light-dark(#8F6310, #D9A445) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog){width:min(100%, 360px) !important;padding:14px 16px 12px !important;border:1px solid light-dark(#D8C8AF, #353B52) !important;border-radius:0 !important;background:light-dark(#FFFCF6, #11131E) !important;color:light-dark(#2B241B, #ECEAF2) !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog)::before{content:\"\" !important;position:absolute !important;left:calc(var(--richclay-dialog-arrow, 28px) - 6px) !important;top:-7px !important;width:12px !important;height:12px !important;background:light-dark(#FFFCF6, #11131E) !important;border-top:1px solid light-dark(#D8C8AF, #353B52) !important;border-left:1px solid light-dark(#D8C8AF, #353B52) !important;transform:rotate(45deg) !important}\n.richclay-dialog:is(.richclay-toolbar, .richclay-float, .richclay-dialog)[data-richclay-side=\"above\"]::before{top:auto !important;bottom:-7px !important;border:0 !important;border-right:1px solid light-dark(#D8C8AF, #353B52) !important;border-bottom:1px solid light-dark(#D8C8AF, #353B52) !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-dialog-title{margin-bottom:2px !important;font:500 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;text-transform:uppercase !important;letter-spacing:.12em !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-field{gap:5px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-field > span{color:light-dark(#4A4033, #C9CDE0) !important;font-size:12px !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-input{min-height:30px !important;padding:4px 8px !important;border:2px solid !important;border-color:light-dark(#B89F7B, #1F2339) light-dark(#F0E1C9, #4D587A) light-dark(#F0E1C9, #4D587A) light-dark(#B89F7B, #1F2339) !important;border-radius:0 !important;background:light-dark(#F4ECDF, #1A1D2C) !important;color:light-dark(#2B241B, #ECEAF2) !important;font:13px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-dialog-actions{margin-top:4px !important;padding-top:12px !important;border-top:1px solid light-dark(#E8DCC6, #262B42) !important;flex-wrap:wrap !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) :is(.richclay-primary, .richclay-secondary){min-height:30px !important;padding:4px 10px !important;border:2px solid !important;border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) !important;border-radius:0 !important;background:light-dark(#F1E7D4, #22273E) !important;color:light-dark(#2B241B, #ECEAF2) !important;font:13px system-ui,-apple-system,\"Segoe UI\",sans-serif !important}\n:is(.richclay-toolbar, .richclay-float, .richclay-dialog) .richclay-primary{background:light-dark(#2B241B, #ECEAF2) !important;color:light-dark(#FDF8F0, #0B0C13) !important;border-color:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) !important}\n.richclay-float:is(.richclay-toolbar, .richclay-float, .richclay-dialog){border-radius:0 !important;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35) !important}\n.richclay-float:is(.richclay-toolbar, .richclay-float, .richclay-dialog) > .richclay-toolbar{padding:5px !important}\n.richclay-toolbar{align-items:center !important;background:var(--richclay-surface-alt) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;color:var(--richclay-text) !important;display:flex !important;flex-wrap:wrap !important;gap:2px !important;margin-block:0 6px !important;padding:4px !important}\n.richclay-toolbar:has(+ .richclay-editor){margin-block-end:0 !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important}\n.richclay-button{align-items:center !important;appearance:none !important;background:transparent !important;border:1px solid transparent !important;border-radius:5px !important;color:currentColor !important;display:inline-flex !important;height:var(--richclay-control-size) !important;justify-content:center !important;margin:0 !important;min-width:var(--richclay-control-size) !important;padding:0 !important;position:relative !important}\n.richclay-button:hover,.richclay-button[aria-expanded=\"true\"],.richclay-menu-item:hover{background:var(--richclay-surface) !important;border-color:var(--richclay-border) !important}\n.richclay-button.is-active,.richclay-button[aria-pressed=\"true\"],.richclay-menu-item.is-active{background:rgb(0 0 0 / 0.13) !important;border-color:rgb(0 0 0 / 0.22) !important;color:var(--richclay-text) !important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 0.26) !important}\n.richclay-button:focus-visible,.richclay-menu-item:focus-visible,.richclay-input:focus-visible,.richclay-primary:focus-visible,.richclay-secondary:focus-visible{outline:3px solid var(--richclay-focus) !important;outline-offset:2px !important}\n.richclay-button:disabled{color:var(--richclay-muted) !important;cursor:not-allowed !important;opacity:0.55 !important}\n.richclay-separator{align-self:stretch !important;background:var(--richclay-border) !important;display:inline-block !important;margin:5px 4px !important;width:1px !important}\n.richclay-menu-wrap{display:inline-flex !important;position:relative !important}\n.richclay-menu{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;box-shadow:var(--richclay-shadow) !important;color:var(--richclay-text) !important;display:grid !important;gap:2px !important;inset-block-start:calc(100% + 4px) !important;inset-inline-start:0 !important;min-width:160px !important;padding:4px !important;position:absolute !important;z-index:1000 !important}\n.richclay-menu[hidden]{display:none !important}\n.richclay-menu-item{align-items:center !important;appearance:none !important;background:transparent !important;border:1px solid transparent !important;border-radius:4px !important;color:inherit !important;display:flex !important;font:inherit !important;gap:8px !important;min-height:32px !important;padding:5px 9px !important;text-align:start !important}\n.richclay-float{left:0 !important;position:fixed !important;top:0 !important;will-change:transform !important;z-index:99999 !important}\n.richclay-float .richclay-toolbar{box-shadow:var(--richclay-shadow) !important;margin-block:0 !important}\n.richclay-float-rail .richclay-toolbar{--richclay-control-size:28px !important;flex-direction:column !important;flex-wrap:nowrap !important}\n.richclay-float-rail .richclay-toolbar svg{height:15px !important;width:15px !important}\n.richclay-float-rail .richclay-separator{align-self:stretch !important;height:1px !important;margin:4px 5px !important;width:auto !important}\n.richclay-float-rail .richclay-menu{inset-block-start:0 !important;inset-inline-start:calc(100% + 4px) !important}\n.richclay-dialog{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:var(--richclay-radius) !important;box-shadow:var(--richclay-shadow) !important;color:var(--richclay-text) !important;display:grid !important;gap:10px !important;box-sizing:border-box !important;width:min(420px, calc(100vw - 16px)) !important;z-index:99999 !important;padding:12px !important}\n.richclay-dialog-title{font-weight:650 !important}\n.richclay-dialog.richclay-link-popover{align-items:center !important;display:flex !important;gap:6px !important;max-width:min(420px, calc(100vw - 16px)) !important;padding:6px !important;width:auto !important}\n.richclay-link-address{color:inherit !important;font-size:0.875rem !important;max-width:260px !important;overflow:hidden !important;padding:0 6px !important;text-overflow:ellipsis !important;white-space:nowrap !important}\n.richclay-link-popover .richclay-secondary{min-height:30px !important;padding:3px 9px !important}\n.richclay-field{display:grid !important;gap:4px !important}\n.richclay-field span{color:var(--richclay-muted) !important;font-size:0.875rem !important}\n.richclay-input{background:var(--richclay-surface) !important;border:1px solid var(--richclay-border) !important;border-radius:4px !important;color:var(--richclay-text) !important;font:inherit !important;min-height:36px !important;padding:6px 8px !important}\n.richclay-dialog-actions{display:flex !important;gap:8px !important;justify-content:flex-end !important}\n.richclay-dialog-actions [data-richclay-remove-link]{margin-inline-end:auto !important}\n.richclay-primary,.richclay-secondary{appearance:none !important;border:1px solid var(--richclay-border) !important;border-radius:4px !important;font:inherit !important;min-height:34px !important;padding:5px 10px !important}\n.richclay-primary{background:var(--richclay-accent) !important;border-color:var(--richclay-accent) !important;color:var(--richclay-accent-ink) !important}\n.richclay-secondary{background:var(--richclay-surface-alt) !important;color:var(--richclay-text) !important}\n.richclay-sr-only{border:0 !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}\n@media (forced-colors: active){\n.richclay-toolbar,.richclay-menu,.richclay-input{border-color:CanvasText !important}\n.richclay-dialog{border-color:CanvasText !important}\n.richclay-button.is-active,.richclay-button[aria-pressed=\"true\"],.richclay-menu-item.is-active,.richclay-primary{background:Highlight !important;color:HighlightText !important}\n.richclay-button:focus-visible,.richclay-menu-item:focus-visible,.richclay-input:focus-visible{outline-color:Highlight !important}\n}\n.richclay-toolbar[hidden]{display:none !important}\n.richclay-button[hidden]{display:none !important}\n.richclay-separator[hidden]{display:none !important}\n.richclay-menu-wrap[hidden]{display:none !important}\n.richclay-menu[hidden]{display:none !important}\n.richclay-menu-item[hidden]{display:none !important}\n.richclay-dialog[hidden]{display:none !important}\n.richclay-dialog.richclay-link-popover[hidden]{display:none !important}\n.richclay-field[hidden]{display:none !important}\n.richclay-dialog-actions[hidden]{display:none !important}\n}";

package/src/ui/toast-lazy.js

@@ -1,11 +1,20 @@
 // 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"));
+// A download that failed (offline) is tried again by the next call, not remembered.
+const load = () => (loading ??= import("./toast.js").catch((error) => {
+  loading = null;
+  throw error;
+}));
 const later = (name) => (...args) => { load().then((m) => (name ? m[name] : m.default)(...args)); };
 
 export default later(null);
 export const toastPersistent = later("toastPersistent");
+// Fetches the stack ahead of the first toast, for a toast that may have to show offline.
+export const preload = () => { load().catch(() => {}); };
 // 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); };
+// that tears down without having shown one keeps it unloaded. clay-ui shares the same
+// stack, so a toast it put up (a failed save, say) is one this can take down.
+export const dismissPersistent = (...args) => {
+  if (loading || typeof window.clay?.toastPersistent === "function") later("dismissPersistent")(...args);
+};

package/src/ui/toast.js

@@ -19,6 +19,12 @@ const CLOSE_ICON = GLYPHS.toastClose;
 
 const HIDDEN = ["opacity:0", "transform:translateX(24px)"];
 
+// The detail line and the action row start where the title's text does: after the 16px
+// glyph and the 8px gap beside it. A quiet small button's label sits 10px inside the button
+// (a 2px border and 8px of padding), so its row starts that much earlier.
+const TEXT_INSET = 24;
+const BUTTON_LABEL_INSET = 10;
+
 function motion() {
   const reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
   return reduced ? "none" : "opacity .5s ease-in-out, transform .5s ease-in-out";
@@ -64,12 +70,12 @@ function build(message, type, { detail = "", actions = [] } = {}) {
   // 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", `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));
   }
   if (actions.length) {
-    const row = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px"]);
+    const row = bevelBox("div", ["display:flex", "flex-wrap:wrap", "gap:8px", `padding-inline-start:${TEXT_INSET - BUTTON_LABEL_INSET}px`]);
     for (const { label, onClick } of actions) {
-      row.append(bevelButton(label, { small: true, variant: "quiet", onClick }));
+      row.append(bevelButton(label, { small: true, variant: "quiet", onClick, extra: ["padding:4px 8px"] }));
     }
     body.append(row);
   }