@panphora/bevel 0.1.0

package/integrations/quickcrop.js

@@ -0,0 +1,56 @@
+(function () {
+  if (!window.Bevel || window.Bevel.crop) return;
+  const modalFor = (trigger, presets, onPreset) => ({
+    fit() {
+      return { width: Math.max(1, Math.min(760, window.innerWidth - 120)), height: Math.max(1, Math.min(560, window.innerHeight - 270)) };
+    },
+    open({ content, confirmLabel, onConfirm, onCancel }) {
+      const dialog = document.createElement("dialog");
+      dialog.className = "bevel-modal bevel-quickcrop";
+      dialog.setAttribute("aria-label", "Crop image");
+      dialog.setAttribute("data-bevel-transient", "");
+      dialog.innerHTML = '<button type="button" class="bevel-overlay__close" data-bevel-crop-cancel aria-label="Cancel crop"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><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></button><div class="bevel-modal__inner"><header class="bevel-modal__header"><h2 class="bevel-modal__heading">Crop image</h2><p class="bevel-modal__description"></p></header><div class="bevel-modal__body bevel-quickcrop__body"></div><footer class="bevel-modal__footer"><button type="button" class="bevel-button" data-bevel-crop-cancel>Cancel</button><button type="button" class="bevel-button bevel-button--primary" data-bevel-crop-confirm autofocus></button></footer></div>';
+      const image = content.querySelector("img");
+      const header = dialog.querySelector(".bevel-modal__header");
+      const presetRoot = document.createElement("div");
+      presetRoot.className = "bevel-quickcrop__presets";
+      for (const preset of presets || []) { const button = document.createElement("button"); button.type = "button"; button.className = "bevel-button bevel-button--small"; button.dataset.bevelCropPreset = preset.value; button.textContent = preset.label; presetRoot.append(button); }
+      if (presetRoot.childElementCount) { const help = document.createElement("p"); help.className = "bevel-quickcrop__help"; help.textContent = "Changing the aspect resets the crop selection."; header.append(presetRoot, help); }
+      dialog.querySelector(".bevel-modal__description").textContent = `Original image: ${image.naturalWidth} × ${image.naturalHeight} pixels.`;
+      dialog.querySelector(".bevel-quickcrop__body").append(content);
+      dialog.querySelector("[data-bevel-crop-confirm]").textContent = confirmLabel;
+      document.body.append(dialog);
+      let done = false;
+      const finish = callback => { if (done) return; done = true; callback(); };
+      const connectedTrigger = trigger?.isConnected;
+      const observer = new MutationObserver(() => {
+        if (!dialog.isConnected || (connectedTrigger && !trigger.isConnected)) finish(onCancel);
+      });
+      const accept = (callback, reason) => {
+        if (!done && window.Bevel.close(dialog, { reason })) finish(callback);
+      };
+      dialog.querySelector("[data-bevel-crop-confirm]").addEventListener("click", () => accept(onConfirm, "confirm"));
+      dialog.querySelectorAll("[data-bevel-crop-cancel]").forEach(button => button.addEventListener("click", () => accept(onCancel, "cancel")));
+      presetRoot.addEventListener("click", event => { const button = event.target.closest("[data-bevel-crop-preset]"); if (!button || done || !window.Bevel.close(dialog, { reason: "preset" })) return; onPreset?.(button.dataset.bevelCropPreset); finish(onCancel); });
+      dialog.addEventListener("close", () => finish(onCancel));
+      try {
+        if (!window.Bevel.open(dialog, { trigger })) throw new Error("Bevel crop dialog opening was canceled.");
+      } catch (error) {
+        done = true;
+        window.Bevel.destroy(dialog);
+        dialog.remove();
+        throw error;
+      }
+      observer.observe(document.body, { childList: true, subtree: true });
+      return { close() { done = true; observer.disconnect(); window.Bevel.destroy(dialog); dialog.remove(); } };
+    }
+  });
+  window.Bevel.crop = function (file, { quickcrop = window.quickcrop, aspect = null, trigger, presets, onPreset } = {}) {
+    if (typeof quickcrop !== "function") {
+      const detail = { component: "dropzone", code: "missing-quickcrop", message: "Quickcrop is required to crop an image." };
+      (trigger || document).dispatchEvent(new CustomEvent("bevel:error", { bubbles: true, detail }));
+      return Promise.reject(new Error(detail.message));
+    }
+    return quickcrop(file, { aspect, modal: modalFor(trigger, presets, onPreset) });
+  };
+})();

package/integrations/richclay.css

@@ -0,0 +1,100 @@
+@layer components {
+  .bevel-richtext,
+  .bevel-inline-edit[data-bevel-edit-kind="rich"],
+  [data-bevel-richclay-chrome] {
+    --richclay-surface: var(--bevel-surface);
+    --richclay-surface-alt: var(--bevel-sunk);
+    --richclay-text: var(--bevel-ink);
+    --richclay-muted: var(--bevel-muted);
+    --richclay-border: var(--bevel-line-2);
+    --richclay-accent: var(--bevel-brass);
+    --richclay-accent-ink: var(--bevel-ground);
+    --richclay-focus: var(--bevel-brass);
+    --richclay-danger: var(--bevel-ox);
+    --richclay-radius: 0px;
+    --richclay-control-size: 32px;
+    --richclay-shadow: var(--bevel-shadow);
+    font-family: var(--bevel-font-sans);
+  }
+  .bevel-inline-edit--title .bevel-inline-edit__input {
+    --richclay-muted: var(--bevel-faint);
+    --richclay-focus: transparent;
+    --richclay-border: transparent;
+  }
+  .bevel-richtext :where(.richclay-toolbar),
+  :where(.richclay-float, .richclay-dialog)[data-bevel-richclay-chrome] { color: var(--bevel-ink); background: var(--bevel-surface); border: 1px solid var(--bevel-line-2); }
+  .bevel-richtext :where([contenteditable="true"]):focus { outline: 2px solid var(--bevel-brass); outline-offset: 2px; }
+}
+
+.bevel-richtext { border: 0; }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-toolbar,
+.richclay-toolbar[data-bevel-richclay-chrome] {
+  gap: 3px;
+  margin: 0;
+  padding: 8px;
+  border: 1px solid var(--bevel-line-2);
+  border-radius: 0;
+  background: var(--bevel-sunk);
+  color: var(--bevel-ink);
+}
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-button {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 7px;
+  gap: 6px;
+  border: 2px solid;
+  border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  border-radius: 0;
+  background: var(--bevel-face);
+  font: 14px var(--bevel-font-sans);
+  cursor: pointer;
+}
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-button:is([aria-pressed="true"], [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);
+  box-shadow: none;
+  color: var(--bevel-ink);
+}
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-button[aria-pressed="true"] > svg { translate: 1px 1px; }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-button:disabled { opacity: .45; cursor: not-allowed; }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-button:hover:not([aria-pressed="true"], [aria-expanded="true"], :disabled) {
+  border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);
+  background: color-mix(in srgb, var(--bevel-face), var(--bevel-edge-hi) 45%);
+}
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-separator { align-self: center; height: 22px; margin: 0 5px; background: var(--bevel-line-2); }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-menu { inset-block-start: 38px; min-width: 210px; padding: 5px; border-radius: 0; box-shadow: var(--bevel-shadow); }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-menu-item { padding: 8px 10px; border: 0; border-radius: 0; font: 14px var(--bevel-font-sans); }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) .richclay-menu-item[aria-checked="true"] { background: var(--bevel-sunk); box-shadow: inset 2px 0 var(--bevel-brass); }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) [data-richclay-menu-item="blockMenu"][data-richclay-option-index="1"] { font: 500 18px var(--bevel-font-serif); }
+:is(.bevel-richtext, [data-bevel-richclay-chrome]) [data-richclay-menu-item="blockMenu"][data-richclay-option-index="2"] { font: 500 15.5px var(--bevel-font-serif); }
+.bevel-richtext > [data-bevel-richtext] { position: relative; margin: 0; min-height: 240px; padding: 28px 30px; border: 1px solid var(--bevel-line-2); border-radius: 0; background: var(--bevel-surface); color: var(--bevel-ink); overflow-wrap: anywhere; }
+.bevel-richtext > .richclay-toolbar + [data-bevel-richtext] { border-top: 0; }
+.bevel-richtext > [data-bevel-richtext] h2 { margin: 0; font: 400 29px/1.15 var(--bevel-font-serif); }
+.bevel-richtext > [data-bevel-richtext] p { margin: 14px 0; font-size: 14.5px; line-height: 1.7; color: var(--bevel-ink-2); }
+.bevel-richtext > [data-bevel-richtext] :is(strong, b) { color: var(--bevel-ink); }
+.bevel-richtext > [data-bevel-richtext] blockquote { margin: 20px 0; padding-left: 18px; border-left: 2px solid var(--bevel-brass); font: 21px var(--bevel-font-serif); color: var(--bevel-ink); }
+.bevel-richtext > [data-bevel-richtext] a { color: var(--bevel-brass); }
+.richclay-dialog[data-bevel-richclay-chrome] { position: relative; width: min(100%, 360px); margin: 16px 0; padding: 14px 16px 12px; border: 1px solid var(--bevel-line-2); border-radius: 0; background: var(--bevel-surface); color: var(--bevel-ink); box-shadow: var(--bevel-shadow); }
+.richclay-dialog[data-bevel-richclay-chrome]::before { content: ""; position: absolute; left: calc(var(--richclay-dialog-arrow, 28px) - 6px); top: -7px; width: 12px; height: 12px; background: var(--bevel-surface); border-top: 1px solid var(--bevel-line-2); border-left: 1px solid var(--bevel-line-2); transform: rotate(45deg); }
+.richclay-dialog[data-bevel-richclay-chrome][data-richclay-side="above"]::before { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--bevel-line-2); border-bottom: 1px solid var(--bevel-line-2); }
+[data-bevel-richclay-chrome] .richclay-dialog-title { margin-bottom: 2px; font: 500 10px var(--bevel-font-mono); text-transform: uppercase; letter-spacing: .12em; }
+[data-bevel-richclay-chrome] .richclay-field { gap: 5px; }
+[data-bevel-richclay-chrome] .richclay-field > span { color: var(--bevel-ink-2); font-size: 12px; }
+[data-bevel-richclay-chrome] .richclay-input { min-height: 30px; padding: 4px 8px; border: 2px solid; border-color: var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in); border-radius: 0; background: var(--bevel-sunk); color: var(--bevel-ink); font: 13px var(--bevel-font-sans); }
+[data-bevel-richclay-chrome] .richclay-dialog-actions { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--bevel-line); flex-wrap: wrap; }
+[data-bevel-richclay-chrome] :is(.richclay-primary, .richclay-secondary) { min-height: 30px; padding: 4px 10px; border: 2px solid; border-color: var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi); border-radius: 0; background: var(--bevel-face); color: var(--bevel-ink); font: 13px var(--bevel-font-sans); }
+[data-bevel-richclay-chrome] .richclay-primary { background: var(--bevel-ink); color: var(--bevel-ground); border-color: color-mix(in srgb, var(--bevel-ink), white 24%) color-mix(in srgb, var(--bevel-ink), black 32%) color-mix(in srgb, var(--bevel-ink), black 32%) color-mix(in srgb, var(--bevel-ink), white 24%); }
+.richclay-float[data-bevel-richclay-chrome] { border-radius: 0; box-shadow: var(--bevel-shadow); }
+.richclay-float[data-bevel-richclay-chrome] > .richclay-toolbar { padding: 5px; }
+@media (max-width: 540px) {
+  .bevel-richtext > [data-bevel-richtext] { padding: 20px 18px; }
+  .bevel-richtext > [data-bevel-richtext] blockquote { font-size: 18px; }
+}
+
+[data-bevel-richclay-icon] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
+[data-bevel-richclay-chrome] [data-richclay-control="blockMenu"] { min-width: 60px; padding: 0 7px; font-size: 13.5px; }
+[data-bevel-richclay-chrome] [data-richclay-control="blockMenu"] [data-bevel-richclay-icon] { width: 100%; justify-content: space-between; }
+[data-bevel-richclay-chrome] [aria-pressed="true"] > [data-bevel-richclay-icon] { translate: 1px 1px; }
+@media (max-width: 540px) {
+  [data-bevel-richclay-chrome] [data-richclay-control="blockMenu"] { min-width: 0; }
+}

package/integrations/richclay.js

@@ -0,0 +1,131 @@
+(function () {
+  if (!window.Bevel || window.Bevel.richtext) return;
+  const mounted = new Map();
+  let observer;
+  const editors = (root) => [...(root.matches?.("[data-bevel-richtext]") ? [root] : []), ...root.querySelectorAll("[data-bevel-richtext]")];
+  const icons = Object.freeze({
+    blockMenu: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19 4h-9a4.5 4.5 0 0 0 0 9h3M13 4v16M17 4v16\"/></svg>",
+    bold: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M178.48,115.7A44,44,0,0,0,148,40H80a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8h80a48,48,0,0,0,18.48-92.3ZM88,56h60a28,28,0,0,1,0,56H88Zm72,136H88V128h72a32,32,0,0,1,0,64Z\"/></svg>",
+    italic: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M200,56a8,8,0,0,1-8,8H157.77L115.1,192H144a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H98.23L140.9,64H112a8,8,0,0,1,0-16h80A8,8,0,0,1,200,56Z\"/></svg>",
+    underline: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M200,224a8,8,0,0,1-8,8H64a8,8,0,0,1,0-16H192A8,8,0,0,1,200,224Zm-72-24a64.07,64.07,0,0,0,64-64V56a8,8,0,0,0-16,0v80a48,48,0,0,1-96,0V56a8,8,0,0,0-16,0v80A64.07,64.07,0,0,0,128,200Z\"/></svg>",
+    strikethrough: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M224,128a8,8,0,0,1-8,8H175.93c9.19,7.11,16.07,17.2,16.07,32,0,13.34-7,25.7-19.75,34.79C160.33,211.31,144.61,216,128,216s-32.33-4.69-44.25-13.21C71,193.7,64,181.34,64,168a8,8,0,0,1,16,0c0,17.35,22,32,48,32s48-14.65,48-32c0-14.85-10.54-23.58-38.77-32H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM76.33,104a8,8,0,0,0,7.61-10.49A17.3,17.3,0,0,1,83.11,88c0-18.24,19.3-32,44.89-32,18.84,0,34.16,7.42,41,19.85a8,8,0,0,0,14-7.7C173.33,50.52,152.77,40,128,40,93.29,40,67.11,60.63,67.11,88a33.73,33.73,0,0,0,1.62,10.49A8,8,0,0,0,76.33,104Z\"/></svg>",
+    code: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z\"/></svg>",
+    link: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z\"/></svg>",
+    unorderedList: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z\"/></svg>",
+    orderedList: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M224,128a8,8,0,0,1-8,8H104a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM104,72H216a8,8,0,0,0,0-16H104a8,8,0,0,0,0,16ZM216,184H104a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM43.58,55.16,48,52.94V104a8,8,0,0,0,16,0V40a8,8,0,0,0-11.58-7.16l-16,8a8,8,0,0,0,7.16,14.32ZM79.77,156.72a23.73,23.73,0,0,0-9.6-15.95,24.86,24.86,0,0,0-34.11,4.7,23.63,23.63,0,0,0-3.57,6.46,8,8,0,1,0,15,5.47,7.84,7.84,0,0,1,1.18-2.13,8.76,8.76,0,0,1,12-1.59A7.91,7.91,0,0,1,63.93,159a7.64,7.64,0,0,1-1.57,5.78,1,1,0,0,0-.08.11L33.59,203.21A8,8,0,0,0,40,216H72a8,8,0,0,0,0-16H56l19.08-25.53A23.47,23.47,0,0,0,79.77,156.72Z\"/></svg>",
+    quote: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M100,56H40A16,16,0,0,0,24,72v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,100,56Zm0,80H40V72h60ZM216,56H156a16,16,0,0,0-16,16v64a16,16,0,0,0,16,16h60v8a32,32,0,0,1-32,32,8,8,0,0,0,0,16,48.05,48.05,0,0,0,48-48V72A16,16,0,0,0,216,56Zm0,80H156V72h60Z\"/></svg>",
+    outdent: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M224,128a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM112,72H216a8,8,0,0,0,0-16H112a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM72,144a8,8,0,0,0,5.66-13.66L43.31,96,77.66,61.66A8,8,0,0,0,66.34,50.34l-40,40a8,8,0,0,0,0,11.32l40,40A8,8,0,0,0,72,144Z\"/></svg>",
+    indent: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M224,128a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM112,72H216a8,8,0,0,0,0-16H112a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM34.34,141.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0,0-11.32l-40-40A8,8,0,0,0,34.34,61.66L68.69,96,34.34,130.34A8,8,0,0,0,34.34,141.66Z\"/></svg>",
+    undo: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z\"/></svg>",
+    redo: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 256 256\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z\"/></svg>",
+    clearFormatting: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3 3l18 18M5 5v3M9 5h10v3M12 5v3M12 12v7M8 19h8\"/></svg>",
+    paragraph: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19 4h-9a4.5 4.5 0 0 0 0 9h3M13 4v16M17 4v16\"/></svg>",
+    h1: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3.5 5.5v12M12 5.5v12M3.5 11.5H12M17 12l3-2v10\"/></svg>",
+    h2: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3.5 5.5v12M12 5.5v12M3.5 11.5H12M16 12.5c0-3.5 6-3.5 6 0 0 2-2.5 3.5-6 7.5h6\"/></svg>",
+    h3: "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M3.5 5.5v12M12 5.5v12M3.5 11.5H12M16 11c1.5-1.5 6-1.5 6 1.5 0 1.5-1.5 2.5-3 2.5h-1M19 15c1.5 0 3 1 3 2.5 0 3-4.5 3-6 1.5\"/></svg>",
+  });
+  const menuCaret = "<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"square\" stroke-linejoin=\"miter\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m5 9 7 7 7-7\"/></svg>";
+  const themeControls = record => {
+    if (!record.owned || !record.editor.squire) return;
+    const toolbar = record.editor.toolbar || record.editor.float?.toolbar;
+    for (const item of toolbar?.items || []) {
+      const id = item.def.id;
+      if (id === "undo" || id === "redo") item.button.disabled = !record.history?.[id];
+      if (!(id in icons)) continue;
+      let face = item.button.querySelector("[data-bevel-richclay-icon]");
+      if (!face) {
+        for (const child of [...item.button.children]) if (!child.classList.contains("richclay-sr-only")) child.remove();
+        face = document.createElement("span"); face.dataset.bevelRichclayIcon = ""; face.setAttribute("aria-hidden", "true");
+        face.innerHTML = id === "blockMenu" ? icons.blockMenu + menuCaret : icons[id];
+        item.button.prepend(face);
+      }
+      if (id === "blockMenu") {
+        const option = item.def.options.find(option => option.isActive?.(record.editor));
+        const markup = (option?.icon || icons.blockMenu) + menuCaret;
+        if (face.dataset.blockValue !== (option?.value || "P")) {
+          face.innerHTML = markup;
+          face.dataset.blockValue = option?.value || "P";
+        }
+        const optionIcons = [icons.paragraph, icons.h1, icons.h2, icons.h3, icons.quote, icons.code];
+        for (const [index, markup] of optionIcons.entries()) {
+          const button = item.menu?.querySelector(`[data-richclay-option-index="${index}"]`);
+          if (!button || button.hasAttribute("data-bevel-richclay-icon")) continue;
+          const current = button?.querySelector("svg");
+          if (current) current.insertAdjacentHTML("beforebegin", markup), current.remove();
+          else button.insertAdjacentHTML("afterbegin", markup);
+          button.dataset.bevelRichclayIcon = "";
+        }
+        const label = option?.label || "Paragraph";
+        const accessibleLabel = `Text style: ${label}`;
+        item.button.setAttribute("aria-label", accessibleLabel);
+        item.button.title = accessibleLabel;
+      }
+    }
+  };
+  const themeChrome = () => {
+    for (const [element, record] of mounted) {
+      if (record.owned && record.editor.squire && !record.onSelection) {
+        record.history = { undo: false, redo: false };
+        record.onHistory = event => { record.history = { undo: Boolean(event.detail.canUndo), redo: Boolean(event.detail.canRedo) }; themeControls(record); (record.editor.toolbar || record.editor.float?.toolbar)?.ensureSingleTabStop(); };
+        record.editor.squire.addEventListener("undoStateChange", record.onHistory);
+        record.onSelection = () => themeControls(record);
+        for (const type of ["pathChange", "select", "cursor"]) record.editor.squire.addEventListener(type, record.onSelection);
+      }
+      themeControls(record);
+      const current = new Set([record.editor.toolbar?.root, record.editor.float?.root, record.editor.dialog, record.editor.liveRegion, record.editor.description].filter(Boolean));
+      for (const node of record.chrome) if (!current.has(node)) {
+        node.removeAttribute("data-bevel-richclay-chrome");
+        record.chrome.delete(node);
+      }
+      if (record.owned && element.closest('[data-bevel-transient="inline-draft"]')) for (const node of current) {
+        if (!node.hasAttribute("data-bevel-transient")) {
+          node.setAttribute("data-bevel-transient", "inline-editor-chrome");
+          record.transients.add(node);
+        }
+      }
+      for (const node of current) if (!node.hasAttribute("data-bevel-richclay-chrome")) {
+        node.setAttribute("data-bevel-richclay-chrome", "");
+        record.chrome.add(node);
+      }
+    }
+  };
+  window.Bevel.richtext = {
+    mount(root, { RichClay = window.RichClay, ...options } = {}) {
+      if (typeof RichClay !== "function") {
+        root.dispatchEvent(new CustomEvent("bevel:error", { bubbles: true, detail: { component: "richtext", code: "missing-richclay", message: "Richclay is required to mount a rich text editor." } }));
+        throw new Error("Richclay is required to mount a rich text editor.");
+      }
+      const instances = editors(root).map((element) => {
+        if (mounted.has(element)) return mounted.get(element).editor;
+        function onChange(...args) { return options.onChange?.apply(this, args); }
+        const editor = new RichClay(element, { ...options, onChange });
+        // Richclay returns an existing instance without applying new options.
+        mounted.set(element, { editor, RichClay, owned: editor.options.onChange === onChange, chrome: new Set(), transients: new Set() });
+        return editor;
+      });
+      themeChrome();
+      if (mounted.size && !observer) {
+        observer = new MutationObserver(themeChrome);
+        observer.observe(document.body, { childList: true, subtree: true });
+      }
+      return instances;
+    },
+    prepareForSave(cloneRoot) {
+      for (const RichClay of new Set([...mounted.values()].map(record => record.RichClay))) RichClay.stripFromClone(cloneRoot);
+      return cloneRoot;
+    },
+    unmount(root, { preserve = [] } = {}) {
+      for (const [element, record] of mounted) {
+        if (element !== root && !root.contains(element)) continue;
+        if (preserve.some(scope => scope === element || scope.contains?.(element))) continue;
+        mounted.delete(element);
+        if (record.onHistory && record.editor.squire) record.editor.squire.removeEventListener("undoStateChange", record.onHistory);
+        if (record.onSelection && record.editor.squire) for (const type of ["pathChange", "select", "cursor"]) record.editor.squire.removeEventListener(type, record.onSelection);
+        for (const node of record.chrome) node.removeAttribute("data-bevel-richclay-chrome");
+        for (const node of record.transients) node.removeAttribute("data-bevel-transient");
+        if (record.owned) record.editor.destroy();
+      }
+      if (!mounted.size) { observer?.disconnect(); observer = null; }
+    }
+  };
+})();