@panphora/clayjs 1.20.0 → 1.22.0

package/src/plugins/menu/style.js

@@ -3,7 +3,9 @@
 // The surface and muted ink below, per scheme, for ui/page-colour.js's tint.
 export const MENU_SURFACE = { light: [0xFF, 0xFC, 0xF6], dark: [0x1A, 0x1D, 0x2C], mutedLight: [0x6B, 0x59, 0x42], mutedDark: [0xA3, 0xA9, 0xC2] };
 
-export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
+// The parts of the look a page may replace, through <style clay-menu-skin="1">. Everything
+// else below stays: layout, hidden, focus rings, touch targets and reduced motion.
+export const MENU_BASE = `.clay-menu-dock, .clay-menu-spots, .clay-seo {
   --bevel-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
   --bevel-font-serif: Newsreader, Georgia, "Times New Roman", serif;
   --bevel-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -40,19 +42,11 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
   text-size-adjust: 100%;
 }
 
-/* The dock: the roster (when a page opts in) and the capsule, fixed in one corner. */
-.clay-menu-dock { position: fixed; z-index: 2147482000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
-.clay-menu-dock[data-corner$="left"] { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }
-.clay-menu-dock[data-corner^="bottom"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
+.clay-menu-dock { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
+.clay-menu-dock[data-embedded] { position: relative; display: inline-flex; }
 .clay-menu-dock[hidden], .clay-menu-spots[hidden], .clay-menu-dock [hidden], .clay-seo [hidden] { display: none !important; }
 
-.clay-menu { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 2px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); user-select: none; -webkit-user-select: none; }
-.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
-
-.clay-menu-grip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--bevel-faint); cursor: grab; touch-action: none; }
-.clay-menu-grip::before { content: ""; position: absolute; inset: -8px -2px -8px -10px; }
-.clay-menu-grip:hover { color: var(--bevel-ink-2); }
-.clay-menu-grip svg { display: block; width: 6px; height: 12px; fill: currentColor; }
+.clay-menu { box-sizing: border-box; display: inline-flex; align-items: center; gap: 2px; user-select: none; -webkit-user-select: none; }
 
 .clay-menu-edit { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 8px 0 5px; border: 0; background: none; font: 500 13px/1 var(--bevel-font-sans); color: var(--bevel-ink); cursor: pointer; }
 .clay-menu-edit::before { content: ""; position: absolute; inset: -8px 0; }
@@ -68,12 +62,8 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 
 .clay-menu-divider { width: 1px; height: 18px; margin: 0 2px; background: var(--bevel-line-2); }
 
-.clay-menu-goo { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px; min-height: 0; border-radius: 0; margin: 0; padding: 0; border: 2px solid transparent; background: none; color: var(--bevel-ink); cursor: pointer; }
-.clay-menu-goo::before { content: ""; position: absolute; inset: -8px -8px -8px -4px; }
-.clay-menu-goo svg { display: block; width: 18px; height: auto; fill: currentColor; }
-.clay-menu-goo:hover svg { translate: 0 -1px; }
-.clay-menu-goo:active, .clay-menu-goo[aria-expanded="true"] { background: var(--bevel-face-in); border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
-.clay-menu-goo:active svg, .clay-menu-goo[aria-expanded="true"] svg { translate: 1px 1px; }
+.clay-menu-goo { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; margin: 0; padding: 0; cursor: pointer; }
+.clay-menu-goo svg { display: block; }
 .clay-menu-dot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--bevel-brass); box-shadow: 0 0 0 2px var(--bevel-surface); }
 
 .clay-menu :focus-visible, .clay-roster:focus-visible { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
@@ -98,22 +88,24 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-avatar[data-tone="teal"] { background: var(--bevel-teal-soft); color: var(--bevel-teal); border-color: color-mix(in srgb, var(--bevel-teal) 35%, var(--bevel-teal-soft)); }
 
 /* Popovers: the menu, the people panel, the status note. Below the dock, above it in a bottom corner. */
-.clay-menu-list, .clay-people, .clay-menu-note { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; box-sizing: border-box; margin: 0; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); color: var(--bevel-ink); text-align: left; }
-.clay-menu-dock[data-corner$="left"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { right: auto; left: 0; }
-.clay-menu-dock[data-corner^="bottom"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { top: auto; bottom: calc(100% + 8px); }
+.clay-menu-list, .clay-people, .clay-menu-note { position: absolute; z-index: 1; top: calc(100% + 8px); right: 0; box-sizing: border-box; margin: 0; color: var(--bevel-ink); text-align: left; }
+.clay-people, .clay-menu-note { border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
 
-.clay-menu-list { width: max-content; min-width: 284px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
-.clay-menu-list [role="menuitem"] { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 32px; margin: 0; padding: 5px 9px; border: 0; background: none; font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); text-align: left; text-decoration: none; cursor: pointer; }
+.clay-menu-list { width: max-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
+.clay-menu-list[popover] { position: fixed; inset: auto; margin: 0; }
+.clay-menu-list [role="menuitem"] { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
 .clay-menu-list [role="menuitem"]:hover:not([aria-disabled="true"]), .clay-menu-list [role="menuitem"]:focus-visible { outline: none; background: var(--bevel-sunk); }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] { color: var(--bevel-faint); cursor: default; }
-.clay-menu-list [role="menuitem"][aria-disabled="true"] kbd { opacity: .6; }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] { cursor: default; }
 .clay-menu-pair { display: flex; gap: 12px; padding: 3px 9px; }
-.clay-menu-list .clay-menu-pair [role="menuitem"] { flex: none; width: auto; min-height: 30px; justify-content: flex-start; gap: 9px; padding: 4px 6px 4px 9px; border: 1px solid var(--bevel-line); }
-.clay-menu-list kbd { flex: none; font: 500 11px/1 var(--bevel-font-mono); padding: 3px 5px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); white-space: nowrap; }
-.clay-menu-sep { height: 1px; margin: 4px 2px; background: var(--bevel-line); }
+.clay-menu-list .clay-menu-pair [role="menuitem"] { flex: none; width: auto; justify-content: flex-start; gap: 9px; }
+.clay-menu-list kbd { flex: none; white-space: nowrap; }
+.clay-menu-row { display: flex; align-items: center; gap: 2px; }
+.clay-menu-list .clay-menu-row > [part~="item"] { flex: 1; width: auto; min-width: 0; }
+.clay-menu-list .clay-menu-row > [part~="dismiss"] { flex: none; width: 28px; justify-content: center; padding: 0; }
+.clay-menu-row > [part~="dismiss"] svg { display: block; width: 10px; height: 10px; fill: currentColor; }
 .clay-menu-upgrade { display: inline-flex; align-items: center; gap: 8px; }
 .clay-menu-upgrade::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bevel-brass); }
-.clay-menu-version { margin: 0; padding: 6px 9px 4px; font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
+.clay-menu-version { margin: 0; }
 
 .clay-menu-note { z-index: 2; width: max-content; max-width: 264px; padding: 8px 12px; font-size: 13px; line-height: 1.45; }
 
@@ -149,6 +141,19 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-menu-btn-small { height: 26px; padding: 0 9px; font-size: 12px; }
 .clay-menu-btn-primary { --bevel-face: var(--bevel-ink); --bevel-edge-hi: color-mix(in srgb, var(--bevel-ink), light-dark(#FFFCF6, #FFFFFF) 22%); --bevel-edge-lo: color-mix(in srgb, var(--bevel-ink), light-dark(#0B0C13, #6A7090) 34%); color: var(--bevel-ground); }
 .clay-menu-btn-primary:hover { background: color-mix(in srgb, var(--bevel-ink), var(--bevel-ground) 12%); }
+`;
+
+export const MENU_FLOATING = `/* The dock: the roster (when a page opts in) and the capsule, fixed in one corner. */
+.clay-menu-dock { position: fixed; z-index: 2147482000; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
+.clay-menu-dock[data-corner$="left"] { right: auto; left: max(12px, env(safe-area-inset-left)); flex-direction: row-reverse; }
+.clay-menu-dock[data-corner^="bottom"] { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
+.clay-menu-dock[data-corner$="left"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { right: auto; left: 0; }
+.clay-menu-dock[data-corner^="bottom"] :is(.clay-menu-list, .clay-people, .clay-menu-note) { top: auto; bottom: calc(100% + 8px); }
+.clay-menu-dock[data-dragging] .clay-menu { border-color: var(--bevel-brass); cursor: grabbing; }
+.clay-menu-grip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 28px; margin: 0; padding: 0; border: 0; background: none; color: var(--bevel-faint); cursor: grab; touch-action: none; }
+.clay-menu-grip::before { content: ""; position: absolute; inset: -8px -2px -8px -10px; }
+.clay-menu-grip:hover { color: var(--bevel-ink-2); }
+.clay-menu-grip svg { display: block; width: 6px; height: 12px; fill: currentColor; }
 
 /* Drop spots while dragging. */
 .clay-menu-spots { position: fixed; inset: 0; z-index: 2147481999; pointer-events: none; }
@@ -158,8 +163,28 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 .clay-menu-spot[data-to$="left"] { left: 12px; }
 .clay-menu-spot[data-to$="right"] { right: 12px; }
 .clay-menu-spot[data-near] { border: 2px solid var(--bevel-brass); background: var(--bevel-brass-soft); }
+`;
 
-@media (pointer: coarse), (max-width: 680px) {
+export const MENU_SKIN = `.clay-menu { height: 34px; padding: 0 4px 0 2px; border: 1px solid var(--bevel-line-3); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
+.clay-menu-goo { width: 28px; height: 28px; min-height: 0; border-radius: 0; border: 2px solid transparent; background: none; color: var(--bevel-ink); }
+.clay-menu-goo::before { content: ""; position: absolute; inset: -8px -8px -8px -4px; }
+.clay-menu-goo svg { width: 18px; height: auto; fill: currentColor; }
+.clay-menu-goo:hover svg { translate: 0 -1px; }
+.clay-menu-goo:active, .clay-menu-goo[aria-expanded="true"] { background: var(--bevel-face-in); border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); }
+.clay-menu-goo:active svg, .clay-menu-goo[aria-expanded="true"] svg { translate: 1px 1px; }
+.clay-menu-list { min-width: 284px; padding: 6px; border: 1px solid var(--bevel-line-2); background: var(--bevel-surface); box-shadow: var(--clay-shadow); }
+.clay-menu-list [role="menuitem"] { min-height: 32px; padding: 5px 9px; font: 400 13px/1.35 var(--bevel-font-sans); color: var(--bevel-ink); }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] { color: var(--bevel-faint); }
+.clay-menu-list [role="menuitem"][aria-disabled="true"] kbd { opacity: .6; }
+.clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 30px; padding: 4px 6px 4px 9px; border: 1px solid var(--bevel-line); }
+.clay-menu-list kbd { font: 500 11px/1 var(--bevel-font-mono); padding: 3px 5px; border: 1px solid var(--bevel-line-2); background: var(--bevel-sunk); color: var(--bevel-muted); }
+.clay-menu-list [part~="quiet"] { font-size: 12px; color: var(--bevel-muted); }
+.clay-menu-sep { height: 1px; margin: 4px 2px; background: var(--bevel-line); }
+.clay-menu-version { padding: 6px 9px 4px; font: 400 11.5px/1.4 var(--bevel-font-mono); color: var(--bevel-muted); }
+`;
+
+// Last, so no skin can shrink a touch target or bring motion back.
+export const MENU_TOUCH = `@media (pointer: coarse), (max-width: 680px) {
   .clay-menu-list [role="menuitem"] { min-height: 44px; font-size: 15px; }
   .clay-menu-list .clay-menu-pair [role="menuitem"] { min-height: 44px; }
   :is(.clay-menu-dock, .clay-seo) :is(input, textarea, select) { font-size: 16px; }
@@ -168,4 +193,7 @@ export default `.clay-menu-dock, .clay-menu-spots, .clay-seo {
 }
 @media (prefers-reduced-motion: reduce) {
   .clay-menu-track, .clay-menu-thumb { transition: none; }
-}`;
+}
+`;
+
+export default MENU_BASE + MENU_FLOATING + MENU_SKIN + MENU_TOUCH;

package/src/plugins/menu.js

@@ -5,7 +5,7 @@ import { canEdit, isDraftMode, isEditMode, mode as startMode } from "../core/is-
 import onDomReady from "../lib/dom-ready.js";
 import CLAYGOO from "./menu/claygoo.svg.js";
 import { modeRefusalText } from "../core/mode-refusal.js";
-import MENU_CSS, { MENU_SURFACE } from "./menu/style.js";
+import { MENU_BASE, MENU_FLOATING, MENU_SKIN, MENU_TOUCH, MENU_SURFACE } from "./menu/style.js";
 import { attachPlacement } from "./menu/placement.js";
 import { attachActions } from "./menu/actions.js";
 import { attachPeople } from "./menu/people.js";
@@ -14,6 +14,9 @@ import { followLook } from "../ui/page-colour.js";
 import { mountEditorUI } from "../ui/editor-ui.js";
 
 const SEO_ITEM = true;
+const SKIN_VERSION = "1";
+const EDGE_GAP = 8;
+const DISMISS_ICON = '<svg viewBox="0 0 10 10" aria-hidden="true" focusable="false"><path d="M1 0 5 4l4-4 1 1-4 4 4 4-1 1-4-4-4 4-1-1 4-4-4-4z"/></svg>';
 const NOTE_MS = 6000;
 const INTRO_GAP = 12;
 const GRIP =
@@ -23,6 +26,7 @@ const GRIP =
 // Built-in items keep fixed slots, so the order never depends on which plugin
 // registered first. Any other id goes in its own section above the footer, in the
 // order it was added.
+// An item may also ask for the first or the last section with `section: "start" | "end"`.
 const SECTIONS = [
   ["clay.undo", "clay.cms", "clay.ai", "clay.code"],
   ["seo", "clay.variants.keep", "clay.share", "clay.people"],
@@ -37,25 +41,51 @@ const SLOTTED = new Set(SECTIONS.flat().filter(Boolean));
 const currentMode = () =>
   window.clay && typeof window.clay.mode === "string" ? window.clay.mode : startMode;
 
+// The first [clay-menu-slot] on the page holds the menu. With none, it floats in a corner.
+function findSlot() {
+  const slots = document.querySelectorAll("[clay-menu-slot]");
+  if (slots.length > 1) console.warn("[clay] This page has more than one clay-menu-slot. The menu uses the first.");
+  return slots[0] || null;
+}
+
+// A skin the page wrote, in <style clay-menu-skin="1" media="not all">. The media keeps it
+// off the page itself. An unknown version means the default skin.
+function pageSkin() {
+  const style = document.querySelector("style[clay-menu-skin]");
+  if (!style) return null;
+  if (style.getAttribute("clay-menu-skin") !== SKIN_VERSION) {
+    console.warn(`[clay] This runtime reads clay-menu-skin="${SKIN_VERSION}". The menu keeps its default look.`);
+    return null;
+  }
+  return style.textContent;
+}
+
 function mount() {
   if (document.querySelector('clay-editor-ui[data-clay-ui="menu"]')) return;
 
+  const slot = findSlot();
+  const embedded = Boolean(slot);
+  const skin = embedded ? pageSkin() : null;
+  const hideSwitch = embedded && slot.hasAttribute("no-edit-switch");
+
   const root = document.createElement("div");
   root.className = "clay-menu-dock";
   root.setAttribute("clay", "editor-ui");
+  root.setAttribute("part", "dock");
+  if (embedded) root.dataset.embedded = "";
   root.dataset.corner = "top-right";
   root.innerHTML =
-    `<div class="clay-menu" clay="editor-ui">` +
+    `<div class="clay-menu" part="capsule" clay="editor-ui">` +
     `<button type="button" class="clay-menu-grip" aria-label="Move the menu. Drag it, or use the arrow keys to move it to another corner.">${GRIP}</button>` +
-    `<button type="button" class="clay-menu-edit" role="switch" aria-checked="false">` +
+    `<button type="button" class="clay-menu-edit" part="edit" role="switch" aria-checked="false">` +
     `<span class="clay-menu-track" aria-hidden="true"><span class="clay-menu-thumb"></span></span>` +
     `<span class="clay-menu-label">Edit</span>` +
     `</button>` +
     `<span class="clay-menu-divider" aria-hidden="true"></span>` +
-    `<button type="button" class="clay-menu-goo" aria-haspopup="menu" aria-expanded="false" aria-label="Clay menu">${CLAYGOO}</button>` +
+    `<button type="button" class="clay-menu-goo" part="button" aria-haspopup="menu" aria-expanded="false" aria-label="Clay menu">${CLAYGOO}</button>` +
     `</div>` +
-    `<div class="clay-menu-list" role="menu" aria-label="Clay menu" hidden></div>` +
-    `<div class="clay-menu-note" role="status" hidden></div>`;
+    `<div class="clay-menu-list" part="list" role="menu" aria-label="Clay menu" hidden></div>` +
+    `<div class="clay-menu-note" part="note" role="status" hidden></div>`;
 
   const grip = root.querySelector(".clay-menu-grip");
   const edit = root.querySelector(".clay-menu-edit");
@@ -64,6 +94,36 @@ function mount() {
   const noteEl = root.querySelector(".clay-menu-note");
   const items = new Map();
 
+  if (embedded) {
+    grip.hidden = true;
+    const icon = slot.querySelector("template[clay-menu-icon]");
+    if (icon) goo.replaceChildren(icon.content.cloneNode(true));
+    const name = slot.getAttribute("clay-menu-label");
+    if (name) {
+      goo.setAttribute("aria-label", name);
+      goo.title = name;
+      list.setAttribute("aria-label", name);
+    }
+    if (hideSwitch) {
+      edit.hidden = true;
+      root.querySelector(".clay-menu-divider").hidden = true;
+    }
+  }
+
+  // Embedded, the list opens in the top layer, so a header's overflow cannot clip it.
+  const topLayer = embedded && typeof list.showPopover === "function";
+  if (topLayer) list.setAttribute("popover", "manual");
+
+  function placeList() {
+    const anchor = goo.getBoundingClientRect();
+    const { offsetWidth: width, offsetHeight: height } = list;
+    const left = Math.max(EDGE_GAP, Math.min(anchor.right - width, window.innerWidth - width - EDGE_GAP));
+    const below = anchor.bottom + EDGE_GAP;
+    const top = below + height > window.innerHeight - EDGE_GAP ? Math.max(EDGE_GAP, anchor.top - height - EDGE_GAP) : below;
+    list.style.left = `${Math.round(left)}px`;
+    list.style.top = `${Math.round(top)}px`;
+  }
+
   // Focus inside the shadow root: document.activeElement only ever names the host.
   const focusedEl = () => root.getRootNode().activeElement || null;
   const isOpen = () => !list.hidden;
@@ -71,6 +131,13 @@ function mount() {
   function setExpanded(open) {
     list.hidden = !open;
     goo.setAttribute("aria-expanded", open ? "true" : "false");
+    if (!topLayer) return;
+    if (open) {
+      list.showPopover();
+      placeList();
+    } else if (list.matches(":popover-open")) {
+      list.hidePopover();
+    }
   }
 
   const buttons = () => [...list.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')];
@@ -108,6 +175,7 @@ function mount() {
       button.type = "button";
     }
     button.setAttribute("role", "menuitem");
+    button.setAttribute("part", item.quiet ? "item quiet" : "item");
     button.dataset.menuId = item.id;
     if (item.badge && item.id === "upgrade") {
       const label = document.createElement("span");
@@ -126,7 +194,7 @@ function mount() {
     button.addEventListener("click", () => {
       if (item.disabled) return;
       close();
-      if (item.run) item.run();
+      if (item.run) item.run({ anchor: goo });
     });
     return button;
   }
@@ -135,6 +203,7 @@ function mount() {
     if (item.text) {
       const line = document.createElement("p");
       line.className = "clay-menu-version";
+      line.setAttribute("part", "text");
       line.dataset.menuId = item.id;
       line.textContent = item.label;
       return line;
@@ -146,12 +215,35 @@ function mount() {
       for (const part of item.pair) pair.append(itemButton(part));
       return pair;
     }
+    if (item.dismiss) return dismissibleRow(item);
     return itemButton(item);
   }
 
+  function dismissibleRow(item) {
+    const row = document.createElement("div");
+    row.className = "clay-menu-row";
+    row.dataset.menuId = item.id;
+    const dismiss = document.createElement("button");
+    dismiss.type = "button";
+    dismiss.setAttribute("role", "menuitem");
+    dismiss.setAttribute("part", "dismiss");
+    dismiss.dataset.menuId = `${item.id}.dismiss`;
+    dismiss.setAttribute("aria-label", item.dismiss.label);
+    dismiss.title = item.dismiss.label;
+    dismiss.innerHTML = DISMISS_ICON;
+    dismiss.addEventListener("click", () => {
+      removeItem(item.id);
+      item.dismiss.run?.();
+    });
+    row.append(itemButton(item), dismiss);
+    return row;
+  }
+
   function sections() {
-    const extra = [...items.keys()].filter((id) => !SLOTTED.has(id));
-    return SECTIONS.map((ids) => (ids || extra).map((id) => items.get(id)).filter(Boolean)).filter((group) => group.length);
+    const inSection = (name) => [...items.values()].filter((item) => item.section === name);
+    const extra = [...items.keys()].filter((id) => !SLOTTED.has(id) && !items.get(id).section);
+    const fixed = SECTIONS.map((ids) => (ids || extra).map((id) => items.get(id)).filter(Boolean));
+    return [inSection("start"), ...fixed, inSection("end")].filter((group) => group.length);
   }
 
   function render() {
@@ -163,6 +255,7 @@ function mount() {
         const sep = document.createElement("div");
         sep.className = "clay-menu-sep";
         sep.setAttribute("role", "separator");
+        sep.setAttribute("part", "separator");
         list.append(sep);
       }
       for (const item of group) list.append(itemNode(item));
@@ -194,11 +287,14 @@ function mount() {
     disabled: Boolean(disabled),
   });
 
-  function addItem({ id, label, run, badge, keys, disabled, text, pair, href } = {}) {
+  function addItem({ id, label, run, badge, keys, disabled, text, pair, href, section, quiet, dismiss } = {}) {
     if (!id) return null;
     const item = clean({ id, label, run, badge, keys, disabled, href });
     if (text) item.text = true;
     if (Array.isArray(pair)) item.pair = pair.map(clean);
+    if (section === "start" || section === "end") item.section = section;
+    if (quiet) item.quiet = true;
+    if (dismiss) item.dismiss = { label: String(dismiss.label || "Dismiss"), run: typeof dismiss.run === "function" ? dismiss.run : null };
     items.set(id, item);
     render();
     return id;
@@ -228,6 +324,7 @@ function mount() {
 
   function setChecked() {
     edit.setAttribute("aria-checked", currentMode() === "edit" ? "true" : "false");
+    if (hideSwitch) addItem({ id: "clay.mode", label: currentMode() === "edit" ? "View mode" : "Edit mode", section: "start", run: () => edit.click() });
   }
   setChecked();
 
@@ -360,24 +457,30 @@ function mount() {
       `:root { --clay-menu-width: ${Math.ceil(rect.width)}px; --clay-menu-height: ${Math.ceil(rect.height)}px; }`;
   }
 
-  const ui = mountEditorUI({ name: "menu", content: root, css: [MENU_CSS], attributes: { "clay-mode-toggle": "" } });
-  attachPlacement({
-    dock: root,
-    container: ui.shadow,
-    grip,
-    storage: window.clay.storage && window.clay.storage.local,
-    onMove: replace,
-    onDragStart: () => {
-      close();
-      people?.close({ restore: false });
-    },
-  });
-  reserveSpace();
-  if (typeof ResizeObserver === "function") new ResizeObserver(reserveSpace).observe(root);
+  const css = embedded ? [MENU_BASE, skin ?? MENU_SKIN, MENU_TOUCH] : [MENU_BASE, MENU_FLOATING, MENU_SKIN, MENU_TOUCH];
+  const ui = mountEditorUI({ name: "menu", content: root, css, parent: slot || document.body, attributes: { "clay-mode-toggle": "" } });
+  if (embedded) {
+    window.addEventListener("resize", close);
+    window.addEventListener("scroll", () => { if (topLayer && isOpen()) placeList(); }, { capture: true, passive: true });
+  } else {
+    attachPlacement({
+      dock: root,
+      container: ui.shadow,
+      grip,
+      storage: window.clay.storage && window.clay.storage.local,
+      onMove: replace,
+      onDragStart: () => {
+        close();
+        people?.close({ restore: false });
+      },
+    });
+    reserveSpace();
+    if (typeof ResizeObserver === "function") new ResizeObserver(reserveSpace).observe(root);
 
-  new MutationObserver(watchIntro).observe(doc.body, { childList: true });
-  watchIntro();
-  followLook(root, root.querySelector(".clay-menu"), MENU_SURFACE);
+    new MutationObserver(watchIntro).observe(doc.body, { childList: true });
+    watchIntro();
+  }
+  if (!skin) followLook(root, root.querySelector(".clay-menu"), MENU_SURFACE);
 
   const openSeo = () => import("./menu/seo.js").then((m) => m.open({ returnFocus: goo }));
 
@@ -404,7 +507,7 @@ function mount() {
   followCapability = applyHidden;
   if (currentMode() !== "edit") import("../core/host-permission.js").then((m) => m.checkHostPermission()).catch(() => {});
 
-  window.clay.menu = { addItem, removeItem, open, close, note: showNote };
+  window.clay.menu = { addItem, removeItem, open, close, note: showNote, embedded, button: goo };
   document.dispatchEvent(new CustomEvent("clay:menu-ready"));
 }
 

package/src/ui/bevel.js

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

package/src/ui/skins/cms.js

@@ -1,4 +1,4 @@
 // GENERATED from src/vendor/hypercms.vendor.js by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
-export const SOURCE_SHA256 = "f4a8bf46fe5d4f1037810077d8068d59cd996896c59977abc2d2baa6ad3f0abd";
+export const SOURCE_SHA256 = "34ad22f65c67a35a9e8062b83bd00395ecd5620badabfa012598840bdd980f32";
 export const ROOTS = [".hcms-shell"];
 export const CSS = "@layer clay-skin{\n:is(.hcms-shell):not([data-theme]),:is(.hcms-shell):not([data-theme]) *{--mirk-canvas:light-dark(#FDF8F0, #0B0C13) !important;--mirk-bg:light-dark(#FFFCF6, #11131E) !important;--mirk-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-accent:light-dark(#F4ECDF, #1A1D2C) !important;--mirk-destructive:light-dark(#A83A2C, #FF5566) !important;--mirk-focus-color:light-dark(#8F6310, #D9A445) !important;--mirk-bevel-bg:light-dark(#F1E7D4, #22273E) !important;--mirk-bevel-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-bevel-tl:light-dark(#FFF9ED, #3C4260) !important;--mirk-bevel-br:light-dark(#D6C3A5, #1B2033) !important;--mirk-bevel-hover-bg:color-mix(in srgb, light-dark(#F1E7D4, #22273E), light-dark(#FFF9ED, #3C4260) 45%) !important;--mirk-pill-inner-top:light-dark(#FFF9ED, #3C4260) !important;--mirk-input-border:light-dark(#D8C8AF, #353B52) !important;--mirk-placeholder-color:light-dark(#9A8A70, #6A7090) !important;--mirk-ctrl-bg:light-dark(#6B5942, #8A90AB) !important;--mirk-toggle-bg:light-dark(#FCF8F1, #4A5275) !important;--mirk-toggle-hi:light-dark(#FFF9ED, #6C759A) !important;--mirk-toggle-lo:light-dark(#D6C3A5, #1B2033) !important;--mirk-mark-fg:light-dark(#2B241B, #ECEAF2) !important;--mirk-sortable-dot:light-dark(#D8C8AF, #353B52) !important;--mirk-sortable-shadow:light-dark(#D6C3A5, #1B2033) !important;--mirk-sortable-label:light-dark(#6B5942, #8A90AB) !important;--mirk-sortable-placeholder:light-dark(#9A8A70, #6A7090) !important;--mirk-slider-fill:light-dark(#F0E4CC, #3A2F17) !important;--mirk-slider-nub-bg:light-dark(#FCF8F1, #4A5275) !important;--mirk-slider-nub-hi:light-dark(#FFF9ED, #6C759A) !important;--mirk-slider-nub-lo:light-dark(#D6C3A5, #1B2033) !important;--mirk-chip-surface:light-dark(#FFFCF6, #11131E) !important;--mirk-chip-edge:light-dark(#D8C8AF, #353B52) !important;--mirk-chip-primary-bg:light-dark(#2B241B, #ECEAF2) !important;--mirk-chip-primary-fg:light-dark(#FDF8F0, #0B0C13) !important;--mirk-chip-alert:light-dark(#A83A2C, #FF5566) !important;--mirk-radius:0px !important;--mirk-focus-offset:2px !important}\n:is(.hcms-shell){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important}\n.hcms-shell .mirk-chip__actions .mirk-chip__action--primary{--mirk-bevel-bg:var(--mirk-chip-primary-bg) !important;--mirk-bevel-fg:var(--mirk-chip-primary-fg) !important;--mirk-bevel-tl:color-mix(in srgb, var(--mirk-chip-primary-bg), white 24%) !important;--mirk-bevel-br:color-mix(in srgb, var(--mirk-chip-primary-bg), black 32%) !important;--mirk-bevel-hover-bg:color-mix(in srgb, var(--mirk-chip-primary-bg), white 10%) !important}\n}";

package/src/ui/skins/quickcrop.js

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

package/src/ui/skins/richclay.js

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