@panphora/clayjs 1.5.3 → 1.6.0

package/src/ui/skins/richclay.js

@@ -0,0 +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 = "91b0339a9c534d4aa94d5b7179e5e9174fa61383f57fa2406cdac56b3719581c";
+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{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}";

package/src/ui/toast.js

@@ -1,434 +1,149 @@
 // a nice, simple alert
 // ❗️ don't use too much text!
-
-// Default modern icons (normalized to 48x48 viewBox)
-const defaultIcons = {
-  success: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.9404 23.9475L21.9099 31.224L35.1906 15.9045M3 4.5H44.9804V44.309H3V4.5Z" stroke="#33D131" stroke-width="4.3"/></svg>`,
-  error: `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.7383 14.4045L14 33.1429M32.7451 33.1429L14.0068 14.4046M3.01 4H44.99V43.809H3.01V4Z" stroke="#FF4450" stroke-width="4"/></svg>`,
-  warning: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke="#F5A623" stroke-width="2" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>`,
-  info: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke="#4A90D9" stroke-width="2" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>`
-};
-
-// Hyperclay icons
-export const hyperclayIcons = {
-  success: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 1h-5v3.5h-2.5V8h-2v3.5H20V15h-2.5v3.5h-2V22H13v3.5H9V22H7v-3.5H6V15H1v3.5h1V22h2v3.5h1.5V29H7v3.5h5V29h3.5v-3.5H18V22h2.5v-3.5h2V15H25v-3.5h2.5V8h2V4.5H32V1Z" fill="#76C824"/></svg>`,
-  error: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 1h-5v3.5h-3.5V8H21v3.5h-3.5V15h-2v-3.5H12V8H8.5V4.5H5V1H0v3.5h3.5V8H7v3.5h3.5V15H14v3.5h-3.5V22H7v3.5H3.5V29H0v3.5h5V29h3.5v-3.5H12V22h3.5v-3.5h2V22H21v3.5h3.5V29H28v3.5h5V29h-3.5v-3.5H26V22h-3.5v-3.5H19V15h3.5v-3.5H26V8h3.5V4.5H33V1Z" fill="#DD304F"/></svg>`,
-  warning: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 1h-3v3h-2v3h-2v3H9v3H7v3H5v3H3v3H1v6h31v-6h-2v-3h-2v-3h-2v-3h-2v-3h-2V7h-2V4h-2V1zm-2 8h1v10h-1V9zm0 13h1v2h-1v-2z" fill="#F5A623"/></svg>`,
-  info: `<svg viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1v3H9v3H6v3H3v6h3v3h3v3h3v3h9v-3h3v-3h3v-3h3v-6h-3V7h-3V4h-3V1H12zm4 7h1v2h-1V8zm0 5h1v9h-1v-9z" fill="#4A90D9"/></svg>`
-};
-
-// Default templates
-const defaultTemplates = {
-  toast: {
-    success: `
-      <div class="toast hide success noise-texture">
-        <div class="toast-icon">{icon}</div>
-        <div class="toast-message">{message}</div>
-      </div>
-    `,
-    error: `
-      <div class="toast hide error noise-texture">
-        <div class="toast-icon">{icon}</div>
-        <div class="toast-message">{message}</div>
-      </div>
-    `,
-    warning: `
-      <div class="toast hide warning noise-texture">
-        <div class="toast-icon">{icon}</div>
-        <div class="toast-message">{message}</div>
-      </div>
-    `,
-    info: `
-      <div class="toast hide info noise-texture">
-        <div class="toast-icon">{icon}</div>
-        <div class="toast-message">{message}</div>
-      </div>
-    `
-  }
+//
+// The Hyperclay dashboard's toast (Bevel's React toast with the dashboard's overrides),
+// drawn inline: a 3px tone edge, a 16px Phosphor glyph, 13.5px semibold text, a quiet close.
+import { set } from "../lib/hostile-css.js";
+import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
+import { TOKENS, RULES } from "./bevel.js";
+
+const icon = (d) =>
+  `<svg viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="${d}"/></svg>`;
+
+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";
+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";
+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";
+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";
+
+const TONES = {
+  success: { edge: TOKENS.teal, icon: icon(CHECK) },
+  error: { edge: TOKENS.ox, icon: icon(WARNING) },
+  warning: { edge: TOKENS.brass, icon: icon(WARNING) },
+  info: { edge: TOKENS.brass, icon: icon(INFO) },
 };
 
-// Hyperclay templates
-export const hyperclayTemplates = {
-  toast: {
-    success: `
-      <div class="toast hide success">
-        {icon}
-        <span class="message">{message}</span>
-      </div>
-    `,
-    error: `
-      <div class="toast hide error">
-        {icon}
-        <span class="message">{message}</span>
-      </div>
-    `,
-    warning: `
-      <div class="toast hide warning">
-        {icon}
-        <span class="message">{message}</span>
-      </div>
-    `,
-    info: `
-      <div class="toast hide info">
-        {icon}
-        <span class="message">{message}</span>
-      </div>
-    `
-  }
-};
-
-// Modern styles (scoped by data-toast-theme="modern")
-const modernStyles = `
-  [data-toast-theme="modern"].toast-container {
-    z-index: 9999;
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-    gap: 18px;
-  }
-
-  [data-toast-theme="modern"] .toast {
-    position: relative;
-    right: 0;
-    cursor: pointer;
-    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px 24px 16px 16px;
-    font-size: var(--hyperclay-toast-font-size, 16px);
-    font-family: var(--hyperclay-toast-font-family, monospace);
-    font-weight: bold;
-    color: white;
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  [data-toast-theme="modern"] .toast.hide {
-    right: -400px;
-    opacity: 0;
-  }
-
-  [data-toast-theme="modern"] .toast.success {
-    border-color: #358234;
-    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #142419 0%, #1D3927 100%);
-  }
-
-  [data-toast-theme="modern"] .toast.error {
-    border-color: #992930;
-    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #240A13 0%, #481826 100%);
-  }
-
-  [data-toast-theme="modern"] .toast.warning {
-    border-color: #B8860B;
-    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #2A2010 0%, #3D3018 100%);
-  }
-
-  [data-toast-theme="modern"] .toast.info {
-    border-color: #2E6B9E;
-    background: radial-gradient(85.86% 68.42% at 50% 68.42%, #0A1A24 0%, #162D3D 100%);
-  }
-
-  [data-toast-theme="modern"] .toast-icon {
-    position: relative;
-    top: -1px;
-  }
+const CLOSE_ICON = icon(X);
 
-  [data-toast-theme="modern"] .toast-icon svg {
-    display: block;
-    width: 22px;
-    height: 22px;
-  }
-
-  [data-toast-theme="modern"] .toast.info .toast-icon svg {
-    width: 24px;
-    height: 24px;
-  }
+const HIDDEN = ["opacity:0", "transform:translateX(24px)"];
 
-  [data-toast-theme="modern"] .toast-message {
-    position: relative;
-    top: -1px;
-  }
-
-  [data-toast-theme="modern"] .noise-texture {
-    position: relative;
-  }
-
-  [data-toast-theme="modern"] .noise-texture::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.12;
-    pointer-events: none;
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
-    background-repeat: repeat;
-  }
-`;
-
-// Hyperclay styles (scoped by data-toast-theme="hyperclay")
-export const hyperclayStyles = `
-  [data-toast-theme="hyperclay"].toast-container {
-    z-index: 9999;
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-  }
-
-  [data-toast-theme="hyperclay"].toast-container > * + * {
-    margin-top: 18px;
-  }
-
-  [data-toast-theme="hyperclay"] .toast {
-    position: relative;
-    right: 0;
-    display: flex;
-    align-items: center;
-    padding: 10px 19px 11px 17px;
-    cursor: pointer;
-    color: rgba(255,255,255,.8);
-    background-color: #0B0C12;
-    border: 2px dashed rgba(255,255,255,.6);
-    transition: right 0.5s ease-in-out;
-    font-size: var(--hyperclay-toast-font-size, inherit);
-    font-family: var(--hyperclay-toast-font-family, inherit);
-  }
-
-  [data-toast-theme="hyperclay"] .toast svg {
-    position: relative;
-    top: -1px;
-    width: 17px;
-    height: 17px;
-    margin-right: 13px;
-  }
-
-  [data-toast-theme="hyperclay"] .toast.hide {
-    right: -300px;
-  }
-
-  [data-toast-theme="hyperclay"] .toast.success {
-    color: #76C824;
-    border: 2px dashed #589E11;
-  }
-
-  [data-toast-theme="hyperclay"] .toast.error {
-    color: #DD304F;
-    border: 2px dashed #CD2140;
-  }
-
-  [data-toast-theme="hyperclay"] .toast.warning {
-    color: #F5A623;
-    border: 2px dashed #D4900E;
-  }
-
-  [data-toast-theme="hyperclay"] .toast.info {
-    color: #4A90D9;
-    border: 2px dashed #3A7BBF;
-  }
-`;
-
-// Global toast configuration (can be overridden by toast-hyperclay module)
-let toastConfig = {
-  styles: modernStyles,
-  templates: defaultTemplates,
-  icons: defaultIcons,
-  theme: 'modern'
-};
-
-// Allow other modules (like toast-hyperclay) to override default toast styling
-export function setToastTheme(config) {
-  Object.assign(toastConfig, config);
+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";
 }
 
-// Helper function to inject styles for a theme (additive, not replacing)
-export function injectToastStyles(styles, theme) {
-  if (document.querySelector(`style.toast-styles-${theme}`)) return;
-
-  const styleSheet = document.createElement('style');
-  styleSheet.className = `toast-styles-${theme}`;
-  styleSheet.setAttribute('clay', 'no-save no-snapshot');
-  styleSheet.textContent = styles;
-  document.head.appendChild(styleSheet);
+// Looked up on every call, never cached: a live-sync morph or a caller can empty the
+// body, and a detached stack would swallow every toast after it.
+function stack() {
+  const existing = document.querySelector("[data-clay-toasts]");
+  if (existing) return existing;
+  const box = bevelBox("div", [
+    "position:fixed", "top:18px", "right:18px", "z-index:9999",
+    "display:flex", "flex-direction:column", "align-items:flex-end", "gap:10px",
+    "width:min(330px, calc(100vw - 36px))", "pointer-events:none",
+  ]);
+  box.setAttribute("data-clay-toasts", "");
+  box.setAttribute("aria-live", "polite");
+  document.body.append(box);
+  return box;
 }
 
-// Core toast function (used by both toast and toastHyperclay)
-export function toastCore(message, messageType = "success", config = {}) {
-  const templates = config.templates || defaultTemplates;
-  const icons = config.icons || defaultIcons;
-  const theme = config.theme || 'modern';
-
-  // Get or create container for this theme
-  let toastContainer = document.querySelector(`.toast-container[data-toast-theme="${theme}"]`);
-  if (!toastContainer) {
-    toastContainer = document.createElement('div');
-    toastContainer.className = 'toast-container';
-    toastContainer.setAttribute('data-toast-theme', theme);
-    toastContainer.setAttribute('clay', 'no-save no-snapshot');
-    document.body.append(toastContainer);
-  }
-
-  // Create toast element
-  const icon = icons[messageType] || icons.success;
-  const template = templates.toast[messageType] || templates.toast.success;
-  const toastHtml = template
-    .replace('{icon}', icon)
-    .replace('{message}', '');
-
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = toastHtml.trim();
-  const toastElement = tempDiv.firstElementChild;
+function build(message, type) {
+  const tone = TONES[type];
+  const el = bevelSurface("div", [
+    "display:flex", "align-items:flex-start", ...RULES.toast, "width:100%",
+    `border-inline-start:3px solid ${tone.edge}`,
+    "cursor:pointer", "pointer-events:auto", `color-scheme:${pageScheme()}`,
+    ...HIDDEN, `transition:${motion()}`,
+  ]);
+  el.setAttribute("data-clay-toast", type);
+  const glyph = bevelText("span", ["display:inline-grid", "flex:none", "padding-top:1px", `color:${tone.edge}`]);
+  glyph.innerHTML = tone.icon;
+  protectIcon(glyph.firstElementChild, 16);
   // A message can carry a filename, and a filename is whatever whoever wrote the
-  // file chose. Assign it as text so markup in a name can never become markup here.
-  toastElement.querySelector('.toast-message, .message').textContent = message;
+  // file chose. It goes in as text so markup in a name can never become markup here.
+  const text = bevelText("span", ["flex:1 1 auto", "min-width:120px", ...RULES.toastTitle, "overflow-wrap:anywhere"], message);
+  el.append(glyph, text);
+  return el;
+}
 
-  // Add click handler
-  toastElement.addEventListener('click', () => {
-    toastElement.classList.add('hide');
-    setTimeout(() => toastElement.remove(), 500);
-  });
+// The dashboard's toast close: a bare 24px square in the muted ink, the sunk ground on hover.
+function closeButton(onClick) {
+  const b = bevelBox("button", [
+    "flex:none", "display:inline-grid", "place-items:center", ...RULES.toastClose,
+    "cursor:pointer",
+  ]);
+  b.type = "button";
+  b.setAttribute("aria-label", "Dismiss");
+  b.title = "Dismiss";
+  b.innerHTML = CLOSE_ICON;
+  protectIcon(b.firstElementChild, 14);
+  const paint = (lit) => {
+    set(b, "color", lit ? TOKENS.ink : TOKENS.muted);
+    set(b, "background", lit ? TOKENS.sunk : "transparent");
+  };
+  b.addEventListener("pointerenter", () => paint(true));
+  b.addEventListener("pointerleave", () => paint(false));
+  b.addEventListener("focus", () => { paint(true); set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "1px"); });
+  b.addEventListener("blur", () => { paint(false); set(b, "outline", "none"); });
+  b.addEventListener("click", onClick);
+  return b;
+}
 
-  // Add to container and animate in
-  toastContainer.append(toastElement);
-  setTimeout(() => toastElement.classList.remove('hide'), 10);
+function reveal(el) {
+  stack().append(el);
+  setTimeout(() => {
+    set(el, "opacity", "1");
+    set(el, "transform", "none");
+  }, 10);
+}
 
-  // Auto-hide after timeout
+function dismiss(el, after) {
+  set(el, "opacity", "0");
+  set(el, "transform", "translateX(24px)");
   setTimeout(() => {
-    toastElement.classList.add('hide');
-    setTimeout(() => toastElement.remove(), 500);
-  }, 6600);
+    el.remove();
+    after?.();
+  }, 500);
 }
 
-// Main toast function - uses configured theme (default: modern, or hyperclay if toast-hyperclay loaded)
 function toast(message, messageType = "success") {
-  injectToastStyles(toastConfig.styles, toastConfig.theme);
-  toastCore(message, messageType, {
-    templates: toastConfig.templates,
-    icons: toastConfig.icons,
-    theme: toastConfig.theme
-  });
+  const el = build(message, TONES[messageType] ? messageType : "success");
+  el.addEventListener("click", () => dismiss(el));
+  reveal(el);
+  setTimeout(() => dismiss(el), 6600);
 }
 
-// Close button (button with pixel art X icon inside)
-const CLOSE_BUTTON_HTML = `<button class="toast-close" type="button" aria-label="Close"><svg viewBox="0 0 558 558" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h62.02v62.02h-62.02Z M62,0h62.02v62.02h-62.02Z M434,0h62.02v62.02h-62.02Z M496,0h62.02v62.02h-62.02Z M0,62h62.02v62.02h-62.02Z M62,62h62.02v62.02h-62.02Z M124,62h62.02v62.02h-62.02Z M372,62h62.02v62.02h-62.02Z M434,62h62.02v62.02h-62.02Z M496,62h62.02v62.02h-62.02Z M62,124h62.02v62.02h-62.02Z M124,124h62.02v62.02h-62.02Z M186,124h62.02v62.02h-62.02Z M310,124h62.02v62.02h-62.02Z M372,124h62.02v62.02h-62.02Z M434,124h62.02v62.02h-62.02Z M124,186h62.02v62.02h-62.02Z M186,186h62.02v62.02h-62.02Z M248,186h62.02v62.02h-62.02Z M310,186h62.02v62.02h-62.02Z M372,186h62.02v62.02h-62.02Z M186,248h62.02v62.02h-62.02Z M248,248h62.02v62.02h-62.02Z M310,248h62.02v62.02h-62.02Z M124,310h62.02v62.02h-62.02Z M186,310h62.02v62.02h-62.02Z M248,310h62.02v62.02h-62.02Z M310,310h62.02v62.02h-62.02Z M372,310h62.02v62.02h-62.02Z M62,372h62.02v62.02h-62.02Z M124,372h62.02v62.02h-62.02Z M186,372h62.02v62.02h-62.02Z M310,372h62.02v62.02h-62.02Z M372,372h62.02v62.02h-62.02Z M434,372h62.02v62.02h-62.02Z M0,434h62.02v62.02h-62.02Z M62,434h62.02v62.02h-62.02Z M124,434h62.02v62.02h-62.02Z M372,434h62.02v62.02h-62.02Z M434,434h62.02v62.02h-62.02Z M496,434h62.02v62.02h-62.02Z M0,496h62.02v62.02h-62.02Z M62,496h62.02v62.02h-62.02Z M434,496h62.02v62.02h-62.02Z M496,496h62.02v62.02h-62.02Z"/></svg></button>`;
-
-// Persistent toast styles (added once)
-const persistentToastStyles = `
-  .toast.toast-persistent {
-    position: relative;
-    align-items: center;
-    padding-right: 18px;
-  }
-  .toast-persistent .toast-close {
-    background: none;
-    border: none;
-    padding: 0;
-    margin-left: 3px;
-    position: relative;
-    top: -2px;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    width: 22px;
-    height: 22px;
-  }
-  .toast-persistent .toast-close:hover {
-    opacity: 1;
-  }
-  .toast-persistent .toast-close svg {
-    width: 11px;
-    height: 11px;
-    fill: currentColor;
-  }
-`;
-
 // Track active persistent toasts by message
 const activePersistentToasts = new Map();
 
 // Persistent toast function - doesn't auto-dismiss, requires click to close
 function toastPersistent(message, messageType = "warning") {
-  injectToastStyles(toastConfig.styles, toastConfig.theme);
-
-  // Inject persistent-specific styles once
-  if (!document.querySelector('style.toast-styles-persistent')) {
-    const styleSheet = document.createElement('style');
-    styleSheet.className = 'toast-styles-persistent';
-    styleSheet.setAttribute('clay', 'no-save no-snapshot');
-    styleSheet.textContent = persistentToastStyles;
-    document.head.appendChild(styleSheet);
-  }
-
-  const templates = toastConfig.templates;
-  const icons = toastConfig.icons;
-  const theme = toastConfig.theme;
-
-  // Get or create container for this theme
-  let toastContainer = document.querySelector(`.toast-container[data-toast-theme="${theme}"]`);
-  if (!toastContainer) {
-    toastContainer = document.createElement('div');
-    toastContainer.className = 'toast-container';
-    toastContainer.setAttribute('data-toast-theme', theme);
-    toastContainer.setAttribute('clay', 'no-save no-snapshot');
-    document.body.append(toastContainer);
-  }
-
-  // If same message already showing, animate it out first
-  const existingToast = activePersistentToasts.get(message);
-  if (existingToast) {
-    existingToast.classList.add('hide');
-    setTimeout(() => existingToast.remove(), 500);
+  const existing = activePersistentToasts.get(message);
+  if (existing) {
+    dismiss(existing);
     activePersistentToasts.delete(message);
   }
 
-  // Create toast element
-  const icon = icons[messageType] || icons.warning;
-  const template = templates.toast[messageType] || templates.toast.warning;
-  const toastHtml = template
-    .replace('{icon}', icon)
-    .replace('{message}', '');
-
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = toastHtml.trim();
-  const toastElement = tempDiv.firstElementChild;
-  // A message can carry a filename, and a filename is whatever whoever wrote the
-  // file chose. Assign it as text so markup in a name can never become markup here.
-  toastElement.querySelector('.toast-message, .message').textContent = message;
-  toastElement.classList.add('toast-persistent');
-
-  // Add close button as sibling (not inside message)
-  toastElement.insertAdjacentHTML('beforeend', CLOSE_BUTTON_HTML);
-
-  // Close handler - only on close button click
-  const closeBtn = toastElement.querySelector('.toast-close');
-  if (closeBtn) {
-    closeBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      toastElement.classList.add('hide');
-      setTimeout(() => {
-        toastElement.remove();
-        activePersistentToasts.delete(message);
-      }, 500);
-    });
-  }
+  const el = build(message, TONES[messageType] ? messageType : "warning");
+  set(el, "cursor", "default");
+  const close = closeButton((e) => {
+    e.stopPropagation();
+    // A newer toast with the same message may have taken this entry since.
+    dismiss(el, () => { if (activePersistentToasts.get(message) === el) activePersistentToasts.delete(message); });
+  });
+  el.append(close);
 
-  // Track this toast
-  activePersistentToasts.set(message, toastElement);
+  activePersistentToasts.set(message, el);
+  reveal(el);
+}
 
-  // Add to container and animate in
-  toastContainer.append(toastElement);
-  setTimeout(() => toastElement.classList.remove('hide'), 10);
+// Takes down the persistent toast showing this message, if one is up.
+function dismissPersistent(message) {
+  const el = activePersistentToasts.get(message);
+  if (!el) return;
+  activePersistentToasts.delete(message);
+  dismiss(el);
 }
 
-export { toastPersistent };
+export { toastPersistent, dismissPersistent };
 export default toast;

package/src/ui/vendor-skin.js

@@ -0,0 +1,65 @@
+// Puts a generated vendor skin (src/ui/skins/*.js) on the page.
+//
+// A skin is one `@layer clay-skin { ... }` block whose declarations are all
+// !important. Important declarations in the earliest cascade layer beat the host
+// page's unlayered !important rules and every later layer, and a layer's position is
+// fixed where its name first appears, so the skin goes in ahead of every other
+// stylesheet in <head>. It is runtime-only: never saved, never watched, never sent to
+// a peer, and a second call for the same name reuses the element.
+import { RUNTIME_ONLY, pageScheme } from './bevel-controls.js';
+
+const isSkin = (node) => node.nodeType === 1 && node.hasAttribute('data-clay-skin');
+
+function firstNonSkin(head) {
+  for (const node of head.childNodes) if (!isSkin(node)) return node;
+  return null;
+}
+
+function placed(head, el) {
+  if (el.parentNode !== head) return false;
+  for (let node = el.previousSibling; node; node = node.previousSibling) if (!isSkin(node)) return false;
+  return true;
+}
+
+const installed = new Map();
+
+// A vendor that sets no color-scheme of its own inherits the page's, and a page that
+// declares none computes `normal`, which resolves every light-dark() pin to light.
+// ClayJS's own surfaces follow the reader's preference there (pageScheme), so a skin
+// installed with its roots gives them the same scheme.
+function schemeRule(roots) {
+  return `\n@layer clay-skin{:is(${roots.join(', ')}){color-scheme:${pageScheme()} !important}}`;
+}
+
+/**
+ * Install or refresh one skin.
+ * @param {string} name  one element per name
+ * @param {string} css   the skin module's CSS export
+ * @param {{ roots?: string[] }} [options]  roots to give the page's scheme
+ * @returns {HTMLStyleElement}
+ */
+export function installSkin(name, css, { roots } = {}) {
+  installed.set(name, { css, roots });
+  const head = document.head || document.documentElement;
+  let el = null;
+  for (const node of head.querySelectorAll('style[data-clay-skin]')) {
+    if (node.getAttribute('data-clay-skin') === name) el = node;
+  }
+  if (!el) {
+    el = document.createElement('style');
+    el.setAttribute('clay', RUNTIME_ONLY);
+    el.setAttribute('data-clay-skin', name);
+  }
+  const text = roots ? css + schemeRule(roots) : css;
+  if (el.textContent !== text) el.textContent = text;
+  if (!placed(head, el)) head.insertBefore(el, firstNonSkin(head));
+  return el;
+}
+
+// A live-sync merge can put a peer's stylesheet ahead of a skin, and a page can change
+// its scheme; after every applied frame each skin goes back in front, re-read.
+if (typeof document !== 'undefined') {
+  document.addEventListener('clay:sync-applied', () => {
+    for (const [name, { css, roots }] of installed) installSkin(name, css, { roots });
+  });
+}