@bridge-ds/core 0.18.0 → 0.20.0

package/dist/node/index.js

@@ -2,10 +2,11 @@ import { execFile, execFileSync } from "node:child_process";
 import { mkdtemp, rm, mkdir, writeFile, lstat, readFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join, resolve, relative, dirname, sep, posix } from "node:path";
-import { b7 as assertSafeBranch, c as collectHistory, p as packageDirCandidates, a as parseChangelog, m as mergeReleases, r as releasesFromTags, b as buildReport, cJ as prNumberFromSubject, d3 as specHash, dy as validateComponentSpec, c0 as hashSpec, c1 as iconComponentName, C as variantKeyOf, dt as tokenCssVar, av as COMPONENT_SPECS_VERSION, au as COLOR_FIELDS, d8 as suggestionAppliedComment, X as gitBlobSha, cH as planSuggestionApply, ak as normalizeRepoPath } from "../repo-source-CRfhLO87.js";
-import { K as selectTokenFiles, ag as globToRegExp, N as loadConfig, L as LayeredTokenSet, V as CONFIG_FILE, $ as layoutOptions, a0 as buildTokenSet, b7 as defaultContext, B as resolve$1, ae as slugify, b$ as protectedBranchesOf, aQ as baseBranchOf } from "../prod-branch-DenQkr_e.js";
+import { bp as assertSafeBranch, c as collectHistory, p as packageDirCandidates, a as parseChangelog, m as mergeReleases, r as releasesFromTags, b as buildReport, di as prNumberFromSubject, dI as specHash, ef as validateComponentSpec, K as hashSpec, cp as iconComponentName, F as variantKeyOf, e9 as tokenCssVar, aG as COMPONENT_SPECS_VERSION, J as COLOR_FIELDS, dQ as suggestionAppliedComment, a2 as gitBlobSha, dg as planSuggestionApply, aq as normalizeRepoPath, dF as sharedTokenPrefix, ec as tokenVariablePath, ep as withSrgbColors, dL as storybookIframeUrl, c_ as parseBoxShadow } from "../repo-source-CshjjC7x.js";
+import { aV, C, c6, cL, I, d1, H } from "../repo-source-CshjjC7x.js";
+import { K as selectTokenFiles, ah as globToRegExp, N as loadConfig, L as LayeredTokenSet, V as CONFIG_FILE, a0 as layoutOptions, a1 as buildTokenSet, b9 as defaultContext, B as resolve$1, af as slugify, c2 as protectedBranchesOf, _ as baseBranchOf } from "../prod-branch-CJZwMfVD.js";
 import { statSync, readFileSync, existsSync, writeFileSync, readdirSync } from "node:fs";
-import { i as isAuditable, Q as planCssFixes, O as parseAllowlist, d as DesignSystemIndex, l as buildAuditReport, o as compareWithBaseline, b as AUDIT_IGNORE_DIRS } from "../report-DVEmUr0p.js";
+import { i as isAuditable, Q as planCssFixes, O as parseAllowlist, d as DesignSystemIndex, l as buildAuditReport, o as compareWithBaseline, b as AUDIT_IGNORE_DIRS } from "../report-CE-jHAuw.js";
 import ts from "typescript";
 function git(root, args, opts = {}) {
   return new Promise((resolve2, reject) => {
@@ -295,16 +296,17 @@ function runAudit(target, opts = {}) {
   );
   return opts.baseline ? compareWithBaseline(report, opts.baseline) : report;
 }
-function fixCss(target, ds, write) {
-  const { root, files } = collectAuditFiles(target);
+function fixCss(target, ds, write, opts = {}) {
+  const { root, files } = collectAuditFiles(target, opts.exclude ?? []);
   const out = [];
   for (const f of files) {
     const lang = f.path.endsWith(".scss") || f.path.endsWith(".sass") ? "scss" : f.path.endsWith(".less") ? "less" : f.path.endsWith(".css") ? "css" : null;
     if (!lang) continue;
-    const plan = planCssFixes(f.text, lang, ds);
-    if (!plan.edits.length) continue;
-    if (write) writeFileSync(join(root, f.path), plan.output);
-    out.push({ file: f.path, edits: plan.edits });
+    const allowlist = (opts.allowlist ?? []).filter((e) => toPosix(e.file) === f.path);
+    const plan = planCssFixes(f.text, lang, ds, { allowlist });
+    if (!plan.edits.length && !plan.kept.length) continue;
+    if (write && plan.edits.length) writeFileSync(join(root, f.path), plan.output);
+    out.push({ file: f.path, edits: plan.edits, kept: plan.kept });
   }
   return out;
 }
@@ -429,11 +431,17 @@ function specificityOf(c) {
   return sp;
 }
 const cmpSpec = (a, b) => a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+const SPEC_VIEWPORT_WIDTH = 1200;
 function mediaApplies(query) {
   const q = query.replace(/\s+/g, " ").trim().toLowerCase();
   if (q.startsWith("@supports")) return true;
   const cond = q.replace(/^@media /, "");
-  return /^\((any-)?hover: ?hover\)$/.test(cond) || cond === "screen" || cond === "all";
+  return cond.split(" and ").every((c) => {
+    if (/^\((any-)?hover: ?hover\)$/.test(c) || c === "screen" || c === "all") return true;
+    const w = /^\((min|max)-width: ?([\d.]+)px\)$/.exec(c);
+    if (!w) return false;
+    return w[1] === "min" ? SPEC_VIEWPORT_WIDTH >= Number(w[2]) : SPEC_VIEWPORT_WIDTH <= Number(w[2]);
+  });
 }
 function parseCssModule(module, text, startOrder = 0) {
   const rules = [];
@@ -1052,6 +1060,25 @@ class Reader {
   opts;
   cache = /* @__PURE__ */ new Map();
   aliasCache = /* @__PURE__ */ new Map();
+  elements = /* @__PURE__ */ new Map();
+  /**
+   * The element a Base UI part renders ("Increment" -> "button"), as Base UI's own docs say it
+   * (node_modules/@base-ui/react/docs/react/components/<module>.md: "### Increment ... Renders a `<button>` element").
+   */
+  baseUiElement(modules, part) {
+    for (const m of modules) {
+      let parts = this.elements.get(m);
+      if (!parts) {
+        parts = /* @__PURE__ */ new Map();
+        const text = this.opts.read(`node_modules/@base-ui/react/docs/react/components/${m}.md`) ?? "";
+        for (const hit of text.matchAll(/^### ([\w.]+)\n(?:(?!#)[^\n]*\n){0,6}?Renders an? `<([a-z0-9-]+)>` element/gm)) parts.set(hit[1], hit[2]);
+        this.elements.set(m, parts);
+      }
+      const el = parts.get(part);
+      if (el) return el;
+    }
+    return void 0;
+  }
   dirOf(name) {
     return `${this.opts.componentsDir}/${name}`;
   }
@@ -1424,7 +1451,11 @@ function evaluate(e, scope) {
   if (ts.isObjectLiteralExpression(e)) {
     const out = {};
     for (const p of e.properties) {
-      if (ts.isPropertyAssignment(p)) out[unquote(p.name.getText(sf))] = evaluate(p.initializer, scope);
+      if (ts.isPropertyAssignment(p) && ts.isComputedPropertyName(p.name)) {
+        const key = evaluate(p.name.expression, scope);
+        if (typeof key !== "string" && typeof key !== "number") return OPAQUE;
+        out[String(key)] = evaluate(p.initializer, scope);
+      } else if (ts.isPropertyAssignment(p)) out[unquote(p.name.getText(sf))] = evaluate(p.initializer, scope);
       else if (ts.isShorthandPropertyAssignment(p)) out[p.name.text] = lookup(scope, p.name.text);
       else if (ts.isSpreadAssignment(p)) {
         const v = evaluate(p.expression, scope);
@@ -1436,6 +1467,12 @@ function evaluate(e, scope) {
   if (ts.isArrayLiteralExpression(e)) return e.elements.map((x) => evaluate(x, scope));
   return OPAQUE;
 }
+function styleVarsOf(style) {
+  if (!style || typeof style !== "object" || Array.isArray(style) || isJsx(style)) return void 0;
+  const vars = /* @__PURE__ */ new Map();
+  for (const [k, v] of Object.entries(style)) if (k.startsWith("--") && (typeof v === "number" || typeof v === "string")) vars.set(k, String(v));
+  return vars.size ? vars : void 0;
+}
 const isData = (v) => typeof v === "string" || typeof v === "number" || typeof v === "boolean" || v === null || v === void 0 || Array.isArray(v) && v.every(isData) || !!v && typeof v === "object" && !isJsx(v) && !isClass(v) && !isStyles(v) && !isTextRef(v) && !isFnRef(v) && Object.values(v).every(isData);
 function callData(fn, args) {
   const data = args.map((a) => isTextRef(a) ? a.text : a);
@@ -1725,7 +1762,11 @@ function renderJsx(ref, ctx, visible) {
     const extra = classList(attrs.className);
     if (isJsx(r)) {
       const nodes = renderJsx(r, ctx, visible);
-      if (nodes[0]) nodes[0].classes = [...nodes[0].classes, ...extra];
+      if (nodes[0]) {
+        nodes[0].classes = [...nodes[0].classes, ...extra];
+        const vars2 = styleVarsOf(attrs.style);
+        if (vars2) nodes[0].styleVars = new Map([...nodes[0].styleVars ?? [], ...vars2]);
+      }
       return nodes;
     }
     const init = open.attributes.properties.find((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "render")?.initializer;
@@ -1763,22 +1804,20 @@ function renderJsx(ref, ctx, visible) {
     children: [],
     kind: "frame",
     ...visible ? { visible } : {},
-    ...scope.src.baseUi.has(tag.split(".")[0]) ? ctx.selected !== void 0 && typeof attrs.value === "string" ? { baseUi: true, checked: attrs.value === ctx.selected ? "true" : "false", selectedBy: true } : { baseUi: true, checked: scope.main ? "state" : scope.checked ?? "false" } : {},
+    ...scope.src.baseUi.has(tag.split(".")[0]) ? ctx.selected !== void 0 && typeof attrs.value === "string" ? { baseUi: true, checked: (Array.isArray(ctx.selected) ? ctx.selected.includes(attrs.value) : attrs.value === ctx.selected) ? "true" : "false", selectedBy: true } : { baseUi: true, checked: scope.main ? "state" : scope.checked ?? "false" } : {},
     ...dataAttrs.size ? { attrs: dataAttrs } : {},
     .../(^img$|\.Image$)/.test(tag) ? { media: true } : {},
     // Base UI indicators are only mounted while their item is checked, unless keepMounted.
     .../\.(Item)?Indicator$/.test(tag) && scope.src.baseUi.has(tag.split(".")[0]) && attrs.keepMounted !== true && ctx.fraction === void 0 ? { whenChecked: true } : {}
   };
+  const element = isBaseUi ? ctx.reader.baseUiElement(scope.src.baseUiModules, tag.split(".").slice(1).join(".")) : tag;
+  if (element === "button" || element === "select") node.borderBox = true;
   if (isBaseUi && /\.Panel$/.test(tag) && node.selectedBy && node.checked === "false") node.inactive = true;
   if (isBaseUi && /\.Thumb$/.test(tag) && ctx.fraction !== void 0) node.at = ctx.fraction;
   const bg = attrs.style && typeof attrs.style === "object" && !Array.isArray(attrs.style) ? attrs.style.backgroundColor : void 0;
   if (typeof bg === "string") node.inlineFill = bg;
-  const style = attrs.style;
-  if (style && typeof style === "object" && !Array.isArray(style) && !isJsx(style)) {
-    const vars = /* @__PURE__ */ new Map();
-    for (const [k, v] of Object.entries(style)) if (k.startsWith("--") && (typeof v === "number" || typeof v === "string")) vars.set(k, String(v));
-    if (vars.size) node.styleVars = vars;
-  }
+  const vars = styleVarsOf(attrs.style);
+  if (vars) node.styleVars = vars;
   if (tag === "svg") {
     const lit = {};
     for (const [k, v] of Object.entries(attrs)) if ((typeof v === "string" || typeof v === "number") && k !== "className") lit[k] = String(v);
@@ -2190,6 +2229,24 @@ function collapseText(n, root = true, boxed = () => false, unseen = () => false)
   }
   return n;
 }
+function inheritedInside(root, classes, rules, page) {
+  const path = [];
+  const find = (n) => {
+    if (n !== root && classes.every((c) => n.classes.includes(c))) return true;
+    path.push(n);
+    for (const c of n.children) if (find(c)) return true;
+    path.pop();
+    return false;
+  };
+  if (!find(root)) return void 0;
+  let ctx = page;
+  for (const n of path) {
+    if (n.kind !== "frame") continue;
+    const el = { tag: n.tag, classes: new Set(n.classes), children: [], present: true, isRoot: false, inputLike: false };
+    ctx = computeValues(declaredFor(rules, el, DEFAULT_STATE), ctx);
+  }
+  return ctx;
+}
 function applyView(root, view) {
   if (!view) return root;
   const isPortal = (n) => /\.Portal$/.test(n.tag);
@@ -2209,7 +2266,8 @@ function applyView(root, view) {
 }
 function build(reader, src, props, preview, view, rules = [], tokens, examples) {
   const blockers = [];
-  const selected = typeof props.defaultValue === "string" ? props.defaultValue : void 0;
+  const dv = props.defaultValue;
+  const selected = typeof dv === "string" ? dv : Array.isArray(dv) && dv.every((x) => typeof x === "string") ? dv : void 0;
   const rendered = renderComponent(reader, src.name, { ...props, children: CHILDREN }, { reader, depth: 0, component: src.name, blockers, ...selected !== void 0 ? { selected } : {}, ...examples ? { examples } : {} }, void 0, preview);
   let root = rendered && applyView(rendered, view);
   if (!root) return void 0;
@@ -2227,10 +2285,12 @@ function build(reader, src, props, preview, view, rules = [], tokens, examples)
       root.children.push(n);
     }
   }
-  const follow = (n, inherited) => {
+  const follow = (n, inherited, item) => {
     if (n.baseUi && n.selectedBy) inherited = n.checked;
     else if (n.baseUi && inherited) n.checked = inherited;
-    for (const c of n.children) follow(c, inherited);
+    if (n.baseUi && /\.Item$/.test(n.tag)) item = n;
+    if (n.baseUi && /\.Panel$/.test(n.tag) && item && item.checked !== "true" && item.checked !== "state") n.inactive = true;
+    for (const c of n.children) follow(c, inherited, item);
   };
   follow(root, void 0);
   decorate(root, rules, tokens);
@@ -2393,9 +2453,23 @@ function resolveValue(raw, values, tokens, depth = 0, parent, forColor = false)
   return { unmapped: "literal value, not a token" };
 }
 function calcValue(v, values, tokens, depth, parent) {
-  const inner = v.slice(v.indexOf("(") + 1, v.lastIndexOf(")"));
+  let inner = v.slice(v.indexOf("(") + 1, v.lastIndexOf(")"));
   let failed;
+  if (/\d*\.?\d+lh\b/.test(inner)) {
+    const fs = resolveValue(values.get("font-size"), values, tokens, depth + 1, parent);
+    const lh = resolveValue(values.get("line-height"), values, tokens, depth + 1, parent);
+    if (typeof fs?.value === "string" && typeof lh?.value === "string" && !fs.value.startsWith("calc(") && !lh.value.startsWith("calc(")) {
+      inner = inner.replace(/(\d*\.?\d+)lh\b/g, (_m, n) => Number(n) === 1 ? `(${fs.value} * ${lh.value})` : `${n} * (${fs.value} * ${lh.value})`);
+    }
+  }
   const substituted = inner.replace(/var\(\s*--[\w-]+\s*(?:,[^()]*)?\)/g, (m) => {
+    let raw = m;
+    for (let hops = 0; hops < 12 && raw; hops++) {
+      const name = /^var\(\s*(--[\w-]+)/.exec(raw.trim())?.[1];
+      if (!name || tokens.has(name)) break;
+      raw = values.get(name);
+    }
+    if (raw !== void 0 && /^-?\d*\.?\d+$/.test(raw.trim())) return raw.trim();
     const r = resolveValue(m, values, tokens, depth + 1, parent);
     if (!r || r.unmapped !== void 0 || r.value === null || r.value === void 0) {
       failed ??= r?.unmapped ?? `${m} has no value`;
@@ -2531,8 +2605,29 @@ function partValues(node, computed, own, tokens, parent) {
     const v = own.get(prop);
     if (v !== void 0 && /var\(/.test(v)) out.unmapped.push({ property: prop, value: v, reason });
   }
+  contentBoxMinimums(out.values, computed, node.borderBox);
   return out;
 }
+function contentBoxMinimums(values, computed, borderBoxByDefault = false) {
+  if ((computed.get("box-sizing") ?? (borderBoxByDefault ? "border-box" : "content-box")).trim() === "border-box") return;
+  const term = (v) => {
+    if (v === void 0 || v === null || v === 0) return void 0;
+    if (typeof v === "number") return String(v);
+    if (typeof v !== "string") return void 0;
+    return v.startsWith("calc(") ? `(${v.slice(5, -1)})` : v;
+  };
+  const sum = (base, extra) => {
+    const add = extra.map(term).filter((t) => !!t);
+    const head = term(base);
+    if (!add.length || !head) return base;
+    return `calc(${[head, ...add].join(" + ")})`;
+  };
+  const border = (side) => values[`stroke${side}Weight`] ?? values.strokeWeight;
+  if (values.minHeight !== void 0) values.minHeight = sum(values.minHeight, [values.paddingTop, values.paddingBottom, border("Top"), border("Bottom")]);
+  if (values.minWidth !== void 0) values.minWidth = sum(values.minWidth, [values.paddingLeft, values.paddingRight, border("Left"), border("Right")]);
+  if (values.height !== void 0) values.height = sum(values.height, [values.paddingTop, values.paddingBottom, border("Top"), border("Bottom")]);
+  if (values.width !== void 0) values.width = sum(values.width, [values.paddingLeft, values.paddingRight, border("Left"), border("Right")]);
+}
 const singleCellGrid = (c) => /grid/.test(c.get("display") ?? "") && ["grid-template-columns", "grid-template-rows", "grid-template-areas", "grid-template", "grid-auto-flow", "grid-auto-columns"].every((k) => !c.get(k) || c.get(k) === "none");
 const TABLE_DISPLAY = { table: "table", thead: "table-row-group", tbody: "table-row-group", tfoot: "table-row-group", tr: "table-row", td: "table-cell", th: "table-cell", caption: "table-caption" };
 const gridCounter = (v) => /center/.test(v ?? "") ? "CENTER" : /end/.test(v ?? "") ? "MAX" : /start/.test(v ?? "") ? "MIN" : "STRETCH";
@@ -2944,6 +3039,14 @@ function generateComponentSpec(name, opts, view, setName = name, fixed = {}) {
     const v = previewEl?.p?.[p.name];
     if (p.kind === "string" && p.optional && typeof v === "string" && baseProps[p.name] === void 0) examples[p.name] = v;
   }
+  if (view === "without-popup" && name !== src.folder) {
+    const own = build(reader, src, { ...baseProps, ...fixed }, previewKids, view, rules, opts.tokens)?.root.classes ?? [];
+    const folderSrc = reader.load(src.folder);
+    const folderPreview = previewElement(docs?.preview, src.folder) ?? storyElement(readStories(src.folder, opts), src.folder);
+    const folderKids = folderPreview?.children?.some((c) => typeof c !== "string") ? folderPreview.children : void 0;
+    const popup = own.length && folderSrc && folderKids ? build(reader, folderSrc, {}, folderKids, "popup", rules, opts.tokens) : void 0;
+    if (popup) page = inheritedInside(popup.root, own, rules, page) ?? inheritedInside({ ...popup.root, children: [{ ...popup.root, classes: own, children: [] }] }, own, rules, page) ?? page;
+  }
   const evalAt = (props, state) => evaluateVariant(reader, src, rules, { ...baseProps, ...props, ...fixed }, state, opts.tokens, previewKids, page, view, Object.keys(examples).length ? examples : void 0);
   const base = evalAt({}, DEFAULT_STATE);
   if (!base) throw new UnsupportedComponentError(name, "renders in a way the generator cannot read yet");
@@ -3844,25 +3947,1521 @@ function fsSource(root, ref = {}) {
     }
   };
 }
+const MEASURE_SCRIPT = String.raw`(function (arg) {
+  arg = arg || {};
+  var MAX_NODES = arg.maxNodes || 400;
+  var MAX_DEPTH = arg.maxDepth || 14;
+  var rootSel = arg.root || '#storybook-root, #root';
+  var PROPS = ['display', 'position', 'visibility', 'opacity', 'overflow', 'box-sizing',
+    'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-self', 'flex-grow', 'row-gap', 'column-gap',
+    'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+    'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+    'width', 'height', 'min-width', 'min-height',
+    'background-color', 'background-image',
+    'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
+    'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
+    'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
+    'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius',
+    'box-shadow', 'outline-style', 'outline-width', 'outline-color',
+    'color', 'font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing', 'text-decoration-line', 'text-transform', 'text-align', 'white-space',
+    'fill', 'stroke', 'stroke-width', 'transform', 'grid-auto-flow', 'grid-template-columns', 'grid-template-rows', 'left', 'top', 'right', 'bottom'];
+  // Properties a token is looked for (paint, spacing, shape, type).
+  var TOKENED = ['row-gap', 'column-gap', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'width', 'height', 'min-width', 'min-height',
+    'background-color', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
+    'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
+    'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius',
+    'box-shadow', 'opacity', 'color', 'font-family', 'font-size', 'font-weight', 'line-height', 'letter-spacing', 'fill', 'stroke', 'stroke-width'];
+  // Longhand -> shorthands that may set it, with the position of the longhand in a 1 to 4 value box shorthand.
+  var SIDES = { top: 0, right: 1, bottom: 2, left: 3 };
+  var CORNERS = { 'top-left': 0, 'top-right': 1, 'bottom-right': 2, 'bottom-left': 3 };
+  var LOGICAL = { top: 'block-start', bottom: 'block-end', left: 'inline-start', right: 'inline-end' };
+  var LOGICAL_CORNER = { 'top-left': 'start-start', 'top-right': 'start-end', 'bottom-right': 'end-end', 'bottom-left': 'end-start' };
+  function shorthandsOf(p) {
+    var m;
+    // Logical longhands too (padding-block-start: a horizontal writing mode, left to right).
+    if ((m = /^padding-(top|right|bottom|left)$/.exec(p))) return [['padding-' + LOGICAL[m[1]], -1], ['padding', SIDES[m[1]]], ['padding-block', m[1] === 'top' ? 0 : m[1] === 'bottom' ? 1 : -1], ['padding-inline', m[1] === 'left' ? 0 : m[1] === 'right' ? 1 : -1]].filter(function (x) { return !/block$|inline$/.test(x[0]) || x[1] >= 0; });
+    if ((m = /^margin-(top|right|bottom|left)$/.exec(p))) return [['margin-' + LOGICAL[m[1]], -1], ['margin', SIDES[m[1]]]];
+    if ((m = /^border-(top-left|top-right|bottom-right|bottom-left)-radius$/.exec(p))) return [['border-' + LOGICAL_CORNER[m[1]] + '-radius', -1], ['border-radius', CORNERS[m[1]]]];
+    if ((m = /^border-(top|right|bottom|left)-(width|color|style)$/.exec(p))) return [['border-' + LOGICAL[m[1]] + '-' + m[2], -1], ['border-' + LOGICAL[m[1]], -1], ['border-' + m[2], SIDES[m[1]]], ['border-' + m[1], -1], ['border', -1], ['border-' + (m[1] === 'top' || m[1] === 'bottom' ? 'block' : 'inline'), -1]];
+    if (p === 'row-gap') return [['gap', 0]];
+    if (p === 'column-gap') return [['gap', 1]];
+    if (p === 'background-color') return [['background', -1]];
+    if (/^font-/.test(p) || p === 'line-height') return [['font', -1]];
+    return [];
+  }
+
+  // ---- style rules, read once ----
+  var rules = [];
+  var order = 0;
+  function walk(list, layered) {
+    for (var i = 0; i < list.length; i++) {
+      var r = list[i];
+      try {
+        if (r.selectorText !== undefined && r.style) {
+          rules.push({ sel: r.selectorText, style: r.style, order: order++, layered: layered });
+          if (r.cssRules && r.cssRules.length) walk(r.cssRules, layered); // CSS nesting
+        } else if (r.media !== undefined && r.cssRules) {
+          if (window.matchMedia(r.media.mediaText || 'all').matches) walk(r.cssRules, layered);
+        } else if (r.conditionText !== undefined && r.cssRules) {
+          walk(r.cssRules, layered);
+        } else if (r.cssRules && r.name !== undefined) {
+          walk(r.cssRules, true); // @layer block: unlayered rules win over it
+        } else if (r.cssRules) {
+          walk(r.cssRules, layered);
+        }
+      } catch (e) {}
+    }
+  }
+  var sheetsRead = 0, sheetsBlocked = 0;
+  for (var s = 0; s < document.styleSheets.length; s++) {
+    try { walk(document.styleSheets[s].cssRules, false); sheetsRead++; } catch (e) { sheetsBlocked++; }
+  }
+  try { for (var a = 0; a < (document.adoptedStyleSheets || []).length; a++) walk(document.adoptedStyleSheets[a].cssRules, false); } catch (e) {}
+
+  function splitTop(text, sepRe) {
+    var out = [], depth = 0, cur = '', q = null;
+    for (var i = 0; i < text.length; i++) {
+      var c = text[i];
+      if (q) { cur += c; if (c === q) q = null; continue; }
+      if (c === '"' || c === "'") { q = c; cur += c; continue; }
+      if (c === '(' || c === '[') depth++;
+      if (c === ')' || c === ']') depth--;
+      if (depth === 0 && sepRe.test(c)) { if (cur.trim()) out.push(cur.trim()); cur = ''; continue; }
+      cur += c;
+    }
+    if (cur.trim()) out.push(cur.trim());
+    return out;
+  }
+  function specificity(sel) {
+    var s = sel.replace(/:where\([^)]*\)/g, '').replace(/::?(before|after|placeholder|selection|marker|backdrop)\b/g, '');
+    var ids = (s.match(/#[\w-]+/g) || []).length;
+    var cls = (s.match(/\.[\w-]+|\[[^\]]*\]|:(?!not\b|is\b|has\b)[\w-]+(\([^)]*\))?/g) || []).length;
+    var types = (s.replace(/\[[^\]]*\]|\([^)]*\)/g, '').match(/(^|[\s>+~(])[a-zA-Z][\w-]*/g) || []).length;
+    return ids * 10000 + cls * 100 + types;
+  }
+  var PSEUDO_END = /::?(before|after)\s*$/;
+  // pseudo: the rules for el::before / el::after (the selector minus its pseudo-element); none: the element's own.
+  function matchSpec(el, selText, pseudo) {
+    var best = -1;
+    var parts = splitTop(selText, /,/);
+    for (var i = 0; i < parts.length; i++) {
+      var part = parts[i];
+      var pm = PSEUDO_END.exec(part);
+      if (pseudo) {
+        if (!pm || pm[1] !== pseudo) continue;
+        part = part.slice(0, pm.index).trim() || '*';
+      } else if (pm || /::/.test(part)) continue;
+      try { if (el.matches(part)) best = Math.max(best, specificity(part) + (pseudo ? 1 : 0)); } catch (e) {}
+    }
+    return best;
+  }
+  var matchCache = { '': new Map(), before: new Map(), after: new Map() };
+  function matching(el, pseudo) {
+    var cache = matchCache[pseudo || ''];
+    var m = cache.get(el);
+    if (m) return m;
+    m = [];
+    for (var i = 0; i < rules.length; i++) {
+      var sp = matchSpec(el, rules[i].sel, pseudo);
+      if (sp >= 0) m.push({ r: rules[i], sp: sp });
+    }
+    cache.set(el, m);
+    return m;
+  }
+  // The winning declared value of a property (longhand or the shorthand that sets it) on an element or its pseudo.
+  function declared(el, prop, pseudo) {
+    var best = null;
+    function consider(value, important, layered, sp, ord, shorthand, pos) {
+      if (!value) return;
+      var rank = [important ? (layered ? 3 : 2) : (layered ? 0 : 1), sp, ord];
+      if (!best || cmp(rank, best.rank) > 0) best = { value: value, rank: rank, shorthand: shorthand, pos: pos };
+    }
+    function cmp(x, y) { for (var i = 0; i < x.length; i++) if (x[i] !== y[i]) return x[i] - y[i]; return 0; }
+    var short = prop.indexOf('--') === 0 ? [] : shorthandsOf(prop);
+    var m = matching(el, pseudo);
+    for (var i = 0; i < m.length; i++) {
+      var st = m[i].r.style;
+      var v = st.getPropertyValue(prop);
+      if (v) consider(v, st.getPropertyPriority(prop) === 'important', m[i].r.layered, m[i].sp, m[i].r.order, null, -1);
+      else for (var k = 0; k < short.length; k++) {
+        var sv = st.getPropertyValue(short[k][0]);
+        if (sv) consider(sv, st.getPropertyPriority(short[k][0]) === 'important', m[i].r.layered, m[i].sp, m[i].r.order, short[k][0], short[k][1]);
+      }
+    }
+    var inl = !pseudo && el.style && el.style.getPropertyValue(prop);
+    if (inl) consider(inl, el.style.getPropertyPriority(prop) === 'important', false, 1e9, 1e9, null, -1);
+    else if (el.style && !pseudo) for (var j = 0; j < short.length; j++) {
+      var iv = el.style.getPropertyValue(short[j][0]);
+      if (iv) consider(iv, false, false, 1e9, 1e9, short[j][0], short[j][1]);
+    }
+    return best;
+  }
+  function varsIn(value) {
+    var out = [], re = /var\(\s*(--[\w-]+)/g, m;
+    while ((m = re.exec(value))) out.push(m[1]);
+    return out;
+  }
+  // The piece of a box shorthand that sets one side ("padding: var(--a) var(--b)" -> right is var(--b)).
+  function boxPiece(value, pos) {
+    if (pos < 0) return value;
+    var parts = splitTop(value.replace(/\s*\/.*$/, ''), /\s/);
+    if (parts.length === 1) return parts[0];
+    if (parts.length === 2) return parts[pos % 2];
+    if (parts.length === 3) return parts[pos === 3 ? 1 : pos];
+    return parts[pos] || value;
+  }
+  // Custom property chain: --button-bg -> --color-action-primary-bg -> --color-orange-500.
+  function chainOf(el, name) {
+    var chain = [name], seen = {};
+    seen[name] = 1;
+    var cur = name;
+    for (var d = 0; d < 8; d++) {
+      var found = null;
+      for (var e = el; e && e.nodeType === 1; e = e.parentElement) {
+        var dv = declared(e, cur);
+        if (dv) { found = dv.value; break; }
+      }
+      if (!found) break;
+      var next = varsIn(found);
+      if (next.length !== 1 || seen[next[0]] || found.trim().indexOf('var(') !== 0) break;
+      seen[next[0]] = 1;
+      chain.push(next[0]);
+      cur = next[0];
+    }
+    return chain;
+  }
+
+  // ---- value normalisation through a probe element ----
+  var probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;width:0;height:0';
+  document.body.appendChild(probe);
+  var colorCache = {};
+  function normColor(v) {
+    if (v in colorCache) return colorCache[v];
+    probe.style.color = '';
+    probe.style.color = v;
+    var out = probe.style.color ? getComputedStyle(probe).color : null;
+    colorCache[v] = out;
+    return out;
+  }
+  function normLength(v) {
+    probe.style.width = '';
+    probe.style.width = v;
+    if (!probe.style.width) return null;
+    var w = getComputedStyle(probe).width;
+    probe.style.width = '0';
+    return w;
+  }
+  var isColorProp = function (p) { return /color$/.test(p) || p === 'fill' || p === 'stroke'; };
+
+  // Variables in scope at the component (for value matching): defined on :root, or on a provider element around the
+  // story (Fluent's FluentProvider, a theme wrapper). Custom properties inherit, so the component root's computed style
+  // holds both.
+  var rootVars = null;
+  var scopeEl = null;
+  function rootTokens() {
+    if (rootVars) return rootVars;
+    rootVars = { colors: {}, lengths: {}, count: 0, scoped: 0 };
+    var cs = getComputedStyle(scopeEl || document.documentElement);
+    var top = scopeEl ? getComputedStyle(document.documentElement) : cs;
+    var names = {};
+    for (var i = 0; i < rules.length; i++) {
+      var st = rules[i].style;
+      for (var k = 0; k < st.length; k++) if (st[k].indexOf('--') === 0) names[st[k]] = 1;
+    }
+    for (var i2 = 0; i2 < cs.length; i2++) if (cs[i2].indexOf('--') === 0) names[cs[i2]] = 1;
+    for (var i3 = 0; scopeEl && i3 < top.length; i3++) if (top[i3].indexOf('--') === 0) names[top[i3]] = 1;
+    for (var n in names) {
+      var v = cs.getPropertyValue(n).trim();
+      if (!v) continue;
+      rootVars.count++;
+      if (scopeEl && !top.getPropertyValue(n).trim()) rootVars.scoped++;
+      if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(v)) {
+        var c = normColor(v);
+        if (c) (rootVars.colors[c] = rootVars.colors[c] || []).push(n);
+      } else if (/^-?[\d.]+(px|rem|em)$/.test(v)) {
+        var l = normLength(v);
+        if (l) (rootVars.lengths[l] = rootVars.lengths[l] || []).push(n);
+      }
+    }
+    return rootVars;
+  }
+
+  function tokenFor(el, prop, computed, pseudo) {
+    var d = declared(el, prop, pseudo);
+    // A pseudo-element inherits from its element, an element from its parent.
+    var parentOf = pseudo ? el : el.parentElement;
+    if (d) {
+      var piece = d.shorthand && /^(padding|margin|border-radius|border-width|border-color|border-style|gap)$/.test(d.shorthand) ? boxPiece(d.value, d.pos) : d.value;
+      var vars = varsIn(piece);
+      if (vars.length) {
+        var pick = vars[0];
+        if (vars.length > 1) {
+          var cs = getComputedStyle(el, pseudo ? '::' + pseudo : null);
+          for (var i = 0; i < vars.length; i++) {
+            var rv = cs.getPropertyValue(vars[i]).trim();
+            var same = isColorProp(prop) ? normColor(rv) === computed : normLength(rv) === computed;
+            if (same) { pick = vars[i]; break; }
+          }
+        }
+        var chain = chainOf(el, pick);
+        // A color function around channels alone ("hsl(var(--primary))") gives the variable's color: tied to it too.
+        var channels = isColorProp(prop) && vars.length === 1 ? /^(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\(\s*var\(\s*--[\w-]+\s*\)\s*\)$/i.exec(piece.trim()) : null;
+        var direct = (piece.trim().indexOf('var(') === 0 && vars.length === 1) || !!channels;
+        // A declaration that does not give the computed value lost the cascade somewhere this script does not model:
+        // the value is not tied to it (it may still match a variable by value below).
+        if (direct && !/^(line-height|font-weight|opacity|font-family)$/.test(prop)) {
+          var own = getComputedStyle(el, pseudo ? '::' + pseudo : null).getPropertyValue(pick).trim();
+          var got = isColorProp(prop) ? normColor(channels ? channels[1] + '(' + own + ')' : own) : /px$/.test(computed) ? normLength(own) : null;
+          if (own && got && got !== computed) d = null;
+        }
+        if (d) return { via: 'declared', chain: chain, exact: direct, declared: piece.trim() };
+      }
+      if (d && /^(inherit|currentcolor)$/i.test(d.value.trim()) && parentOf && prop !== 'background-color') {
+        var cp = prop === 'fill' || prop === 'stroke' || /border-.*-color/.test(prop) ? 'color' : prop;
+        // currentcolor on another property reads this element's (or pseudo's) own color; inherit, and color:
+        // currentcolor, read the parent's (a pseudo-element's parent is its element).
+        var up = /currentcolor/i.test(d.value) && cp !== prop
+          ? tokenFor(el, cp, getComputedStyle(el, pseudo ? '::' + pseudo : null).getPropertyValue(cp), pseudo)
+          : parentOf ? tokenFor(parentOf, cp, getComputedStyle(parentOf).getPropertyValue(cp)) : null;
+        if (up) return up;
+      }
+    } else if (/^(color|font-family|font-size|font-weight|line-height|letter-spacing)$/.test(prop) && parentOf) {
+      // Inherited: the token comes from the nearest ancestor that declares it.
+      return tokenFor(parentOf, prop, computed);
+    }
+    var rt = rootTokens();
+    var hit = isColorProp(prop) ? rt.colors[computed] : rt.lengths[computed];
+    if (hit && hit.length) return { via: 'matched', chain: hit.slice(0, 3), exact: false };
+    return null;
+  }
+
+  // ---- the rendered tree ----
+  var count = 0;
+  function own(el, cs) {
+    var bg = cs.backgroundColor;
+    var hasBg = bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent';
+    var hasBorder = ['Top', 'Right', 'Bottom', 'Left'].some(function (s) { return parseFloat(cs['border' + s + 'Width']) > 0 && cs['border' + s + 'Style'] !== 'none'; });
+    var pad = ['Top', 'Right', 'Bottom', 'Left'].some(function (s) { return parseFloat(cs['padding' + s]) > 0; });
+    var paints = function (v) { return !!v && v !== 'none'; };
+    return hasBg || hasBorder || pad || paints(cs.boxShadow) || paints(cs.backgroundImage);
+  }
+  function directText(el) {
+    var t = '';
+    for (var c = el.firstChild; c; c = c.nextSibling) if (c.nodeType === 3) t += c.nodeValue;
+    return t.replace(/\s+/g, ' ').trim();
+  }
+  function visible(el, cs) {
+    if (cs.display === 'none' || cs.visibility === 'hidden' || cs.visibility === 'collapse') return false;
+    // Closed or hidden content is not a layer: transparent, hidden, inert, clipped away, or a hidden popover.
+    if (parseFloat(cs.opacity) === 0 || el.hidden || el.hasAttribute('inert')) return false;
+    if (/inset\((50|100)%/.test(cs.clipPath || '')) return false;
+    if (el.getAttribute('aria-hidden') === 'true' && (/^(tooltip|dialog|menu|listbox)$/.test(el.getAttribute('role') || '') || /popover|tooltip/i.test(String(el.className && el.className.baseVal !== undefined ? el.className.baseVal : el.className)))) return false;
+    var r = el.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0 && !el.children.length) return false;
+    // Visually hidden text for screen readers (1 px, clipped): not drawn, not a layer.
+    if ((cs.position === 'absolute' || cs.position === 'fixed') && r.width <= 1 && r.height <= 1 && (/hidden|clip/.test(cs.overflow) || cs.clip !== 'auto' && cs.clip !== '' || cs.clipPath !== 'none')) return false;
+    return true;
+  }
+  function round(n) { return Math.round(n * 100) / 100; }
+  // An inline SVG as markup Figma can draw: every shape's computed fill and stroke written on it, currentColor
+  // resolved, the rendered size set.
+  function svgMarkup(el, r) {
+    if (el.outerHTML.length > 12000) return null;
+    var strokes = [];
+    var clone = el.cloneNode(true);
+    var src = [el].concat(Array.prototype.slice.call(el.querySelectorAll('*')));
+    var dst = [clone].concat(Array.prototype.slice.call(clone.querySelectorAll('*')));
+    var color = getComputedStyle(el).color;
+    for (var i = 0; i < src.length && i < dst.length; i++) {
+      var cs = getComputedStyle(src[i]);
+      if (/^(path|circle|rect|ellipse|line|polyline|polygon|use|text)$/.test(src[i].tagName.toLowerCase()) || i === 0) {
+        var f = cs.fill, k = cs.stroke;
+        if (f) dst[i].setAttribute('fill', /url\(/.test(f) ? (src[i].getAttribute('fill') || 'none') : f);
+        if (k && k !== 'none') {
+          dst[i].setAttribute('stroke', k);
+          if (cs.strokeWidth) dst[i].setAttribute('stroke-width', parseFloat(cs.strokeWidth));
+          if (i > 0) strokes.push(k);
+        }
+        else if (i > 0 && k === 'none' && src[i].getAttribute('stroke')) dst[i].setAttribute('stroke', 'none');
+      }
+      dst[i].removeAttribute('class');
+      dst[i].removeAttribute('style');
+    }
+    clone.setAttribute('width', round(r.width));
+    clone.setAttribute('height', round(r.height));
+    if (!clone.getAttribute('xmlns')) clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    return { svg: clone.outerHTML.replace(/currentColor/gi, color), strokes: strokes };
+  }
+  // ::before / ::after drawn as a box (a switch knob, a checkbox's box, a radio's circle): a frame part with its box,
+  // paint, border, radius and position. Text-only or empty pseudo-elements are not parts.
+  function pseudoNode(el, which, hostRect) {
+    var cs = getComputedStyle(el, '::' + which);
+    var content = cs.content;
+    if (!content || content === 'none' || content === 'normal' || cs.display === 'none' || cs.visibility === 'hidden') return null;
+    var w = parseFloat(cs.width), h = parseFloat(cs.height);
+    if (!(w > 0) || !(h > 0) || !/px$/.test(cs.width) || !/px$/.test(cs.height)) return null;
+    var bg = cs.backgroundColor;
+    var paints = (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') || (cs.backgroundImage && cs.backgroundImage !== 'none') || (cs.boxShadow && cs.boxShadow !== 'none');
+    var bordered = ['Top', 'Right', 'Bottom', 'Left'].some(function (s) { return parseFloat(cs['border' + s + 'Width']) > 0 && cs['border' + s + 'Style'] !== 'none'; });
+    if (!paints && !bordered) return null;
+    // Border box: CSS width/height are content-box unless box-sizing says otherwise.
+    if (cs.boxSizing !== 'border-box') {
+      w += (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) + (parseFloat(cs.borderLeftWidth) || 0) + (parseFloat(cs.borderRightWidth) || 0);
+      h += (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) + (parseFloat(cs.borderTopWidth) || 0) + (parseFloat(cs.borderBottomWidth) || 0);
+    }
+    var hcs = getComputedStyle(el);
+    var padX = hostRect.left + (parseFloat(hcs.borderLeftWidth) || 0), padY = hostRect.top + (parseFloat(hcs.borderTopWidth) || 0);
+    var padW = hostRect.width - (parseFloat(hcs.borderLeftWidth) || 0) - (parseFloat(hcs.borderRightWidth) || 0);
+    var padH = hostRect.height - (parseFloat(hcs.borderTopWidth) || 0) - (parseFloat(hcs.borderBottomWidth) || 0);
+    var x, y;
+    if (cs.position === 'absolute' || cs.position === 'fixed') {
+      x = /px$/.test(cs.left) ? padX + parseFloat(cs.left) : /px$/.test(cs.right) ? padX + padW - parseFloat(cs.right) - w : padX;
+      y = /px$/.test(cs.top) ? padY + parseFloat(cs.top) : /px$/.test(cs.bottom) ? padY + padH - parseFloat(cs.bottom) - h : padY;
+    } else {
+      // In flow: before at the start of the content box, after at its end.
+      var cx = padX + (parseFloat(hcs.paddingLeft) || 0), cy = padY + (parseFloat(hcs.paddingTop) || 0);
+      x = which === 'before' ? cx : padX + padW - (parseFloat(hcs.paddingRight) || 0) - w;
+      y = cy;
+    }
+    var m = /matrix\(([^)]+)\)/.exec(cs.transform || '');
+    if (m) { var mv = m[1].split(',').map(parseFloat); x += mv[4] || 0; y += mv[5] || 0; }
+    var style = {};
+    for (var i = 0; i < PROPS.length; i++) style[PROPS[i]] = cs.getPropertyValue(PROPS[i]);
+    style.width = round(w) + 'px';
+    style.height = round(h) + 'px';
+    var tokens = {};
+    for (var j = 0; j < TOKENED.length; j++) {
+      var p = TOKENED[j], v = style[p];
+      if (!v || v === 'none' || v === 'normal' || v === 'auto' || v === 'rgba(0, 0, 0, 0)') continue;
+      if (/width$/.test(p) && /^border-/.test(p) && v === '0px') continue;
+      if (/^border-.*-color$/.test(p) && parseFloat(style[p.replace('color', 'width')]) === 0) continue;
+      var t = tokenFor(el, p, v, which);
+      if (t) tokens[p] = t;
+    }
+    count++;
+    return { tag: '::' + which, kind: 'frame', pseudo: which, sized: { width: true, height: true }, classes: [], box: { x: round(x - originX), y: round(y - originY), width: round(w), height: round(h) }, style: style, tokens: tokens, children: [] };
+  }
+  var originX = 0, originY = 0;
+  function node(el, depth) {
+    count++;
+    var cs = getComputedStyle(el);
+    var r = el.getBoundingClientRect();
+    var tag = el.tagName.toLowerCase();
+    var style = {};
+    for (var i = 0; i < PROPS.length; i++) style[PROPS[i]] = cs.getPropertyValue(PROPS[i]);
+    var tokens = {};
+    for (var j = 0; j < TOKENED.length; j++) {
+      var p = TOKENED[j], v = style[p];
+      if (!v || v === 'none' || v === 'normal' || v === 'auto' || v === 'rgba(0, 0, 0, 0)') continue;
+      if (/width$/.test(p) && /^border-/.test(p) && v === '0px') continue;
+      if (/^border-.*-color$/.test(p) && parseFloat(style[p.replace('color', 'width')]) === 0) continue;
+      var t = tokenFor(el, p, v);
+      if (t) tokens[p] = t;
+    }
+    // A width or height the CSS sets (not auto, a percentage or content-sized): the pull keeps it fixed.
+    var sized = {};
+    ['width', 'height'].forEach(function (k) {
+      var dv = declared(el, k);
+      var v = dv ? dv.value.trim() : (el.style && el.style.getPropertyValue(k)) || '';
+      if (v && !/^(auto|inherit|initial|unset|revert|fit-content|max-content|min-content|stretch|-webkit-fill-available)/.test(v) && !/%/.test(v)) sized[k] = true;
+    });
+    var n = { tag: tag, classes: Array.prototype.slice.call(el.classList || []).slice(0, 8), box: { x: round(r.left - originX), y: round(r.top - originY), width: round(r.width), height: round(r.height) }, style: style, tokens: tokens, children: [] };
+    var role = el.getAttribute('role');
+    if (role) n.role = role;
+    if (sized.width || sized.height) n.sized = sized;
+    var dataState = {};
+    for (var ai = 0; ai < el.attributes.length; ai++) {
+      var an = el.attributes[ai].name;
+      if (/^(data-(state|variant|size|disabled|checked|selected|tone|appearance)|aria-(checked|pressed|disabled|selected|invalid))$/.test(an)) dataState[an] = el.attributes[ai].value;
+    }
+    if (Object.keys(dataState).length) n.attrs = dataState;
+    if (tag === 'svg') {
+      n.kind = r.width <= 48 && r.height <= 48 ? 'icon' : 'vector';
+      var mk = svgMarkup(el, r);
+      if (mk) { n.svg = mk.svg; n.svgStrokes = mk.strokes; }
+      return n;
+    }
+    if (tag === 'img') { n.kind = 'frame'; n.media = true; return n; }
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+      n.kind = 'frame';
+      n.input = { type: el.type || tag, value: el.value || '', placeholder: el.getAttribute('placeholder') || '', checked: !!el.checked };
+    }
+    var hasEl = false;
+    var before = pseudoNode(el, 'before', r), after = pseudoNode(el, 'after', r);
+    if (before) { n.children.push(before); hasEl = true; }
+    for (var c = el.firstChild; c; c = c.nextSibling) {
+      if (count >= MAX_NODES) { n.truncated = true; break; }
+      if (c.nodeType === 3) {
+        var tx = c.nodeValue.replace(/\s+/g, ' ').trim();
+        if (!tx) continue;
+        var range = document.createRange();
+        range.selectNodeContents(c);
+        var tr = range.getBoundingClientRect();
+        n.children.push({ tag: '#text', kind: 'text', text: tx, box: { x: round(tr.left - originX), y: round(tr.top - originY), width: round(tr.width), height: round(tr.height) }, style: {}, tokens: {}, children: [] });
+      } else if (c.nodeType === 1) {
+        var ccs = getComputedStyle(c);
+        if (!visible(c, ccs)) continue;
+        if (depth + 1 > MAX_DEPTH) { hasEl = true; n.truncated = true; continue; }
+        var cn = node(c, depth + 1);
+        // A box with no area and nothing drawn inside (a closed popover's shell) is not a layer.
+        if (cn.kind === 'frame' && !cn.children.length && !(cn.box.width * cn.box.height) && !cn.input && !cn.media) continue;
+        hasEl = true;
+        n.children.push(cn);
+      }
+    }
+    if (after) { n.children.push(after); hasEl = true; }
+    // An element holding only text is the text layer itself.
+    if (!hasEl && n.children.length === 1 && n.children[0].kind === 'text' && !own(el, cs)) {
+      n.kind = 'text';
+      n.text = n.children[0].text;
+      n.children = [];
+    } else if (!n.kind) n.kind = 'frame';
+    return n;
+  }
+
+  var host = document.querySelector(rootSel);
+  if (!host) return { error: 'no element matches ' + rootSel + ' in the page' };
+  // Popups portaled to the body (a menu, a dialog, a toast region): visible elements outside the story root.
+  var portals = [];
+  for (var b = document.body.firstElementChild; b; b = b.nextElementSibling) {
+    if (b === probe || b.contains(host) || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(b.tagName)) continue;
+    if (/sb-(wrapper|errordisplay|nopreview|preparing)|sb-show-main/.test(b.className || '')) continue;
+    var bcs = getComputedStyle(b);
+    if (!visible(b, bcs)) continue;
+    // A portal container can be zero-size around its positioned popup: it counts when anything in it has a box.
+    var br = b.getBoundingClientRect();
+    if (br.width > 0 && br.height > 0) { portals.push(b); continue; }
+    var inner = b.querySelectorAll('*');
+    for (var q = 0; q < inner.length && q < 200; q++) { var ir = inner[q].getBoundingClientRect(); if (ir.width > 0 && ir.height > 0) { portals.push(b); break; } }
+  }
+  var storyRoot = host;
+  // target 'portal': the component is the open popup (the newest portal), not the trigger in the story root.
+  if (arg.target === 'portal') {
+    if (!portals.length) { probe.remove(); return { error: 'no popup is open outside the story root' }; }
+    host = portals[portals.length - 1];
+    portals = portals.slice(0, -1);
+    // A modal portal holds a backdrop beside the popup: the popup is the element with a popup role, when there is one.
+    var roled = host.querySelector('[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [role="tooltip"], [role="tree"], [role="grid"]');
+    if (roled && visible(roled, getComputedStyle(roled))) host = roled;
+  }
+  // Decorators and plain wrappers: go down while an element has one child and draws nothing itself.
+  var el = host, wrappers = 0;
+  // A decorator canvas the size of the viewport (a theme frame with a background and padding) is a wrapper too.
+  // So is a full-width band around one narrower child (a theme provider painting the page background).
+  function canvas(e) {
+    var r = e.getBoundingClientRect();
+    if (r.width >= window.innerWidth * 0.9 && r.height >= window.innerHeight * 0.9) return true;
+    if (r.width < window.innerWidth * 0.9) return false;
+    var c = e.children[0].getBoundingClientRect();
+    if (c.width < r.width * 0.9) return true;
+    // A full-width background with no border, radius or shadow: a theme surface, not a component.
+    var cs = getComputedStyle(e);
+    var noBorder = ['Top', 'Right', 'Bottom', 'Left'].every(function (x) { return !(parseFloat(cs['border' + x + 'Width']) > 0) || cs['border' + x + 'Style'] === 'none'; });
+    return noBorder && !(parseFloat(cs.borderTopLeftRadius) > 0) && (!cs.boxShadow || cs.boxShadow === 'none');
+  }
+  while (arg.unwrap !== false && el.children.length === 1 && !directText(el) && (!own(el, getComputedStyle(el)) || canvas(el)) && el.children[0].tagName.toLowerCase() !== 'svg') {
+    var only = el.children[0];
+    var ocs = getComputedStyle(only);
+    if (!visible(only, ocs)) break;
+    el = only;
+    wrappers++;
+  }
+  // within: a part that only renders inside its parent or a popup (a menu item, an accordion item, a toast) is measured
+  // alone: the first visible match in the component, then in the popups.
+  if (arg.within) {
+    var pool = [el].concat(portals), hit = null;
+    for (var wi = 0; wi < pool.length && !hit; wi++) {
+      var cands = [];
+      try { if (pool[wi].matches(arg.within)) cands.push(pool[wi]); cands = cands.concat(Array.prototype.slice.call(pool[wi].querySelectorAll(arg.within))); } catch (e) { probe.remove(); return { error: 'not a CSS selector: ' + arg.within }; }
+      for (var ci = 0; ci < cands.length && !hit; ci++) if (visible(cands[ci], getComputedStyle(cands[ci])) && cands[ci].getBoundingClientRect().width > 0) hit = cands[ci];
+    }
+    if (!hit) { probe.remove(); return { error: 'no element matches ' + arg.within + ' in the story or its popups' }; }
+    portals = portals.filter(function (p) { return !p.contains(hit); });
+    el = hit;
+  }
+  // mark: tag the component element (for a forced :hover / :focus-visible from the browser driver) and stop.
+  if (arg.mark) {
+    var prev = document.querySelectorAll('[data-bridge-measure-root]');
+    for (var mi = 0; mi < prev.length; mi++) prev[mi].removeAttribute('data-bridge-measure-root');
+    el.setAttribute('data-bridge-measure-root', '');
+    probe.remove();
+    return { marked: true };
+  }
+  scopeEl = el;
+  var hr = el.getBoundingClientRect();
+  // Fill or hug: a block-level root that spans its container's content box (or is declared width: 100%) fills it.
+  var rootFill = false;
+  (function () {
+    var pe = el.parentElement;
+    var ecs = getComputedStyle(el);
+    var inner = window.innerWidth;
+    if (pe) {
+      var pcs = getComputedStyle(pe);
+      inner = pe.getBoundingClientRect().width - (parseFloat(pcs.paddingLeft) || 0) - (parseFloat(pcs.paddingRight) || 0) - (parseFloat(pcs.borderLeftWidth) || 0) - (parseFloat(pcs.borderRightWidth) || 0);
+    }
+    var dw = declared(el, 'width');
+    var full = (dw && /^100%$/.test(dw.value.trim())) || (el.style && el.style.width === '100%');
+    var blockish = /^(block|flex|grid|table|list-item|flow-root)$/.test(ecs.display);
+    rootFill = !!full || (inner > 0 && Math.abs(hr.width - inner) <= 1 && (blockish || hr.width >= window.innerWidth * 0.5));
+  })();
+  originX = hr.left; originY = hr.top;
+  var tree = arg.unwrap !== false && el === storyRoot && !storyRoot.children.length && !directText(storyRoot) ? null : node(el, 0);
+  var portalTrees = [];
+  for (var pi = 0; pi < portals.length && pi < 3; pi++) portalTrees.push(node(portals[pi], 0));
+  probe.remove();
+  var rt = rootVars || { count: 0 };
+  return {
+    root: tree,
+    portals: portalTrees,
+    wrappers: wrappers,
+    nodes: count,
+    rules: rules.length,
+    sheets: { read: sheetsRead, blocked: sheetsBlocked },
+    rootFill: rootFill,
+    rootVariables: rt.count,
+    scopedVariables: rt.scoped || 0,
+    viewport: { width: window.innerWidth, height: window.innerHeight },
+    error: document.body.classList.contains('sb-show-errordisplay') ? (document.querySelector('#error-message') || {}).textContent || 'the story threw' : undefined
+  };
+})`;
+const TOKENS_SCRIPT = String.raw`(function (arg) {
+  arg = arg || {};
+  var rootSel = arg.root || '#storybook-root, #root';
+  var host = document.querySelector(rootSel) || document.body;
+  var at = host.firstElementChild || host;
+  var decls = {};
+  var order = 0;
+  // Every var() use: the color function around it (rgb, hsl...), or a bare use; and the properties that alias it.
+  var COLOR_FN = /^(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)$/i;
+  var useFn = {}, useBare = {}, aliasUses = {};
+  function enclosing(s, pos) {
+    for (var i = pos - 1, depth = 0; i >= 0; i--) {
+      if (s[i] === ')') depth++;
+      else if (s[i] === '(') {
+        if (depth) { depth--; continue; }
+        var j = i;
+        while (j > 0 && /[\w-]/.test(s[j - 1])) j--;
+        var fn = s.slice(j, i).toLowerCase();
+        // A fallback (var(--a, var(--b))): the function around the outer var.
+        if (fn !== 'var') return fn;
+      }
+    }
+    return '';
+  }
+  function scanDecl(d) {
+    var c = d.indexOf(':');
+    if (c < 0) return;
+    var prop = d.slice(0, c).trim(), val = d.slice(c + 1).replace(/!important\s*$/, '').trim();
+    var alias = /^var\(\s*(--[\w-]+)\s*\)$/.exec(val);
+    if (alias && prop.indexOf('--') === 0) { (aliasUses[alias[1]] = aliasUses[alias[1]] || []).push(prop); return; }
+    var re = /var\(\s*(--[\w-]+)/g, m;
+    while ((m = re.exec(val))) {
+      var fn = enclosing(val, m.index);
+      if (COLOR_FN.test(fn)) (useFn[m[1]] = useFn[m[1]] || {})[fn === 'rgba' || fn === 'hsla' ? fn.slice(0, 3) : fn] = 1;
+      else useBare[m[1]] = 1;
+    }
+  }
+  function scanUses(text) {
+    for (var i = 0, depth = 0, start = 0; i <= text.length; i++) {
+      var ch = text[i];
+      if (ch === '(') depth++;
+      else if (ch === ')') depth--;
+      else if (i === text.length || (ch === ';' && depth <= 0)) { scanDecl(text.slice(start, i)); start = i + 1; depth = 0; }
+    }
+  }
+  // The one color function every use of a property wraps it in, through the properties that alias it: '' unused, null
+  // when a use is bare or two functions disagree.
+  function channelFn(name, seen) {
+    if (seen[name]) return '';
+    seen[name] = 1;
+    if (useBare[name]) return null;
+    var fns = {};
+    for (var f in useFn[name] || {}) fns[f] = 1;
+    var al = aliasUses[name] || [];
+    for (var i = 0; i < al.length; i++) {
+      var g = channelFn(al[i], seen);
+      if (g === null) return null;
+      if (g) fns[g] = 1;
+    }
+    var k = Object.keys(fns);
+    return k.length === 1 ? k[0] : k.length ? null : '';
+  }
+  function add(sel, style) {
+    try { scanUses(style.cssText || ''); } catch (e) {}
+    for (var k = 0; k < style.length; k++) {
+      var n = style[k];
+      if (n.indexOf('--') !== 0 || n.indexOf('--_') === 0 || n.indexOf('--sb-') === 0) continue;
+      (decls[n] = decls[n] || []).push({ sel: sel, raw: style.getPropertyValue(n).trim(), order: order++ });
+    }
+  }
+  function walk(list) {
+    for (var i = 0; i < list.length; i++) {
+      var r = list[i];
+      try {
+        if (r.selectorText !== undefined && r.style) {
+          add(r.selectorText, r.style);
+          if (r.cssRules && r.cssRules.length) walk(r.cssRules);
+        } else if (r.media !== undefined && r.cssRules) {
+          if (window.matchMedia(r.media.mediaText || 'all').matches) walk(r.cssRules);
+        } else if (r.cssRules) walk(r.cssRules);
+      } catch (e) {}
+    }
+  }
+  var blocked = 0;
+  for (var s = 0; s < document.styleSheets.length; s++) {
+    try { walk(document.styleSheets[s].cssRules); } catch (e) { blocked++; }
+  }
+  try { for (var a = 0; a < (document.adoptedStyleSheets || []).length; a++) walk(document.adoptedStyleSheets[a].cssRules); } catch (e) {}
+  // Inline styles on the story's ancestors (a provider that sets variables in style="").
+  for (var up = at; up && up.nodeType === 1; up = up.parentElement) if (up.style && up.style.length) add('[style]', up.style);
+  // Inline styles in the story use variables too.
+  var inline = host.querySelectorAll('[style]');
+  for (var q = 0; q < inline.length; q++) try { scanUses(inline[q].style.cssText || ''); } catch (e) {}
+
+  function specificity(sel) {
+    var x = sel.replace(/:where\([^)]*\)/g, '');
+    var ids = (x.match(/#[\w-]+/g) || []).length;
+    var cls = (x.match(/\.[\w-]+|\[[^\]]*\]|:(?!not\b|is\b|has\b|root\b)[\w-]+(\([^)]*\))?/g) || []).length + (x.match(/:root/g) || []).length;
+    var types = (x.replace(/\[[^\]]*\]|\([^)]*\)/g, '').match(/(^|[\s>+~(])[a-zA-Z][\w-]*/g) || []).length;
+    return ids * 10000 + cls * 100 + types;
+  }
+  function matchSpec(el, selText) {
+    var best = -1, parts = selText.split(/,(?![^(]*\))/);
+    for (var i = 0; i < parts.length; i++) {
+      var p = parts[i].trim();
+      if (!p || /::/.test(p)) continue;
+      try { if (el.matches(p)) best = Math.max(best, specificity(p)); } catch (e) {}
+    }
+    return best;
+  }
+  // The declaration that applies at the story: the nearest element up from it with a matching rule, then specificity
+  // and order; inline style wins at its element.
+  function winning(name) {
+    var list = decls[name];
+    for (var el = at; el && el.nodeType === 1; el = el.parentElement) {
+      var best = null, bestRank = null;
+      if (el.style && el.style.getPropertyValue(name)) return { sel: '[style]', raw: el.style.getPropertyValue(name).trim() };
+      for (var i = 0; i < list.length; i++) {
+        if (list[i].sel === '[style]') continue;
+        var sp = matchSpec(el, list[i].sel);
+        if (sp < 0) continue;
+        if (!best || sp > bestRank[0] || (sp === bestRank[0] && list[i].order > bestRank[1])) { best = list[i]; bestRank = [sp, list[i].order]; }
+      }
+      if (best) return best;
+    }
+    return null;
+  }
+
+  var probe = document.createElement('div');
+  probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;width:0;height:0';
+  (at.parentElement || document.body).appendChild(probe);
+  function norm(v) {
+    if (!v) return { type: 'string', value: '' };
+    probe.style.color = '';
+    probe.style.color = v;
+    if (probe.style.color) return { type: 'color', value: getComputedStyle(probe).color };
+    if (/^-?[\d.]+$/.test(v)) return { type: 'number', value: Number(v) };
+    probe.style.width = '';
+    probe.style.width = v;
+    if (probe.style.width && !/auto|%/.test(v)) {
+      var w = getComputedStyle(probe).width;
+      if (/px$/.test(w)) return { type: 'length', value: Math.round(parseFloat(w) * 100) / 100 };
+    }
+    return { type: 'string', value: v };
+  }
+  var cs = getComputedStyle(at), rootCs = getComputedStyle(document.documentElement);
+  var out = [];
+  var ROOTISH = /^(:root|html|:host|body|\*)(\s*,\s*(:root|html|:host|body|\*))*$/;
+  for (var name in decls) {
+    var w = winning(name);
+    var resolved = cs.getPropertyValue(name).trim() || rootCs.getPropertyValue(name).trim();
+    var r = norm(resolved);
+    var fn = r.type === 'string' && resolved ? channelFn(name, {}) : '';
+    if (fn) {
+      probe.style.color = '';
+      probe.style.color = fn + '(' + resolved + ')';
+      if (probe.style.color) r = { type: 'color', value: getComputedStyle(probe).color };
+    }
+    var scopes = [];
+    for (var j = 0; j < decls[name].length && scopes.length < 6; j++) {
+      var sel = decls[name][j].sel;
+      if (!ROOTISH.test(sel.trim()) && scopes.indexOf(sel) < 0) scopes.push(sel.length > 120 ? sel.slice(0, 120) : sel);
+    }
+    out.push({ name: name, raw: w ? w.raw : decls[name][0].raw, applies: !!w, type: r.type, value: r.value, scopes: scopes });
+  }
+  probe.remove();
+  return { properties: out, blocked: blocked };
+})`;
+const GLOBALS_SCRIPT = String.raw`(function () {
+  var p = window.__STORYBOOK_PREVIEW__;
+  if (!p) return null;
+  var store = p.storyStoreValue || {};
+  var ann = store.projectAnnotations || p.projectAnnotations || {};
+  var types = ann.globalTypes || (store.globals && store.globals.globalTypes) || {};
+  var current = (store.userGlobals && store.userGlobals.get && store.userGlobals.get()) || (store.globals && store.globals.get && store.globals.get()) || ann.initialGlobals || ann.globals || {};
+  var out = [];
+  for (var k in types) {
+    var t = types[k] || {};
+    var items = (t.toolbar && t.toolbar.items) || t.options || [];
+    var values = [];
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i];
+      var v = typeof it === 'string' ? it : it && (it.value !== undefined ? it.value : it.title);
+      if (typeof v === 'string' && v && values.indexOf(v) < 0) values.push(v);
+    }
+    if (values.length < 2 || values.length > 12) continue;
+    var def = current[k] !== undefined ? String(current[k]) : (t.defaultValue !== undefined ? String(t.defaultValue) : values[0]);
+    out.push({ global: k, values: values, default: def });
+  }
+  return out;
+})()`;
+async function markMeasuredRoot(page, o = {}) {
+  const arg = { root: o.root ?? "#storybook-root, #root", unwrap: o.unwrap, within: o.within, target: o.target ?? (o.open && !o.within ? "portal" : void 0), mark: true };
+  const r = await page.evaluate(`(${MEASURE_SCRIPT})(${JSON.stringify(arg)})`).catch(() => null);
+  return !!r?.marked;
+}
+const WAIT_SCRIPT = (rootSel, timeout, self = false) => `(async () => {
+  const t0 = performance.now();
+  const frame = () => new Promise((r) => requestAnimationFrame(() => r(null)));
+  const host = () => document.querySelector(${JSON.stringify(rootSel)});
+  let state = 'timeout';
+  while (performance.now() - t0 < ${timeout}) {
+    if (document.body && document.body.classList.contains('sb-show-errordisplay')) { state = 'error'; break; }
+    const h = host();
+    if (h && (${self} || h.children.length || (h.textContent || '').trim())) { state = 'rendered'; break; }
+    await new Promise((r) => setTimeout(r, 50));
+  }
+  try { await Promise.race([document.fonts.ready, new Promise((r) => setTimeout(r, 3000))]); } catch (e) {}
+  // Settle briefly: the markup stops changing for a few frames, or 1.5 s passes (a spinner never stops).
+  let last = '', same = 0;
+  const settle0 = performance.now();
+  while (state === 'rendered' && same < 3 && performance.now() - settle0 < 1500) {
+    await frame();
+    await new Promise((r) => setTimeout(r, 60));
+    const s = document.body.innerHTML.length + ':' + document.querySelectorAll('*').length;
+    same = s === last ? same + 1 : 0;
+    last = s;
+  }
+  // Animations: finished ones jump to their end, endless ones (a loading spinner) are paused where they are.
+  try { (document.getAnimations ? document.getAnimations() : []).forEach((a) => { try { a.finish(); } catch (e) { a.pause(); } }); } catch (e) {}
+  return state;
+})()`;
+const OPEN_SCRIPT = (rootSel) => `(async () => {
+  const root = document.querySelector(${JSON.stringify(rootSel)});
+  if (!root) return 'none';
+  const shown = () => Array.prototype.filter.call(document.body.children, (b) => {
+    if (b.contains(root) || /^(SCRIPT|STYLE|LINK|TEMPLATE)$/.test(b.tagName) || /sb-/.test(String(b.className || ''))) return false;
+    const cs = getComputedStyle(b), r = b.getBoundingClientRect();
+    if (cs.display === 'none' || cs.visibility === 'hidden') return false;
+    return r.width > 0 && r.height > 0 || Array.prototype.some.call(b.querySelectorAll('*'), (c) => { const x = c.getBoundingClientRect(); return x.width > 0 && x.height > 0; });
+  }).length;
+  const settle = async () => {
+    for (let i = 0; i < 20; i++) {
+      await new Promise((r) => setTimeout(r, 50));
+      const running = (document.getAnimations ? document.getAnimations() : []).filter((a) => a.playState === 'running');
+      if (!running.length) break;
+      await Promise.race([Promise.all(running.map((a) => a.finished.catch(() => null))), new Promise((r) => setTimeout(r, 1500))]);
+    }
+  };
+  if (shown()) { await settle(); return 'already'; }
+  const trigger = root.querySelector('[aria-haspopup]:not([aria-expanded="true"]), [aria-expanded="false"]') || root.querySelector('button, [role="button"], [role="combobox"], a[href], [tabindex="0"]');
+  if (!trigger) return 'none';
+  const wait = async (ms) => { const t0 = performance.now(); while (performance.now() - t0 < ms) { if (shown()) { await settle(); return true; } await new Promise((r) => setTimeout(r, 50)); } return false; };
+  const r = trigger.getBoundingClientRect();
+  const at = { bubbles: true, cancelable: true, composed: true, clientX: r.left + r.width / 2, clientY: r.top + r.height / 2, button: 0, pointerId: 1, pointerType: 'mouse', isPrimary: true };
+  const fire = (type, Ctor) => trigger.dispatchEvent(new Ctor(type, type === 'pointerdown' || type === 'mousedown' ? { ...at, buttons: 1 } : at));
+  fire('pointerdown', PointerEvent); fire('mousedown', MouseEvent); fire('pointerup', PointerEvent); fire('mouseup', MouseEvent); fire('click', MouseEvent);
+  if (await wait(800)) return 'click';
+  fire('pointerover', PointerEvent); fire('pointerenter', PointerEvent); fire('mouseover', MouseEvent); fire('mouseenter', MouseEvent); fire('pointermove', PointerEvent); fire('mousemove', MouseEvent);
+  if (await wait(1200)) return 'hover';
+  try { trigger.focus(); } catch (e) {}
+  if (await wait(800)) return 'focus';
+  return 'none';
+})()`;
+const PROPS_SCRIPT = (id) => `(async () => {
+  const p = window.__STORYBOOK_PREVIEW__;
+  if (!p) return null;
+  const want = ${JSON.stringify(id ?? null)};
+  let story = p.currentRender && p.currentRender.story;
+  if (want && (!story || story.id !== want)) { try { story = await p.storyStoreValue.loadStory({ storyId: want }); } catch (e) { story = story || null; } }
+  if (!story) return null;
+  const plain = (v) => ['string', 'number', 'boolean'].includes(typeof v);
+  const clean = (o) => { const out = {}; for (const k in o || {}) if (plain(o[k])) out[k] = o[k]; return out; };
+  let live;
+  try { live = p.storyStoreValue && p.storyStoreValue.args && p.storyStoreValue.args.get(story.id); } catch (e) {}
+  const args = clean(live || story.initialArgs);
+  const lit = (v) => {
+    if (v === undefined || v === null) return undefined;
+    if (typeof v !== 'string') return plain(v) ? v : undefined;
+    const t = v.trim();
+    if (t === 'true' || t === 'false') return t === 'true';
+    if (/^-?\\d+(\\.\\d+)?$/.test(t)) return Number(t);
+    const q = /^(['"\`])(.*)\\1$/.exec(t);
+    return q ? q[2] : undefined;
+  };
+  const argTypes = {}, defaults = {};
+  for (const name in story.argTypes || {}) {
+    const a = story.argTypes[name] || {};
+    if (a.table && a.table.disable) continue;
+    const t = a.type || {};
+    const tn = typeof t === 'string' ? t : t.name;
+    let options = Array.isArray(a.options) ? a.options : tn === 'enum' && Array.isArray(t.value) ? t.value : undefined;
+    if (!options && tn === 'union' && Array.isArray(t.value) && t.value.every((x) => x && x.name === 'literal')) options = t.value.map((x) => x.value);
+    if (options) options = options.filter(plain).map((x) => String(x).replace(/^(['"])(.*)\\1$/, '$2'));
+    const control = a.control && typeof a.control === 'object' ? a.control.type : typeof a.control === 'string' ? a.control : undefined;
+    const kind = options && options.length ? 'enum' : tn === 'boolean' || control === 'boolean' ? 'boolean' : tn === 'string' || control === 'text' ? 'text' : tn === 'number' || control === 'number' || control === 'range' ? 'number' : 'other';
+    const d = lit(a.defaultValue !== undefined ? a.defaultValue : a.table && a.table.defaultValue && a.table.defaultValue.summary);
+    argTypes[name] = { kind };
+    if (options && options.length) argTypes[name].options = options;
+    if (d !== undefined) { argTypes[name].default = d; defaults[name] = d; }
+    if (control) argTypes[name].control = control;
+  }
+  const c = story.component;
+  const component = c && (c.displayName || c.name) || undefined;
+  return { props: Object.assign({}, defaults, args), args, argTypes, component };
+})()`;
+async function resolveTokenValues(page, vars) {
+  const expr = `(() => {
+    const vars = ${JSON.stringify(vars)};
+    const el = document.querySelector('[data-bridge-measure-root]') || document.querySelector('#storybook-root > *, #root > *') || document.documentElement;
+    const cs = getComputedStyle(el);
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none';
+    (el.parentElement || document.body).appendChild(probe);
+    const out = {};
+    for (const path in vars) {
+      const raw = cs.getPropertyValue(vars[path]).trim();
+      if (!raw) continue;
+      probe.style.color = ''; probe.style.width = '';
+      probe.style.color = raw;
+      if (probe.style.color) { out[path] = getComputedStyle(probe).color; continue; }
+      probe.style.width = raw;
+      out[path] = probe.style.width ? getComputedStyle(probe).width : raw;
+    }
+    probe.remove();
+    return out;
+  })()`;
+  return await page.evaluate(expr) ?? {};
+}
+const STATE_TARGETS = "[data-bridge-measure-root], [data-bridge-measure-root] *";
+const PSEUDO_CLASSES = { hover: ["hover"], "focus-visible": ["focus-visible", "focus"], active: ["active", "hover"] };
+const MODE_GLOBAL = /theme|scheme|mode|brand|density|appearance/i;
+const ALIAS = /^var\(\s*(--[\w-]+)\s*(?:,[^)]*)?\)$/;
+async function harvestTokens(page, storybook, story, o = {}) {
+  const timeout = o.timeout ?? 15e3;
+  const read = async (globals) => {
+    const iframe = { ...o.iframe ?? {}, globals: { ...o.iframe?.globals ?? {}, ...globals } };
+    await page.goto(storybookIframeUrl(storybook, story, iframe), { waitUntil: "domcontentloaded", timeout: timeout + 15e3 });
+    await page.evaluate(WAIT_SCRIPT("#storybook-root, #root", timeout));
+    const r = await page.evaluate(`(${TOKENS_SCRIPT})({})`);
+    return withSrgbColors(r?.properties ?? []);
+  };
+  const base = await read({});
+  let moved = false;
+  const readWithAttribute = async (attr, value) => {
+    if (moved) {
+      await read({});
+      moved = false;
+    }
+    await page.evaluate(`(async () => { const els = document.querySelectorAll('[${attr}]'); (els.length ? Array.from(els) : [document.documentElement]).forEach((e) => e.setAttribute('${attr}', ${JSON.stringify(value)})); await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); })()`);
+    const r = await page.evaluate(`(${TOKENS_SCRIPT})({})`);
+    return withSrgbColors(r?.properties ?? []);
+  };
+  const found = o.modes === false ? [] : await page.evaluate(GLOBALS_SCRIPT).catch(() => null) ?? [];
+  const modes = found.filter((m) => MODE_GLOBAL.test(m.global)).map((m) => ({ ...m, values: [m.default, ...m.values.filter((v) => v !== m.default)].filter((v) => !/^(all|side-?by-?side|stacked|both|none)$/i.test(v)) })).filter((m) => m.values.length >= 2);
+  if (o.modes !== false && !modes.some((m) => /theme|scheme|mode/i.test(m.global))) {
+    const attrs = /* @__PURE__ */ new Map();
+    for (const p of base)
+      for (const sel of p.scopes)
+        for (const part of sel.split(","))
+          for (const m of part.trim().matchAll(/^(?::root|html|body)?\[([\w-]+)=["']?([\w-]+)["']?\]$/g)) {
+            const vals = attrs.get(m[1]) ?? /* @__PURE__ */ new Map();
+            vals.set(m[2], (vals.get(m[2]) ?? 0) + 1);
+            attrs.set(m[1], vals);
+          }
+    for (const [attr, vals] of attrs) {
+      const values = [...vals.entries()].filter(([, n]) => n >= 10).map(([v]) => v);
+      if (values.length < 2 || values.length > 12 || !MODE_GLOBAL.test(attr)) continue;
+      const current = await page.evaluate(`(() => { const e = document.querySelector('[${attr}]'); return e && e.getAttribute('${attr}'); })()`).catch(() => null);
+      const def = current ?? values[0];
+      modes.push({ global: attr, attribute: true, values: [def, ...values.filter((v) => v !== def)], default: def });
+    }
+  }
+  const prefix = sharedTokenPrefix(base.map((p) => p.name));
+  const props = base.map((p) => {
+    const alias = ALIAS.exec(p.raw)?.[1];
+    const kind = alias ? "alias" : /var\(/.test(p.raw) ? "expression" : "literal";
+    return {
+      name: p.name,
+      path: tokenVariablePath(p.name, prefix),
+      tier: alias ? "semantic" : "primitive",
+      kind,
+      type: p.type,
+      raw: p.raw,
+      ...alias ? { aliasOf: alias } : {},
+      value: p.value,
+      ...p.scopes.length ? { scopes: p.scopes } : {}
+    };
+  });
+  const byName = new Map(props.map((p) => [p.name, p]));
+  for (const m of modes) {
+    for (const value of m.values) {
+      const key = `${m.global}:${value}`;
+      const rows = value === m.default ? base : m.attribute ? await readWithAttribute(m.global, value) : (moved = true, await read({ [m.global]: value }));
+      for (const r of rows) {
+        const p = byName.get(r.name);
+        if (!p) continue;
+        (p.values ??= {})[key] = r.value;
+        const alias = ALIAS.exec(r.raw)?.[1];
+        if (p.tier === "semantic" && alias && alias !== p.aliasOf) (p.aliasOfByMode ??= {})[key] = alias;
+      }
+    }
+  }
+  for (const p of props) {
+    for (const m of modes) {
+      const keys = m.values.map((v) => `${m.global}:${v}`);
+      if (new Set(keys.map((k) => JSON.stringify(p.values?.[k]))).size <= 1) for (const k of keys) delete p.values?.[k];
+    }
+    if (p.values && !Object.keys(p.values).length) delete p.values;
+  }
+  const live = modes.filter((m) => props.some((p) => p.values && `${m.global}:${m.default}` in p.values));
+  if (live.length !== modes.length) {
+    const dead = new Set(modes.filter((m) => !live.includes(m)).map((m) => m.global));
+    for (const p of props) {
+      for (const k of Object.keys(p.values ?? {})) if (dead.has(k.split(":")[0])) delete p.values[k];
+      for (const k of Object.keys(p.aliasOfByMode ?? {})) if (dead.has(k.split(":")[0])) delete p.aliasOfByMode[k];
+      if (p.values && !Object.keys(p.values).length) delete p.values;
+      if (p.aliasOfByMode && !Object.keys(p.aliasOfByMode).length) delete p.aliasOfByMode;
+    }
+  }
+  const keyOf = (p, v) => `${p.type}:${v}`;
+  const primitiveFor = /* @__PURE__ */ new Map();
+  for (const p of [...props].sort((a, b) => a.name.length - b.name.length || a.name.localeCompare(b.name)))
+    if (p.kind === "literal" && !p.values && (p.type === "color" || p.type === "length") && !primitiveFor.has(keyOf(p, p.value))) primitiveFor.set(keyOf(p, p.value), p.name);
+  let inferred = 0;
+  for (const p of props) {
+    if (p.kind !== "literal" || !p.values) continue;
+    const def = primitiveFor.get(keyOf(p, p.value));
+    const byMode = Object.entries(p.values).map(([k, v]) => [k, primitiveFor.get(keyOf(p, v))]);
+    if (!def || def === p.name || byMode.some(([, n]) => !n)) continue;
+    p.tier = "semantic";
+    p.kind = "alias";
+    p.aliasOf = def;
+    p.inferred = true;
+    const changes = byMode.filter(([, n]) => n !== def);
+    if (changes.length) p.aliasOfByMode = Object.fromEntries(byMode);
+    inferred++;
+  }
+  return {
+    story,
+    ...prefix ? { prefix } : {},
+    modes: live,
+    properties: props,
+    counts: {
+      properties: props.length,
+      primitives: props.filter((p) => p.tier === "primitive").length,
+      semantic: props.filter((p) => p.tier === "semantic").length,
+      used: 0,
+      scoped: props.filter((p) => p.scopes?.length).length,
+      inferred
+    }
+  };
+}
+const APPLY_ARGS_SCRIPT = (id, args, timeout) => `(async () => {
+  const want = ${JSON.stringify(args)};
+  const t0 = performance.now();
+  let p = window.__STORYBOOK_PREVIEW__;
+  while ((!p || !p.currentRender || !p.storyStoreValue) && performance.now() - t0 < ${timeout}) { await new Promise((r) => setTimeout(r, 50)); p = window.__STORYBOOK_PREVIEW__; }
+  if (!p || !p.storyStoreValue) return 'failed';
+  const id = ${JSON.stringify(id)};
+  const held = () => { let a = {}; try { a = p.storyStoreValue.args.get(id) || {}; } catch (e) {} return Object.keys(want).every((k) => a[k] === want[k]); };
+  // Let the first render finish (an update sent during it is lost), then check again.
+  const root = () => document.querySelector('#storybook-root, #root');
+  while (performance.now() - t0 < ${timeout} && !(root() && (root().children.length || (root().textContent || '').trim()))) await new Promise((r) => setTimeout(r, 50));
+  await new Promise((r) => setTimeout(r, 100));
+  if (held()) return 'url';
+  const ch = window.__STORYBOOK_ADDONS_CHANNEL__;
+  if (!ch) return 'failed';
+  const done = await new Promise((resolve) => {
+    const t = setTimeout(() => finish(false), 5000);
+    const ok = () => finish(true);
+    const bad = () => finish(false);
+    function finish(v) { clearTimeout(t); ch.off('storyRendered', ok); ch.off('storyErrored', bad); ch.off('storyThrewException', bad); resolve(v); }
+    ch.on('storyRendered', ok); ch.on('storyErrored', bad); ch.on('storyThrewException', bad);
+    ch.emit('updateStoryArgs', { storyId: id, updatedArgs: want });
+  });
+  return done && held() ? 'channel' : 'failed';
+})()`;
+async function measureStory(page, storybook, id, o = {}) {
+  const iframe = { ...o.iframe ?? {} };
+  if (o.args && Object.keys(o.args).length) iframe.args = { ...iframe.args ?? {}, ...Object.fromEntries(Object.entries(o.args).map(([k, v]) => [k, typeof v === "boolean" ? `!${v}` : String(v)])) };
+  const url = storybookIframeUrl(storybook, id, iframe);
+  const t0 = Date.now();
+  await page.goto(url, { waitUntil: "domcontentloaded", timeout: (o.timeout ?? 15e3) + 15e3 });
+  if (o.args && Object.keys(o.args).length) await page.evaluate(APPLY_ARGS_SCRIPT(id, o.args, o.timeout ?? 15e3)).catch(() => "failed");
+  const m = await measureRendered(page, o);
+  let props = null;
+  if (o.props !== false && m.root) props = await page.evaluate(PROPS_SCRIPT(id)).catch(() => null);
+  return { id, url, ...m, ...props && typeof props === "object" ? { props } : {}, ms: Date.now() - t0 };
+}
+async function measureRendered(page, o = {}) {
+  const t0 = Date.now();
+  const root = o.root ?? "#storybook-root, #root";
+  const timeout = o.timeout ?? 15e3;
+  const rendered = await page.evaluate(WAIT_SCRIPT(root, timeout, o.unwrap === false));
+  let opened;
+  if (o.open && rendered === "rendered") opened = await page.evaluate(OPEN_SCRIPT(root));
+  const target = o.target ?? (o.open && !o.within ? "portal" : void 0);
+  const arg = { root, maxNodes: o.maxNodes, maxDepth: o.maxDepth, unwrap: o.unwrap, target, within: o.within };
+  let state;
+  if (o.state && page.forcePseudo && rendered === "rendered") {
+    const marked = await page.evaluate(`(${MEASURE_SCRIPT})(${JSON.stringify({ ...arg, mark: true })})`);
+    if (marked?.marked && await page.forcePseudo(STATE_TARGETS, PSEUDO_CLASSES[o.state]).catch(() => false)) {
+      state = o.state;
+      await page.evaluate("new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(r, 120))))");
+    }
+  }
+  const r = await page.evaluate(`(${MEASURE_SCRIPT})(${JSON.stringify(arg)})`);
+  let base = "root" in r ? r : { root: null, portals: [], wrappers: 0, nodes: 0, rules: 0, sheets: { read: 0, blocked: 0 }, rootVariables: 0, viewport: { width: 0, height: 0 }, error: r.error };
+  const fillWidth = o.fillWidth ?? 400;
+  if (fillWidth && base.root && base.rootFill && base.root.box.width > fillWidth + 1 && (state || await markMeasuredRoot(page, { ...o, root }))) {
+    await page.evaluate(`(async () => { const e = document.querySelector('[data-bridge-measure-root]'); if (e) { e.style.width = '${fillWidth}px'; e.style.maxWidth = 'none'; e.style.minWidth = '0'; } await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); })()`);
+    const again = await page.evaluate(`(${MEASURE_SCRIPT})(${JSON.stringify(arg)})`);
+    if ("root" in again && again.root) base = { ...again, rootFill: true, fillWidth };
+  }
+  if (opened) base.opened = opened;
+  if (opened === "none" && !base.root) base.error = "the popup did not open: no trigger in the story opened it";
+  if (rendered === "timeout" && !base.error && !base.root) base.error = `the story did not render within ${timeout} ms`;
+  if (rendered === "error" && !base.error) base.error = "the story threw";
+  let shot;
+  if (o.shot && page.screenshot && base.root) {
+    if (state || await markMeasuredRoot(page, { ...o, root })) {
+      const size = await page.screenshot("[data-bridge-measure-root]", o.shot).catch(() => null);
+      if (size) shot = { file: o.shot, ...size };
+    }
+  }
+  if (state) await page.forcePseudo?.(STATE_TARGETS, []).catch(() => false);
+  return { ...withSrgbColors(base), ...state ? { state } : {}, ...shot ? { shot } : {}, ms: Date.now() - t0 };
+}
+function pickStoriesToMeasure(index, o = {}) {
+  if (o.ids?.length) {
+    const byId = new Map(index.entries.map((e) => [e.id, e]));
+    return o.ids.map((id) => {
+      const e = byId.get(id);
+      return { id, title: e?.title ?? "", name: e?.name ?? id };
+    });
+  }
+  const want = (o.only ?? []).map((x) => x.trim().toLowerCase()).filter(Boolean);
+  const per = o.perComponent ?? 3;
+  return index.components.filter((c) => c.stories.length && (!want.length || want.includes(c.name.toLowerCase()) || want.includes(c.title.toLowerCase()))).flatMap((c) => c.stories.slice(0, per).map((e) => ({ id: e.id, title: c.title, name: e.name })));
+}
+const SEMANTIC_CONTAINER = /^(fieldset|ul|ol|nav|form|menu|dl|select|header|footer|button|a|label|input|textarea)$/;
+function plainLayout(n, anyRole = false) {
+  if (n.kind !== "frame" || n.input || n.media || !anyRole && (n.role || SEMANTIC_CONTAINER.test(n.tag))) return false;
+  const st = n.style;
+  const painted = !transparent(st["background-color"]) || st["background-image"] && st["background-image"] !== "none" || st["box-shadow"] && st["box-shadow"] !== "none";
+  const bordered = ["top", "right", "bottom", "left"].some((x) => st[`border-${x}-style`] !== "none" && (px(st[`border-${x}-width`]) ?? 0) > 0);
+  return !painted && !bordered && !((px(st["border-top-left-radius"]) ?? 0) > 0);
+}
+function sameComponent(a, b) {
+  if (a.tag !== b.tag || a.kind !== b.kind || a.role !== b.role) return false;
+  const ca = new Set((a.classes ?? []).map(localClassName));
+  const cb = (b.classes ?? []).map(localClassName);
+  if (!ca.size && !cb.length) return true;
+  return cb.some((c) => ca.has(c));
+}
+function rebase(n, dx = n.box.x, dy = n.box.y) {
+  return { ...n, box: { ...n.box, x: Math.round((n.box.x - dx) * 100) / 100, y: Math.round((n.box.y - dy) * 100) / 100 }, children: n.children.map((c) => rebase(c, dx, dy)) };
+}
+function splitInstances(root) {
+  if (!root || !plainLayout(root)) return [];
+  const found = [];
+  const collect = (n, depth) => {
+    for (const c of n.children) {
+      if (c.kind === "text" && (c.text ?? "").length <= 24) continue;
+      if (c.kind === "text") {
+        found.push(c);
+        continue;
+      }
+      if (plainLayout(c, true) && depth < 8 && c.children.length) collect(c, depth + 1);
+      else if (!plainLayout(c, true)) found.push(c);
+    }
+  };
+  collect(root, 0);
+  if (found.length < 2) return [];
+  let best = [];
+  for (const k of found) {
+    if (best.includes(k)) continue;
+    const run = found.filter((c) => sameComponent(k, c));
+    if (run.length > best.length) best = run;
+  }
+  if (best.length < 2 || best.length * 2 <= found.length) return [];
+  return best.map((n) => ({ ...rebase(n), at: { x: n.box.x - root.box.x, y: n.box.y - root.box.y } }));
+}
+function localClassName(cls) {
+  const hashed = (h) => !!h && /[0-9A-Z]/.test(h);
+  const m = /^_([A-Za-z][\w-]*?)_[A-Za-z0-9]{5,8}_\d+$/.exec(cls) ?? [/^[A-Za-z][\w-]*?(?:-module)?_{1,2}([A-Za-z][\w-]*?)__([\w-]{5,8})$/.exec(cls)].find((x) => x && hashed(x[2])) ?? /^(?:[a-z]+-)?[A-Z][A-Za-z0-9]*-([A-Za-z]\w*)-[A-Za-z0-9_]{5}$/.exec(cls) ?? [/^_?([A-Za-z][\w-]*?)_([A-Za-z0-9-]{5,8})$/.exec(cls)].find((x) => x && hashed(x[2]));
+  return m ? m[1] : cls;
+}
+const UTILITY_KEYWORDS = new Set(
+  "flex inline-flex grid inline-grid block inline-block inline hidden contents table relative absolute fixed sticky static truncate uppercase lowercase capitalize normal-case italic not-italic underline overline line-through no-underline grow shrink border rounded shadow outline ring transition transform visible invisible collapse isolate container antialiased subpixel-antialiased group peer sr-only not-sr-only resize filter blur".split(" ")
+);
+const UTILITY_SHAPE = /^(?:p|px|py|pt|pr|pb|pl|ps|pe|m|mx|my|mt|mr|mb|ml|ms|me|w|h|min-w|min-h|max-w|max-h|size|gap|gap-x|gap-y|space-x|space-y|text|bg|from|via|to|border|border-[trblxyse]|rounded|rounded-[trblse]{1,2}|font|leading|tracking|z|top|right|bottom|left|start|end|inset|inset-x|inset-y|opacity|shadow|ring|ring-offset|outline|outline-offset|items|justify|justify-items|justify-self|content|self|place-items|place-content|place-self|flex|basis|grow|shrink|order|col|col-span|col-start|col-end|row|row-span|row-start|row-end|grid-cols|grid-rows|grid-flow|auto-cols|auto-rows|overflow|overflow-x|overflow-y|cursor|select|pointer-events|transition|duration|ease|delay|animate|scale|scale-x|scale-y|rotate|translate-x|translate-y|skew-x|skew-y|origin|fill|stroke|object|aspect|line-clamp|whitespace|break|decoration|underline-offset|list|align|appearance|backdrop|brightness|contrast|drop-shadow|grayscale|invert|saturate|sepia|hue-rotate|tabular|caret|accent|scroll|snap|touch|will-change|columns|divide|divide-x|divide-y|indent|box|float|clear|mix-blend|bg-blend)-[\w.-]+$/;
+function isUtilityClass(cls) {
+  if (/[:[\]/!]/.test(cls) || /^-[a-z]/.test(cls) || /\.\d/.test(cls)) return true;
+  if (/^css-[a-z0-9]{5,8}$/.test(cls) || /^(?:emotion|sc|jsx|svelte|astro)-[A-Za-z0-9_-]{4,}$/.test(cls) && /\d|[A-Z]/.test(cls)) return true;
+  return UTILITY_KEYWORDS.has(cls) || UTILITY_SHAPE.test(cls);
+}
+const defaultTokenOf = (v) => /^--_/.test(v) ? void 0 : v.replace(/^--/, "").split("-").filter(Boolean).join(".");
+const px = (v) => {
+  if (!v) return void 0;
+  const m = /^(-?[\d.]+)px$/.exec(v.trim());
+  return m ? Math.round(Number(m[1]) * 100) / 100 : void 0;
+};
+const transparent = (v) => !v || v === "transparent" || /^rgba\([^)]*,\s*0\)$/.test(v);
+function arrangement(children) {
+  const kids = children.filter((c) => c.width > 0 || c.height > 0);
+  if (kids.length < 2) return void 0;
+  const stacked = kids.every((c, i) => i === 0 || c.y >= kids[i - 1].y + kids[i - 1].height - 1);
+  const row = kids.every((c, i) => i === 0 || c.x >= kids[i - 1].x + kids[i - 1].width - 1);
+  return stacked && !row ? "stacked" : row && !stacked ? "row" : void 0;
+}
+function alignOf(style) {
+  const a = style["align-items"] ?? "normal";
+  return /center/.test(a) ? "CENTER" : /end/.test(a) ? "MAX" : /^(flex-)?start|baseline/.test(a) ? "MIN" : "STRETCH";
+}
+function measuredLayout(style, children = []) {
+  const d = style.display ?? "";
+  const arranged = arrangement(children);
+  if (!/flex|grid|block|inline-block|list-item/.test(d)) return arranged ? { direction: arranged === "stacked" ? "VERTICAL" : "HORIZONTAL", primary: "MIN", counter: "MIN" } : void 0;
+  const flex = /flex/.test(d);
+  const grid = /grid/.test(d);
+  const dir = style["flex-direction"] ?? "row";
+  let direction = flex && dir.startsWith("row") ? "HORIZONTAL" : "VERTICAL";
+  if (grid) {
+    const tracks = (v) => v && v !== "none" ? v.trim().split(/\s+(?![^(]*\))/).length : 0;
+    const cols = tracks(style["grid-template-columns"]);
+    const rows = tracks(style["grid-template-rows"]);
+    const sideBySide = children.length >= 2 && children.every((c) => Math.abs(c.y + c.height / 2 - (children[0].y + children[0].height / 2)) <= Math.max(2, children[0].height / 2)) && new Set(children.map((c) => Math.round(c.x))).size === children.length;
+    direction = /column/.test(style["grid-auto-flow"] ?? "") || cols >= 2 && rows <= 1 || cols < 2 && rows < 2 && sideBySide ? "HORIZONTAL" : "VERTICAL";
+    if (cols >= 2 && rows >= 2) direction = sideBySide ? "HORIZONTAL" : "VERTICAL";
+    if (cols >= 2 && rows >= 2 && !sideBySide && !/column/.test(style["grid-auto-flow"] ?? "")) return { direction: "HORIZONTAL", primary: "MIN", counter: alignOf(style), wrap: true };
+  }
+  const j = style["justify-content"] ?? "normal";
+  const primary = !flex && !grid ? "MIN" : /space-between/.test(j) ? "SPACE_BETWEEN" : /center/.test(j) ? "CENTER" : /end|right/.test(j) ? "MAX" : "MIN";
+  const counter = alignOf(style);
+  if (arranged === "stacked" && direction === "HORIZONTAL" && !(flex && style["flex-wrap"] === "wrap")) direction = "VERTICAL";
+  else if (arranged === "row" && direction === "VERTICAL" && !flex) direction = "HORIZONTAL";
+  const out = { direction, primary, counter };
+  if (flex && /reverse/.test(dir)) out.reverse = true;
+  if (flex && direction === "HORIZONTAL" && style["flex-wrap"] === "wrap") out.wrap = true;
+  return out;
+}
+const FIELD_MAP = [
+  ["fill", "background-color"],
+  ["cornerRadius", "border-top-left-radius"],
+  ["paddingTop", "padding-top"],
+  ["paddingRight", "padding-right"],
+  ["paddingBottom", "padding-bottom"],
+  ["paddingLeft", "padding-left"],
+  ["minWidth", "min-width"],
+  ["minHeight", "min-height"],
+  ["opacity", "opacity"]
+];
+const TEXT_MAP = [
+  ["textFill", "color"],
+  ["fontFamily", "font-family"],
+  ["fontSize", "font-size"],
+  ["fontWeight", "font-weight"],
+  ["lineHeight", "line-height"],
+  ["letterSpacing", "letter-spacing"]
+];
+function measuredToSpec(m, o = {}) {
+  const tokenOf = o.tokenOf ?? defaultTokenOf;
+  const out = { story: m.id, parts: [], values: {}, raw: {}, tokens: {}, boxes: {}, coverage: { fields: 0, declared: 0, matched: 0, literal: 0 } };
+  if (!m.root) return out;
+  const used = /* @__PURE__ */ new Set();
+  const idFor = (n, isRoot, inherited) => {
+    if (isRoot) {
+      used.add("root");
+      return "root";
+    }
+    const cls = (n.classes ?? []).map(localClassName).find((c) => /^[A-Za-z]/.test(c) && c.length < 40 && !isUtilityClass(c));
+    let base = cls ?? (n.pseudo ? `${inherited ?? "root"}-${n.pseudo}` : n.kind === "text" ? inherited ? `${inherited}-text` : "text" : n.kind === "icon" ? "icon" : n.tag);
+    base = base.replace(/[^A-Za-z0-9-]+/g, "-").toLowerCase() || "part";
+    let id = base;
+    for (let i = 2; used.has(id); i++) id = `${base}-${i}`;
+    used.add(id);
+    return id;
+  };
+  const visit = (n, parent, parentStyle, parentBox) => {
+    const id = idFor(n, !parent, parent);
+    const style = n.kind === "text" && n.tag === "#text" ? parentStyle ?? {} : n.style;
+    const tokens = n.kind === "text" && n.tag === "#text" ? {} : n.tokens;
+    const part = { id, name: id === "root" ? "Root" : id.replace(/-/g, " ").replace(/^./, (c) => c.toUpperCase()), kind: n.kind };
+    if (parent) part.parent = parent;
+    const named = (n.classes ?? []).map(localClassName).filter((c) => !isUtilityClass(c));
+    if (named.length) part.source = named.join(" ");
+    if (n.kind === "frame") {
+      const l = measuredLayout(n.style, n.children.filter((c) => c.style.position !== "absolute" && c.style.position !== "fixed").map((c) => c.box));
+      if (l) part.layout = l;
+      if (/^(hidden|clip)/.test(n.style.overflow ?? "")) part.clip = true;
+      if ((n.style.position === "absolute" || n.style.position === "fixed") && parent) {
+        const zero = (v) => v !== void 0 && /^0(px)?$/.test(v.trim());
+        if (["top", "right", "bottom", "left"].every((k) => zero(n.style[k]))) part.cover = true;
+        else {
+          const pb = parentBox ?? { x: 0, y: 0 };
+          part.pin = { top: Math.round((n.box.y - pb.y) * 100) / 100, left: Math.round((n.box.x - pb.x) * 100) / 100 };
+        }
+      }
+      if (Number(n.style["flex-grow"]) > 0) part.grow = true;
+    }
+    if (n.kind === "text") part.characters = n.text ?? "";
+    if (!parent && m.rootFill) part.fill = true;
+    const margins = Object.fromEntries(["top", "right", "bottom", "left"].map((k) => [k, px(n.style[`margin-${k}`]) ?? 0]).filter(([, v]) => Math.abs(v) > 0.5));
+    if (Object.keys(margins).length) part.margins = margins;
+    out.parts.push(part);
+    partById.set(id, part);
+    out.boxes[id] = n.box;
+    const values = {};
+    const raw = {};
+    const ev = {};
+    const put = (field, prop, literal) => {
+      if (literal === void 0) return;
+      out.coverage.fields++;
+      if (literal !== null) raw[field] = literal;
+      const t2 = tokens[prop];
+      if (t2) ev[field] = t2;
+      if (t2?.via === "declared" && t2.exact) {
+        out.coverage.declared++;
+        const path = t2.chain.map(tokenOf).find((x) => !!x);
+        if (path) return void (values[field] = path);
+      } else if (t2?.via === "declared") out.coverage.declared++;
+      else if (t2?.via === "matched") out.coverage.matched++;
+      else out.coverage.literal++;
+      if (literal === null) values[field] = null;
+      else if (typeof literal === "number") values[field] = literal;
+    };
+    if (n.kind === "frame") {
+      for (const [field, prop] of FIELD_MAP) {
+        const v = n.style[prop];
+        if (field === "fill") put(field, prop, transparent(v) ? n.style["background-image"] && n.style["background-image"] !== "none" ? n.style["background-image"] : void 0 : v);
+        else if (field === "opacity") put(field, prop, v && Number(v) < 1 ? Number(v) : void 0);
+        else if (field === "minWidth" || field === "minHeight") {
+          const sides = field === "minWidth" ? ["left", "right"] : ["top", "bottom"];
+          const extra = n.style["box-sizing"] === "content-box" ? sides.reduce((a, x) => a + (px(n.style[`padding-${x}`]) ?? 0) + (n.style[`border-${x}-style`] === "none" ? 0 : px(n.style[`border-${x}-width`]) ?? 0), 0) : 0;
+          const min = px(v);
+          if (!min) continue;
+          if (extra) {
+            out.coverage.fields++;
+            out.coverage.literal++;
+            raw[field] = min + extra;
+            values[field] = min + extra;
+          } else put(field, prop, min);
+        } else if (field === "cornerRadius" && v && /%$/.test(v.trim())) {
+          const half = Math.min(n.box.width, n.box.height) / 2;
+          const r = Math.min(half, Math.round(Math.min(n.box.width, n.box.height) * Number.parseFloat(v) / 100 * 100) / 100);
+          if (r >= half - 0.5) part.fullRadius = true;
+          if (r > 0) {
+            out.coverage.fields++;
+            out.coverage.literal++;
+            raw[field] = r;
+            values[field] = part.fullRadius ? 999 : r;
+          }
+        } else {
+          const half = Math.min(n.box.width, n.box.height) / 2;
+          if (field === "cornerRadius" && (px(v) ?? 0) >= half - 0.5 && half > 0) part.fullRadius = true;
+          put(field, prop, px(v) || void 0);
+          if (part.fullRadius && field === "cornerRadius" && typeof values.cornerRadius === "number") values.cornerRadius = 999;
+        }
+      }
+      const widths = ["top", "right", "bottom", "left"].map((s) => n.style[`border-${s}-style`] === "none" ? 0 : px(n.style[`border-${s}-width`]) ?? 0);
+      if (widths.some((w) => w > 0)) {
+        const side = widths.findIndex((w) => w > 0);
+        const s = ["top", "right", "bottom", "left"][side];
+        const color = n.style[`border-${s}-color`];
+        put("stroke", `border-${s}-color`, transparent(color) ? null : color);
+        if (widths.every((w) => w === widths[0])) put("strokeWeight", "border-top-width", widths[0]);
+        else ["top", "right", "bottom", "left"].forEach((x, i) => put({ top: "strokeTopWeight", right: "strokeRightWeight", bottom: "strokeBottomWeight", left: "strokeLeftWeight" }[x], `border-${x}-width`, widths[i]));
+      }
+      if (parseBoxShadow(n.style["box-shadow"]).length) put("shadow", "box-shadow", n.style["box-shadow"]);
+      const l = part.layout;
+      if (l && /flex|grid/.test(n.style.display ?? "")) {
+        const gap = l.direction === "HORIZONTAL" ? n.style["column-gap"] : n.style["row-gap"];
+        put("itemSpacing", l.direction === "HORIZONTAL" ? "column-gap" : "row-gap", px(gap) || void 0);
+        if (l.wrap) put("counterAxisSpacing", "row-gap", px(n.style["row-gap"]) || void 0);
+      }
+      put("width", "width", n.box.width);
+      put("height", "height", n.box.height);
+    }
+    if (n.kind === "text") {
+      for (const [field, prop] of TEXT_MAP) {
+        const v = style[prop];
+        if (!v || v === "normal") continue;
+        put(field, prop, field === "textFill" || field === "fontFamily" ? v : field === "fontWeight" ? Number(v) : px(v));
+      }
+      const deco = style["text-decoration-line"];
+      if (deco && /underline|line-through/.test(deco)) raw.textDecoration = /underline/.test(deco) ? "UNDERLINE" : "STRIKETHROUGH";
+    }
+    if ((n.kind === "icon" || n.kind === "vector") && n.svg) (out.vectors ??= {})[id] = { svg: n.svg, strokes: n.svgStrokes ?? [] };
+    if (n.kind === "icon" || n.kind === "vector") {
+      put("width", "width", n.box.width);
+      put("height", "height", n.box.height);
+      const stroked = !!n.style.stroke && n.style.stroke !== "none";
+      const prop = stroked ? "stroke" : "fill";
+      const paint = n.style[prop];
+      if (paint && paint !== "none") put(stroked ? "stroke" : "fill", n.tokens[prop] ? prop : "color", /currentcolor/i.test(paint) ? n.style.color : paint);
+      if (stroked) put("strokeWeight", "stroke-width", px(n.style["stroke-width"]) ?? (Number(n.style["stroke-width"]) || void 0));
+    }
+    if (Object.keys(values).length) out.values[id] = values;
+    if (Object.keys(raw).length) out.raw[id] = raw;
+    if (Object.keys(ev).length) out.tokens[id] = ev;
+    if (n.sized && (n.sized.width || n.sized.height)) (out.sized ??= {})[id] = { ...n.sized.width ? { width: n.box.width } : {}, ...n.sized.height ? { height: n.box.height } : {} };
+    const kids = n.children.map((c) => [c, visit(c, id, n.style, n.box)]);
+    if (part.layout?.wrap && /grid/.test(n.style.display ?? "")) {
+      for (const [c, cid] of [[n, id], ...kids]) if (c === n || !/absolute|fixed/.test(c.style.position ?? "")) (out.sized ??= {})[cid] = { ...out.sized?.[cid], width: c.box.width };
+    }
+    if (part.layout) spacing(id, n, part.layout, kids);
+    if (n.kind === "frame") positioned(id, part, n, kids);
+    const t = /matrix\(([^)]+)\)/.exec(n.style.transform ?? "")?.[1]?.split(",").map(Number);
+    if (parent && parentBox && t && t.length === 6 && Math.abs(t[1]) < 1e-6 && Math.abs(t[2]) < 1e-6 && (Math.abs(t[4]) >= 0.5 || Math.abs(t[5]) >= 0.5 || Math.abs(t[0] - 1) > 0.01 || Math.abs(t[3] - 1) > 0.01) && !part.cover) {
+      part.pin = { top: Math.round((n.box.y - parentBox.y) * 100) / 100, left: Math.round((n.box.x - parentBox.x) * 100) / 100 };
+      if (Math.abs(t[0] - 1) > 0.01 || Math.abs(t[3] - 1) > 0.01) (out.sized ??= {})[id] = { width: n.box.width, height: n.box.height };
+    }
+    return id;
+  };
+  const partById = /* @__PURE__ */ new Map();
+  const byId = (id) => partById.get(id) ?? out.parts.find((p) => p.id === id);
+  const positioned = (id, parentPart, n, kids) => {
+    const abs = kids.filter(([c]) => c.style.position === "absolute" || c.style.position === "fixed");
+    if (!abs.length) return;
+    const flow = kids.filter(([c]) => !(c.style.position === "absolute" || c.style.position === "fixed") && (c.box.width > 0 || c.box.height > 0));
+    const st = n.style;
+    const b = (k) => st[`border-${k}-style`] === "none" ? 0 : px(st[`border-${k}-width`]) ?? 0;
+    const inner = { x: n.box.x + b("left"), y: n.box.y + b("top"), r: n.box.x + n.box.width - b("right"), bottom: n.box.y + n.box.height - b("bottom") };
+    const r2 = (x) => Math.round(x * 100) / 100;
+    if (abs.length === 1 && !flow.length) {
+      const [c, cid] = abs[0];
+      const p = byId(cid);
+      if (p && !p.cover) {
+        const left = r2(c.box.x - inner.x), right = r2(inner.r - (c.box.x + c.box.width));
+        const top = r2(c.box.y - inner.y), bottom = r2(inner.bottom - (c.box.y + c.box.height));
+        const ax = (a, z) => Math.abs(a - z) <= 1 ? "center" : a <= z ? "start" : "end";
+        const x = ax(left, right), y = ax(top, bottom);
+        if (left >= -0.5 && right >= -0.5 && top >= -0.5 && bottom >= -0.5) {
+          delete p.pin;
+          const map = { start: "MIN", center: "CENTER", end: "MAX" };
+          parentPart.layout = { direction: "HORIZONTAL", primary: map[x], counter: map[y], align: { [cid]: { primary: map[x], counter: map[y] } } };
+          const vals = out.values[id] ??= {};
+          const raws = out.raw[id] ??= {};
+          const set = (k, v) => {
+            if (v > 0.5) {
+              vals[k] = v;
+              raws[k] = v;
+            } else {
+              delete vals[k];
+              delete raws[k];
+            }
+          };
+          set("paddingLeft", x === "start" ? left : 0);
+          set("paddingRight", x === "end" ? right : 0);
+          set("paddingTop", y === "start" ? top : 0);
+          set("paddingBottom", y === "end" ? bottom : 0);
+          return;
+        }
+      }
+    }
+    const overlaps = (a, z) => a.x < z.x + z.width - 0.5 && z.x < a.x + a.width - 0.5 && a.y < z.y + z.height - 0.5 && z.y < a.y + a.height - 0.5;
+    for (const [c, cid] of abs) {
+      const p = byId(cid);
+      if (!p || p.cover) continue;
+      const outside = c.box.x < inner.x - 0.5 || c.box.y < inner.y - 0.5 || c.box.x + c.box.width > inner.r + 0.5 || c.box.y + c.box.height > inner.bottom + 0.5;
+      if (outside || flow.some(([f]) => overlaps(c.box, f.box))) p.overlay = true;
+    }
+  };
+  const spacing = (id, n, layout, kids) => {
+    if (layout.primary !== "MIN" || layout.wrap || layout.reverse) return;
+    const flow = kids.filter(([c]) => c.style.position !== "absolute" && c.style.position !== "fixed" && (c.box.width > 0 || c.box.height > 0));
+    if (!flow.length) return;
+    const v = layout.direction === "VERTICAL";
+    const st = n.style;
+    const side = v ? ["top", "bottom"] : ["left", "right"];
+    const num = (x) => px(x) ?? 0;
+    const startEdge = (v ? n.box.y : n.box.x) + (st[`border-${side[0]}-style`] === "none" ? 0 : num(st[`border-${side[0]}-width`])) + num(st[`padding-${side[0]}`]);
+    const endEdge = (v ? n.box.y + n.box.height : n.box.x + n.box.width) - (st[`border-${side[1]}-style`] === "none" ? 0 : num(st[`border-${side[1]}-width`])) - num(st[`padding-${side[1]}`]);
+    const lo = (b) => v ? b.y : b.x;
+    const hi = (b) => v ? b.y + b.height : b.x + b.width;
+    const gaps = flow.slice(1).map(([c], i) => Math.round((lo(c.box) - hi(flow[i][0].box)) * 100) / 100);
+    if (gaps.some((g) => g < -0.5)) return;
+    const vals = out.values[id] ??= {};
+    const raws = out.raw[id] ??= {};
+    const padKey = (k) => ({ top: "paddingTop", bottom: "paddingBottom", left: "paddingLeft", right: "paddingRight" })[k];
+    const first = flow[0][0];
+    const last = flow[flow.length - 1][0];
+    const before = Math.min(num(first.style[`margin-${side[0]}`]), Math.round((lo(first.box) - startEdge) * 100) / 100);
+    const after = Math.min(num(last.style[`margin-${side[1]}`]), Math.round((endEdge - hi(last.box)) * 100) / 100);
+    for (const [k, extra] of [[side[0], before], [side[1], after]]) {
+      if (!(extra > 0.5)) continue;
+      const total = Math.round((num(st[`padding-${k}`]) + extra) * 100) / 100;
+      vals[padKey(k)] = total;
+      raws[padKey(k)] = total;
+    }
+    if (!gaps.length) return;
+    const marginBetween = flow.slice(1).some(([c], i) => num(flow[i][0].style[`margin-${side[1]}`]) > 0.5 || num(c.style[`margin-${side[0]}`]) > 0.5);
+    if (!marginBetween) return;
+    const declaredGap = num(v ? st["row-gap"] : st["column-gap"]);
+    const min = Math.min(...gaps);
+    const uniform = gaps.every((g) => Math.abs(g - gaps[0]) <= 0.5);
+    if (uniform && Math.abs(gaps[0] - declaredGap) <= 0.5) return;
+    vals.itemSpacing = uniform ? gaps[0] : min;
+    raws.itemSpacing = vals.itemSpacing;
+    if (!uniform)
+      flow.slice(1).forEach(([c, cid], i) => {
+        const extra = Math.round((gaps[i] - min) * 100) / 100;
+        if (!(extra > 0.5)) return;
+        (out.spacers ??= {})[cid] = extra;
+        const [prev, pid] = flow[i];
+        const onPrev = num(prev.style[`margin-${side[1]}`]) > 0.5 && !(num(c.style[`margin-${side[0]}`]) > num(prev.style[`margin-${side[1]}`]));
+        const owner = byId(onPrev ? pid : cid);
+        if (owner) owner.wrap = { padding: { ...owner.wrap?.padding ?? {}, [onPrev ? side[1] : side[0]]: extra } };
+      });
+  };
+  visit(m.root, void 0, void 0);
+  for (const k of Object.keys(out.values)) if (!Object.keys(out.values[k]).length) delete out.values[k];
+  for (const k of Object.keys(out.raw)) if (!Object.keys(out.raw[k]).length) delete out.raw[k];
+  return out;
+}
 export {
+  APPLY_ARGS_SCRIPT,
   COMMON_ICONS,
   DEFAULT_STATE,
+  GLOBALS_SCRIPT,
   ICON_STYLE,
   INHERITED,
+  MEASURE_SCRIPT,
   MEDIA_SLOT,
+  aV as MeasuredSpecsError,
+  OPEN_SCRIPT,
+  PROPS_SCRIPT,
+  SPEC_VIEWPORT_WIDTH,
+  TOKENS_SCRIPT,
   UnsupportedComponentError,
+  WAIT_SCRIPT,
   applySuggestionLocally,
   branchExists,
   changedProperties,
   collectAuditFiles,
   commitToNewLocalBranch,
   commitTree,
+  C as compareSpecToMeasured,
   computeValues,
   currentBranch,
   declaredFor,
   draftedCodeHash,
   draftedSpec,
   entryFor,
+  c6 as evalCalc,
   expandDecl,
   fileDiff,
   findDesignSystemRoot,
@@ -3876,37 +5475,54 @@ export {
   generateSlots,
   git,
   gitWorkspace,
+  harvestTokens,
   isGitRepo,
+  isUtilityClass,
   jsxText,
   listFilesAt,
   loadAllowlist,
   loadDesignSystem,
   loadLocalHistory,
+  localClassName,
   localGitHistoryBackend,
   localRepoRef,
   localTags,
+  markMeasuredRoot,
+  cL as markUsedTokens,
   matchComplex,
+  measureRendered,
+  measureStory,
+  measuredLayout,
+  measuredToSpec,
   mediaApplies,
   mergeText,
   motionNotes,
   openingTransitions,
   originRepo,
   overridesDirOf,
+  I as pairParts,
   parseCssModule,
+  d1 as parseMeasuredSpecsFile,
   parseSelector,
   parseTransitions,
+  pickStoriesToMeasure,
   repoSpecOptions,
   resolveDuration,
   resolveEasing,
+  resolveTokenValues,
   runAudit,
   sentenceCase,
   serializeComponentSpecs,
+  sharedTokenPrefix,
   shorthandOf,
   showFile,
   specDrawsSomething,
+  splitInstances,
   splitTop,
   substituteVars,
   tokenCssIndex,
-  transitionBetween
+  tokenVariablePath,
+  transitionBetween,
+  H as withoutAddedWrappers
 };
 //# sourceMappingURL=index.js.map