@panphora/clayjs 1.5.3 → 1.6.1

package/src/ui/modal.js

@@ -1,3 +1,7 @@
+import { bevelButton, setShown } from "./bevel-controls.js";
+import { set } from "../lib/hostile-css.js";
+import { bevelDialog, dismissOf } from "./bevel-dialog.js";
+
 /*
 
   theModal
@@ -9,10 +13,14 @@
   - user confirms
   - everything about the modal resets
 
-  themodal.html = content;
+  themodal.html = content;   // html, yes and no each take markup, or a node placed as it is
   themodal.yes = content;
   themodal.no = content;
 
+  themodal.closeHtml = "x";  // any non-empty value shows the corner close
+  themodal.title = content;  // markup or a node: a header with the title (optional)
+  themodal.width = "440px";  // the panel's width (default 600px)
+
   themodal.disableFocus = true;
   themodal.disableScroll = true;
 
@@ -24,35 +32,11 @@
 
 */
 
-/* 
-
-things you probably want to style
-
-.micromodal {}
-.micromodal .micromodal__container {}
-.micromodal .micromodal__content {}
-.micromodal .micromodal__heading {}
-.micromodal .micromodal__input {}
-.micromodal .micromodal__input:focus, .micromodal .micromodal__input:active {}
-.micromodal .micromodal__buttons {}
-.micromodal .micromodal__yes, .micromodal__no {}
-.micromodal .micromodal__yes {}
-.micromodal .micromodal__yes:focus, .micromodal__yes:hover {}
-.micromodal .micromodal__no {}
-.micromodal .micromodal__no:focus, .micromodal__no:hover {}
-.micromodal .micromodal__close {}
-.micromodal .micromodal__close:focus, .micromodal__close:hover {}
-
-*/
-
-
-
-
-
-
 // MicroModal
 // MIT License (c) 2017 Indrashish Ghosh
 // MODIFIED: removed `this.activeElement.focus()` after modal is closed
+// MODIFIED: takes the modal element itself, not an id, and adds no open class; the
+// shell is created on open and removed on close, so nothing has to be looked up
 
 const MicroModal = (() => {
   'use strict'
@@ -86,7 +70,7 @@ const MicroModal = (() => {
       awaitOpenAnimation = false,
       debugMode = false
     }) {
-      this.modal = document.getElementById(targetModal)
+      this.modal = typeof targetModal === 'string' ? document.getElementById(targetModal) : targetModal
 
       this.config = { debugMode, disableScroll, openTrigger, closeTrigger, openClass, onShow, onClose, awaitCloseAnimation, awaitOpenAnimation, disableFocus }
 
@@ -105,7 +89,6 @@ const MicroModal = (() => {
     showModal (event = null) {
       this.activeElement = document.activeElement
       this.modal.setAttribute('aria-hidden', 'false')
-      this.modal.classList.add(this.config.openClass)
       this.scrollBehaviour('disable')
       this.addEventListeners()
 
@@ -122,33 +105,13 @@ const MicroModal = (() => {
       this.config.onShow(this.modal, this.activeElement, event)
     }
 
+    // Runs on the stored element even after a live-sync morph removed it from the
+    // DOM, so onClose, the keydown listener and the scroll restore are never stranded.
     closeModal (event = null) {
-      const modal = this.modal
       this.modal.setAttribute('aria-hidden', 'true')
       this.removeEventListeners()
       this.scrollBehaviour('enable')
       this.config.onClose(this.modal, this.activeElement, event)
-
-      if (this.config.awaitCloseAnimation) {
-        const openClass = this.config.openClass // <- old school ftw
-        this.modal.addEventListener('animationend', function handler () {
-          modal.classList.remove(openClass)
-          modal.removeEventListener('animationend', handler, false)
-        }, false)
-      } else {
-        modal.classList.remove(this.config.openClass)
-      }
-    }
-
-    closeModalById (targetModal) {
-      // Fall back to the stored modal reference when the node was removed from
-      // the DOM externally (e.g. a live-sync morph). Without this, getElementById
-      // returns null, closeModal() is skipped, and its cleanup never runs — the
-      // onClose callback, this.removeEventListeners() (which drops MicroModal's
-      // document keydown listener), and scroll restore are all stranded.
-      const modal = document.getElementById(targetModal)
-      if (modal) this.modal = modal
-      if (this.modal) this.closeModal()
     }
 
     scrollBehaviour (toggle) {
@@ -310,9 +273,9 @@ const MicroModal = (() => {
     activeModal.showModal()
   }
 
-  const close = targetModal => {
+  const close = () => {
     if (!activeModal) return
-    targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal()
+    activeModal.closeModal()
     activeModal = null
   }
 
@@ -323,310 +286,10 @@ const MicroModal = (() => {
 
 // themodal.js 
 // MIT License (c) 2023 David Miranda
-
-const modalCss = `<style class="micromodal-css">
-.micromodal {
-  display: none;
-  color: #fff;
-  font-family: var(--hyperclay-modal-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
-  font-size: var(--hyperclay-modal-font-size, 18px);
-}
-
-.micromodal button:not(.custom-button) {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  overflow: visible;
-  font: inherit;
-  line-height: inherit;
-  text-transform: none;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: 0;
-}
-
-.micromodal .micromodal__hide {
-  display: none;
-}
-
-.micromodal.is-open {
-  display: block;
-}
-
-.micromodal__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0,0,0,.65);
-}
-
-.micromodal__container {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  max-width: min(550px, calc(100vw - 2rem));
-  max-height: calc(100vh - 4rem);
-  max-height: calc(100dvh - 2rem);
-  box-sizing: border-box;
-  overflow: hidden;
-  border: 2px solid #FFFFFF;
-  background-color: #11131E;
-}
-
-.micromodal__inner {
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* Must subtract container's 4px border (2px top + 2px bottom) from max-height,
-     otherwise inner overflows past container since box-sizing: border-box
-     makes the container's content area smaller than its max-height */
-  max-height: calc(100dvh - 2rem - 4px);
-  padding: 26px 40px 40px 40px;
-}
-
-@media (min-width: 640px) {
-  .micromodal .micromodal__inner {
-    padding: 52px 64px 60px 64px;
-  }
-}
-
-.micromodal[aria-hidden="false"] .micromodal__overlay {
-  animation: microModalFadeIn .2s cubic-bezier(0.0, 0.0, 0.2, 1);
-}
-
-.micromodal[aria-hidden="false"] .micromodal__container {
-  animation: microModalSlideIn .2s cubic-bezier(0, 0, .2, 1);
-}
-
-.micromodal .micromodal__container,
-.micromodal .micromodal__overlay {
-  will-change: transform;
-}
-
-@keyframes microModalFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes microModalSlideIn {
-  from { transform: translateY(15%); }
-  to { transform: translateY(0); }
-}
-
-.micromodal .micromodal__content {
-  margin-bottom: 14px;
-  overflow-wrap: anywhere;
-}
-
-.micromodal .micromodal__heading {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 8px;
-  overflow-wrap: anywhere;
-}
-
-.micromodal .micromodal__input {
-  width: min(calc(100vw - 100px), 420px);
-  padding: 6px 6px 7px;
-  font-size: var(--hyperclay-modal-input-font-size, 16px);
-  color: #000;
-  background: #fff;
-}
-
-.micromodal .micromodal__input:focus, .micromodal .micromodal__input:active {
-  outline: 3px solid #6A73B6;
-}
-
-.micromodal button.micromodal__yes {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 39px;
-  line-height: 0;
-  border: 3px solid;
-  border-top-color: #94BA6F;
-  border-left-color: #94BA6F;
-  border-bottom-color: #1A3004;
-  border-right-color: #1A3004;
-  background-color: #49870B;
-}
-
-.micromodal button.micromodal__yes:focus,
-.micromodal button.micromodal__yes:hover {
-  background-color: #549B0D;
-}
-
-.micromodal button.micromodal__yes:active {
-  border-top-color: #1A3004;
-  border-left-color: #1A3004;
-  border-bottom-color: #94BA6F;
-  border-right-color: #94BA6F;
-}
-
-.micromodal button.micromodal__secondary-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 39px;
-  line-height: 0;
-  border: 3px solid;
-  border-top-color: #474C65;
-  border-left-color: #474C65;
-  border-bottom-color: #131725;
-  border-right-color: #131725;
-  background-color: #1D1F2F;
-  color: #E5E7EB;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: bold;
-}
-
-.micromodal button.micromodal__secondary-btn:focus,
-.micromodal button.micromodal__secondary-btn:hover {
-  background-color: #232639;
-}
-
-.micromodal button.micromodal__secondary-btn:active {
-  border-top-color: #131725;
-  border-left-color: #131725;
-  border-bottom-color: #474C65;
-  border-right-color: #474C65;
-}
-
-.micromodal:has(.snippet-code-block) .micromodal__content {
-  margin-bottom: 0;
-}
-
-.micromodal .snippet-code-block {
-  background-color: #292E54;
-  padding: 1rem;
-  margin-bottom: 14px;
-  max-width: 420px;
-  overflow-x: auto;
-}
-
-.micromodal .snippet-code-block pre {
-  color: white;
-  font-family: var(--hyperclay-modal-code-font-family, var(--hyperclay-modal-font-family, monospace));
-  font-size: 0.875rem;
-  white-space: nowrap;
-  margin: 0;
-}
-
-.micromodal .snippet-warning {
-  padding: 0.75rem;
-  border: 2px solid #989742;
-  background-color: #1E1E11;
-  font-size: 0.875rem;
-  color: #FBF7B7;
-  max-width: 420px;
-}
-
-.micromodal .snippet-link-box {
-  font-size: 16px;
-  margin-top: 0.75rem;
-  text-align: right;
-}
-
-.micromodal .snippet-link-box a {
-  color: #F6F7F9;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.35rem 0.45rem;
-  border: 1px solid #474C64;
-  line-height: 1;
-}
-
-.micromodal .snippet-link-box a:hover {
-  color: #E5E7EB;
-  border-color: #75798B;
-}
-
-.micromodal .snippet-link-box a svg {
-  width: 0.85rem;
-  height: 0.85rem;
-  flex-shrink: 0;
-}
-
-.micromodal button.micromodal__close {
-  clip-path: polygon(0% 4%, 0% 0%, 100% 0%, 100% 100%, 94% 100%);
-  position: absolute;
-  top: -1px;
-  right: -1px;
-  width: 68px;
-}
-
-.micromodal .micromodal__close-bg {
-  fill: #1D2032;
-}
-
-.micromodal .micromodal__close:hover .micromodal__close-bg {
-  fill: #212543;
-}
-
-.micromodal .micromodal__close-x {
-  fill: #fff;
-}
-
-.micromodal .micromodal__tell {
-  max-width: 440px;
-  margin-bottom: 28px;
-}
-
-.micromodal .micromodal__tell > * + * {
-  margin-top: 20px;
-}
-
-.micromodal .micromodal__tell-title {
-  font-size: var(--hyperclay-modal-title-font-size, 20px);
-  font-weight: bold;
-}
-
-.micromodal .micromodal__tell-content {
-  font-size: var(--hyperclay-modal-font-size, 16px);
-  font-weight: normal;
-}
-
-@media (min-width: 640px) {
-  .micromodal .micromodal__tell-title {
-    font-size: var(--hyperclay-modal-title-font-size, 22px);
-  }
-  .micromodal .micromodal__tell-content {
-    font-size: var(--hyperclay-modal-font-size, 18px);
-  }
-}
-</style>`;
-
-const modalHtml = `<div class="micromodal" id="micromodal" aria-hidden="true">
-  <div class="micromodal__overlay" tabindex="-1">
-    <form class="micromodal__container" role="dialog" aria-modal="true">
-      <div class="micromodal__inner">
-        <div class="micromodal__content"></div>
-        <div class="micromodal__buttons">
-          <button class="micromodal__no" type="button"></button>
-          <button class="micromodal__yes" type="submit"></button>
-        </div>
-      </div>
-      <button class="micromodal__close" type="button" aria-label="Close modal"></button>
-    </form>
-  </div>
-</div>`;
+//
+// Drawn in Bevel (bevel-dialog.js): inline !important, no classes, no ids, so a
+// page stylesheet cannot repaint it. What callers put in html, yes and no is theirs
+// and goes in untouched.
 
 const themodal = (() => {
   let html = "";
@@ -634,6 +297,8 @@ const themodal = (() => {
   let no = "";
   let zIndex = "100";
   let closeHtml = "";
+  let title = "";
+  let width = "";
 
   let enableClickOutsideCloses = true;
   let disableScroll = true;
@@ -671,10 +336,10 @@ const themodal = (() => {
       // Singleton: only one modal on screen at a time. If one is still up (or
       // left stale state behind, e.g. a live-sync morph removed its DOM), reject
       // its promise and tear it down before opening the new one.
-      if (this.isShowing || document.querySelector('.micromodal-parent')) {
+      if (this.isShowing || document.querySelector('[data-clay-modal]')) {
         this._dismiss?.();
         this._cleanupListeners?.();
-        document.querySelectorAll('.micromodal-parent').forEach(n => n.remove());
+        document.querySelectorAll('[data-clay-modal]').forEach(n => { dismissOf.get(n)?.(); n.remove(); });
         this.isShowing = false;
         document.body.style.overflow = '';
       }
@@ -682,20 +347,33 @@ const themodal = (() => {
       // Expose this modal's dismiss so a later open()/close can settle it.
       this._dismiss = dismiss;
 
-      document.body.insertAdjacentHTML("afterbegin", "<div clay='no-save no-snapshot' class='micromodal-parent'>" + modalCss + modalHtml + "</div>");
-
-      const modalOverlayElem = document.querySelector(".micromodal__overlay");
-      const modalContentElem = document.querySelector(".micromodal__content");
-      const modalButtonsElem = document.querySelector(".micromodal__buttons");
-      const modalYesElem = document.querySelector(".micromodal__yes");
-      const modalNoElem = document.querySelector(".micromodal__no");
-      const modalCloseElem = document.querySelector(".micromodal__close");
+      const shell = bevelDialog({ zIndex, closable: !!closeHtml, titled: !!title, ...(width ? { width } : {}) });
+      const modalRootElem = shell.root;
+      const modalOverlayElem = shell.overlay;
+      const modalContainerElem = shell.panel;
+      const modalContentElem = shell.body;
+      const modalButtonsElem = shell.footer;
+      const modalCloseElem = shell.close;
+      const modalNoElem = bevelButton('');
+      const modalYesElem = bevelButton('', { variant: 'primary' });
+      modalYesElem.type = 'submit';
+      modalButtonsElem.append(modalNoElem, modalYesElem);
+
+      // Markup is parsed in; a node is placed as it is, listeners and all.
+      const place = (target, value) => {
+        if (value instanceof Node) target.append(value);
+        else target.innerHTML = value;
+      };
+      place(modalContentElem, html);
+      place(modalYesElem.firstChild, yes);
+      place(modalNoElem.firstChild, no);
+      if (title) place(shell.heading, title);
+      if (title) modalContainerElem.setAttribute("aria-label", shell.heading.textContent.trim());
+      // No body content (a confirm that is all title) means no empty band between header and footer.
+      setShown(modalContentElem, !(html === "" || html == null), "block");
+      if ((html === "" || html == null) && title) set(modalButtonsElem, "border-top", "0");
 
-      modalContentElem.innerHTML = html;
-      modalYesElem.innerHTML = yes;
-      modalNoElem.innerHTML = no;
-      modalOverlayElem.style.zIndex = zIndex;
-      modalCloseElem.innerHTML = closeHtml;
+      document.body.prepend(modalRootElem);
 
       // MODIFIED so modal doesn't close if mousedown happened inside the modal
       let mousedownOnBackdrop = false;
@@ -703,17 +381,17 @@ const themodal = (() => {
       // MODIFIED so modal doesn't close if mousedown happened inside the modal
       function handleMousedown(event) {
         // Check if mousedown started on backdrop (overlay but not container)
-        mousedownOnBackdrop = event.target.closest(".micromodal__overlay") && 
-                              !event.target.closest(".micromodal__container");
+        mousedownOnBackdrop = modalOverlayElem.contains(event.target) &&
+                              !modalContainerElem.contains(event.target);
       }
 
       function handleClick(event) {
         // Just close on no / close-button / backdrop; onClose runs dismiss().
-        if (event.target.closest(".micromodal__no") || event.target.closest(".micromodal__close")) {
-          MicroModal.close("micromodal");
+        if (modalNoElem.contains(event.target) || modalCloseElem?.contains(event.target)) {
+          MicroModal.close();
         // MODIFIED so modal doesn't close if mousedown happened inside the modal
-        } else if (enableClickOutsideCloses && mousedownOnBackdrop && !event.target.closest(".micromodal__container") && event.target.closest(".micromodal__overlay")) {
-          MicroModal.close("micromodal");
+        } else if (enableClickOutsideCloses && mousedownOnBackdrop && !modalContainerElem.contains(event.target) && modalOverlayElem.contains(event.target)) {
+          MicroModal.close();
         }
 
         // Reset after handling
@@ -721,7 +399,7 @@ const themodal = (() => {
       }
 
       function handleSubmit(event) {
-        if (event.target.closest("#micromodal")) {
+        if (modalRootElem.contains(event.target)) {
           event.preventDefault();
           
           // Execute callbacks and check if any return false or throw errors
@@ -747,7 +425,7 @@ const themodal = (() => {
           // scheduled their resolve, so mark settled to stop onClose rejecting.
           if (shouldClose) {
             settled = true;
-            MicroModal.close("micromodal");
+            MicroModal.close();
           }
         }
       }
@@ -765,14 +443,14 @@ const themodal = (() => {
       };
 
       function setButtonsVisibility () {
-        modalButtonsElem.classList.toggle("micromodal__hide", !yes && !no);
-        modalYesElem.classList.toggle("micromodal__hide", !yes);
-        modalNoElem.classList.toggle("micromodal__hide", !no);
+        setShown(modalButtonsElem, !!(yes || no), "flex");
+        setShown(modalYesElem, !!yes, "inline-flex");
+        setShown(modalNoElem, !!no, "inline-flex");
       }
 
       setButtonsVisibility();
 
-      MicroModal.show("micromodal", {
+      MicroModal.show(modalRootElem, {
         disableScroll,
         disableFocus: true, // we use our own
         // reset everything on close
@@ -781,13 +459,15 @@ const themodal = (() => {
           // (no / close / backdrop / Esc). No-op once already resolved.
           dismiss();
 
-          document.querySelector(".micromodal-parent")?.remove();
+          modalRootElem.remove();
 
           html = "";
           yes = "";
           no = "";
           zIndex = "100";
           closeHtml = "";
+          title = "";
+          width = "";
 
           // reset to defaults
           enableClickOutsideCloses = true;
@@ -814,14 +494,15 @@ const themodal = (() => {
       myOnOpen.forEach(cb => cb());
 
       if (!disableFocus) {
-        let firstInput = modalOverlayElem.querySelector(".micromodal__content :is(input,textarea,button):not(.micromodal__hide), .micromodal__buttons :is(input,textarea,button):not(.micromodal__hide)");
+        let firstInput = modalContentElem.querySelector(":is(input,textarea,button):not([hidden])") ||
+          [modalYesElem, modalNoElem].find(button => !button.hidden);
         firstInput?.focus();
         firstInput?.setSelectionRange?.(-1, -1);
       }
     },
     close() {
       // onClose runs the dismiss/reject path; just trigger the close.
-      MicroModal.close("micromodal");
+      MicroModal.close();
     },
     get html() {
       return html;
@@ -835,6 +516,18 @@ const themodal = (() => {
     set closeHtml(newVal) {
       closeHtml = newVal;
     },
+    get title() {
+      return title;
+    },
+    set title(newVal) {
+      title = newVal;
+    },
+    get width() {
+      return width;
+    },
+    set width(newVal) {
+      width = newVal;
+    },
     get yes() {
       return yes;
     },

package/src/ui/skins/cms-toggle.js

@@ -0,0 +1,15 @@
+// The CMS's "Edit content" toggle in Bevel's button face. HyperCMS pins the toggle's fill
+// to an opaque neutral (#0a0a0a or #fafafa) and exposes --hcms-toggle-bg and
+// --hcms-toggle-color for authors; on a dark page Bevel's dark bottom-right edge vanished
+// into the near-black fill and the button read as pressed in. Hand-written, not
+// generated: the generated CMS skin may only pin the vendor's --mirk-* tokens.
+import { TOKENS } from "../bevel.js";
+
+export const ROOTS = ["[data-hcms-toggle-host]"];
+
+export const CSS = `@layer clay-skin{
+[data-hcms-toggle-host]{--hcms-toggle-bg:${TOKENS.face} !important;--hcms-toggle-color:${TOKENS.ink} !important}
+[data-hcms-toggle-host] :is(.hcms-toggle__main, .hcms-toggle__arrow){border-color:${TOKENS["edge-hi"]} ${TOKENS["edge-lo"]} ${TOKENS["edge-lo"]} ${TOKENS["edge-hi"]} !important}
+[data-hcms-toggle-host] :is(.hcms-toggle__main, .hcms-toggle__arrow):hover:not(:active){--hcms-toggle-bg:color-mix(in srgb, ${TOKENS.face}, ${TOKENS["edge-hi"]} 45%) !important}
+[data-hcms-toggle-host] :is(.hcms-toggle__main, .hcms-toggle__arrow):active{border-color:${TOKENS["edge-lo"]} ${TOKENS["edge-hi"]} ${TOKENS["edge-hi"]} ${TOKENS["edge-lo"]} !important}
+}`;

package/src/ui/skins/cms.js

@@ -0,0 +1,4 @@
+// GENERATED from src/vendor/hypercms.vendor.js by scripts/build-vendor-skins.mjs. Run `npm run build:skins`.
+export const SOURCE_SHA256 = "c7a060a8458cc2ac182145f9415a623bf3fdfe5d5cd2b1724ad7d89959266862";
+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

@@ -0,0 +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 = "49c5be87a001dd2e8fef962ac8c0c933e079fb4be98ecf2e4e1ec850ed922c5a";
+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}";