@panphora/clayjs 1.5.3 → 1.6.1

package/src/ui/bevel-dialog.js

@@ -0,0 +1,112 @@
+// The frame every ClayJS dialog draws: a backdrop, a Bevel panel, an optional corner
+// close. It holds no behaviour. The modal and the crop adapter own focus, Escape,
+// backdrop clicks and settling, so each keeps the rules it already had.
+import { set } from "../lib/hostile-css.js";
+import { bevelBox, bevelSurface, bevelText, pageScheme, protectIcon } from "./bevel-controls.js";
+import { TOKENS, FONT_SANS, RULES } from "./bevel.js";
+
+// A frame's own way to settle itself. The modal is a singleton and clears every frame
+// when it opens; a frame it does not own (the crop dialog) registers here, so it is
+// cancelled properly instead of vanishing with its caller still waiting.
+export const dismissOf = new WeakMap();
+
+const FOCUSABLE = 'a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [contenteditable], [tabindex]:not([tabindex^="-"])';
+
+// Tab and Shift+Tab wrap inside `container`, the rule MicroModal applies to the modal.
+export function keepFocusIn(container, event) {
+  const nodes = [...container.querySelectorAll(FOCUSABLE)].filter((node) => node.offsetParent !== null);
+  if (!nodes.length) return;
+  const at = nodes.indexOf(document.activeElement);
+  if (at === -1) {
+    nodes[0].focus();
+    event.preventDefault();
+  } else if (event.shiftKey && at === 0) {
+    nodes[nodes.length - 1].focus();
+    event.preventDefault();
+  } else if (!event.shiftKey && at === nodes.length - 1) {
+    nodes[0].focus();
+    event.preventDefault();
+  }
+}
+
+// The dashboard's dialog (Bevel's React dialog with the dashboard's overrides), drawn
+// inline. ClayJS loads no webfonts, so the title's Newsreader falls back to Georgia.
+const LINE = `1px solid ${TOKENS["line-2"]}`;
+const CLOSE_X =
+  '<svg viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><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>';
+
+// The close: a column at the header's right edge in the button face, or a 62px square
+// at the panel's corner when there is no header.
+function dialogClose(label, inHeader) {
+  const hover = RULES.dialogCloseHover[0].slice("background:".length);
+  const b = bevelBox("button", [
+    "position:absolute", "top:-1px", "right:-1px", "z-index:2",
+    "display:grid", "place-items:center", inHeader ? "height:calc(100% + 1px)" : "height:62px",
+    "margin:0", "padding:0", "border:0", ...RULES.dialogClose, ...(inHeader ? [] : [`border-bottom:${LINE}`]),
+    "cursor:pointer", "outline:none",
+  ]);
+  b.type = "button";
+  b.setAttribute("aria-label", label);
+  b.title = label;
+  b.innerHTML = CLOSE_X;
+  protectIcon(b.firstElementChild, 16);
+  b.addEventListener("pointerenter", () => set(b, "background", hover));
+  b.addEventListener("pointerleave", () => set(b, "background", TOKENS.face));
+  b.addEventListener("focus", () => { set(b, "outline", `2px solid ${TOKENS.brass}`); set(b, "outline-offset", "-4px"); });
+  b.addEventListener("blur", () => set(b, "outline", "none"));
+  return b;
+}
+
+export function bevelDialog({ zIndex = "100", width = "600px", closable = false, titled = false } = {}) {
+  const root = bevelBox("div", ["display:block"]);
+  root.setAttribute("data-clay-modal", "");
+  root.setAttribute("aria-hidden", "true");
+  set(root, "color-scheme", pageScheme());
+
+  const overlay = bevelBox("div", [
+    "position:fixed", "inset:0", `z-index:${zIndex}`, "overflow:auto",
+    "display:flex", "align-items:flex-start", "justify-content:center",
+    "padding:min(96px, 10vh) 16px 16px",
+    `background:color-mix(in srgb, ${TOKENS.ground} 72%, transparent)`,
+  ]);
+  overlay.tabIndex = -1;
+
+  const panel = bevelSurface("form", [
+    "position:relative", "display:flex", "flex-direction:column", "margin:0",
+    `width:min(${width}, 100%)`, "max-height:calc(100dvh - min(96px, 10vh) - 16px)",
+    ...RULES.dialogPanel,
+  ]);
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+
+  let header = null;
+  let heading = null;
+  if (titled) {
+    header = bevelBox("div", [
+      "position:relative", "display:block", "flex:none",
+      `padding:20px ${closable ? "68px" : "22px"} 16px 22px`, ...RULES.dialogHeader,
+    ]);
+    heading = bevelText("div", ["display:block", ...RULES.dialogHeading, "overflow-wrap:anywhere"]);
+    heading.setAttribute("role", "heading");
+    heading.setAttribute("aria-level", "2");
+    header.append(heading);
+    panel.append(header);
+  }
+
+  const body = bevelText("div", [
+    "display:block", "flex:1 1 auto", "min-height:0", "overflow-y:auto", "overflow-x:hidden",
+    `padding:20px ${closable && !titled ? "84px" : "22px"} 20px 22px`,
+    "overflow-wrap:anywhere", `font:14.5px/1.55 ${FONT_SANS}`,
+  ]);
+  const footer = bevelBox("div", [
+    "display:flex", "flex:none", "flex-wrap:wrap", "justify-content:flex-end", "align-items:center", ...RULES.dialogFooter,
+  ]);
+  panel.append(body, footer);
+
+  const close = closable ? dialogClose("Close", titled) : null;
+  if (close) (header || panel).append(close);
+
+  overlay.append(panel);
+  root.append(overlay);
+  return { root, overlay, panel, header, heading, body, footer, close };
+}

package/src/ui/bevel.js

@@ -0,0 +1,247 @@
+// GENERATED from bevel/bevel.css by scripts/build-bevel-subset.mjs. Run `npm run build:bevel`.
+export const SOURCE_SHA256 = "4532d98386c76070626c0cccea91f512dafd0314c0c846dbf1eea9372ddde541";
+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)";
+export const TOKENS = {
+  "ground": "light-dark(#FDF8F0, #0B0C13)",
+  "surface": "light-dark(#FFFCF6, #11131E)",
+  "sunk": "light-dark(#F4ECDF, #1A1D2C)",
+  "ink": "light-dark(#2B241B, #ECEAF2)",
+  "ink-2": "light-dark(#4A4033, #C9CDE0)",
+  "muted": "light-dark(#6B5942, #8A90AB)",
+  "faint": "light-dark(#9A8A70, #6A7090)",
+  "line": "light-dark(#E8DCC6, #262B42)",
+  "line-2": "light-dark(#D8C8AF, #353B52)",
+  "line-3": "light-dark(#C4B192, #46506E)",
+  "brass": "light-dark(#8F6310, #D9A445)",
+  "brass-soft": "light-dark(#F0E4CC, #3A2F17)",
+  "ox": "light-dark(#A83A2C, #FF5566)",
+  "ox-soft": "light-dark(#F6DED6, #3A2226)",
+  "teal": "light-dark(#256056, #63AE9E)",
+  "teal-soft": "light-dark(#DCEBE7, #17332E)",
+  "face": "light-dark(#F1E7D4, #22273E)",
+  "edge-hi": "light-dark(#FFF9ED, #3C4260)",
+  "edge-lo": "light-dark(#D6C3A5, #1B2033)",
+  "face-in": "light-dark(#E3D0B3, #28304D)",
+  "edge-in": "light-dark(#B89F7B, #1F2339)",
+  "edge-in-hi": "light-dark(#F0E1C9, #4D587A)",
+  "knob": "light-dark(#FCF8F1, #4A5275)",
+  "knob-hi": "light-dark(#FFF9ED, #6C759A)",
+  "ox-face": "light-dark(#7A2A1F, #842E22)",
+  "ox-edge-hi": "light-dark(#AE4F3E, #B85A47)",
+  "ox-edge-lo": "light-dark(#451510, #3E1410)",
+  "ox-ink": "light-dark(#FBEEE8, #FBEEE8)",
+};
+export const RULES = {
+  "button": [
+    "display:inline-flex",
+    "align-items:center",
+    "justify-content:center",
+    "gap:7px",
+    "font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif",
+    "font-size:13.5px",
+    "font-weight:500",
+    "line-height:1.5",
+    "cursor:pointer",
+    "user-select:none",
+    "text-align:center",
+    "text-decoration:none",
+    "color:light-dark(#2B241B, #ECEAF2)",
+    "background:light-dark(#F1E7D4, #22273E)",
+    "border:2px solid",
+    "border-color:light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033) light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260)",
+    "border-radius:0",
+    "padding:0 12px",
+    "height:32px",
+    "outline:none",
+  ],
+  "buttonLabel": [
+    "white-space:nowrap",
+    "user-select:none",
+    "display:inline-block",
+  ],
+  "buttonHover": [
+    "background:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%)",
+  ],
+  "buttonActive": [
+    "border-color:light-dark(#D6C3A5, #1B2033) light-dark(#FFF9ED, #3C4260) light-dark(#FFF9ED, #3C4260) light-dark(#D6C3A5, #1B2033)",
+  ],
+  "buttonActiveLabel": [
+    "translate:1px 1px",
+  ],
+  "buttonDisabled": [
+    "color:light-dark(#9A8A70, #6A7090)",
+    "cursor:default",
+    "opacity:1",
+  ],
+  "buttonDisabledLabel": [
+    "translate:none",
+  ],
+  "buttonSmall": [
+    "height:26px",
+    "font-size:12.5px",
+    "padding:0 9px",
+  ],
+  "buttonPrimary": [
+    "display:inline-flex",
+    "align-items:center",
+    "justify-content:center",
+    "gap:7px",
+    "font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif",
+    "font-size:13.5px",
+    "font-weight:500",
+    "line-height:1.5",
+    "cursor:pointer",
+    "user-select:none",
+    "text-align:center",
+    "text-decoration:none",
+    "color:light-dark(#2B241B, #ECEAF2)",
+    "background:light-dark(#2B241B, #ECEAF2)",
+    "border:2px solid",
+    "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%)",
+    "border-radius:0",
+    "padding:0 12px",
+    "height:32px",
+    "outline:none",
+    "color:light-dark(#FDF8F0, #0B0C13)",
+  ],
+  "buttonPrimaryHover": [
+    "background:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), light-dark(#FDF8F0, #0B0C13) 12%)",
+  ],
+  "buttonPrimaryHoverBase": [
+    "background:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) 45%)",
+  ],
+  "buttonPrimaryActive": [
+    "border-color:color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), white 24%) color-mix(in srgb, light-dark(#2B241B, #ECEAF2), black 32%)",
+  ],
+  "buttonDanger": [
+    "display:inline-flex",
+    "align-items:center",
+    "justify-content:center",
+    "gap:7px",
+    "font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif",
+    "font-size:13.5px",
+    "font-weight:500",
+    "line-height:1.5",
+    "cursor:pointer",
+    "user-select:none",
+    "text-align:center",
+    "text-decoration:none",
+    "color:light-dark(#2B241B, #ECEAF2)",
+    "background:light-dark(#7A2A1F, #842E22)",
+    "border:2px solid",
+    "border-color:light-dark(#AE4F3E, #B85A47) light-dark(#451510, #3E1410) light-dark(#451510, #3E1410) light-dark(#AE4F3E, #B85A47)",
+    "border-radius:0",
+    "padding:0 12px",
+    "height:32px",
+    "outline:none",
+    "color:light-dark(#FBEEE8, #FBEEE8)",
+  ],
+  "buttonDangerHover": [
+    "background:color-mix(in srgb, light-dark(#7A2A1F, #842E22), light-dark(#AE4F3E, #B85A47) 45%)",
+  ],
+  "buttonDangerActive": [
+    "border-color:light-dark(#451510, #3E1410) light-dark(#AE4F3E, #B85A47) light-dark(#AE4F3E, #B85A47) light-dark(#451510, #3E1410)",
+  ],
+  "buttonQuiet": [
+    "background:none",
+    "border-color:transparent",
+    "color:light-dark(#8F6310, #D9A445)",
+  ],
+  "buttonQuietHover": [
+    "background:light-dark(#F4ECDF, #1A1D2C)",
+    "color:light-dark(#8F6310, #D9A445)",
+  ],
+  "buttonQuietActive": [
+    "border-color:transparent",
+  ],
+  "focus": [
+    "outline:2px solid light-dark(#8F6310, #D9A445)",
+    "outline-offset:2px",
+  ],
+  "recess": [
+    "border:2px solid",
+    "border-color:light-dark(#B89F7B, #1F2339) light-dark(#F0E1C9, #4D587A) light-dark(#F0E1C9, #4D587A) light-dark(#B89F7B, #1F2339)",
+    "background:light-dark(#E3D0B3, #28304D)",
+  ],
+  "input": [
+    "width:100%",
+    "display:block",
+    "font-family:system-ui,-apple-system,\"Segoe UI\",sans-serif",
+    "font-size:13.5px",
+    "font-weight:400",
+    "line-height:normal",
+    "color:light-dark(#2B241B, #ECEAF2)",
+    "background:light-dark(#FDF8F0, #0B0C13)",
+    "border:1px solid light-dark(#D8C8AF, #353B52)",
+    "border-radius:0",
+    "padding:0 10px",
+    "block-size:34px",
+    "outline:none",
+    "transition:border-color .14s, background-color .14s",
+  ],
+  "inputHover": [
+    "border-color:light-dark(#9A8A70, #6A7090)",
+  ],
+  "inputFocus": [
+    "outline:2px solid light-dark(#8F6310, #D9A445)",
+    "outline-offset:1px",
+    "border-color:light-dark(#8F6310, #D9A445)",
+  ],
+  "toast": [
+    "gap:12px",
+    "padding:13px 12px 13px 15px",
+  ],
+  "toastTitle": [
+    "font:600 13.5px/1.3 system-ui,-apple-system,\"Segoe UI\",sans-serif",
+  ],
+  "toastClose": [
+    "margin:-2px -2px 0 0",
+    "inline-size:24px",
+    "block-size:24px",
+    "padding:0",
+    "border:0",
+    "background:transparent",
+    "color:light-dark(#6B5942, #8A90AB)",
+  ],
+  "dialogPanel": [
+    "border-radius:0",
+    "box-shadow:6px 6px 0 color-mix(in srgb, light-dark(#2B241B, #ECEAF2) 10%, transparent)",
+  ],
+  "dialogHeader": [
+    "border-bottom:1px solid light-dark(#D8C8AF, #353B52)",
+  ],
+  "dialogHeading": [
+    "margin:0",
+    "font:400 24px/1.15 Georgia,\"Times New Roman\",serif",
+  ],
+  "dialogFooter": [
+    "border-top:1px solid light-dark(#D8C8AF, #353B52)",
+    "padding:14px 22px",
+    "gap:10px",
+  ],
+  "dialogClose": [
+    "inline-size:62px",
+    "border-left:1px solid light-dark(#D8C8AF, #353B52)",
+    "background:light-dark(#F1E7D4, #22273E)",
+    "color:light-dark(#2B241B, #ECEAF2)",
+  ],
+  "dialogCloseHover": [
+    "background:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%)",
+  ],
+  "surface": [
+    "background:light-dark(#FFFCF6, #11131E)",
+    "color:light-dark(#2B241B, #ECEAF2)",
+    "border:1px solid light-dark(#D8C8AF, #353B52)",
+    "box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 28px -12px rgba(0,0,0,.35)",
+  ],
+};
+export const MEDIA = {
+  "reducedMotion": [
+    "translate:none",
+  ],
+  "forcedColors": [
+    "border:1px solid ButtonText",
+  ],
+};

package/src/ui/dialogs.js

@@ -2,37 +2,35 @@ import themodal from "./modal.js";
 import onDomReady from "../lib/dom-ready.js";
 import toast from "./toast.js";
 import copyToClipboard from "../utils/copy-to-clipboard.js";
-
-const CLOSE_BUTTON_SVG = `<svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg>`;
-const CONFIRM_BUTTON_SVG = `<div style="width: 28px;"><svg viewBox="0 0 60 33" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.5 0.75H43.5V5.25H49V9.75H54.5V14.25H60V18.75H54.5V23.25H49V27.75H43.5V32.25H34.5V27.75H40V23.25H45.5V18.75H0V14.25H45.5V9.75H40V5.25H34.5V0.75Z" fill="white"/></svg></div>`;
-
-// Only for the prompt's default value. promptText and extraContent are markup by
-// design, and callers pass elements through them.
-function escapeAttribute(value) {
-  return String(value)
-    .replaceAll("&", "&amp;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("<", "&lt;");
-}
-
-function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "") {
-  const inputHtml = includeInput
-    ? `<div><input class="micromodal__input" type="text" value="${escapeAttribute(defaultValue)}" required></div>`
-    : "";
-
-  themodal.html = `<div>
-    <div class="micromodal__heading">${promptText}</div>
-    ${inputHtml}
-    ${extraContent}
-  </div>`;
-  themodal.closeHtml = CLOSE_BUTTON_SVG;
-  themodal.yes = CONFIRM_BUTTON_SVG;
+import { bevelBox, bevelButton, bevelInput, bevelText } from "./bevel-controls.js";
+import { TOKENS, FONT_SANS, FONT_MONO } from "./bevel.js";
+
+// Caller markup (promptText, extraContent, tell's paragraphs) goes in as it is: those
+// are markup by design, and callers pass elements through them. Only the frame around
+// it is ClayJS's to style. The prompt is the dialog's title, as in the dashboard.
+function createModal(promptText, yesCallback, extraContent = "", includeInput = false, defaultValue = "", yesLabel = "OK") {
+  const content = bevelBox("div", ["display:flex", "flex-direction:column", "gap:14px"]);
+  let input = null;
+  if (includeInput) {
+    input = bevelInput("input", { rules: ["display:block", "width:100%", "margin:0"] });
+    input.setAttribute("value", String(defaultValue));
+    input.required = true;
+    content.append(input);
+  }
+  content.insertAdjacentHTML("beforeend", extraContent);
+
+  themodal.title = promptText;
+  themodal.html = includeInput || extraContent ? content : "";
+  themodal.width = "440px";
+  themodal.closeHtml = "x";
+  themodal.no = "Cancel";
+  themodal.yes = yesLabel;
 
   const promise = new Promise((resolve, reject) => {
     themodal.onYes(() => {
       let promptResult;
       if (includeInput) {
-        promptResult = document.querySelector(".micromodal__input").value;
+        promptResult = input.value;
         if (!promptResult) return false; // keep modal open on empty input
       }
       // Run the validation callback synchronously so a throw can keep the
@@ -61,7 +59,7 @@ function createModal(promptText, yesCallback, extraContent = "", includeInput =
   themodal.open();
 
   setTimeout(() => {
-    const modalContainer = document.querySelector('.micromodal-parent');
+    const modalContainer = document.querySelector('[data-clay-modal]');
     if (modalContainer) {
       modalContainer.addEventListener('click', (event) => {
         const btn = event.target.closest('[data-copy]');
@@ -83,11 +81,11 @@ function createModal(promptText, yesCallback, extraContent = "", includeInput =
 
 // Public API functions
 export function ask(promptText, yesCallback, defaultValue = "", extraContent = "") {
-  return createModal(promptText, yesCallback, extraContent, true, defaultValue);
+  return createModal(promptText, yesCallback, extraContent, true, defaultValue, "OK");
 }
 
 export function consent(promptText, yesCallback, extraContent = "") {
-  return createModal(promptText, yesCallback, extraContent, false);
+  return createModal(promptText, yesCallback, extraContent, false, "", "Confirm");
 }
 
 /**
@@ -97,16 +95,18 @@ export function consent(promptText, yesCallback, extraContent = "") {
  * @returns {Promise} Resolves when user confirms, rejects on close
  */
 export function tell(promptText, ...content) {
-  const contentHtml = content.length > 0
-    ? content.map(c => `<div class="micromodal__tell-content">${c}</div>`).join("")
-    : "";
-
-  themodal.html = `<div class="micromodal__tell">
-    <div class="micromodal__tell-title">${promptText}</div>
-    ${contentHtml}
-  </div>`;
-  themodal.closeHtml = CLOSE_BUTTON_SVG;
-  themodal.yes = CONFIRM_BUTTON_SVG;
+  const box = bevelBox("div", ["display:flex", "flex-direction:column", "gap:12px"]);
+  for (const c of content) {
+    const paragraph = bevelText("div", [`font:14.5px/1.55 ${FONT_SANS}`, `color:${TOKENS["ink-2"]}`, "overflow-wrap:anywhere"]);
+    paragraph.innerHTML = c;
+    box.append(paragraph);
+  }
+
+  themodal.title = promptText;
+  themodal.html = content.length ? box : "";
+  themodal.width = "470px";
+  themodal.closeHtml = "x";
+  themodal.yes = "OK";
 
   const promise = new Promise((resolve, reject) => {
     themodal.onYes(() => {
@@ -133,64 +133,41 @@ export function tell(promptText, ...content) {
  * @param {string} title - The modal heading
  * @param {string} content - The code to display
  * @param {string} extraContent - Optional raw HTML rendered below the copy button.
- *   Callers style their own container; use `<div class="snippet-warning">…</div>`
- *   for the standard yellow-bordered warning box.
+ *   Callers style their own container.
  */
 export function snippet(title, content, extraContent = '') {
+  const box = bevelBox("div", ["display:block"]);
+  const well = bevelBox("div", [
+    "display:block", "max-width:100%", "overflow-x:auto", "margin:0 0 14px", "padding:14px 16px",
+    `background:${TOKENS.sunk}`, `border:1px solid ${TOKENS["line-2"]}`,
+  ]);
+  const pre = bevelText("pre", ["display:block", "margin:0", "white-space:nowrap", `font:13px/1.6 ${FONT_MONO}`]);
+  pre.innerHTML = content;
+  well.append(pre);
+  const copy = bevelButton("Copy", {
+    small: true,
+    extra: ["margin:0 0 14px"],
+    onClick: () => {
+      copyToClipboard(content);
+      toast('Copied to clipboard!', 'success');
+    },
+  });
+  box.append(well, copy);
+  box.insertAdjacentHTML("beforeend", extraContent || "");
 
-  // Create the modal content with copy button
-  const modalContent = `
-    <div class="snippet-code-block">
-      <pre>${content}</pre>
-    </div>
-
-    <button type="button" class="micromodal__secondary-btn copy-snippet-btn" style="margin-bottom: 14px;">copy</button>
-
-    ${extraContent || ''}
-  `;
-
-  // Use the existing modal system
-  themodal.html = `<div>
-    <div class="micromodal__heading">${title}</div>
-    ${modalContent}
-  </div>`;
-
-  themodal.closeHtml = CLOSE_BUTTON_SVG;
+  themodal.title = title;
+  themodal.html = box;
+  themodal.width = "540px";
+  themodal.closeHtml = "x";
   themodal.yes = '';
 
   const promise = new Promise((resolve) => {
-    // Local copy function
-    const handleCopy = function(event) {
-      if (event.target.closest('.copy-snippet-btn')) {
-        copyToClipboard(content);
-        toast('Copied to clipboard!', 'success');
-      }
-    };
-
-    // Add event listener to the modal container after it opens
-    setTimeout(() => {
-      const modalContainer = document.querySelector('.micromodal-parent');
-      if (modalContainer) {
-        modalContainer.addEventListener('click', handleCopy);
-      }
-    }, 0);
-
     themodal.onYes(() => {
-      // Clean up the event listener synchronously — the DOM may be torn down
-      // before our deferred resolve fires otherwise.
-      const modalContainer = document.querySelector('.micromodal-parent');
-      if (modalContainer) {
-        modalContainer.removeEventListener('click', handleCopy);
-      }
       setTimeout(resolve, 0);
       return true;
     });
 
     themodal.onNo = () => {
-      const modalContainer = document.querySelector('.micromodal-parent');
-      if (modalContainer) {
-        modalContainer.removeEventListener('click', handleCopy);
-      }
       setTimeout(resolve, 0);
     };
   });
@@ -203,7 +180,7 @@ export function snippet(title, content, extraContent = '') {
 // Auto-initialize - cleanup any leftover modal elements
 export function init() {
   onDomReady(() => {
-    const micromodalParentElem = document.querySelector(".micromodal-parent");
+    const micromodalParentElem = document.querySelector("[data-clay-modal]");
     if (micromodalParentElem) {
       micromodalParentElem.remove();
       document.body.style.overflow = "";

package/src/ui/index.js

@@ -1,6 +1,7 @@
-import toast, { toastPersistent } from "./toast.js";
+import toast, { toastPersistent, dismissPersistent } from "./toast.js";
 import themodal from "./modal.js";
 import { ask, consent, tell, snippet } from "./dialogs.js";
+import { saveFeedback } from "../core/save-feedback.js";
 
 // Attach the public surface explicitly (§2.3). We do NOT rely on toast.js /
 // dialogs.js evaluation side effects — their window auto-exports are stripped.
@@ -19,17 +20,27 @@ if (typeof window.toast === "undefined") window.toast = toast;
 if (typeof window.toastPersistent === "undefined") window.toastPersistent = toastPersistent;
 
 // Automatic save feedback. clay:save-saving stays deliberately silent (a toast for
-// a sub-second transient is noise). Keep your own toast lib? The events are public.
-document.addEventListener("clay:save-saved", (e) =>
-  toast(e.detail?.msg || "Saved", e.detail?.msgType === "warning" ? "warning" : "success"));
+// a sub-second transient is noise). With the indicator plugin loaded, saved belongs
+// to its chip; a failed or offline save stays up as a toast until the next save
+// lands. Keep your own toast lib? The events are public. clay.saveToast moves saved
+// from the chip to a toast.
+saveFeedback.toasts = true;
+// clay.saveToast = true shows Saved as a toast (with the host's message) instead of on
+// the chip. A page may set it before this loads (window.clay = { saveToast: true }).
+saveFeedback.savedToast = !!clay.saveToast;
+Object.defineProperty(clay, "saveToast", {
+  get: () => saveFeedback.savedToast,
+  set: (on) => { saveFeedback.savedToast = !!on; },
+  enumerable: true,
+  configurable: true,
+});
+document.addEventListener("clay:save-saved", (e) => {
+  dismissPersistent("Couldn't save");
+  dismissPersistent("Offline, not saved");
+  if (e.detail?.msgType === "warning") toast(e.detail.msg || "Saved", "warning");
+  else if (!saveFeedback.chip || saveFeedback.savedToast) toast(e.detail?.msg || "Saved", "success");
+});
 document.addEventListener("clay:save-error", () => toastPersistent("Couldn't save", "error"));
-// Spec §6. Persistent, and carrying the host's own words, because this is the one
-// save outcome the person has to act on: their edits are safe and unsaved, and
-// autosave has stopped until they choose. Deliberately a toast and not a dialog:
-// most conflicts surface on an autosave nobody asked for, and a modal thrown over
-// the page a person is typing into is worse than the problem it reports.
-document.addEventListener("clay:save-conflict", (e) =>
-  toastPersistent(e.detail?.msg || "This document changed since you opened it", "warning"));
 document.addEventListener("clay:save-offline", () => toastPersistent("Offline, not saved", "warning"));
 
 export { toast, toastPersistent, ask, consent, tell, snippet, themodal };