@panphora/clayjs 1.21.0 → 1.23.0

package/src/plugins/visitor-drafts/store.js

@@ -3,6 +3,7 @@ import { draftSlot, setDraftStoreFailed } from "../../core/draft-mode.js";
 
 export const KEY_PREFIX = "clay:visitor-drafts:";
 export const RECORD_VERSION = 1;
+const LINEAGE = 32;
 
 // The document a pathname names, spelled the way the hosts resolve it: the path up to
 // and including the first segment that ends in .html or .htmlclay (anything after it is
@@ -228,6 +229,45 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   let base = null;
   let unparked = null;
   let stopped = false;
+  // This tab's own last write: its record id, its ancestry, and the data of the record it
+  // was built on. A read in one tab can miss a write another tab made a few milliseconds
+  // earlier, so a record whose ancestry lacks this write never saw it.
+  let own = null;
+
+  const newId = () => Math.random().toString(36).slice(2, 10) + Math.random().toString(36).slice(2, 6);
+
+  // A record's ancestry is the ids it descends from, nearest first, ending at the empty
+  // slot it grew from, or at a record from a runtime that kept no ids, named by its bytes.
+  // Start over gives the empty slot a new id, so a write from before it never reads as
+  // built on the same slot as one after it.
+  const resetKey = key + ":reset";
+  function rootId() {
+    try { return "root:" + (storage?.getItem(resetKey) ?? ""); } catch { return "root:"; }
+  }
+
+  function legacyId(raw) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < raw.length; i++) hash = Math.imul(hash ^ raw.charCodeAt(i), 0x01000193);
+    return "legacy:" + (hash >>> 0).toString(36) + "." + raw.length.toString(36);
+  }
+
+  function lineageOf(record, raw) {
+    if (!record) return null;
+    if (!record.id) return [legacyId(raw)];
+    return Array.isArray(record.ancestry) ? [record.id, ...record.ancestry].slice(0, LINEAGE) : null;
+  }
+
+  // A record that descends from this tab's own last write's parent but not from that write
+  // dropped it unseen, however many writes since. Merged from this tab's write, its missing
+  // rows would read as deletions; merged from that parent, both sides' work is kept. A full
+  // ancestry without this write may have seen it long ago or never, and keeping this tab's
+  // rows is the side that loses nothing. With no ancestry the record is taken as it is.
+  function forked(record) {
+    if (!own || own.raw !== lastRaw || !own.ancestry || !record?.id || record.id === own.id) return false;
+    const seen = record.ancestry;
+    if (!Array.isArray(seen) || seen.includes(own.id)) return false;
+    return seen.includes(own.ancestry[0]) || seen.length >= LINEAGE;
+  }
 
   function getRaw() {
     try {
@@ -386,15 +426,15 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   function merge(mine) {
     const current = getRaw();
     const record = current == null ? null : parse(current);
-    if (!record) return { data: mine, stored: null };
+    if (!record) return { data: mine, stored: null, ancestry: [rootId()], parentData: base };
     let data = mine;
     if (current !== lastRaw) {
-      const merged = merge3(base, mine, record.data);
+      const merged = merge3(forked(record) ? own.parentData : base, mine, record.data);
       if (merged.conflict) keepConflict(current);
       data = merged.value;
     }
     data = complete(data, record.data);
-    return { data, stored: same(data, record.data) ? current : null };
+    return { data, stored: same(data, record.data) ? current : null, ancestry: lineageOf(record, current), parentData: record.data };
   }
 
   function adopt(data) {
@@ -418,8 +458,9 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
       doc.dispatchEvent(new CustomEvent("clay:drafts-saved", { detail: { data: mine, unchanged: true } }));
       return mine;
     }
-    const { data, stored } = merge(mine);
-    const raw = stored ?? JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), data });
+    const { data, stored, ancestry, parentData } = merge(mine);
+    const id = newId();
+    const raw = stored ?? JSON.stringify({ v: RECORD_VERSION, savedAt: now().toISOString(), id, ancestry, data });
     if (!stored) {
       try {
         if (!storage) throw new Error("no storage");
@@ -427,6 +468,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
       } catch (error) {
         throw storageFailure(doc, error);
       }
+      own = { id, ancestry, parentData, raw };
     }
     const taken = Object.keys(mine).filter((name) => !fitsInto(mine[name], data[name]));
     if (taken.length) adopt(Object.fromEntries(taken.map((name) => [name, data[name]])));
@@ -451,8 +493,18 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
   function adoptExternal() {
     if (stopped) return false;
     const raw = getRaw();
+    // Another tab pressed Start over: this tab follows it, or its next save would
+    // write the discarded draft back.
+    if (raw == null && lastRaw != null && !changed()) {
+      stopped = true;
+      window.location.reload();
+      return true;
+    }
     if (raw == null || raw === lastRaw || changed()) return false;
     const record = parse(raw);
+    // That tab never saw this tab's last write: this tab writes both back instead of
+    // adopting a record that dropped its own work.
+    if (forked(record) && typeof window.clay?.getHTML === "function") return writeLive();
     const adopted = record && adopt(record.data);
     if (!adopted) return false;
     lastRaw = raw;
@@ -465,6 +517,7 @@ export function createStore({ doc = document, storage = safeStorage(), now = ()
     unparked = null;
     setDraftStoreFailed(false);
     try { storage.removeItem(key); } catch {}
+    try { storage.setItem(resetKey, newId()); } catch {}
   }
 
   return { slot, key, rules, read, restore, write, writeLive, flush, changed, adoptExternal, park, clear, snapshot };

package/src/plugins/visitor-drafts.js

@@ -98,5 +98,6 @@ export const visitorDrafts = store ? {
   editOriginal,
   backToDraft,
   downloadUrl: () => downloadLink,
+  download: () => ready.then((prompt) => { store.flush(); return prompt?.download(); }),
   source,
 } : inertVisitorDrafts();

package/src/plugins/visitor-menu.js

@@ -0,0 +1,13 @@
+import { isDraftMode } from "../core/is-edit-mode.js";
+import onDomReady from "../lib/dom-ready.js";
+import { paintLook } from "./menu/looks.js";
+
+if (isDraftMode) {
+  paintLook();
+  document.addEventListener("clay:drafts-restored", () => paintLook());
+  onDomReady(() => {
+    import("./menu/visitor.js")
+      .then((m) => m.start())
+      .catch((error) => console.warn("visitor-menu: the menu did not load", error));
+  });
+}

package/src/sync/live-sync.js

@@ -43,7 +43,7 @@ import { NO_DIRTY_SELECTOR, LIVE_SELECTOR } from "../lib/region-policy.js";
 import { EXTENSION_NODE_SELECTOR, EXTENSION_ATTR_PATTERN } from '../lib/extension-noise.js';
 import { isEditMode, modeState } from "../core/is-edit-mode.js";
 import { attributeMerge } from "./merge-declarations.js";
-import { serializeForSync, copyCaptureClone, captureForComparisonAndDirty, canonicalizeReceived, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
+import { noscriptsAsText, serializeForSync, copyCaptureClone, captureForComparisonAndDirty, canonicalizeReceived, captureSnapshot, originalSnapshotNode, captureForMerge, captureForSaveAndComparison } from '../core/snapshot.js';
 import { mergeIgnoresAttr, mergeVetoesAttr } from '../lib/root-attrs.js';
 import { autosaveActive } from '../lib/autosave-state.js';
 import { hostSupports } from '../core/host-meta.js';
@@ -186,6 +186,7 @@ function scratchpadsEmptied(input) {
   if (input == null) return input;
   const doc = typeof input === 'string' ? new DOMParser().parseFromString(input, 'text/html') : input;
   canonicalizeReceived(doc);
+  noscriptsAsText(doc);
   emptyScratchpads(doc);
   return doc;
 }

package/src/sync/page-relay.js

@@ -1,5 +1,5 @@
 import { importMap } from "../vendor/hyper-morph-identity.vendor.js";
-import { serializeForSync } from "../core/snapshot.js";
+import { noscriptsAsText, serializeForSync } from "../core/snapshot.js";
 
 const PAGE = /^page(\.[0-9]+)?$/;
 const tags = (root) => [...root.querySelectorAll('script[merge][clay~="live"]')]
@@ -9,7 +9,7 @@ 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;
-  const parse = (html) => new DOMParser().parseFromString(html, "text/html");
+  const parse = (html) => noscriptsAsText(new DOMParser().parseFromString(html, "text/html"));
   const outgoing = parse(pending.html);
   const article = outgoing.querySelector("article[data-page]");
   if (!article) return pending;

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 = "775cf730e10d88d8b13440ba83e039a907ffb70bffe88d13c3bee8681af2e131";
+export const SOURCE_SHA256 = "0b54b9f2165dcd7d79a4b9749fe4ea5666f14b6f83461d952f5f6c034d224ab9";
 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/page-colour.js

@@ -202,11 +202,11 @@ export const BEVEL_SURFACE = { light: [0xFF, 0xFC, 0xF6], dark: [0x11, 0x13, 0x1
 /**
  * The look for UI drawn over `rect`: { scheme, surface }. `scheme` is the detected
  * one, or pageScheme() when the colour is unknown. `surface` is Bevel's surface mixed
- * up to 35% toward a confidently detected colour, never so far that the muted ink
- * drops below 4.5:1, or null to keep Bevel's own fill. A page the detector cannot
+ * up to `lean` (35% by default) toward a confidently detected colour, never so far that
+ * the muted ink drops below 4.5:1, or null to keep Bevel's own fill. A page the detector cannot
  * read is unknown, never a reason for the UI drawing over it to fail.
  */
-export function uiLook(rect, base = BEVEL_SURFACE) {
+export function uiLook(rect, base = BEVEL_SURFACE, lean = 0.35) {
   let found = null;
   try {
     found = pageColour(rect);
@@ -215,7 +215,7 @@ export function uiLook(rect, base = BEVEL_SURFACE) {
   const { scheme } = found;
   const own = base[scheme], muted = (scheme === 'dark' ? base.mutedDark : base.mutedLight).map((v) => v / 255);
   let surface = null;
-  for (let w = 0.35; found.confidence >= 0.75 && !surface && w > 0.01; w -= 0.05) {
+  for (let w = lean; found.confidence >= 0.75 && !surface && w > 0.01; w -= 0.05) {
     const mix = own.map((v, k) => Math.round(v + (found.colour[k] - v) * w));
     if (contrast(mix.map((v) => v / 255), muted) >= 4.5) surface = `rgb(${mix.join(' ')})`;
   }
@@ -246,8 +246,8 @@ export function paintLook(el, { rect = el.getBoundingClientRect(), background =
  * The same look for a surface styled by a stylesheet of Bevel variables (the page
  * menu): `color-scheme`, and `--bevel-surface` when tinted, set inline on `el`.
  */
-export function lookAt(el, rect, base) {
-  const look = uiLook(rect, base);
+export function lookAt(el, rect, base, lean) {
+  const look = uiLook(rect, base, lean);
   el.style.setProperty('color-scheme', look.scheme, 'important');
   if (look.surface) el.style.setProperty('--bevel-surface', look.surface, 'important');
   else el.style.removeProperty('--bevel-surface');
@@ -257,13 +257,13 @@ export function lookAt(el, rect, base) {
 // A fixed surface the page moves under: read again once scrolling or resizing settles,
 // when html or body change attributes (a theme toggle), when the reader's scheme
 // changes, when it moves to another corner and when it is shown again. While it has
-// no size (hidden) it keeps its last look.
-export function followLook(root, target, base) {
+// no size (hidden) it keeps its last look. Returns a function that stops following.
+export function followLook(root, target, base, lean) {
   let timer = 0;
   const refresh = () => {
     timer = 0;
     const rect = target.getBoundingClientRect();
-    if (!document.hidden && root.isConnected && rect.width && rect.height) lookAt(root, rect, base);
+    if (!document.hidden && root.isConnected && rect.width && rect.height) lookAt(root, rect, base, lean);
   };
   const soon = () => {
     clearTimeout(timer);
@@ -278,4 +278,12 @@ export function followLook(root, target, base) {
   watch.observe(document.body, { attributes: true });
   watch.observe(root, { attributes: true, attributeFilter: ['data-corner', 'hidden'] });
   refresh();
+  return () => {
+    clearTimeout(timer);
+    window.removeEventListener('scroll', soon, { capture: true });
+    window.removeEventListener('resize', soon);
+    document.removeEventListener('visibilitychange', soon);
+    window.matchMedia?.('(prefers-color-scheme: dark)').removeEventListener?.('change', soon);
+    watch.disconnect();
+  };
 }

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 = "f4a8bf46fe5d4f1037810077d8068d59cd996896c59977abc2d2baa6ad3f0abd";
+export const SOURCE_SHA256 = "34ad22f65c67a35a9e8062b83bd00395ecd5620badabfa012598840bdd980f32";
 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 = "eadbbf799e0954f11ff553c5a37a759ceb42c6bb1698a0e46b1f273458acf8ed";
+export const SOURCE_SHA256 = "c7f2d2e24de702a5932c49e16c4599f7e4a2c60f05e80ea0fa17b635ccd3b39e";
 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 = "69e3bc73ddf6654bb6245485dbad2a54956b8abd621889807b2de80875927982";
+export const SOURCE_SHA256 = "1989b03f549880bea355a97b4946ee3a6922e8f3c9612406ba18e440878def3a";
 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}";