@panphora/clayjs 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +5 -4
  2. package/dist/clay.standalone.js +8715 -5949
  3. package/entries/clay-data.js +8 -6
  4. package/package.json +1 -1
  5. package/src/core/conflict-notice.js +2 -4
  6. package/src/core/page-data.js +321 -0
  7. package/src/core/save-core.js +35 -2
  8. package/src/core/save.js +123 -13
  9. package/src/core/unsaved-warning.js +43 -20
  10. package/src/lib/content-dom.js +3 -3
  11. package/src/lib/dirty-gate.js +28 -1
  12. package/src/loader-logic.js +2 -0
  13. package/src/loader.js +13 -2
  14. package/src/plugins/wire.js +4 -4
  15. package/src/sync/conflict-footprints.js +41 -0
  16. package/src/sync/conflict-revert.js +3 -0
  17. package/src/sync/conflicts.js +28 -1
  18. package/src/sync/live-sync.js +5 -3
  19. package/src/ui/bevel-controls.js +8 -2
  20. package/src/ui/bevel-dialog.js +2 -4
  21. package/src/ui/bevel.js +22 -2
  22. package/src/ui/dialogs.js +1 -1
  23. package/src/ui/skins/cms.js +1 -1
  24. package/src/ui/skins/quickcrop.js +1 -1
  25. package/src/ui/skins/richclay.js +2 -2
  26. package/src/ui/toast.js +7 -15
  27. package/src/vendor/hyper-morph.vendor.js +4 -4
  28. package/src/vendor/hypercms.vendor.js +12 -12
  29. package/src/vendor/quickcrop.vendor.js +1 -1
  30. package/src/vendor/richclay.vendor.js +27 -19
package/src/ui/bevel.js CHANGED
@@ -1,5 +1,5 @@
1
- // GENERATED from bevel/bevel.css by scripts/build-bevel-subset.mjs. Run `npm run build:bevel`.
2
- export const SOURCE_SHA256 = "4532d98386c76070626c0cccea91f512dafd0314c0c846dbf1eea9372ddde541";
1
+ // GENERATED from bevel/bevel.css and bevel/icons by scripts/build-bevel-subset.mjs. Run `npm run build:bevel`.
2
+ export const SOURCE_SHA256 = "775cf730e10d88d8b13440ba83e039a907ffb70bffe88d13c3bee8681af2e131";
3
3
  export const FONT_SANS = "system-ui,-apple-system,\"Segoe UI\",sans-serif";
4
4
  export const FONT_MONO = "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace";
5
5
  export const SHADOW = "0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35)";
@@ -33,6 +33,14 @@ export const TOKENS = {
33
33
  "ox-edge-lo": "light-dark(#451510, #3E1410)",
34
34
  "ox-ink": "light-dark(#FBEEE8, #FBEEE8)",
35
35
  };
36
+ export const GLYPHS = {
37
+ "toastSuccess": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m5 12 4 4L19 6\"/></svg>",
38
+ "toastWarning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\"/></svg>",
39
+ "toastInfo": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M12 7.75v.85M10.3 11.15H12v5.1M10.3 16.25h3.4\"/></svg>",
40
+ "toastClose": "<svg width=\"14\" height=\"14\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/></svg>",
41
+ "dialogClose": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z\"/></svg>",
42
+ "conflictEye": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z\"/></svg>",
43
+ };
36
44
  export const RULES = {
37
45
  "button": [
38
46
  "display:inline-flex",
@@ -244,4 +252,16 @@ export const MEDIA = {
244
252
  "forcedColors": [
245
253
  "border:1px solid ButtonText",
246
254
  ],
255
+ "coarseInput": [
256
+ "font-size:16px",
257
+ "block-size:40px",
258
+ "min-block-size:40px",
259
+ "padding-inline:12px",
260
+ ],
261
+ "coarseButton": [
262
+ "block-size:40px",
263
+ "min-block-size:40px",
264
+ "padding-inline:14px",
265
+ "font-size:15px",
266
+ ],
247
267
  };
package/src/ui/dialogs.js CHANGED
@@ -9,7 +9,7 @@ import { TOKENS, FONT_SANS, FONT_MONO } from "./bevel.js";
9
9
  // are markup by design, and callers pass elements through them. Only the frame around
10
10
  // it is ClayJS's to style. The prompt is the dialog's title, as in the dashboard.
11
11
  function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "", yesLabel = "OK") {
12
- const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px"]);
12
+ const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px", `font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`]);
13
13
  let input = null;
14
14
  if (includeInput) {
15
15
  input = bevelInput("input", { rules: ["display:block", "width:100%", "margin:0"] });
package/src/ui/skins/cms.js CHANGED
@@ -1,4 +1,4 @@
1
1
  // GENERATED from src/vendor/hypercms.vendor.js by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
2
- export const SOURCE_SHA256 = "c7a060a8458cc2ac182145f9415a623bf3fdfe5d5cd2b1724ad7d89959266862";
2
+ export const SOURCE_SHA256 = "a1757cdc7333f40185cb497dd0a7db863289aac55e96c9d9f24239d56ceeacc2";
3
3
  export const ROOTS = [".hcms-shell"];
4
4
  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 CHANGED
@@ -1,4 +1,4 @@
1
1
  // GENERATED from src/vendor/quickcrop.vendor.js and bevel/integrations/quickcrop.css by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
2
- export const SOURCE_SHA256 = "49c5be87a001dd2e8fef962ac8c0c933e079fb4be98ecf2e4e1ec850ed922c5a";
2
+ export const SOURCE_SHA256 = "eadbbf799e0954f11ff553c5a37a759ceb42c6bb1698a0e46b1f273458acf8ed";
3
3
  export const ROOTS = [".qc-stage",".qc-backdrop"];
4
4
  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 CHANGED
@@ -1,4 +1,4 @@
1
1
  // GENERATED from src/vendor/richclay.vendor.js and bevel/integrations/richclay.css by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
2
- export const SOURCE_SHA256 = "91b0339a9c534d4aa94d5b7179e5e9174fa61383f57fa2406cdac56b3719581c";
2
+ export const SOURCE_SHA256 = "69e3bc73ddf6654bb6245485dbad2a54956b8abd621889807b2de80875927982";
3
3
  export const ROOTS = [".richclay-toolbar",".richclay-float",".richclay-dialog"];
4
- 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{appearance:none !important;background:transparent !important;border:1px solid transparent !important;border-radius:4px !important;color:inherit !important;font:inherit !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-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-dialog[hidden]{display:none !important}\n.richclay-field[hidden]{display:none !important}\n.richclay-dialog-actions[hidden]{display:none !important}\n}";
4
+ 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}";
package/src/ui/toast.js CHANGED
@@ -2,27 +2,19 @@
2
2
  // ❗️ don't use too much text!
3
3
  //
4
4
  // The Hyperclay dashboard's toast (Bevel's React toast with the dashboard's overrides),
5
- // drawn inline: a 3px tone edge, a 16px Phosphor glyph, 13.5px semibold text, a quiet close.
5
+ // drawn inline: a 3px tone edge, a 16px Bevel glyph, 13.5px semibold text, a quiet close.
6
6
  import { set } from "../lib/hostile-css.js";
7
7
  import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
8
- import { TOKENS, RULES } from "./bevel.js";
9
-
10
- const icon = (d) =>
11
- `<svg viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="${d}"/></svg>`;
12
-
13
- const CHECK = "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z";
14
- const WARNING = "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z";
15
- const INFO = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z";
16
- const X = "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z";
8
+ import { TOKENS, RULES, GLYPHS } from "./bevel.js";
17
9
 
18
10
  const TONES = {
19
- success: { edge: TOKENS.teal, icon: icon(CHECK) },
20
- error: { edge: TOKENS.ox, icon: icon(WARNING) },
21
- warning: { edge: TOKENS.brass, icon: icon(WARNING) },
22
- info: { edge: TOKENS.brass, icon: icon(INFO) },
11
+ success: { edge: TOKENS.teal, icon: GLYPHS.toastSuccess },
12
+ error: { edge: TOKENS.ox, icon: GLYPHS.toastWarning },
13
+ warning: { edge: TOKENS.brass, icon: GLYPHS.toastWarning },
14
+ info: { edge: TOKENS.brass, icon: GLYPHS.toastInfo },
23
15
  };
24
16
 
25
- const CLOSE_ICON = icon(X);
17
+ const CLOSE_ICON = GLYPHS.toastClose;
26
18
 
27
19
  const HIDDEN = ["opacity:0", "transform:translateX(24px)"];
28
20