@getvitops/generator 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,176 @@
 # @getvitops/generator
 
+## 0.9.0
+
+### Minor Changes
+
+- **The `tailwind` format now emits the full role colour vocabulary.** It previously emitted only
+  the functional role utilities, so 87 classes — `bg-<role>-x-muted`, `bg-<role>-bold`,
+  `bg-<role>-x-bold`, `text-<role>-bold`, `text-<role>-x-bold`,
+  `border-<role>-{muted,x-muted,x-bold}`, for every role — existed in the `css` and `bricks`
+  outputs and silently did nothing in `tailwind`. Nothing in the test suite built the tailwind
+  format, so the divergence was invisible; it was found by a consumer who hand-forked four
+  background planes into their own stylesheet to work around the absence.
+
+  All three formats now render from one emitter (`roleColorUtilities()`), which resolves the
+  plane-vs-stop namespace collision explicitly instead of relying on the CSS minifier dropping a
+  shadowed rule. No class changes meaning, and the `css`/`bricks` output is unchanged.
+
+  Also fixed in the tailwind format:
+  - `colors.utilities` is now honoured. It was hardcoded to `bg`/`text`/`border`, so enabling
+    `outline`/`fill`/`stroke` worked in `css`/`bricks` and was ignored here. (For raw hue scales
+    it remains a floor rather than a ceiling — those are `@theme` colours, and Tailwind derives
+    every colour family from them on demand.)
+  - **Component container queries are no longer stripped.** The pass that drops the framework's
+    pre-expanded `md-*` breakpoint utilities (Tailwind regenerates those as `@md:`) matched every
+    `@container (min-width: …)` block, including component behaviour — most visibly the
+    sitenav's, so `.sitenav--bp-{sm,md,lg,xl}` were removed and the nav stayed in its mobile
+    layout at every width.
+
+  New: **`vitops lint`** reports framework classes in your source that resolve to nothing — the
+  failure mode where an unknown utility looks exactly like a working one. It is format-aware
+  (`md-flex-row` is a real class in `css`/`bricks` and inert in `tailwind`) and only judges
+  classes anchored to your own config, so it stays quiet on Tailwind's utilities and your own.
+
+  ```
+  vitops lint --format tailwind --src src
+  ```
+
+- **The `css` and `bricks` bundles now ship cascade layers, so a utility can override a pattern.**
+
+  `class="card bg-danger-muted"` previously tinted the card in the `tailwind` format and silently
+  did nothing in `css`/`bricks`: every colour utility was emitted before every pattern and both sat
+  at `0-1-0`, so the pattern won on source order. The bundle now emits
+
+  ```css
+  @layer vitops.base, vitops.components, vitops.utilities;
+  ```
+
+  - `vitops.base` — the UA reset and the pure `:root` token blocks
+  - `vitops.components` — the animation engine, structural layout, and every pattern
+  - `vitops.utilities` — `bg-*`, `text-*`, `border-*`, `drop-shadow-*`, `font-*`, animation
+    effects, and the display/`sr-only` families
+
+  No rule changed — 1482 rules before, 1482 after — only precedence.
+
+  **What this changes for you.** Unlayered CSS beats every cascade layer regardless of specificity,
+  so your own stylesheet, an Astro scoped `<style>`, or a Bricks-authored class now overrides the
+  framework with no `!important` and no specificity escalation. That is the intended override story
+  and the reason to layer at all.
+
+  **Migration — only if you ship a reset.** An unlayered reset will now beat the framework
+  component rules it used to lose to; a bare `p { margin: 0 }` defeats `.rhythm`. Put it in a layer
+  and declare the order **before** the stylesheet loads:
+
+  ```html
+  <style>
+    @layer my.reset, vitops.base, vitops.components, vitops.utilities;
+  </style>
+  <link rel="stylesheet" href="/styles.css" />
+  ```
+
+  Declaring it _after_ the link makes `my.reset` a name introduced later, which sorts **last** —
+  highest priority — and the reset wins anyway. That ordering rule is the one non-obvious step.
+
+  The `tailwind` format is byte-identical. Its utilities are `@utility` definitions, which Tailwind
+  already places in a layer above `components` and which are what make `hover:`/`@md:` variants
+  work; wrapping them ourselves would win the cascade and lose the variants.
+
+  Known gap: `layout.css` mixes structural rules (`.rhythm`, `.centered`) with utilities (`.m-*`,
+  `.flex`, `.split-*`) in one partial, so it sits in `vitops.components` whole and its utility half
+  cannot yet override a pattern. Splitting it is tracked separately.
+
+### Patch Changes
+
+- **Fixed: `vitops init` and `vp create` scaffolded configs referencing tokens that no longer
+  exist.** `defaultConfig()` and the EmDash template still pointed at `--color-surface-xl` and
+  `--color-surface-xxl`, aliases from the named-step colour scale removed in 0.6. A scaffolded
+  project therefore got a `card` with no background and an invalid default border colour, with
+  nothing reporting it. Both now use `--surface-bg` / `--surface-bg-muted`. The EmDash template
+  also dropped its `patterns.radii.card` key, which collided with the `card` pattern on
+  `--br-card` — the collision `validate()` has been warning about (the `panel` group already
+  supplies the same radius, so nothing changes visually).
+
+  **Fixed: `.text-reveal` rendered invisible text.** Its gradient consumed
+  `--text-reveal-color-from`/`-to` with no defaults, so unless a consumer set both, the `var()`
+  substitution failed, `background` became invalid at computed-value time, and the accompanying
+  `color: transparent` left the text with no way to render. Both tones now default to the
+  functional text tokens.
+
+  **Fixed: `.bordered` fell back to `currentColor`** via a reference to `--color-surface-xl`,
+  which the generator never emitted. It now resolves `--surface-border`.
+
+  **New: `validate()` warns when a required role is missing.** `colors.roles` is an open map —
+  any name works and generates a full token set — but the shipped component CSS references
+  `brand-primary`, `danger`, `neutral`, `surface`, `ui-primary` and `warning` with no fallback,
+  so omitting one leaves those components uncoloured. This is a warning, not an error; the
+  required list is re-derived from the CSS partials by a test so it cannot drift.
+
+  `vitops docs` and `vitops agents` now surface config warnings (on stderr, so piping `docs` is
+  unaffected). They previously discarded them, unlike `generate` and `validate`.
+
+  Docs corrections, all in the generated bundle:
+  - **Raw scale classes are frozen and do not remap in dark mode** — stated explicitly for the
+    first time, with a migration table to the role equivalents. The dark-mode guarantee only ever
+    applied to functional role tokens, and nothing said so.
+  - **Roles are extensible over a required core** — the schema description and class reference
+    read as a closed enumeration, which is why a consumer forked their own colour layer rather
+    than adding a role.
+  - **The `md:` / `@md:` / `md-` distinction** in the tailwind format: `@md:` uses the framework's
+    breakpoints, `md:` works but uses Tailwind's (which differ — `sm:` is 40rem, `@sm:` is 30rem),
+    and `md-` is silently inert. Plus a note that registering `--container-*` also re-points
+    Tailwind's `max-w-*` scale.
+  - The css and bricks bundles now carry a `/*!` banner pointing at `npx vitops docs classes`
+    (the previous plain comment was stripped by the minifier, so it never reached the file).
+
+  Contrast checking now covers **every** background plane a role emits (`bg`, `bg-muted`, and
+  `bg-bold`), not just `bg` — body text on a `card` was previously unguaranteed.
+
+- Docs now name both dark-mode attributes. The generated colour docs still described the
+  dark flip as hanging off `:root[data-brx-theme="dark"]` alone, from before the selector
+  also matched `:root[data-theme="dark"]` (the attribute `<color-scheme-toggle>` writes) —
+  so a non-Bricks consumer reading `vitops docs color` would wire up an attribute that
+  nothing matches. The selector moved into `shared.ts` as `DARK_SEL` (also exported from
+  the package index) and the docs interpolate it, so the two can't drift again.
+- c949cae: `vitops init` no longer scaffolds a config that warns on its own output.
+
+  `defaultConfig()` declared `patterns.radii.card`, a key named after the `card` pattern — the exact
+  collision `validate()` started reporting in 0.8.0. The primitive won `--br-card`, shadowing the
+  pattern's override hook and leaving its `--br-card-group` alias unreachable, so a scaffolded project
+  was warned about a config it had just been given.
+
+  The key is dropped. This is **value-preserving**: `card` belongs to the `panel` group, which already
+  carries the same `0.5rem`, so `--br-card-group` → `--br-panel` → `0.5rem` renders identically.
+
+  **Migration:** none for existing configs — your `design-system.json` is not touched. If you copied
+  the scaffold and reference `var(--br-card)` directly in hand-written CSS, note it is now an
+  _override hook_ (undefined until you set it) rather than a defined primitive; read `--br-card-group`
+  instead, or keep your own `radii` key under a name no pattern uses.
+
+- **The theme editor no longer dims the page it's editing.**
+
+  The panel used `.drawer`'s scrim and `popover="auto"`, which fought the whole purpose of a live
+  editor: the page you were tuning sat behind a 4px blur, and the first click on it dismissed the
+  panel. It is now modeless — no scrim, and clicking through to the page keeps it open. Escape still
+  closes it (wired explicitly, since `popover="manual"` doesn't provide it), as does the × button.
+
+  **New: `.drawer--modeless`.** The same treatment is available to any drawer — a side panel you work
+  _alongside_ rather than through (an inspector, a live editor, a filter rail). Pair it with
+  `popover="manual"`:
+
+  ```html
+  <div class="drawer drawer--right drawer--modeless" popover="manual">…</div>
+  ```
+
+  An `auto` popover light-dismisses on the first outside click, which is exactly the interaction a
+  modeless panel exists to permit — so `manual` is part of the pattern, not an afterthought. It also
+  drops Escape, so give the panel a visible close control.
+
+  **Added:** a drift guard tying `<wc-theme-editor>`'s dark-override selector to the generator's
+  `DARK_SEL`. The two must match or the editor's dark-mode edits land on a rule the page never
+  matches — a failure that is invisible in light mode, so nothing would have caught it.
+  - @getvitops/utils@0.9.0
+
 ## 0.8.0
 
 ### Minor Changes

package/assets/css/animation.css

@@ -303,6 +303,16 @@
    failure leaves readable text rather than blank space. Scroll-timeline is also
    guarded — without it the text simply shows the final (to) color, still legible. */
 .text-reveal {
+  /* Both tones MUST default, and NOT to currentColor. They are consumed by the
+     gradient below, where a var() substitution failure makes `background`
+     invalid at computed-value time — which, with the `color: transparent` in
+     that same block, renders the text completely invisible rather than
+     degrading. currentColor is unusable there for the same reason: inside the
+     @supports block it resolves to that transparent value. So default to the
+     functional text tokens (they flip with the appearance) with a literal
+     backstop, since this is precisely the declaration that must never fail. */
+  --_reveal-from: var(--text-reveal-color-from, var(--neutral-text-x-muted, #9099a8));
+  --_reveal-to: var(--text-reveal-color-to, var(--neutral-text, #05070d));
   /* Fallback baseline: ordinary visible text in the start color. */
   color: var(--text-reveal-color-from, currentColor);
 }
@@ -313,8 +323,8 @@
       --text-reveal-background,
       linear-gradient(
         var(--text-reveal-slant, 90deg),
-        var(--text-reveal-color-to) 50%,
-        var(--text-reveal-color-from) 50%
+        var(--_reveal-to) 50%,
+        var(--_reveal-from) 50%
       )
     );
     background-size: 200% 100%;

package/assets/css/patterns/details.css

@@ -37,15 +37,31 @@ details,
     rotate: var(--_details-icon-rotate, 90deg);
   }
 
+  /**
+   * Collapse without a transition — deliberately.
+   *
+   * This carried the canonical open/close animation (`block-size: 0 → auto` with
+   * `content-visibility` under `allow-discrete`, backed by the
+   * `interpolate-size: allow-keywords` in utilities.css). In Chrome 149 that
+   * deadlocks: `content-visibility` stays `hidden`, so the content has no layout,
+   * so `auto` resolves to `0`, so the transition has nothing to run — and the
+   * disclosure never opens *at all*. Not "opens without animating": every
+   * `<details>` on the page becomes inert, which is a total content-loss bug.
+   *
+   * Verified against a bare `<details>` with only this stylesheet, and bisected:
+   * `transition: none` is the only thing that restores it. Transitioning only
+   * `block-size`, only `content-visibility`, `calc-size(auto, size)`, and the
+   * `grid-template-rows: 0fr → 1fr` technique all fail the same way.
+   *
+   * So: correctness over motion. Re-add the transition only with a live
+   * cross-browser check that a first click actually expands — a passing
+   * `@supports` query is not evidence, since the syntax is valid and supported;
+   * it's the interaction that breaks.
+   */
   &::details-content {
     display: block;
     overflow: hidden;
     block-size: 0;
-    opacity: 0;
-    transition:
-      block-size 0.3s ease,
-      opacity 0.3s ease,
-      content-visibility 0.3s allow-discrete;
   }
 
   > summary + * {
@@ -62,13 +78,16 @@ details,
 
   &[open]::details-content {
     block-size: auto;
-    opacity: 1;
   }
 
+  /* Leading marker. The default (trailing) icon uses `margin-inline-start: auto`
+     to push itself to the end; the mirrored `margin-inline-end: auto` here did
+     the same thing to everything *after* it, so the label got shoved to the
+     opposite edge and the variant read as right-aligned text. A leading marker
+     just wants both auto margins gone — `gap` on the summary does the spacing. */
   &.details--marker-start > summary > .details-icon {
     order: -1;
-    margin-inline-start: 0;
-    margin-inline-end: auto;
+    margin-inline: 0;
   }
 
   /* Plus/minus variant — toggle two sibling icon elements */

package/assets/css/patterns/drawer.css

@@ -24,6 +24,21 @@
     backdrop-filter: blur(4px);
   }
 
+  /**
+   * Modeless — a panel you work *alongside* rather than through. Drops the
+   * scrim so the page behind stays legible, which is the whole point for a
+   * live editor or an inspector: you're watching what your edits do.
+   *
+   * Pair with `popover="manual"`. An `auto` popover light-dismisses on the
+   * first click outside — i.e. exactly the interaction a modeless panel exists
+   * to allow — and `manual` also drops Esc, so give it an explicit close
+   * control (and wire Esc yourself if the panel warrants it).
+   */
+  &.drawer--modeless::backdrop {
+    background: none;
+    backdrop-filter: none;
+  }
+
   &,
   &.drawer--left {
     inset-block: 0;

package/assets/css/patterns/grouped.css

@@ -9,7 +9,7 @@
   --_bs: var(--bs, solid);
   border-width: var(--_bw);
   border-style: var(--_bs);
-  border-color: var(--bc, var(--color-surface-xl, currentColor));
+  border-color: var(--bc, var(--surface-border, currentColor));
 }
 
 /* ── Group — collapse border-radius (+ shared borders) across direct children ─

package/assets/css/patterns/subgrid.css

@@ -3,51 +3,97 @@
  * Consumes the generated token cascade (src/css/generated/tokens.css).
  */
 
-/* ── Subgrid — content-aligned cards/tables via CSS subgrid ────────────────── */
+/* ── Subgrid — content-aligned cards/tables via CSS subgrid ────────────────────
+ *
+ * Each item spans `--subgrid-row-span` row tracks of the parent and re-declares
+ * them with `grid-template-rows: subgrid`, so the tranches inside every item —
+ * head, body, footer — land on the same row lines no matter how much content
+ * each one holds.
+ *
+ *   <ul class="subgrid" style="--subgrid-cols: 3; --subgrid-row-span: 3">
+ *
+ * Public custom properties:
+ *   --subgrid-cols      columns (default 3)
+ *   --subgrid-row-span  row tracks each item spans, i.e. tranches per item (2)
+ *   --subgrid-gap       the grid gap — between columns, and between tranches (1.5rem)
+ *   --subgrid-row-gap   EXTRA space between wrapped rows of items (0); see below
+ */
 .subgrid {
-  --_items-per-row: var(--items-per-row, 3);
-  --_rows-per-item: var(--rows-per-item, 2);
-  --_subgrid-gap: var(--subgrid-gap, 1.5rem);
+  --_cols: var(--subgrid-cols, 3);
+  --_row-span: var(--subgrid-row-span, 2);
+  --_gap: var(--subgrid-gap, 1.5rem);
+  --_row-gap: var(--subgrid-row-gap, 0px);
 
   display: grid;
-  grid-template-columns: repeat(var(--_items-per-row), 1fr);
-  gap: var(--_subgrid-gap);
+  grid-template-columns: repeat(var(--_cols), 1fr);
+  gap: var(--_gap);
 
   > * {
-    grid-row: span var(--_rows-per-item);
+    grid-row: span var(--_row-span);
     display: grid;
     grid-template-rows: subgrid;
   }
 
+  /* Spacing between items is the grid's job, not the flow's — neutralise the
+     `.rhythm :where(ul, ol) > li + li` margin, which reaches into any list
+     inside a prose container and outweighs `> *` on specificity. */
+  &:is(ul, ol) > li + li {
+    margin-block-start: 0;
+  }
+
+  /* The grid's own row gap is the gap between an item's *tranches*, so it can't
+     also be the gap between *rows of items* — items past the first row take an
+     extra margin instead. Computed in CSS rather than from a server-rendered
+     index because --_cols can change in a media query. Guarded the same way as
+     .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()) {
+    > *,
+    &:is(ul, ol) > li + li {
+      --_row-index: round(down, calc((sibling-index() - 1) / var(--_cols)), 1);
+      margin-block-start: calc(clamp(0, var(--_row-index), 1) * var(--_row-gap));
+    }
+  }
+
+  /* Markerless when it's a list — a subgrid of cards is a list of things, and
+     the markers would sit in the gutter. */
+  &:is(ul, ol) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &.subgrid-cols-1 {
-    --_items-per-row: 1;
+    --_cols: 1;
   }
   &.subgrid-cols-2 {
-    --_items-per-row: 2;
+    --_cols: 2;
   }
   &.subgrid-cols-3 {
-    --_items-per-row: 3;
+    --_cols: 3;
   }
   &.subgrid-cols-4 {
-    --_items-per-row: 4;
+    --_cols: 4;
   }
 
   &.subgrid-rows-2 {
-    --_rows-per-item: 2;
+    --_row-span: 2;
   }
   &.subgrid-rows-3 {
-    --_rows-per-item: 3;
+    --_row-span: 3;
   }
   &.subgrid-rows-4 {
-    --_rows-per-item: 4;
+    --_row-span: 4;
   }
 
   &.subgrid-responsive {
     @media (width < 60rem) {
-      --_items-per-row: min(var(--items-per-row, 3), 2);
+      --_cols: min(var(--subgrid-cols, 3), 2);
     }
     @media (width < 40rem) {
-      --_items-per-row: 1;
+      --_cols: 1;
     }
   }
 }

package/assets/css/patterns/theme-editor.css

@@ -38,6 +38,14 @@ wc-theme-editor {
   }
   .ed-section > summary {
     padding-block: 0.35rem;
+    gap: 0.4rem;
+  }
+  /* The pattern's icon slot is sized for body text; at panel density it needs to
+     be small enough not to outweigh the label it sits next to. */
+  .details-icon {
+    font-size: 0.75em;
+    line-height: 1;
+    opacity: 0.7;
   }
   .ed-sub {
     border: var(--b-default);

package/assets/css/utilities.css

@@ -311,13 +311,15 @@
    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;
-    transition:
-      block-size var(--reveal-duration) var(--interact-easing, ease),
-      content-visibility var(--reveal-duration) allow-discrete;
   }
   details[open]::details-content {
     block-size: auto;

package/assets/js/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 ed-section`,...t?{open:!0}:{}},[this.el(`summary`,{class:`font-eyebrow`},[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:`auto`,class:`drawer drawer--right 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`]);this.append(r,n)}};customElements.get(`wc-theme-editor`)||customElements.define(`wc-theme-editor`,i);
+`)}\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);