@getvitops/core 0.9.0 → 2.0.0

package/css/patterns/subgrid.css

@@ -48,8 +48,13 @@
      .stagger (animation.css): sibling-index() lacks only Firefox as of 2026,
      and where it's missing the margin stays 0 and rows fall back to the grid
      gap, rather than producing an invalid margin. The second selector repeats
-     the rule at the specificity rhythm forces above. */
-  @supports (--x: sibling-index()) {
+     the rule at the specificity rhythm forces above.
+
+     The test must name a REAL property: `@supports (--x: sibling-index())` is
+     always true, because any token stream is a valid custom-property value —
+     it guarded nothing, and on an engine without sibling-index() the margin
+     went invalid-at-computed-value-time instead of being skipped. */
+  @supports (margin-block-start: calc(sibling-index() * 1px)) {
     > *,
     &:is(ul, ol) > li + li {
       --_row-index: round(down, calc((sibling-index() - 1) / var(--_cols)), 1);

package/css/patterns/tag.css

@@ -41,7 +41,7 @@
   font-weight: 600;
   line-height: 1;
   border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
-  background: var(--color-danger-bold);
+  background: var(--color-text-danger);
   color: #fff;
 
   &.badge-indicator--dot {

package/css/patterns/text-effects.css

@@ -225,7 +225,7 @@
 
 /* ── Highlight sweep ──────────────────────────────────────────────────────── */
 .text-highlight {
-  --_highlight-color: var(--text-highlight-color, var(--color-warning-muted));
+  --_highlight-color: var(--text-highlight-color, var(--color-bg-warning-muted));
   --_highlight-duration: var(--text-highlight-duration, 0.5s);
   --_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
   --_highlight-pad-inline: var(--text-highlight-pad-inline, 0);

package/css/patterns/theme-editor.css

@@ -64,7 +64,7 @@ wc-theme-editor {
     overflow: hidden;
     font-family: var(--font-mono, monospace);
     font-size: 0.9em;
-    color: var(--surface-text-x-muted);
+    color: var(--color-text-surface-x-muted);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -74,7 +74,7 @@ wc-theme-editor {
     padding: 0.3em 0.5em;
     border: var(--b-default);
     border-radius: var(--br-default);
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
     color: inherit;
     font: inherit;
   }
@@ -107,16 +107,53 @@ wc-theme-editor {
     inset-block-start: 0;
     z-index: 1;
     padding-block: 0.5rem;
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
   }
   .ed-segwrap {
     display: inline-flex;
   }
   .ed-seg.is-active {
-    background: var(--ui-primary-solid);
-    color: var(--ui-primary-on-solid);
+    background: var(--color-bg-ui-primary-solid);
+    color: var(--color-text-on-ui-primary);
   }
   .ed-danger {
-    color: var(--danger-text);
+    color: var(--color-text-danger);
+  }
+}
+
+/**
+ * Editor chrome icons.
+ *
+ * The editor ships as a standalone JS bundle: no astro-icon, no build-time
+ * sprite, no `<Icon />`. That is exactly the case `.icon-mask` exists for — a
+ * `currentColor`-filled box driven by a `mask-image`, with the glyph as a data
+ * URI. It is the same mechanism `.link--icon::before` uses, and the reason it is
+ * worth using here rather than typing a character: `×` and `🎨` are TEXT, so
+ * they resolve through font fallback and render differently on every platform
+ * (the CTA arrow shipped wrong in Chrome for exactly this reason). A mask has no
+ * font to fall back to.
+ *
+ * Scoped under `wc-theme-editor` like everything else here, so a consumer who
+ * never loads the editor bundle pays nothing.
+ */
+wc-theme-editor {
+  .ed-icon {
+    /* Slightly under the 1.25em default: this chrome runs at --text-xs. */
+    --icon-size: 1.1em;
+  }
+
+  /* Palette — the launcher. */
+  .ed-icon--theme {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M200.8 53.9A103.4 103.4 0 0 0 128 24h-1.1A104 104 0 0 0 24 128c0 57.3 46.7 104 104 104a24 24 0 0 0 24-24a23.6 23.6 0 0 0-6.2-16.1a8 8 0 0 1 6-13.3H176a56 56 0 0 0 56-56a102.9 102.9 0 0 0-31.2-68.7M176 152h-24.2a24 24 0 0 0-17.9 40a8 8 0 0 1-5.9 13.3A88 88 0 0 1 40 128a88 88 0 0 1 87.1-88h.9a88 88 0 0 1 88 88a40 40 0 0 1-40 24m-96-16a12 12 0 1 1-12-12a12 12 0 0 1 12 12m0-48a12 12 0 1 1-12-12a12 12 0 0 1 12 12m48-16a12 12 0 1 1-12-12a12 12 0 0 1 12 12m48 16a12 12 0 1 1-12-12a12 12 0 0 1 12 12'/%3E%3C/svg%3E");
+  }
+
+  /* Close — a real X, not the multiplication sign a keyboard offers. */
+  .ed-icon--close {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M205.7 194.3a8 8 0 0 1-11.4 11.4L128 139.3l-66.3 66.4a8 8 0 0 1-11.4-11.4l66.4-66.3l-66.4-66.3a8 8 0 0 1 11.4-11.4l66.3 66.4l66.3-66.4a8 8 0 0 1 11.4 11.4L139.3 128Z'/%3E%3C/svg%3E");
+  }
+
+  /* Disclosure caret. `.details-icon` supplies the rotation on [open]. */
+  .ed-icon--caret {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M181.7 133.7l-80 80a8 8 0 0 1-11.4-11.4L164.7 128L90.3 53.7a8 8 0 0 1 11.4-11.4l80 80a8 8 0 0 1 0 11.4'/%3E%3C/svg%3E");
   }
 }

package/css/patterns/tooltip.css

@@ -44,8 +44,8 @@
   padding: var(--_p);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-text);
-  color: var(--surface-bg);
+  background: var(--color-text-surface);
+  color: var(--color-bg-surface);
   font-size: var(--_fs);
   white-space: nowrap;
   max-inline-size: 20rem;

package/css/patterns/tree.css

@@ -18,7 +18,7 @@
   .tree__item > .tree {
     margin-inline-start: var(--tree-indent, 1.5rem);
     padding-inline-start: var(--tree-indent, 1.5rem);
-    border-inline-start: 1px solid var(--color-surface-muted);
+    border-inline-start: 1px solid var(--color-bg-surface-muted);
   }
 
   .tree__content,
@@ -115,8 +115,8 @@
       inset-block-start: 0;
       block-size: 1rem;
       inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
-      border-inline-start: 1px solid var(--color-surface-muted);
-      border-block-end: 1px solid var(--color-surface-muted);
+      border-inline-start: 1px solid var(--color-bg-surface-muted);
+      border-block-end: 1px solid var(--color-bg-surface-muted);
     }
   }
 

package/css/utilities.css

@@ -247,107 +247,28 @@
   }
 }
 
-/* ═══════════════════════════════════════════════════════════════════════════
-   DISCLOSURE — animatable show/hide (auto ↔ 0), layered by support
-   Layer 1 (primary, broadly supported): CSS grid 0fr↔1fr hack. Needs ONE child
-     wrapper; the wrapper clips its own content as the track reveals.
-   Layer 2 (progressive): interpolate-size + native height:auto animation.
-   Layer 3 (native <details>): animate ::details-content directly.
-   `.reveal-fade` covers the display:none fade case with the allow-discrete +
-   @starting-style idiom (same as nav.css `.drawer-menu`).
-   Toggle: consumer sets `.is-open` / `[data-open]` (mirrors .is-active /
-   [data-active] in animation.css), OR nests under an [open] element (<details>).
-   ═══════════════════════════════════════════════════════════════════════════ */
-:root {
-  --reveal-duration: 0.4s;
-}
+/* ── text-wrap — per-element opt-in ──
+   The typography ROLES own the default (`text-wrap` is a role key, so every
+   `.font-*` and every `typography.headings` tag rule carries one, editable via
+   `--<role>-tw` and the theme editor). These four are the escape hatch for a
+   single element that wants to differ, and for markup with no role class —
+   a Bricks-authored heading, say.
 
-/* ── Layer 1: grid-rows hack (primary) ──
-   Markup:
-     <div class="reveal" id="panel">        <!-- the animated track -->
-       <div> … </div>                          <!-- required single wrapper -->
-     </div>
-   Toggle .is-open / [data-open] on `.reveal` (JS/Lit), or nest under an [open]
-   element (e.g. <details>). The wrapper needs min-height:0 + overflow:hidden so
-   the content can be clipped to the 0fr track. */
-.reveal {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows var(--reveal-duration) var(--interact-easing, ease);
-}
-.reveal > * {
-  min-height: 0;
-  overflow: hidden;
-}
-.reveal.is-open,
-.reveal[data-open],
-:where([open]) > .reveal {
-  grid-template-rows: 1fr;
-}
+   Names + values are Tailwind-exact; Tailwind ships them natively, so they are
+   in TW_CLASH and the tailwind format drops these copies.
 
-/* ── Layer 2: native height:auto animation (progressive enhancement) ──
-   Where interpolate-size is supported, animate height directly (no wrapper
-   needed). Guarded so unsupported engines keep the grid hack above. */
-@supports (interpolate-size: allow-keywords) {
-  :root {
-    interpolate-size: allow-keywords;
-  }
-  .reveal-h {
-    height: auto;
-    overflow: hidden;
-    transition: height var(--reveal-duration) var(--interact-easing, ease);
-  }
-  .reveal-h:not(.is-open):not([data-open]) {
-    height: 0;
-  }
+   Namespace note: `text-*` is shared with the role colour utilities
+   (`text-danger-muted`). These four can only collide if a consumer names a hue
+   or colour role `wrap`/`nowrap`/`balance`/`pretty`. */
+.text-wrap {
+  text-wrap: wrap;
 }
-
-/* ── Layer 3: native <details> disclosure ──
-   Markup:
-     <details>
-       <summary>Toggle</summary>
-       … content …
-     </details>
-   Animate the UA-generated content box directly; interpolate-size (Layer 2)
-   lets block-size reach `auto`. Guarded — engines without ::details-content just
-   snap open (fully accessible). */
-/* NOTE: the transition that used to live here is gone, for the same reason as in
-   patterns/details.css — in Chrome 149 *any* transition on ::details-content
-   deadlocks (content-visibility stays hidden → `auto` resolves to 0 → nothing
-   runs) and the disclosure never opens. Collapsing still works; only the motion
-   is dropped. Don't reinstate it without checking that a first click expands. */
-@supports selector(::details-content) {
-  details::details-content {
-    overflow: clip;
-    block-size: 0;
-  }
-  details[open]::details-content {
-    block-size: auto;
-  }
+.text-nowrap {
+  text-wrap: nowrap;
 }
-
-/* ── display:none fade/slide — allow-discrete + @starting-style ──
-   Same idiom as nav.css `.drawer-menu`. Base is display:none; the open state
-   restores display and fades in, and `display`/`overlay` are transitioned with
-   allow-discrete so the element animates out before it is removed. `overlay` is
-   a no-op unless the element is in the top layer (popover/dialog) — harmless.
-   Markup: <div class="reveal-fade" [data-open]?> … </div>  (toggle .is-open) */
-.reveal-fade {
-  display: none;
-  opacity: 0;
-  transition:
-    opacity var(--reveal-duration) var(--interact-easing, ease),
-    overlay var(--reveal-duration) allow-discrete,
-    display var(--reveal-duration) allow-discrete;
-}
-.reveal-fade.is-open,
-.reveal-fade[data-open] {
-  display: block;
-  opacity: 1;
+.text-balance {
+  text-wrap: balance;
 }
-@starting-style {
-  .reveal-fade.is-open,
-  .reveal-fade[data-open] {
-    opacity: 0;
-  }
+.text-pretty {
+  text-wrap: pretty;
 }

package/dist/consent.js

@@ -0,0 +1 @@
+const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops_consent`,n=[`analytics`,`marketing`,`preferences`];function r(e){return{analytics:e,marketing:e,preferences:e}}function i(){return{decided:!1,ts:null,choices:r(!1)}}function a(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function o(e){if(!e)return i();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return i()}if(typeof t!=`object`||!t)return i();let a=t;if(a.v!==1||typeof a.c!=`object`||a.c===null)return i();let o=a.c,s=r(!1);for(let e of n)s[e]=o[e]===!0;return{decided:!0,ts:typeof a.ts==`number`?a.ts:null,choices:s}}function s(e){return encodeURIComponent(JSON.stringify({v:1,ts:e.ts??0,c:e.choices}))}function c(e,t){return t===`necessary`?!0:e.decided&&e.choices[t]===!0}function l(e,t){return{decided:!0,ts:t,choices:r(e)}}function u(e,t,r){let i={...e.choices};for(let e of n){let n=t[e];typeof n==`boolean`&&(i[e]=n)}return{decided:!0,ts:r,choices:i}}function d(e,t){return n.filter(n=>c(e,n)&&!c(t,n))}function f(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const p=`vitops:consent`,m=`vitops:consent-open`,h=location.protocol===`https:`;let g=o(a(document.cookie,t));const _=new Set,v=new WeakSet,y=new Set,b={idle:[],async:[],interaction:[]},x={idle:!1,async:!0,interaction:!1};function S(e){if(x[e])return;x[e]=!0;let t=b[e];b[e]=[];for(let e of t)e()}function C(e,t){x[e]?t():b[e].push(t)}function w(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}w(()=>{let e=globalThis.requestIdleCallback;e?e(()=>S(`idle`),{timeout:3e3}):setTimeout(()=>S(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);S(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});w(()=>setTimeout(()=>S(`interaction`),8e3))}const T=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function E(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function D(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))T.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function O(e){if(!v.has(e)){if(v.add(e),y.add(E(e)),e instanceof HTMLScriptElement)D(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function k(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){if(!c(g,E(t)))continue;let e=t.getAttribute(`data-strategy`);C(e===`async`||e===`interaction`?e:`idle`,()=>O(t))}}function A(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function j(e,n){let r=d(g,e),i=g;g=e,n?document.cookie=`${t}=${s(e)}${f(h)}`:document.cookie=`${t}=; path=/; max-age=0`,M(),k(),r.length&&(A(r),r.some(e=>y.has(e)&&c(i,e))&&N.reloadOnRevoke&&location.reload())}function M(){for(let e of _)e(g);document.dispatchEvent(new CustomEvent(p,{detail:g}))}const N={categories:e,reloadOnRevoke:!0,get:()=>g,granted:e=>c(g,e),needed:()=>!g.decided,set:e=>j(u(g,e,Date.now()),!0),acceptAll:()=>j(l(!0,Date.now()),!0),rejectAll:()=>j(l(!1,Date.now()),!0),reset:()=>j(i(),!1),open:()=>document.dispatchEvent(new CustomEvent(m)),subscribe(e){return _.add(e),e(g),()=>void _.delete(e)}};window.vitopsConsent=N,document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),N.open())}),document.addEventListener(`astro:page-load`,k),k(),M();const P=[`analytics`,`marketing`,`preferences`];var F=class extends HTMLElement{#e;get#t(){return window.vitopsConsent}get#n(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#t;if(!e)return;let t=this.#n;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#c),this.addEventListener(`submit`,this.#i),document.addEventListener(m,this.#r),this.#e=e.subscribe(()=>{e.needed()?this.#a():this.#o()})}disconnectedCallback(){this.removeEventListener(`click`,this.#c),this.removeEventListener(`submit`,this.#i),document.removeEventListener(m,this.#r),this.#e?.()}#r=()=>this.#a();#i=e=>e.preventDefault();#a(){this.#s(),this.hidden=!1;let e=this.#n;e?.isConnected&&!e.matches(`:popover-open`)&&e.showPopover()}#o(){this.#n?.hidePopover?.(),this.hidden=!0}#s(){let e=this.#t;if(e)for(let t of P){let n=this.querySelector(`input[name="${t}"]`);n&&(n.checked=e.granted(t))}}#c=e=>{let t=this.#t,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);!t||!n||(e.preventDefault(),n.hasAttribute(`data-consent-accept`)?t.acceptAll():n.hasAttribute(`data-consent-reject`)?t.rejectAll():t.set(this.#l()),this.#o())};#l(){let e={};for(let t of P)e[t]=this.querySelector(`input[name="${t}"]`)?.checked===!0;return e}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,F);export{e as CATEGORIES,p as CONSENT_EVENT,m as CONSENT_OPEN_EVENT,t as COOKIE_NAME,N as consent};

package/dist/deferred.js

@@ -1 +1 @@
-function e(e){let t=[...e.children];parseFloat(getComputedStyle(e).getPropertyValue(`--stagger-amount`));let n=[],r=e.getBoundingClientRect().top;t.forEach(e=>{let t=Math.round(e.getBoundingClientRect().top-r),i=n.find(e=>Math.abs(e.top-t)<10);i||(i={top:t,items:[]},n.push(i)),i.items.push(e)}),n.forEach(({items:e})=>{e.forEach((e,t)=>{e.style.setProperty(`--_stagger-index`,String(t))})})}let t;function n(){clearTimeout(t),t=setTimeout(()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e)})},100)}const r=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&(e.target.classList.add(`is-active`),t.unobserve(e.target))})});function i(e){let t=e.querySelector(`.horizontal-scroll__track`);if(!t)return;let n=Array.from(t.children).reduce((e,t)=>e+t.offsetWidth,0);t.style.width=`${n}px`}document.addEventListener(`click`,e=>{let t=e.target.closest?.(`a[href^="#"]`);if(!t)return;let n=t.closest(`dialog[open]`);n&&n.close()}),window.addEventListener(`load`,()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e),window.addEventListener(`resize`,n),document.querySelectorAll(`.horizontal-scroll`).forEach(i),document.querySelectorAll(`.animate-trigger`).forEach(e=>{r.observe(e)});let t=new Date().getFullYear();document.querySelectorAll(`[data-current-year]`).forEach(e=>{e.textContent=t.toString()})})});
+function e(e){let t=[...e.children];parseFloat(getComputedStyle(e).getPropertyValue(`--stagger-amount`));let n=[],r=e.getBoundingClientRect().top;t.forEach(e=>{let t=Math.round(e.getBoundingClientRect().top-r),i=n.find(e=>Math.abs(e.top-t)<10);i||(i={top:t,items:[]},n.push(i)),i.items.push(e)}),n.forEach(({items:e})=>{e.forEach((e,t)=>{e.style.setProperty(`--_stagger-index`,String(t))})})}let t;function n(){clearTimeout(t),t=setTimeout(()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e)})},100)}const r=new IntersectionObserver((e,t)=>{e.forEach(e=>{if(!e.isIntersecting)return;let n=e.rootBounds,r=e.boundingClientRect;(!n||r.height>=n.height||r.top+r.height/2<=n.bottom)&&(e.target.classList.add(`is-active`),t.unobserve(e.target))})},{rootMargin:`0px 0px -10% 0px`,threshold:[0,.25,.5,.75,1]});function i(e){let t=e.querySelector(`.horizontal-scroll__track`);if(!t)return;let n=Array.from(t.children).reduce((e,t)=>e+t.offsetWidth,0);t.style.width=`${n}px`}document.addEventListener(`click`,e=>{let t=e.target.closest?.(`a[href^="#"]`);if(!t)return;let n=t.closest(`dialog[open]`);n&&n.close()}),window.addEventListener(`load`,()=>{requestAnimationFrame(()=>{document.querySelectorAll(`.stagger`).forEach(e),window.addEventListener(`resize`,n),document.querySelectorAll(`.horizontal-scroll`).forEach(i),document.querySelectorAll(`.animate-trigger`).forEach(e=>{r.observe(e)});let t=new Date().getFullYear();document.querySelectorAll(`[data-current-year]`).forEach(e=>{e.textContent=t.toString()})})});

package/dist/editor.js

@@ -1,2 +1,2 @@
-const e=`vitops:ds-overrides`,t=`/__vitops/design-system`,n=(e,t)=>t.startsWith(`stop-`)?`--color-${e}-${t.slice(5)}`:`--${e}-${t}`,r=(e,t)=>`--color-${e}-${t}`;var i=class extends HTMLElement{constructor(...e){super(...e),this.store={light:new Map,dark:new Map},this.roles=new Map,this.roleVars=new Set,this.syncers=new Set,this.scheme=`light`,this.canSave=!1}static{this.observedAttributes=[`manifest`]}connectedCallback(){this.boot()}async boot(){let e=this.getAttribute(`manifest`)??`/vitops/design-manifest.json`;try{let t=await fetch(e);if(!t.ok)throw Error(`manifest ${t.status}`);this.manifest=await t.json()}catch(t){console.warn(`[wc-theme-editor] manifest unavailable at ${e} — editor disabled`,t);return}this.styleEl=document.createElement(`style`),this.styleEl.id=`ds-overrides`,document.head.append(this.styleEl),this.hydrate(),this.render(),this.scheme=this.currentScheme(),new MutationObserver(()=>{let e=this.currentScheme();e!==this.scheme&&(this.scheme=e,this.syncers.forEach(e=>e()))}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`]}),this.canSave=await this.probeSave(),this.build(this.manifest)}async probeSave(){try{let e=await fetch(t);return e.ok?(await e.json()).writable===!0:!1}catch{return!1}}block(e,t){return t.size?`${e} {\n${[...t].map(([e,t])=>`  ${e}: ${t};`).join(`
-`)}\n}\n`:``}serializeCSS(){return this.block(`:root`,this.store.light)+this.block(`:root[data-brx-theme="dark"], :root[data-theme="dark"]`,this.store.dark)}render(){this.styleEl&&(this.styleEl.textContent=this.serializeCSS())}persist(){try{localStorage.setItem(e,JSON.stringify({light:[...this.store.light],dark:[...this.store.dark],roles:[...this.roles]}))}catch{}}hydrate(){try{let t=localStorage.getItem(e);if(!t)return;let n=JSON.parse(t);this.store.light=new Map(n.light??[]),this.store.dark=new Map(n.dark??[]),this.roles=new Map(n.roles??[]);for(let[e,t]of this.roles)this.markRoleVars(e,t)}catch{}}setOverride(e,t,n){let r=this.store[n];t==null||t===``?r.delete(e):r.set(e,t),this.render(),this.persist()}effective(e,t,n){return this.store[t].has(e)?this.store[t].get(e):t===`dark`&&this.store.light.has(e)?this.store.light.get(e):n}reset(){this.store.light.clear(),this.store.dark.clear(),this.roles.clear(),this.roleVars.clear(),this.render(),this.persist(),this.syncers.forEach(e=>e())}currentScheme(){let e=document.documentElement;return e.dataset.theme===`dark`||e.getAttribute(`data-brx-theme`)===`dark`?`dark`:`light`}setScheme(e){this.scheme=e,document.documentElement.dataset.theme=e,document.documentElement.style.colorScheme=`${e} only`;try{localStorage.setItem(`vitops-color-scheme`,e)}catch{}this.syncers.forEach(e=>e())}roleTokenNames(e,t,r){let i=t===`surface`?`surface`:`default`,a=e.colors.roleTokens?.[r]?.[i];if(!a)return[];let o=[];for(let e of[`light`,`dark`])for(let[r,i]of Object.entries(a[e]))o.push([n(t,r),i,e]);return o}markRoleVars(e,t){if(this.manifest)for(let[n]of this.roleTokenNames(this.manifest,e,t))this.roleVars.add(n)}remapRole(e,t,n){let r=this.roleTokenNames(e,t,n);if(r.length){this.roles.set(t,n);for(let[e,t,n]of r)this.roleVars.add(e),this.store[n].set(e,t);this.render(),this.persist()}}deepSet(e,t,n){let r=t.split(`.`),i=e;for(let e=0;e<r.length-1;e++){let t=r[e];(typeof i[t]!=`object`||i[t]==null)&&(i[t]={}),i=i[t]}i[r[r.length-1]]=n}buildPatch(e){let t={},n=[];for(let[e,n]of this.roles)this.deepSet(t,`colors.roles.${e}`,n);for(let[r,i]of this.store.light){if(this.roleVars.has(r))continue;let a=e.reverseIndex[r];a?this.deepSet(t,a,i):n.push(r)}for(let e of this.store.dark.keys())this.roleVars.has(e)||n.push(`${e} (dark)`);return{patch:t,skipped:n}}el(e,t={},n=[]){let r=document.createElement(e),i=r;for(let[e,n]of Object.entries(t))n===!0?i.setAttribute(e,``):n!==!1&&i.setAttribute(e,String(n));for(let e of n)i.append(e);return r}row(e,t,n){return this.syncers.add(n),n(),this.el(`label`,{class:`ed-row`},[this.el(`span`,{class:`ed-label`,title:e},[e.replace(/^--/,``)]),t])}textInput(e,t,n=``){let r=this.el(`input`,{type:`text`,class:`ed-input`});return r.addEventListener(`input`,()=>this.setOverride(e,r.value.trim()||null,this.scheme)),this.row(e,r,()=>{r.value=this.store[this.scheme].get(e)??``,r.placeholder=n||t})}colorInput(e,t){let n=this.el(`input`,{type:`color`,class:`ed-color`}),r=this.el(`input`,{type:`text`,class:`ed-input ed-mono`}),i=t=>this.setOverride(e,t||null,`light`);n.addEventListener(`input`,()=>{r.value=n.value,i(n.value)}),r.addEventListener(`input`,()=>{/^#[0-9a-f]{6}$/i.test(r.value)&&(n.value=r.value),i(r.value.trim())});let a=this.el(`span`,{class:`ed-pair`},[n,r]);return this.row(e,a,()=>{let i=this.store.light.get(e)??t;r.value=i,/^#[0-9a-f]{6}$/i.test(i)&&(n.value=i)})}selectInput(e,t){let n=this.el(`select`,{class:`ed-input`});n.append(this.el(`option`,{value:``},[`— default —`]));for(let e of t)n.append(this.el(`option`,{value:e.value},[e.label]));return n.addEventListener(`change`,()=>this.setOverride(e,n.value||null,this.scheme)),this.row(e,n,()=>{n.value=this.store[this.scheme].get(e)??``})}remSlider(e,t){let n=parseFloat(t)||1,r=this.el(`input`,{type:`range`,class:`ed-range`,min:`0`,max:String(Math.max(4,Math.ceil(n*2))),step:`0.05`}),i=this.el(`output`,{class:`ed-out`});r.addEventListener(`input`,()=>{i.textContent=`${r.value}rem`,this.setOverride(e,`${r.value}rem`,this.scheme)});let a=this.el(`span`,{class:`ed-pair`},[r,i]);return this.row(e,a,()=>{r.value=String(parseFloat(this.effective(e,this.scheme,t))||n),i.textContent=this.store[this.scheme].get(e)??`auto`})}slider(e,t){let n=t.toValue??(e=>`${e}${t.unit??``}`),r=t.fromValue??(e=>Number.isNaN(parseFloat(e))?t.def:parseFloat(e)),i=this.el(`input`,{type:`range`,class:`ed-range`,min:String(t.min),max:String(t.max),step:String(t.step)}),a=this.el(`output`,{class:`ed-out`});i.addEventListener(`input`,()=>{let t=n(parseFloat(i.value));a.textContent=t,this.setOverride(e,t,this.scheme)});let o=this.el(`span`,{class:`ed-pair`},[i,a]);return this.row(e,o,()=>{let n=this.store[this.scheme].get(e);i.value=String(n==null?t.def:r(n)),a.textContent=n??`${t.def}${t.unit??``}`})}section(e,t=!1){let n=this.el(`div`,{class:`ed-body rhythm`});return{details:this.el(`details`,{class:`details details--marker-start ed-section`,...t?{open:!0}:{}},[this.el(`summary`,{class:`font-eyebrow`},[this.el(`span`,{class:`details-icon`,"aria-hidden":`true`},[`▸`]),e]),n]),body:n}}hint(e){return this.el(`p`,{class:`font-footnote text-surface-x-muted`},[e])}sub(e){let t=this.section(e);return t.details.classList.add(`ed-sub`),t}buildPalette(e){let{details:t,body:n}=this.section(`Palette`,!0);n.append(this.hint(`Hues feed the semantic roles below — edit a hue and every role mapped to it follows. Hue edits are scheme-global: dark mode re-points which step a token reads, it never redefines the hue itself.`));for(let t of e.colors.ramps){let i=this.sub(t);for(let n of e.colors.steps){let a=e.colors.palette[t]?.[n];a!=null&&i.body.append(this.colorInput(r(t,n),a))}n.append(i.details)}return n.append(this.buildRoles(e)),t}buildRoles(e){let{details:t,body:n}=this.sub(`Semantic roles`);n.append(this.hint(`Point a role at another hue — its whole functional token set (bg / border / solid / on-solid / text) is rewritten for both appearances.`));let r=e.colors.ramps;for(let{name:t,ramp:i}of e.colors.roles){let a=this.el(`select`,{class:`ed-input`});for(let e of r)a.append(this.el(`option`,{value:e},[e]));a.addEventListener(`change`,()=>this.remapRole(e,t,a.value)),n.append(this.row(`--${t}`,a,()=>{a.value=this.roles.get(t)??i}))}return t}buildTypography(e){let{details:t,body:n}=this.section(`Typography`),r=Object.keys(e.fonts).map(e=>({label:e,value:`var(--font-${e})`})),i=e.scales.text.map(e=>({label:e.name,value:`var(--text-${e.name})`})),a={tt:[`none`,`uppercase`,`lowercase`,`capitalize`],fst:[`normal`,`italic`,`oblique`],td:[`none`,`underline`,`line-through`],tw:[`wrap`,`balance`,`pretty`,`nowrap`]};for(let t of e.typography.roles){let o=e.typography.specs[t]??{},s=this.sub(t);for(let[n,{key:c}]of Object.entries(e.typography.hooks)){let e=`--${t}-${n}`,l=o[c]==null?``:String(o[c]);n===`ff`?s.body.append(this.selectInput(e,r)):n===`fs`?s.body.append(this.selectInput(e,i)):a[n]?s.body.append(this.selectInput(e,a[n].map(e=>({label:e,value:e})))):s.body.append(this.textInput(e,l,l||c))}n.append(s.details)}return t}buildSpacing(e){let{details:t,body:n}=this.section(`Spacing`);n.append(this.hint(`Each step overrides to a fixed rem (dropping the fluid clamp). Reset restores it.`));for(let t of e.scales.space)n.append(this.remSlider(`--space-${t.name}`,t.max));return t}buildLayout(){let{details:e,body:t}=this.section(`Layout`);return t.append(this.hint(`Vertical rhythm and the .centered track widths — global structure.`)),t.append(this.slider(`--rhythm-scale`,{min:.5,max:2.5,step:.05,def:1}),this.slider(`--width-measure`,{min:30,max:110,step:1,def:65,unit:`ch`}),this.slider(`--width-breakout`,{min:40,max:150,step:1,def:90,unit:`ch`}),this.slider(`--width-spotlight`,{min:60,max:200,step:1,def:120,unit:`ch`}),this.slider(`--gutter`,{min:0,max:6,step:.1,def:3,toValue:e=>`clamp(1rem, 4cqi, ${e}rem)`,fromValue:e=>{let t=/clamp\([^,]+,[^,]+,\s*([\d.]+)/.exec(e);return t?parseFloat(t[1]):3}})),e}buildPatterns(e){let t=this.section(`Pattern defaults`);for(let[n,r]of Object.entries(e.patterns.defaults))t.body.append(this.textInput(`--${n}-default`,r,r));let n=this.section(`Radii`);for(let[t,r]of Object.entries(e.patterns.radii))n.body.append(this.textInput(`--br-${t}`,r,r));let r=this.section(`Pattern groups`);for(let[t,n]of Object.entries(e.patterns.groups)){let e=this.sub(t);for(let[r,i]of Object.entries(n))e.body.append(this.textInput(`--${r}-${t}`,i,i));r.body.append(e.details)}let i=this.section(`Components`);i.body.append(this.hint(`Per-component geometry — overrides the group defaults for just this component.`));for(let t of e.patterns.items){if(!t.wrappable.length)continue;let e=this.sub(t.name);for(let{sfx:n,prop:r}of t.wrappable){let i=t.base[r]??``;e.body.append(this.textInput(`--${n}-${t.name}`,i,i))}i.body.append(e.details)}let a=this.section(`Shadows`);for(let[t,n]of Object.entries(e.shadows))a.body.append(this.textInput(`--shadow-${t}`,n,n));return[t.details,n.details,r.details,i.details,a.details]}async flash(e,t){let n=e.textContent;e.textContent=t,setTimeout(()=>e.textContent=n,1400)}async copy(e,t){try{await navigator.clipboard.writeText(e),this.flash(t,`Copied ✓`)}catch{this.flash(t,`Copy failed`)}}async save(e,n){let{patch:r}=this.buildPatch(e);if(!Object.keys(r).length)return void this.flash(n,`Nothing to save`);try{let e=await fetch(t,{method:`POST`,headers:{"content-type":`application/json`},body:JSON.stringify({patch:r})});if(!e.ok){let t=await e.json().catch(()=>({}));console.error(`[wc-theme-editor] save rejected`,t.errors??e.statusText),this.flash(n,`Rejected ✗`);return}this.reset(),this.flash(n,`Saved ✓`)}catch(e){console.error(`[wc-theme-editor] save failed`,e),this.flash(n,`Failed ✗`)}}buildToolbar(e){let t=this.el(`div`,{class:`cluster-start ed-toolbar`}),n=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Light`]),r=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Dark`]),i=()=>{n.classList.toggle(`is-active`,this.scheme===`light`),r.classList.toggle(`is-active`,this.scheme===`dark`)};this.syncers.add(i),n.addEventListener(`click`,()=>this.setScheme(`light`)),r.addEventListener(`click`,()=>this.setScheme(`dark`)),i(),t.append(this.el(`span`,{class:`ed-segwrap`,role:`group`},[n,r]));let a=this.el(`button`,{type:`button`,class:`btn`},[`Copy CSS`]);a.addEventListener(`click`,()=>this.copy(this.serializeCSS()||`/* no overrides yet */`,a));let o=this.el(`button`,{type:`button`,class:`btn`},[`Copy JSON patch`]);if(o.addEventListener(`click`,()=>{let{patch:t,skipped:n}=this.buildPatch(e),r=n.length?`\n// runtime-only (no source mapping): ${n.join(`, `)}`:``;this.copy(JSON.stringify(t,null,2)+r,o)}),t.append(a,o),this.canSave){let n=this.el(`button`,{type:`button`,class:`cta`},[`Save to source`]);n.addEventListener(`click`,()=>void this.save(e,n)),t.append(n)}let s=this.el(`button`,{type:`button`,class:`btn ed-danger`},[`Reset all`]);return s.addEventListener(`click`,()=>this.reset()),t.append(s),t}build(e){let t=`ds-editor-panel`,n=this.el(`div`,{id:t,popover:`manual`,class:`drawer drawer--right drawer--modeless ed-panel bg-surface text-surface rhythm`,"aria-label":`Design-system editor`});n.append(this.el(`header`,{class:`cluster-between`},[this.el(`strong`,{class:`font-heading`},[`Theme editor`]),(()=>{let e=this.el(`button`,{type:`button`,class:`btn`,popovertarget:t,popovertargetaction:`hide`},[`×`]);return e.setAttribute(`aria-label`,`Close editor`),e})()]),this.buildToolbar(e),this.buildPalette(e),this.buildTypography(e),this.buildSpacing(e),this.buildLayout(),...this.buildPatterns(e));let r=this.el(`button`,{type:`button`,class:`cta ed-launch`,popovertarget:t},[`🎨 Theme`]);document.addEventListener(`keydown`,e=>{e.key===`Escape`&&n.matches(`:popover-open`)&&n.hidePopover()}),this.append(r,n)}};customElements.get(`wc-theme-editor`)||customElements.define(`wc-theme-editor`,i);
+const e=`vitops:ds-overrides`,t=`/__vitops/design-system`,n=(e,t)=>{let n=t.indexOf(`-`),r=n===-1?t:t.slice(0,n),i=n===-1?``:t.slice(n+1);return i===`on`?`--color-${r}-on-${e}`:i.startsWith(`on-`)?`--color-${r}-on-${e}-${i.slice(3)}`:i?`--color-${r}-${e}-${i}`:`--color-${r}-${e}`},r=(e,t)=>`--color-${e}-${t}`;var i=class extends HTMLElement{constructor(...e){super(...e),this.store={light:new Map,dark:new Map},this.roles=new Map,this.roleVars=new Set,this.syncers=new Set,this.scheme=`light`,this.canSave=!1}static{this.observedAttributes=[`manifest`]}connectedCallback(){this.boot()}async boot(){let e=this.getAttribute(`manifest`)??`/vitops/design-manifest.json`;try{let t=await fetch(e);if(!t.ok)throw Error(`manifest ${t.status}`);this.manifest=await t.json()}catch(t){console.warn(`[wc-theme-editor] manifest unavailable at ${e} — editor disabled`,t);return}this.styleEl=document.createElement(`style`),this.styleEl.id=`ds-overrides`,document.head.append(this.styleEl),this.hydrate(),this.render(),this.scheme=this.currentScheme(),new MutationObserver(()=>{let e=this.currentScheme();e!==this.scheme&&(this.scheme=e,this.syncers.forEach(e=>e()))}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`]}),this.canSave=await this.probeSave(),this.build(this.manifest)}async probeSave(){try{let e=await fetch(t);return e.ok?(await e.json()).writable===!0:!1}catch{return!1}}block(e,t){return t.size?`${e} {\n${[...t].map(([e,t])=>`  ${e}: ${t};`).join(`
+`)}\n}\n`:``}serializeCSS(){return this.block(`:root`,this.store.light)+this.block(`:root[data-brx-theme="dark"], :root[data-theme="dark"]`,this.store.dark)}render(){this.styleEl&&(this.styleEl.textContent=this.serializeCSS())}persist(){try{localStorage.setItem(e,JSON.stringify({light:[...this.store.light],dark:[...this.store.dark],roles:[...this.roles]}))}catch{}}hydrate(){try{let t=localStorage.getItem(e);if(!t)return;let n=JSON.parse(t);this.store.light=new Map(n.light??[]),this.store.dark=new Map(n.dark??[]),this.roles=new Map(n.roles??[]);for(let[e,t]of this.roles)this.markRoleVars(e,t)}catch{}}setOverride(e,t,n){let r=this.store[n];t==null||t===``?r.delete(e):r.set(e,t),this.render(),this.persist()}effective(e,t,n){return this.store[t].has(e)?this.store[t].get(e):t===`dark`&&this.store.light.has(e)?this.store.light.get(e):n}reset(){this.store.light.clear(),this.store.dark.clear(),this.roles.clear(),this.roleVars.clear(),this.render(),this.persist(),this.syncers.forEach(e=>e())}currentScheme(){let e=document.documentElement;return e.dataset.theme===`dark`||e.getAttribute(`data-brx-theme`)===`dark`?`dark`:`light`}setScheme(e){this.scheme=e,document.documentElement.dataset.theme=e,document.documentElement.style.colorScheme=`${e} only`;try{localStorage.setItem(`vitops-color-scheme`,e)}catch{}this.syncers.forEach(e=>e())}roleTokenNames(e,t,r){let i=e.colors.roles.find(e=>e.name===t)?.kind??`chromatic`,a=e.colors.roleTokens?.[r]?.[i];if(!a)return[];let o=[];for(let e of[`light`,`dark`])for(let[r,i]of Object.entries(a[e]))o.push([n(t,r),i,e]);return o}markRoleVars(e,t){if(this.manifest)for(let[n]of this.roleTokenNames(this.manifest,e,t))this.roleVars.add(n)}remapRole(e,t,n){let r=this.roleTokenNames(e,t,n);if(r.length){this.roles.set(t,n);for(let[e,t,n]of r)this.roleVars.add(e),this.store[n].set(e,t);this.render(),this.persist()}}deepSet(e,t,n){let r=t.split(`.`),i=e;for(let e=0;e<r.length-1;e++){let t=r[e];(typeof i[t]!=`object`||i[t]==null)&&(i[t]={}),i=i[t]}i[r[r.length-1]]=n}buildPatch(e){let t={},n=[];for(let[n,r]of this.roles){let i=e.colors.roles.find(e=>e.name===n)?.kind??`chromatic`;this.deepSet(t,`colors.roles.${n}`,{hue:r,kind:i})}for(let[r,i]of this.store.light){if(this.roleVars.has(r))continue;let a=e.reverseIndex[r];a?this.deepSet(t,a,i):n.push(r)}for(let e of this.store.dark.keys())this.roleVars.has(e)||n.push(`${e} (dark)`);return{patch:t,skipped:n}}el(e,t={},n=[]){let r=document.createElement(e),i=r;for(let[e,n]of Object.entries(t))n===!0?i.setAttribute(e,``):n!==!1&&i.setAttribute(e,String(n));for(let e of n)i.append(e);return r}row(e,t,n){return this.syncers.add(n),n(),this.el(`label`,{class:`ed-row`},[this.el(`span`,{class:`ed-label`,title:e},[e.replace(/^--/,``)]),t])}textInput(e,t,n=``){let r=this.el(`input`,{type:`text`,class:`ed-input`});return r.addEventListener(`input`,()=>this.setOverride(e,r.value.trim()||null,this.scheme)),this.row(e,r,()=>{r.value=this.store[this.scheme].get(e)??``,r.placeholder=n||t})}colorInput(e,t){let n=this.el(`input`,{type:`color`,class:`ed-color`}),r=this.el(`input`,{type:`text`,class:`ed-input ed-mono`}),i=t=>this.setOverride(e,t||null,`light`);n.addEventListener(`input`,()=>{r.value=n.value,i(n.value)}),r.addEventListener(`input`,()=>{/^#[0-9a-f]{6}$/i.test(r.value)&&(n.value=r.value),i(r.value.trim())});let a=this.el(`span`,{class:`ed-pair`},[n,r]);return this.row(e,a,()=>{let i=this.store.light.get(e)??t;r.value=i,/^#[0-9a-f]{6}$/i.test(i)&&(n.value=i)})}selectInput(e,t){let n=this.el(`select`,{class:`ed-input`});n.append(this.el(`option`,{value:``},[`— default —`]));for(let e of t)n.append(this.el(`option`,{value:e.value},[e.label]));return n.addEventListener(`change`,()=>this.setOverride(e,n.value||null,this.scheme)),this.row(e,n,()=>{n.value=this.store[this.scheme].get(e)??``})}remSlider(e,t){let n=parseFloat(t)||1,r=this.el(`input`,{type:`range`,class:`ed-range`,min:`0`,max:String(Math.max(4,Math.ceil(n*2))),step:`0.05`}),i=this.el(`output`,{class:`ed-out`});r.addEventListener(`input`,()=>{i.textContent=`${r.value}rem`,this.setOverride(e,`${r.value}rem`,this.scheme)});let a=this.el(`span`,{class:`ed-pair`},[r,i]);return this.row(e,a,()=>{r.value=String(parseFloat(this.effective(e,this.scheme,t))||n),i.textContent=this.store[this.scheme].get(e)??`auto`})}slider(e,t){let n=t.toValue??(e=>`${e}${t.unit??``}`),r=t.fromValue??(e=>Number.isNaN(parseFloat(e))?t.def:parseFloat(e)),i=this.el(`input`,{type:`range`,class:`ed-range`,min:String(t.min),max:String(t.max),step:String(t.step)}),a=this.el(`output`,{class:`ed-out`});i.addEventListener(`input`,()=>{let t=n(parseFloat(i.value));a.textContent=t,this.setOverride(e,t,this.scheme)});let o=this.el(`span`,{class:`ed-pair`},[i,a]);return this.row(e,o,()=>{let n=this.store[this.scheme].get(e);i.value=String(n==null?t.def:r(n)),a.textContent=n??`${t.def}${t.unit??``}`})}section(e,t=!1){let n=this.el(`div`,{class:`ed-body rhythm`});return{details:this.el(`details`,{class:`details details--marker-start ed-section`,...t?{open:!0}:{}},[this.el(`summary`,{class:`font-eyebrow`},[this.el(`span`,{class:`icon-mask details-icon ed-icon ed-icon--caret`,"aria-hidden":`true`}),e]),n]),body:n}}hint(e){return this.el(`p`,{class:`font-footnote text-surface-x-muted`},[e])}sub(e){let t=this.section(e);return t.details.classList.add(`ed-sub`),t}buildPalette(e){let{details:t,body:n}=this.section(`Palette`,!0);n.append(this.hint(`Hues feed the semantic roles below — edit a hue and every role mapped to it follows. Hue edits are scheme-global: dark mode re-points which step a token reads, it never redefines the hue itself.`));for(let t of e.colors.ramps){let i=this.sub(t);for(let n of e.colors.steps){let a=e.colors.palette[t]?.[n];a!=null&&i.body.append(this.colorInput(r(t,n),a))}n.append(i.details)}return n.append(this.buildRoles(e)),t}buildRoles(e){let{details:t,body:n}=this.sub(`Semantic roles`);n.append(this.hint(`Point a role at another hue — its whole functional token set (bg / border / solid / on-solid / text) is rewritten for both appearances.`));let r=e.colors.ramps;for(let{name:t,ramp:i}of e.colors.roles){let a=this.el(`select`,{class:`ed-input`});for(let e of r)a.append(this.el(`option`,{value:e},[e]));a.addEventListener(`change`,()=>this.remapRole(e,t,a.value)),n.append(this.row(`--${t}`,a,()=>{a.value=this.roles.get(t)??i}))}return t}buildTypography(e){let{details:t,body:n}=this.section(`Typography`),r=Object.keys(e.fonts).map(e=>({label:e,value:`var(--font-${e})`})),i=e.scales.text.map(e=>({label:e.name,value:`var(--text-${e.name})`})),a={tt:[`none`,`uppercase`,`lowercase`,`capitalize`],fst:[`normal`,`italic`,`oblique`],td:[`none`,`underline`,`line-through`],tw:[`wrap`,`balance`,`pretty`,`nowrap`]};for(let t of e.typography.roles){let o=e.typography.specs[t]??{},s=this.sub(t);for(let[n,{key:c}]of Object.entries(e.typography.hooks)){let e=`--${t}-${n}`,l=o[c]==null?``:String(o[c]);n===`ff`?s.body.append(this.selectInput(e,r)):n===`fs`?s.body.append(this.selectInput(e,i)):a[n]?s.body.append(this.selectInput(e,a[n].map(e=>({label:e,value:e})))):s.body.append(this.textInput(e,l,l||c))}n.append(s.details)}return t}buildSpacing(e){let{details:t,body:n}=this.section(`Spacing`);n.append(this.hint(`Each step overrides to a fixed rem (dropping the fluid clamp). Reset restores it.`));for(let t of e.scales.space)n.append(this.remSlider(`--space-${t.name}`,t.max));return t}buildLayout(){let{details:e,body:t}=this.section(`Layout`);return t.append(this.hint(`Vertical rhythm and the .centered track widths — global structure.`)),t.append(this.slider(`--rhythm-scale`,{min:.5,max:2.5,step:.05,def:1}),this.slider(`--width-measure`,{min:30,max:110,step:1,def:65,unit:`ch`}),this.slider(`--width-breakout`,{min:40,max:150,step:1,def:90,unit:`ch`}),this.slider(`--width-spotlight`,{min:60,max:200,step:1,def:120,unit:`ch`}),this.slider(`--gutter`,{min:0,max:6,step:.1,def:3,toValue:e=>`clamp(1rem, 4cqi, ${e}rem)`,fromValue:e=>{let t=/clamp\([^,]+,[^,]+,\s*([\d.]+)/.exec(e);return t?parseFloat(t[1]):3}})),e}buildPatterns(e){let t=this.section(`Pattern defaults`);for(let[n,r]of Object.entries(e.patterns.defaults))t.body.append(this.textInput(`--${n}-default`,r,r));let n=this.section(`Radii`);for(let[t,r]of Object.entries(e.patterns.radii))n.body.append(this.textInput(`--br-${t}`,r,r));let r=this.section(`Pattern groups`);for(let[t,n]of Object.entries(e.patterns.groups)){let e=this.sub(t);for(let[r,i]of Object.entries(n))e.body.append(this.textInput(`--${r}-${t}`,i,i));r.body.append(e.details)}let i=this.section(`Components`);i.body.append(this.hint(`Per-component geometry — overrides the group defaults for just this component.`));for(let t of e.patterns.items){if(!t.wrappable.length)continue;let e=this.sub(t.name);for(let{sfx:n,prop:r}of t.wrappable){let i=t.base[r]??``;e.body.append(this.textInput(`--${n}-${t.name}`,i,i))}i.body.append(e.details)}let a=this.section(`Shadows`);for(let[t,n]of Object.entries(e.shadows))a.body.append(this.textInput(`--shadow-${t}`,n,n));return[t.details,n.details,r.details,i.details,a.details]}async flash(e,t){let n=e.textContent;e.textContent=t,setTimeout(()=>e.textContent=n,1400)}async copy(e,t){try{await navigator.clipboard.writeText(e),this.flash(t,`Copied ✓`)}catch{this.flash(t,`Copy failed`)}}async save(e,n){let{patch:r}=this.buildPatch(e);if(!Object.keys(r).length)return void this.flash(n,`Nothing to save`);try{let e=await fetch(t,{method:`POST`,headers:{"content-type":`application/json`},body:JSON.stringify({patch:r})});if(!e.ok){let t=await e.json().catch(()=>({}));console.error(`[wc-theme-editor] save rejected`,t.errors??e.statusText),this.flash(n,`Rejected ✗`);return}this.reset(),this.flash(n,`Saved ✓`)}catch(e){console.error(`[wc-theme-editor] save failed`,e),this.flash(n,`Failed ✗`)}}buildToolbar(e){let t=this.el(`div`,{class:`cluster-start ed-toolbar`}),n=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Light`]),r=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Dark`]),i=()=>{n.classList.toggle(`is-active`,this.scheme===`light`),r.classList.toggle(`is-active`,this.scheme===`dark`)};this.syncers.add(i),n.addEventListener(`click`,()=>this.setScheme(`light`)),r.addEventListener(`click`,()=>this.setScheme(`dark`)),i(),t.append(this.el(`span`,{class:`ed-segwrap`,role:`group`},[n,r]));let a=this.el(`button`,{type:`button`,class:`btn`},[`Copy CSS`]);a.addEventListener(`click`,()=>this.copy(this.serializeCSS()||`/* no overrides yet */`,a));let o=this.el(`button`,{type:`button`,class:`btn`},[`Copy JSON patch`]);if(o.addEventListener(`click`,()=>{let{patch:t,skipped:n}=this.buildPatch(e),r=n.length?`\n// runtime-only (no source mapping): ${n.join(`, `)}`:``;this.copy(JSON.stringify(t,null,2)+r,o)}),t.append(a,o),this.canSave){let n=this.el(`button`,{type:`button`,class:`cta`},[`Save to source`]);n.addEventListener(`click`,()=>void this.save(e,n)),t.append(n)}let s=this.el(`button`,{type:`button`,class:`btn ed-danger`},[`Reset all`]);return s.addEventListener(`click`,()=>this.reset()),t.append(s),t}build(e){let t=`ds-editor-panel`,n=this.el(`div`,{id:t,popover:`manual`,class:`drawer drawer--right drawer--modeless ed-panel bg-surface text-surface rhythm`,"aria-label":`Design-system editor`});n.append(this.el(`header`,{class:`cluster-between`},[this.el(`strong`,{class:`font-heading`},[`Theme editor`]),(()=>{let e=this.el(`button`,{type:`button`,class:`btn`,popovertarget:t,popovertargetaction:`hide`},[this.el(`span`,{class:`icon-mask ed-icon ed-icon--close`,"aria-hidden":`true`})]);return e.setAttribute(`aria-label`,`Close editor`),e})()]),this.buildToolbar(e),this.buildPalette(e),this.buildTypography(e),this.buildSpacing(e),this.buildLayout(),...this.buildPatterns(e));let r=this.el(`button`,{type:`button`,class:`cta ed-launch`,popovertarget:t},[this.el(`span`,{class:`icon-mask ed-icon ed-icon--theme`,"aria-hidden":`true`}),`Theme`]);document.addEventListener(`keydown`,e=>{e.key===`Escape`&&n.matches(`:popover-open`)&&n.hidePopover()}),this.append(r,n)}};customElements.get(`wc-theme-editor`)||customElements.define(`wc-theme-editor`,i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/core",
-  "version": "0.9.0",
+  "version": "2.0.0",
   "description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
   "license": "MIT",
   "files": [
@@ -11,6 +11,7 @@
   "type": "module",
   "exports": {
     "./elements": "./dist/elements.js",
+    "./consent": "./dist/consent.js",
     "./editor": "./dist/editor.js",
     "./polyfills": "./dist/polyfills.js",
     "./deferred": "./dist/deferred.js",
@@ -31,6 +32,9 @@
     "lit": "^3.3.3",
     "scroll-timeline-polyfill": "^1.1.0",
     "temporal-polyfill": "^1.0.1",
-    "@getvitops/utils": "0.9.0"
+    "@getvitops/utils": "2.0.0"
+  },
+  "devDependencies": {
+    "vitest": "^4.1.9"
   }
 }