@bridge-ds/core 0.5.1 → 0.6.0

package/dist/node/index.js

@@ -2,7 +2,7 @@ import { execFile } from "node:child_process";
 import { mkdtemp, rm } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { join, resolve, relative, dirname, sep, posix } from "node:path";
-import { a as assertSafeBranch, c as collectHistory, p as packageDirCandidates, b as parseChangelog, m as mergeReleases, r as releasesFromTags, d as buildReport, e as prNumberFromSubject, l as loadConfig, h as hashSpec, C as COMPONENT_SPECS_VERSION, f as CONFIG_FILE, g as layoutOptions, v as variantKeyOf, i as buildTokenSet, t as tokenCssVar, j as iconComponentName, k as COLOR_FIELDS } from "../component-spec-cvrSvIZj.js";
+import { a as assertSafeBranch, c as collectHistory, p as packageDirCandidates, b as parseChangelog, m as mergeReleases, r as releasesFromTags, d as buildReport, e as prNumberFromSubject, l as loadConfig, s as specHash, v as validateComponentSpec, h as hashSpec, i as iconComponentName, f as variantKeyOf, C as CONFIG_FILE, g as layoutOptions, j as buildTokenSet, t as tokenCssVar, k as COMPONENT_SPECS_VERSION, n as COLOR_FIELDS } from "../component-spec-GFVEE6Fc.js";
 import { s as selectTokenFiles, g as globToRegExp, L as LayeredTokenSet } from "../layered-BnbmToGs.js";
 import { statSync, readFileSync, existsSync, writeFileSync, readdirSync } from "node:fs";
 import { v as isAuditable, Q as planCssFixes, O as parseAllowlist, c as DesignSystemIndex, k as buildAuditReport, n as compareWithBaseline, a as AUDIT_IGNORE_DIRS } from "../report-iPSnsjYi.js";
@@ -495,13 +495,26 @@ function siblingsBefore(el) {
   const idx = sibs.indexOf(el);
   return idx < 0 ? [] : sibs.slice(0, idx);
 }
+function checkedAttr(name, checked) {
+  if (checked === void 0) return void 0;
+  if (name === "aria-checked") return checked;
+  if (name === "data-checked" || name === "data-selected" || name === "data-active") return checked === "true" ? "" : void 0;
+  if (name === "data-unchecked") return checked === "false" ? "" : void 0;
+  if (name === "data-indeterminate") return checked === "mixed" ? "" : void 0;
+  return void 0;
+}
 function attrMatches(el, s, state) {
   switch (s.name) {
     case "data-disabled":
     case "disabled":
-      return state.disabled && (el.isRoot || el.inputLike);
-    default:
-      return false;
+      return state.disabled && (el.isRoot || el.inputLike || !!el.baseUi);
+    default: {
+      const own = el.checked === "state" || el.inputLike && el.checked === void 0 ? state.checked : el.checked;
+      const fromState = el.baseUi || el.inputLike ? checkedAttr(s.name, own) : void 0;
+      const v = fromState ?? el.attrs?.get(s.name);
+      if (v === void 0) return false;
+      return s.value === void 0 || s.value === v;
+    }
   }
 }
 function pseudoMatches(el, s, state, module) {
@@ -516,6 +529,10 @@ function pseudoMatches(el, s, state, module) {
       return !state.disabled;
     case "placeholder-shown":
       return el.inputLike;
+    case "checked":
+      return (el.inputLike || !!el.baseUi) && (el.checked === "state" || el.checked === void 0 ? state.checked : el.checked) === "true";
+    case "indeterminate":
+      return (el.inputLike || !!el.baseUi) && (el.checked === "state" || el.checked === void 0 ? state.checked : el.checked) === "mixed";
     case "not":
       return !(s.args ?? []).some((a) => matchComplex(a, el, state, module));
     case "is":
@@ -666,6 +683,65 @@ function expandDecl(d) {
         { prop: `border-${s}-color`, value: color }
       ]);
     }
+    case "border-inline-start":
+    case "border-inline-end":
+    case "border-block-start":
+    case "border-block-end": {
+      const side = { "border-inline-start": "left", "border-inline-end": "right", "border-block-start": "top", "border-block-end": "bottom" }[d.prop];
+      return expandDecl({ ...d, prop: `border-${side}` });
+    }
+    case "inset-block-start":
+      return [{ prop: "top", value: d.value }];
+    case "inset-block-end":
+      return [{ prop: "bottom", value: d.value }];
+    case "inset-inline-start":
+      return [{ prop: "left", value: d.value }];
+    case "inset-inline-end":
+      return [{ prop: "right", value: d.value }];
+    case "inset": {
+      const v = boxValues(parts);
+      return v ? SIDES.map((side, i) => ({ prop: side, value: v[i] })) : [d];
+    }
+    case "inset-block": {
+      const [a, b = a] = parts;
+      return [
+        { prop: "top", value: a },
+        { prop: "bottom", value: b }
+      ];
+    }
+    case "inset-inline": {
+      const [a, b = a] = parts;
+      return [
+        { prop: "left", value: a },
+        { prop: "right", value: b }
+      ];
+    }
+    case "place-items": {
+      const [align, justify = align] = parts;
+      return [
+        { prop: "align-items", value: align },
+        { prop: "justify-items", value: justify }
+      ];
+    }
+    case "text-decoration": {
+      const line = parts.filter((x) => /^(none|underline|overline|line-through)$/.test(x));
+      return line.length ? [{ prop: "text-decoration-line", value: line.join(" ") }] : [d];
+    }
+    case "gap": {
+      const [row, col = row] = parts;
+      return [
+        { prop: "row-gap", value: row },
+        { prop: "column-gap", value: col }
+      ];
+    }
+    case "flex-flow": {
+      const out = [];
+      for (const x of parts) {
+        if (/^(row|column)(-reverse)?$/.test(x)) out.push({ prop: "flex-direction", value: x });
+        else if (/wrap/.test(x)) out.push({ prop: "flex-wrap", value: x });
+      }
+      return out.length ? out : [d];
+    }
     case "font":
       return d.value === "inherit" ? ["font-family", "font-size", "font-weight", "line-height"].map((prop) => ({ prop, value: "inherit" })) : [d];
     default:
@@ -683,7 +759,7 @@ function splitBorder(parts) {
   const width = parts.find((p) => /width|^\d/.test(p)) ?? "medium";
   return { width, color: parts.filter((p) => p !== width).join(" ") || "currentcolor" };
 }
-const INHERITED = /* @__PURE__ */ new Set(["color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing", "cursor", "white-space", "visibility"]);
+const INHERITED = /* @__PURE__ */ new Set(["color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing", "cursor", "white-space", "visibility", "text-decoration-line", "text-decoration-color"]);
 function declaredFor(rules, el, state, pseudoElement) {
   const matched = rules.filter((r) => matchComplex(r.selector, el, state, r.module, pseudoElement));
   matched.sort((a, b) => cmpSpec(a.specificity, b.specificity) || a.order - b.order);
@@ -697,10 +773,12 @@ function computeValues(own, parent) {
     for (const [k, v] of parent) if (k.startsWith("--") || INHERITED.has(k)) out.set(k, v);
   }
   for (const [k, d] of own) {
-    if (d.value === "inherit") {
+    if (d.value === "inherit" || k === "color" && d.value.trim().toLowerCase() === "currentcolor") {
       const pv = parent?.get(k);
       if (pv !== void 0) out.set(k, pv);
       else out.delete(k);
+    } else if (k.startsWith("--") && d.value === "initial") {
+      out.set(k, "initial");
     } else if (d.value === "initial" || d.value === "unset") out.delete(k);
     else out.set(k, d.value);
   }
@@ -717,7 +795,6 @@ const REPORTED = {
   "box-shadow": "shadows are code-only tokens (no Figma variable)",
   outline: "focus rings are not drawn",
   transform: "transforms are not drawn",
-  opacity: "opacity is not mapped yet",
   filter: "filters are not drawn",
   "margin-left": "margins have no auto layout equivalent",
   "margin-right": "margins have no auto layout equivalent",
@@ -744,8 +821,25 @@ class Reader {
   dirOf(name) {
     return `${this.opts.componentsDir}/${name}`;
   }
+  /** Export name -> component folder, for components a file exports besides its own (Radio in RadioGroup). */
+  exportIndex;
+  /** The folder a component comes from: its own, or the folder whose file exports it. */
+  folderOf(name) {
+    if (this.opts.read(`${this.dirOf(name)}/${name}.tsx`) !== void 0) return name;
+    if (!this.exportIndex) {
+      this.exportIndex = /* @__PURE__ */ new Map();
+      for (const folder of this.opts.components ?? []) {
+        const text = this.opts.read(`${this.dirOf(folder)}/${folder}.tsx`) ?? "";
+        for (const m of text.matchAll(/forwardRef[^(]*\(\s*function\s+([A-Z]\w*)|export function ([A-Z]\w*)/g)) {
+          const n = m[1] ?? m[2];
+          if (n !== folder && !this.exportIndex.has(n)) this.exportIndex.set(n, folder);
+        }
+      }
+    }
+    return this.exportIndex.get(name);
+  }
   exists(name) {
-    return this.opts.read(`${this.dirOf(name)}/${name}.tsx`) !== void 0;
+    return this.folderOf(name) !== void 0;
   }
   /** `export type X = ...` of a component file and of the component files it imports from. */
   aliases(file, sf, depth = 0) {
@@ -769,19 +863,56 @@ class Reader {
   }
   load(name) {
     if (this.cache.has(name)) return this.cache.get(name);
-    const file = `${this.dirOf(name)}/${name}.tsx`;
-    const text = this.opts.read(file);
+    const folder = this.folderOf(name);
+    const file = `${this.dirOf(folder ?? name)}/${folder ?? name}.tsx`;
+    const text = folder ? this.opts.read(file) : void 0;
     if (text === void 0) {
       this.cache.set(name, null);
       return null;
     }
     const sf = ts.createSourceFile(file, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
     const styles = /* @__PURE__ */ new Map();
+    const baseUi = /* @__PURE__ */ new Set();
+    const helpers = /* @__PURE__ */ new Map();
+    const lucide = /* @__PURE__ */ new Map();
+    const consts = /* @__PURE__ */ new Map();
+    const baseUiModules = /* @__PURE__ */ new Set();
+    const fnConsts = /* @__PURE__ */ new Map();
+    const imported = /* @__PURE__ */ new Map();
     for (const st of sf.statements) {
-      if (!ts.isImportDeclaration(st) || !st.importClause?.name) continue;
+      if (ts.isVariableStatement(st))
+        for (const d of st.declarationList.declarations) {
+          if (!ts.isIdentifier(d.name) || !d.initializer) continue;
+          const init = skipCasts(d.initializer);
+          if (ts.isArrowFunction(init) || ts.isFunctionExpression(init)) fnConsts.set(d.name.text, init);
+          else if (!/forwardRef|^\(/.test(d.initializer.getText(sf).slice(0, 12))) consts.set(d.name.text, d.initializer);
+        }
+      if (ts.isFunctionDeclaration(st) && st.name && /^[a-z]/.test(st.name.text) && st.body) helpers.set(st.name.text, st);
+      if (!ts.isImportDeclaration(st) || !st.importClause) continue;
       const spec = unquote(st.moduleSpecifier.getText(sf));
-      if (!spec.endsWith(this.opts.styleSuffix ?? ".module.css")) continue;
-      styles.set(st.importClause.name.text, posix.normalize(posix.join(this.dirOf(name), spec)));
+      if (spec.startsWith(".") && !/\.css$/.test(spec) && !/^\.\.\/\w+$/.test(spec)) {
+        const b = st.importClause.namedBindings;
+        const mod = b && ts.isNamedImports(b) ? this.plainModule(posix.normalize(posix.join(this.dirOf(folder), spec))) : void 0;
+        if (mod && b && ts.isNamedImports(b))
+          for (const e of b.elements) {
+            const f = mod[(e.propertyName ?? e.name).text];
+            if (typeof f === "function") imported.set(e.name.text, f);
+          }
+      }
+      if (spec === "lucide-react") {
+        const b = st.importClause.namedBindings;
+        if (b && ts.isNamedImports(b)) for (const e of b.elements) lucide.set(e.name.text, (e.propertyName ?? e.name).text);
+        continue;
+      }
+      if (spec.startsWith("@base-ui/react")) {
+        baseUiModules.add(spec.replace(/^@base-ui\/react\/?/, ""));
+        const b = st.importClause.namedBindings;
+        if (st.importClause.name) baseUi.add(st.importClause.name.text);
+        if (b && ts.isNamedImports(b)) for (const e of b.elements) baseUi.add(e.name.text);
+        continue;
+      }
+      if (!st.importClause.name || !spec.endsWith(this.opts.styleSuffix ?? ".module.css")) continue;
+      styles.set(st.importClause.name.text, posix.normalize(posix.join(this.dirOf(folder), spec)));
     }
     const aliases = this.aliases(file, sf);
     const props = /* @__PURE__ */ new Map();
@@ -801,10 +932,40 @@ class Reader {
     const fns = componentFunctions(sf);
     const fn = fns.get(name);
     const subcomponents = [...fns].filter(([n]) => n !== name && n.startsWith(name)).map(([n, f]) => ({ name: n, fn: f }));
-    const src = { name, file, sf, styles, props, native, fn, subcomponents };
+    const src = { name, folder, file, sf, styles, props, native, fn, subcomponents, exported: fns, baseUi, helpers, lucide, consts, baseUiModules, fnConsts, imported };
     this.cache.set(name, src);
     return src;
   }
+  modules = /* @__PURE__ */ new Map();
+  /**
+   * Exports of a plain module of the package (`utils/color.ts`): no imports, no JSX, so it runs on its own. Undefined
+   * for anything else (a module that imports React or another file).
+   */
+  plainModule(path) {
+    if (this.modules.has(path)) return this.modules.get(path);
+    let out;
+    const text = this.opts.read(`${path}.ts`) ?? this.opts.read(`${path}/index.ts`);
+    if (text !== void 0) {
+      const sf = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+      const plain = !sf.statements.some((s) => ts.isImportDeclaration(s) || ts.isExportDeclaration(s) && !!s.moduleSpecifier);
+      if (plain) {
+        try {
+          const js = ts.transpileModule(text, { compilerOptions: { target: ts.ScriptTarget.ES2020, module: ts.ModuleKind.CommonJS } }).outputText;
+          const exports = {};
+          new Function("exports", "module", js)(exports, { exports });
+          out = exports;
+        } catch {
+          out = void 0;
+        }
+      }
+    }
+    this.modules.set(path, out);
+    return out;
+  }
+}
+function skipCasts(e) {
+  while (ts.isParenthesizedExpression(e) || ts.isAsExpression(e) || ts.isSatisfiesExpression(e) || ts.isNonNullExpression(e)) e = e.expression;
+  return e;
 }
 function classifyType(text, aliases, depth = 0) {
   const t = text.trim();
@@ -833,7 +994,10 @@ function componentFunctions(sf) {
 }
 const CHILDREN = /* @__PURE__ */ Symbol("children");
 const OPAQUE = /* @__PURE__ */ Symbol("opaque");
+const isFnRef = (v) => !!v && typeof v === "object" && "fnRef" in v;
 const isClass = (v) => !!v && typeof v === "object" && "cls" in v;
+const isTextRef = (v) => !!v && typeof v === "object" && "textProp" in v;
+const isLucide = (v) => !!v && typeof v === "object" && "lucide" in v;
 const isStyles = (v) => !!v && typeof v === "object" && "module" in v;
 const isJsx = (v) => !!v && typeof v === "object" && "jsx" in v;
 function lookup(scope, name) {
@@ -847,7 +1011,12 @@ function lookup(scope, name) {
   }
   const style = scope.src.styles.get(name);
   if (style) return { module: style };
-  if (name === "undefined") return void 0;
+  const icon = scope.src.lucide.get(name);
+  if (icon) return { lucide: icon };
+  const top = scope.src.consts.get(name);
+  if (top) return evaluate(top, { ...scope, vars: /* @__PURE__ */ new Map(), locals: /* @__PURE__ */ new Map() });
+  const fnConst = scope.src.fnConsts.get(name);
+  if (fnConst) return { fnRef: fnConst, scope: { ...scope, vars: /* @__PURE__ */ new Map(), locals: /* @__PURE__ */ new Map(), toggles: /* @__PURE__ */ new Map() } };
   return void 0;
 }
 function classList(v, out = []) {
@@ -872,6 +1041,8 @@ function evaluate(e, scope) {
   if (ts.isPropertyAccessExpression(e)) {
     const obj = evaluate(e.expression, scope);
     if (isStyles(obj)) return { cls: `${obj.module}|${e.name.text}` };
+    if ((Array.isArray(obj) || typeof obj === "string") && e.name.text === "length") return obj.length;
+    if (obj === OPAQUE) return OPAQUE;
     if (obj && typeof obj === "object" && !Array.isArray(obj) && !isClass(obj) && !isJsx(obj)) return obj[e.name.text];
     return void 0;
   }
@@ -879,9 +1050,20 @@ function evaluate(e, scope) {
     const obj = evaluate(e.expression, scope);
     const key = evaluate(e.argumentExpression, scope);
     if (isStyles(obj) && typeof key === "string") return { cls: `${obj.module}|${key}` };
+    if (Array.isArray(obj) && typeof key === "number") return obj[key];
+    if (obj && typeof obj === "object" && !Array.isArray(obj) && (typeof key === "string" || typeof key === "number") && !isClass(obj) && !isJsx(obj)) return obj[key];
     return void 0;
   }
   if (ts.isPrefixUnaryExpression(e) && e.operator === ts.SyntaxKind.ExclamationToken) return !truthy(evaluate(e.operand, scope));
+  if (ts.isPrefixUnaryExpression(e) && e.operator === ts.SyntaxKind.MinusToken) {
+    const v = evaluate(e.operand, scope);
+    return typeof v === "number" ? -v : OPAQUE;
+  }
+  if (ts.isTypeOfExpression(e)) {
+    const v = evaluate(e.expression, scope);
+    if (v === OPAQUE || isJsx(v)) return OPAQUE;
+    return v === null ? "object" : Array.isArray(v) ? "object" : typeof v === "symbol" ? OPAQUE : typeof v;
+  }
   if (ts.isConditionalExpression(e)) return truthy(evaluate(e.condition, scope)) ? evaluate(e.whenTrue, scope) : evaluate(e.whenFalse, scope);
   if (ts.isBinaryExpression(e)) {
     const op = e.operatorToken.kind;
@@ -911,17 +1093,273 @@ function evaluate(e, scope) {
         return l != r;
       // eslint-disable-line eqeqeq
       default:
-        return OPAQUE;
+        return arithmetic(op, l, r);
     }
   }
   if (ts.isCallExpression(e)) {
     const callee = e.expression.getText(sf);
     if (callee === "cx" || callee === "clsx" || callee === "classNames") return e.arguments.map((a) => evaluate(a, scope)).filter(truthy);
+    if (callee === "mergeProps") {
+      const out = {};
+      for (const a of e.arguments) {
+        const v = evaluate(a, scope);
+        if (v && typeof v === "object" && !Array.isArray(v) && !isJsx(v) && !isClass(v)) Object.assign(out, v);
+      }
+      return out;
+    }
+    const math = /^Math\.(max|min|floor|ceil|round|abs)$/.exec(callee);
+    if (math) {
+      const args = e.arguments.map((a) => evaluate(a, scope));
+      return args.every((a) => typeof a === "number") ? Math[math[1]](...args) : OPAQUE;
+    }
+    const objFn = /^Object\.(entries|keys|values)$/.exec(callee);
+    if (objFn && e.arguments[0]) {
+      const o = evaluate(e.arguments[0], scope);
+      if (o === void 0 || o === null) return [];
+      if (o && typeof o === "object" && !Array.isArray(o) && !isJsx(o) && !isClass(o)) {
+        const rec = o;
+        return objFn[1] === "keys" ? Object.keys(rec) : objFn[1] === "values" ? Object.values(rec) : Object.entries(rec).map(([k, v]) => [k, v]);
+      }
+      return OPAQUE;
+    }
+    if ((callee === "createElement" || callee === "React.createElement") && e.arguments[0]) {
+      const tag = evaluate(e.arguments[0], scope);
+      const props = e.arguments[1] ? evaluate(e.arguments[1], scope) : void 0;
+      if (typeof tag !== "string") return OPAQUE;
+      return { element: tag, props: props && typeof props === "object" && !Array.isArray(props) ? props : {}, kids: e.arguments.slice(2).map((a) => evaluate(a, scope)) };
+    }
+    if ((callee === "createContext" || callee === "React.createContext") && e.arguments[0]) return evaluate(e.arguments[0], scope);
+    if ((callee === "useContext" || callee === "React.useContext") && e.arguments[0]) {
+      const key = e.arguments[0].getText(sf);
+      return scope.contexts?.has(key) ? scope.contexts.get(key) : evaluate(e.arguments[0], scope);
+    }
+    if (callee === "useRender" && e.arguments[0]) {
+      const o = evaluate(e.arguments[0], scope);
+      const props = o?.props && typeof o.props === "object" && !Array.isArray(o.props) ? o.props : {};
+      return { element: typeof o?.defaultTagName === "string" ? o.defaultTagName : "div", props, kids: [] };
+    }
+    if ((callee === "useMemo" || callee === "React.useMemo") && e.arguments[0]) return callArrow(e.arguments[0], [], scope);
+    if (callee === "Array.isArray" && e.arguments[0]) {
+      const v = evaluate(e.arguments[0], scope);
+      return v === OPAQUE || isFnRef(v) ? OPAQUE : Array.isArray(v);
+    }
+    if (callee === "Array.from" && e.arguments[0]) {
+      const v = evaluate(e.arguments[0], scope);
+      const length = v && typeof v === "object" && !Array.isArray(v) ? v.length : void 0;
+      const list = Array.isArray(v) ? v : typeof length === "number" && length >= 0 && length < 1e3 ? Array.from({ length }, () => void 0) : void 0;
+      if (!list) return OPAQUE;
+      const fn = e.arguments[1];
+      if (!fn) return list;
+      const results = list.map((x, i) => callArrow(fn, [x, i], scope));
+      return results.some((r) => r === OPAQUE) ? OPAQUE : results;
+    }
+    if (ts.isPropertyAccessExpression(e.expression) && /^(map|flatMap|filter|some|every|find)$/.test(e.expression.name.text)) {
+      const list = evaluate(e.expression.expression, scope);
+      if (Array.isArray(list)) return listMethod(list, e.expression.name.text, e.arguments, scope);
+    }
+    if (ts.isPropertyAccessExpression(e.expression)) {
+      const obj = evaluate(e.expression.expression, scope);
+      const r = valueMethod(obj, e.expression.name.text, e.arguments.map((a) => evaluate(a, scope)));
+      if (r !== void 0) return r;
+    }
+    if (ts.isIdentifier(e.expression)) {
+      const fnExpr = scope.inits?.get(e.expression.text) ?? scope.locals.get(e.expression.text);
+      if (fnExpr && (ts.isArrowFunction(fnExpr) || ts.isFunctionExpression(fnExpr)))
+        return callArrow(
+          fnExpr,
+          e.arguments.map((a) => evaluate(a, scope)),
+          scope
+        );
+    }
+    const helper = ts.isIdentifier(e.expression) ? scope.src.helpers.get(e.expression.text) : void 0;
+    if (helper) {
+      const args = e.arguments.map((a) => evaluate(a, scope));
+      if (containsJsx(helper)) return callArrow(helper, args, { ...scope, vars: /* @__PURE__ */ new Map(), locals: /* @__PURE__ */ new Map(), toggles: /* @__PURE__ */ new Map(), inits: /* @__PURE__ */ new Map() });
+      return callHelper(helper, args, scope.src);
+    }
+    const imported = ts.isIdentifier(e.expression) ? scope.src.imported.get(e.expression.text) : void 0;
+    if (imported) return callData(imported, e.arguments.map((a) => evaluate(a, scope)));
+    if (ts.isIdentifier(e.expression)) {
+      const v = evaluate(e.expression, scope);
+      if (isFnRef(v)) return callArrow(v.fnRef, e.arguments.map((a) => evaluate(a, scope)), v.scope);
+    }
     return OPAQUE;
   }
+  if (ts.isArrowFunction(e) || ts.isFunctionExpression(e)) return { fnRef: e, scope };
   if (ts.isJsxElement(e) || ts.isJsxSelfClosingElement(e) || ts.isJsxFragment(e)) return { jsx: 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);
+      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);
+        if (v && typeof v === "object" && !Array.isArray(v) && !isJsx(v) && !isClass(v)) Object.assign(out, v);
+      } else return OPAQUE;
+    }
+    return out;
+  }
+  if (ts.isArrayLiteralExpression(e)) return e.elements.map((x) => evaluate(x, scope));
   return OPAQUE;
 }
+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);
+  if (!data.every(isData)) return OPAQUE;
+  try {
+    const out = fn(...structuredClone(data));
+    const v = jsonValue(JSON.parse(JSON.stringify(out ?? null)));
+    return isData(v) ? v : OPAQUE;
+  } catch {
+    return OPAQUE;
+  }
+}
+function callHelper(fn, args, src) {
+  try {
+    const js = ts.transpileModule(fn.getText(src.sf).replace(/^export\s+(default\s+)?/, ""), { compilerOptions: { target: ts.ScriptTarget.ES2020, module: ts.ModuleKind.None } }).outputText;
+    const run = new Function(`${js}; return ${fn.name.text}.apply(null, arguments);`);
+    return callData(run, args);
+  } catch {
+    return OPAQUE;
+  }
+}
+function containsJsx(fn) {
+  let found = false;
+  const visit = (n) => {
+    if (found) return;
+    if (ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n) || ts.isJsxFragment(n)) found = true;
+    else ts.forEachChild(n, visit);
+  };
+  visit(fn);
+  return found;
+}
+function valueMethod(obj, method, args) {
+  const str = (i) => typeof args[i] === "string" ? args[i] : void 0;
+  const int = (i) => typeof args[i] === "number" ? args[i] : args[i] === void 0 ? void 0 : NaN;
+  if (typeof obj === "string") {
+    switch (method) {
+      case "split":
+        return str(0) !== void 0 ? obj.split(str(0)) : void 0;
+      case "trim":
+        return obj.trim();
+      case "toLowerCase":
+        return obj.toLowerCase();
+      case "toUpperCase":
+        return obj.toUpperCase();
+      case "startsWith":
+        return str(0) !== void 0 ? obj.startsWith(str(0)) : void 0;
+      case "endsWith":
+        return str(0) !== void 0 ? obj.endsWith(str(0)) : void 0;
+      case "includes":
+        return str(0) !== void 0 ? obj.includes(str(0)) : void 0;
+      case "slice":
+        return Number.isNaN(int(0)) || Number.isNaN(int(1)) ? void 0 : obj.slice(int(0), int(1));
+      default:
+        return void 0;
+    }
+  }
+  if (Array.isArray(obj)) {
+    switch (method) {
+      case "join":
+        return obj.every((x) => typeof x === "string" || typeof x === "number") ? obj.join(str(0) ?? ",") : void 0;
+      case "slice":
+        return Number.isNaN(int(0)) || Number.isNaN(int(1)) ? void 0 : obj.slice(int(0), int(1));
+      case "includes":
+        return obj.includes(args[0]);
+      default:
+        return void 0;
+    }
+  }
+  return void 0;
+}
+function callArrow(fn, args, scope) {
+  if (!ts.isArrowFunction(fn) && !ts.isFunctionExpression(fn) && !ts.isFunctionDeclaration(fn)) return OPAQUE;
+  if (!fn.body) return OPAQUE;
+  const vars = new Map(scope.vars);
+  fn.parameters.forEach((p, i) => {
+    const v = args[i];
+    if (ts.isIdentifier(p.name)) vars.set(p.name.text, v);
+    else if (ts.isObjectBindingPattern(p.name) && v && typeof v === "object") {
+      for (const el of p.name.elements) if (ts.isIdentifier(el.name)) vars.set(el.name.text, v[(el.propertyName ?? el.name).getText(scope.src.sf)]);
+    }
+    const pattern = p.name;
+    if (ts.isArrayBindingPattern(pattern) && Array.isArray(v))
+      pattern.elements.forEach((el, j) => {
+        if (ts.isBindingElement(el) && ts.isIdentifier(el.name)) vars.set(el.name.text, v[j]);
+      });
+  });
+  const inner = { ...scope, vars, locals: new Map(scope.locals) };
+  if (!ts.isBlock(fn.body)) return evaluate(fn.body, inner);
+  const run = (stmts) => {
+    for (const st of stmts) {
+      if (ts.isVariableStatement(st)) {
+        for (const d of st.declarationList.declarations) if (ts.isIdentifier(d.name) && d.initializer) inner.locals.set(d.name.text, d.initializer);
+      }
+      if (ts.isIfStatement(st)) {
+        const c = evaluate(st.expression, inner);
+        if (c === OPAQUE) return { value: OPAQUE };
+        const branch = truthy(c) ? st.thenStatement : st.elseStatement;
+        const r = branch ? run(ts.isBlock(branch) ? branch.statements : [branch]) : void 0;
+        if (r) return r;
+      }
+      if (ts.isForOfStatement(st) || ts.isForStatement(st) || ts.isWhileStatement(st)) return { value: OPAQUE };
+      if (ts.isReturnStatement(st)) return { value: st.expression ? evaluate(st.expression, inner) : void 0 };
+    }
+    return void 0;
+  };
+  return run(fn.body.statements)?.value;
+}
+function listMethod(list, method, args, scope) {
+  let fn = args[0];
+  if (fn && ts.isIdentifier(fn)) fn = scope.inits?.get(fn.text) ?? scope.locals.get(fn.text) ?? fn;
+  if (!fn) return OPAQUE;
+  const results = list.map((x, i) => callArrow(fn, [x, i], scope));
+  if (results.some((r) => r === OPAQUE)) return OPAQUE;
+  switch (method) {
+    case "map":
+      return results;
+    case "flatMap":
+      return results.flatMap((r) => Array.isArray(r) ? r : [r]);
+    case "filter":
+      return list.filter((_, i) => truthy(results[i]));
+    case "some":
+      return results.some(truthy);
+    case "every":
+      return results.every(truthy);
+    case "find":
+      return list.find((_, i) => truthy(results[i]));
+    default:
+      return OPAQUE;
+  }
+}
+function arithmetic(op, l, r) {
+  if (l === OPAQUE || r === OPAQUE) return OPAQUE;
+  const K = ts.SyntaxKind;
+  const compare = op === K.LessThanToken || op === K.GreaterThanToken || op === K.LessThanEqualsToken || op === K.GreaterThanEqualsToken;
+  if (compare && (l === void 0 || l === null || r === void 0 || r === null)) return false;
+  if (op === K.PlusToken && (typeof l === "string" || typeof r === "string") && (typeof l === "string" || typeof l === "number") && (typeof r === "string" || typeof r === "number")) return `${l}${r}`;
+  if (typeof l !== "number" || typeof r !== "number") return OPAQUE;
+  switch (op) {
+    case K.PlusToken:
+      return l + r;
+    case K.MinusToken:
+      return l - r;
+    case K.AsteriskToken:
+      return l * r;
+    case K.SlashToken:
+      return l / r;
+    case K.LessThanToken:
+      return l < r;
+    case K.GreaterThanToken:
+      return l > r;
+    case K.LessThanEqualsToken:
+      return l <= r;
+    case K.GreaterThanEqualsToken:
+      return l >= r;
+    default:
+      return OPAQUE;
+  }
+}
 function truthy(v) {
   if (v === OPAQUE) return true;
   if (Array.isArray(v)) return true;
@@ -931,14 +1369,19 @@ function bindProps(fn, scope, given) {
   const names = /* @__PURE__ */ new Map();
   const param = fn.parameters[0];
   if (!param || !ts.isObjectBindingPattern(param.name)) return names;
+  const taken = /* @__PURE__ */ new Set();
   for (const el of param.name.elements) {
     if (el.dotDotDotToken || !ts.isIdentifier(el.name)) continue;
     const prop = el.propertyName ? el.propertyName.getText(scope.src.sf) : el.name.text;
     names.set(el.name.text, prop);
+    taken.add(prop);
     let v = given[prop];
     if (v === void 0 && el.initializer) v = evaluate(el.initializer, scope);
     scope.vars.set(el.name.text, v);
   }
+  const rest = param.name.elements.find((el) => el.dotDotDotToken && ts.isIdentifier(el.name));
+  const keepChildren = !scope.main && !!scope.preview?.some((c) => typeof c !== "string");
+  if (rest && ts.isIdentifier(rest.name)) scope.vars.set(rest.name.text, Object.fromEntries(Object.entries(given).filter(([k, v]) => !taken.has(k) && v !== void 0 && (v !== CHILDREN || keepChildren))));
   return names;
 }
 function renderedJsx(fn, scope) {
@@ -951,7 +1394,31 @@ function renderedJsx(fn, scope) {
   const run = (stmts) => {
     for (const st of stmts) {
       if (ts.isVariableStatement(st)) {
-        for (const d of st.declarationList.declarations) if (ts.isIdentifier(d.name) && d.initializer) scope.locals.set(d.name.text, d.initializer);
+        for (const d of st.declarationList.declarations) {
+          if (ts.isArrayBindingPattern(d.name) && d.initializer && ts.isCallExpression(d.initializer) && /^(React\.)?useState$/.test(d.initializer.expression.getText(scope.src.sf))) {
+            const first = d.name.elements[0];
+            const init = d.initializer.arguments[0];
+            if (first && ts.isBindingElement(first) && ts.isIdentifier(first.name) && init) {
+              scope.locals.set(first.name.text, init);
+              scope.inits?.set(first.name.text, init);
+            }
+            continue;
+          }
+          if (ts.isObjectBindingPattern(d.name) && d.initializer) {
+            const obj = evaluate(d.initializer, scope);
+            for (const el of d.name.elements) {
+              if (!ts.isIdentifier(el.name) || el.dotDotDotToken) continue;
+              const key = (el.propertyName ?? el.name).getText(scope.src.sf);
+              let v = obj && typeof obj === "object" && !Array.isArray(obj) ? obj[key] : void 0;
+              if (v === void 0 && el.initializer) v = evaluate(el.initializer, scope);
+              scope.vars.set(el.name.text, v);
+            }
+            continue;
+          }
+          if (!ts.isIdentifier(d.name) || !d.initializer) continue;
+          scope.locals.set(d.name.text, d.initializer);
+          scope.inits?.set(d.name.text, d.initializer);
+        }
       } else if (ts.isIfStatement(st)) {
         const branch = truthy(evaluate(st.expression, scope)) ? st.thenStatement : st.elseStatement;
         if (!branch) continue;
@@ -968,10 +1435,17 @@ function renderedJsx(fn, scope) {
   return run(body.statements) ?? void 0;
 }
 const INPUT_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "BaseInput"]);
+const SVG_SHAPES = /^(circle|path|rect|line|polyline|polygon|ellipse)$/;
+const isInputTag = (tag) => INPUT_TAGS.has(tag) || /\.Input$/.test(tag);
 const sentenceCase = (prop) => {
   const words = prop.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
   return words.charAt(0).toUpperCase() + words.slice(1);
 };
+function attrString(v) {
+  if (v === void 0 || v === null || v === OPAQUE || typeof v === "symbol") return void 0;
+  if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") return String(v);
+  return void 0;
+}
 function renderJsx(ref, ctx, visible) {
   const { jsx, scope } = ref;
   const sf = scope.src.sf;
@@ -980,11 +1454,29 @@ function renderJsx(ref, ctx, visible) {
   if (!ts.isJsxElement(jsx) && !ts.isJsxSelfClosingElement(jsx)) return [];
   const open = ts.isJsxElement(jsx) ? jsx.openingElement : jsx;
   const tag = open.tagName.getText(sf);
+  if (tag === "wbr") return [];
+  if (/\.Provider$/.test(tag) && ts.isJsxElement(jsx)) {
+    const valueAttr = open.attributes.properties.find((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "value");
+    const value = valueAttr?.initializer && ts.isJsxExpression(valueAttr.initializer) && valueAttr.initializer.expression ? evaluate(valueAttr.initializer.expression, scope) : void 0;
+    const contexts = new Map(ctx.contexts ?? []);
+    contexts.set(tag.replace(/\.Provider$/, ""), value);
+    const inner = { ...scope, contexts };
+    return renderChildren(jsx.children, inner, { ...ctx, contexts });
+  }
+  if (/^(React\.)?Fragment$|\.Provider$/.test(tag)) return ts.isJsxElement(jsx) ? renderChildren(jsx.children, scope, ctx) : [];
   const attrs = {};
   let spreads = false;
+  let spreadChildren;
   for (const a of open.attributes.properties) {
     if (ts.isJsxSpreadAttribute(a)) {
       spreads = true;
+      const v = evaluate(a.expression, scope);
+      if (v && typeof v === "object" && !Array.isArray(v) && !isJsx(v) && !isClass(v) && !isElementValue(v) && !isFnRef(v)) {
+        for (const [k, x] of Object.entries(v)) {
+          if (k === "children") spreadChildren = x;
+          else if (/^(data|aria)-/.test(k) || SPREAD_PROPS.has(k)) attrs[k] = x;
+        }
+      }
       continue;
     }
     const name = a.name.getText(sf);
@@ -993,36 +1485,137 @@ function renderJsx(ref, ctx, visible) {
     else if (ts.isJsxExpression(a.initializer) && a.initializer.expression) attrs[name] = evaluate(a.initializer.expression, scope);
   }
   const children = ts.isJsxElement(jsx) ? jsx.children : void 0;
+  if (scope.src.baseUi.has(tag.split(".")[0]) && (/\.Empty$/.test(tag) && ctx.items?.length || /\.Clear$/.test(tag) && ctx.selected === void 0 || /\.Arrow$/.test(tag) || /\.Error$/.test(tag) && attrs.match === void 0)) return [];
+  if (scope.src.baseUi.has(tag.split(".")[0]) && attrs.render !== void 0 && !children?.some((c) => !ts.isJsxText(c) || c.text.trim())) {
+    const r = attrs.render;
+    const extra = classList(attrs.className);
+    if (isJsx(r)) {
+      const nodes = renderJsx(r, ctx, visible);
+      if (nodes[0]) nodes[0].classes = [...nodes[0].classes, ...extra];
+      return nodes;
+    }
+    const init = open.attributes.properties.find((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "render")?.initializer;
+    if (r === CHILDREN && init && ts.isJsxExpression(init) && init.expression) return renderExpression(init.expression, scope, ctx, visible);
+  }
   if (/^[A-Z]/.test(tag) && tag !== ctx.component && ctx.depth < 4 && ctx.reader.exists(tag)) {
-    const nested = renderComponent(ctx.reader, tag, attrs, { ...ctx, depth: ctx.depth + 1 });
+    const nested = renderComponent(ctx.reader, tag, withFormError(tag, children?.length ? { ...attrs, children: childrenValue(children, scope) } : attrs, ctx), { ...ctx, depth: ctx.depth + 1 });
     if (nested) {
-      if (tag === "Icon") nested.kind = "icon";
+      if (tag === ICON_COMPONENT) {
+        nested.kind = "icon";
+        const iconAttr = open.attributes.properties.find((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "icon");
+        const expr = iconAttr?.initializer && ts.isJsxExpression(iconAttr.initializer) ? iconAttr.initializer.expression : void 0;
+        const lucideName = expr && ts.isIdentifier(expr) ? scope.src.lucide.get(expr.text) : void 0;
+        if (lucideName) nested.icon = lucideName;
+        else if (isLucide(attrs.icon)) nested.icon = attrs.icon.lucide;
+        else if (typeof attrs.icon === "string" && /^[A-Z]\w*$/.test(attrs.icon)) nested.icon = attrs.icon;
+      }
       if (visible) nested.visible = visible;
       return [nested];
     }
   }
+  const dataAttrs = /* @__PURE__ */ new Map();
+  for (const [k, v] of Object.entries(attrs)) {
+    if (!/^(data|aria)-/.test(k)) continue;
+    const str = attrString(v);
+    if (str !== void 0) dataAttrs.set(k, str);
+  }
+  const isBaseUi = scope.src.baseUi.has(tag.split(".")[0]);
+  const orientation = isBaseUi && typeof attrs.orientation === "string" ? attrs.orientation : ctx.orientation;
+  if (isBaseUi && orientation && !dataAttrs.has("data-orientation")) dataAttrs.set("data-orientation", orientation);
   const node = {
     key: "",
     tag,
     classes: classList(attrs.className),
     children: [],
-    kind: INPUT_TAGS.has(tag) ? "text" : "frame",
-    ...visible ? { visible } : {}
+    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" } : {},
+    ...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 } : {}
   };
-  if (INPUT_TAGS.has(tag)) {
+  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;
+  }
+  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);
+    node.svgAttrs = lit;
+    node.shapes = children ? renderChildren(children, scope, ctx).filter((c) => SVG_SHAPES.test(c.tag)) : [];
+    return [node];
+  }
+  if (SVG_SHAPES.test(tag)) {
+    const lit = {};
+    for (const [k, v] of Object.entries(attrs)) if ((typeof v === "string" || typeof v === "number") && k !== "className") lit[k] = String(v);
+    node.svgAttrs = lit;
+    return [node];
+  }
+  if (isInputTag(tag)) {
     node.inputLike = true;
-    node.placeholder = true;
-    node.text = { property: "Placeholder", default: typeof attrs.placeholder === "string" ? attrs.placeholder : "Placeholder" };
+    const typed = typeof attrs.value === "string" && attrs.value ? attrs.value : typeof attrs.defaultValue === "string" && attrs.defaultValue ? attrs.defaultValue : void 0;
+    if (typed !== void 0 && !scope.main) {
+      node.children = [textNode(typed)];
+      return [node];
+    }
+    const value = typeof attrs.placeholder === "string" ? attrs.placeholder : "Placeholder";
+    node.children = [{ key: "", tag: "#placeholder", classes: [], children: [], kind: "text", placeholder: true, text: { property: "Placeholder", default: value } }];
     return [node];
   }
-  if (children) node.children = renderChildren(children, scope, ctx);
+  if (node.baseUi && /\.Indicator$/.test(tag) && ctx.fraction !== void 0) node.fraction = ctx.fraction;
+  let childCtx = Array.isArray(attrs.items) && node.baseUi ? { ...ctx, items: attrs.items } : ctx;
+  if (isBaseUi && orientation) childCtx = { ...childCtx, orientation };
+  if (isBaseUi && attrs.errors && typeof attrs.errors === "object" && !Array.isArray(attrs.errors) && !isFnRef(attrs.errors)) childCtx = { ...childCtx, formErrors: attrs.errors };
+  const numeric = typeof attrs.value === "number" ? attrs.value : attrs.value === void 0 && typeof attrs.defaultValue === "number" ? attrs.defaultValue : void 0;
+  if (node.baseUi && /\.Root$/.test(tag) && numeric !== void 0) {
+    const min = typeof attrs.min === "number" ? attrs.min : 0;
+    const max = typeof attrs.max === "number" ? attrs.max : 100;
+    const local = tag.split(".")[0].toLowerCase();
+    const module = [...scope.src.baseUiModules].find((m) => m && local.includes(m.split("/")[0])) ?? "";
+    childCtx = { ...childCtx, fraction: Math.min(1, Math.max(0, (numeric - min) / (max - min || 1))), numeric: { value: numeric, module } };
+  }
+  const formatted = ctx.fraction !== void 0 && ctx.numeric ? ctx.numeric.module === "slider" ? new Intl.NumberFormat("en-US").format(ctx.numeric.value) : `${Math.round(ctx.fraction * 100)}%` : void 0;
+  if (node.baseUi && /\.Value$/.test(tag) && formatted !== void 0 && ctx.numeric) childCtx = { ...childCtx, valueArgs: ctx.numeric.module === "slider" ? [[formatted], [ctx.numeric.value]] : [formatted, ctx.numeric.value] };
+  if (children) node.children = renderChildren(children, scope, childCtx);
+  else if (spreadChildren === CHILDREN && scope.preview?.some((c) => typeof c !== "string")) node.children = renderPreview(scope.preview, childCtx);
+  else if (spreadChildren !== void 0 && spreadChildren !== CHILDREN) node.children = renderValues([spreadChildren], ctx);
   else if (spreads) node.takesChildren = true;
+  if (!node.children.length && node.baseUi && /\.Value$/.test(tag)) {
+    const placeholder = formatted ?? (ctx.fraction !== void 0 ? `${Math.round(ctx.fraction * 100)}%` : typeof attrs.placeholder === "string" ? attrs.placeholder : "Value");
+    node.children = [{ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: "Value", default: placeholder } }];
+  }
   return [node];
 }
+const SPREAD_PROPS = /* @__PURE__ */ new Set(["className", "value", "defaultValue", "min", "max", "orientation", "errors"]);
+function withFormError(tag, props, ctx) {
+  const name = props.name;
+  if (!ctx.formErrors || typeof name !== "string" || props.error !== void 0 || !ctx.reader.load(tag)?.props.has("error")) return props;
+  const message = ctx.formErrors[name];
+  const text = Array.isArray(message) ? message[0] : message;
+  return typeof text === "string" ? { ...props, error: text } : props;
+}
+const isChildrenRef = (v) => !!v && typeof v === "object" && "children" in v && "scope" in v;
+function childrenValue(children, scope) {
+  const texts = children.filter((c) => !ts.isJsxText(c) || c.text.trim());
+  if (texts.every((c) => ts.isJsxText(c))) return texts.map((c) => c.text.trim()).join(" ");
+  return { children, scope };
+}
 function renderChildren(children, scope, ctx) {
   const out = [];
   for (const c of children) {
-    if (ts.isJsxText(c)) continue;
+    if (ts.isJsxText(c)) {
+      const raw = jsxText(c.text);
+      if (raw.trim()) out.push(textNode(raw.replace(/\s+/g, " ").trim(), raw));
+      else if (raw) out.push(spaceNode(raw));
+      continue;
+    }
     if (ts.isJsxExpression(c)) {
       if (c.expression) out.push(...renderExpression(c.expression, scope, ctx));
       continue;
@@ -1031,66 +1624,394 @@ function renderChildren(children, scope, ctx) {
   }
   return out;
 }
-function toggleOf(e, scope) {
-  const inner = ts.isParenthesizedExpression(e) ? e.expression : e;
-  if (!ts.isIdentifier(inner)) return void 0;
-  const prop = scope.toggles.get(inner.text);
-  return prop ? { property: sentenceCase(prop), prop } : void 0;
+const spaceNode = (raw) => ({ key: "", tag: "#text", classes: [], children: [], kind: "text", chars: "", raw, space: true });
+const textNode = (chars, raw) => ({ key: "", tag: "#text", classes: [], children: [], kind: "text", chars, ...raw !== void 0 && raw !== chars ? { raw } : {} });
+function jsxText(text) {
+  const lines = text.split(/\r\n|\n|\r/);
+  let out = "";
+  lines.forEach((line, i) => {
+    let l = line.replace(/\t/g, " ");
+    if (i !== 0) l = l.replace(/^ +/, "");
+    if (i !== lines.length - 1) l = l.replace(/ +$/, "");
+    if (!l) return;
+    if (out && i !== 0) out += " ";
+    out += l;
+  });
+  return out;
+}
+function identifiersIn(e, scope, seen = /* @__PURE__ */ new Set()) {
+  const visit = (n) => {
+    if (ts.isIdentifier(n) && !seen.has(n.text)) {
+      seen.add(n.text);
+      const init = scope.inits?.get(n.text);
+      if (init) identifiersIn(init, scope, seen);
+    }
+    if (ts.isPropertyAccessExpression(n)) return visit(n.expression);
+    ts.forEachChild(n, visit);
+  };
+  visit(e);
+  return seen;
+}
+function toggledScope(scope, local) {
+  const vars = new Map(scope.vars);
+  for (const k of scope.inits?.keys() ?? []) vars.delete(k);
+  vars.set(local, scope.toggleValues?.get(local) ?? true);
+  return { ...scope, vars, locals: new Map(scope.inits ?? []) };
+}
+function toggleFor(cond, scope) {
+  if (!scope.toggles.size) return void 0;
+  const ids = identifiersIn(cond, scope);
+  const local = [...scope.toggles.keys()].find((k) => ids.has(k));
+  if (!local) return void 0;
+  const prop = scope.toggles.get(local);
+  const inner = toggledScope(scope, local);
+  if (!truthy(evaluate(cond, inner))) return void 0;
+  const off = { ...scope, vars: new Map(scope.vars), locals: new Map(scope.inits ?? []) };
+  for (const k of scope.inits?.keys() ?? []) off.vars.delete(k);
+  if (truthy(evaluate(cond, off))) return void 0;
+  const kind = scope.src.props.get(prop)?.kind;
+  const property = kind === "icon" ? sentenceCase(prop) : `Show ${sentenceCase(prop).toLowerCase()}`;
+  return { visible: { property, prop, ...scope.toggleOn?.has(prop) ? { on: true } : {} }, scope: inner };
+}
+function nameToggle(visible, nodes, scope) {
+  const cls = nodes[0]?.classes[0]?.split("|")[1];
+  if (scope.src.props.get(visible.prop)?.kind === "string" && cls) visible.property = `Show ${sentenceCase(cls).toLowerCase()}`;
+  return nodes;
 }
 function renderExpression(e, scope, ctx, visible) {
   if (ts.isParenthesizedExpression(e)) return renderExpression(e.expression, scope, ctx, visible);
   if (ts.isBinaryExpression(e) && e.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
-    const t = toggleOf(e.left, scope);
-    if (t) return renderExpression(e.right, scope, ctx, visible ?? t);
+    const t = visible ? void 0 : toggleFor(e.left, scope);
+    if (t) return nameToggle(t.visible, renderExpression(e.right, t.scope, ctx, t.visible), scope);
     return truthy(evaluate(e.left, scope)) ? renderExpression(e.right, scope, ctx, visible) : [];
   }
   if (ts.isConditionalExpression(e)) {
-    const t = toggleOf(e.condition, scope);
-    if (t) return renderExpression(e.whenTrue, scope, ctx, visible ?? t);
+    const t = visible || truthy(evaluate(e.whenFalse, scope)) ? void 0 : toggleFor(e.condition, scope);
+    if (t) return nameToggle(t.visible, renderExpression(e.whenTrue, t.scope, ctx, t.visible), scope);
     return renderExpression(truthy(evaluate(e.condition, scope)) ? e.whenTrue : e.whenFalse, scope, ctx, visible);
   }
   if (ts.isJsxElement(e) || ts.isJsxSelfClosingElement(e) || ts.isJsxFragment(e)) return renderJsx({ jsx: e, scope }, ctx, visible);
   const v = evaluate(e, scope);
-  if (v === CHILDREN) return [{ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: "Label", default: ctx.component, prop: "children" } }];
+  if (v === CHILDREN) {
+    if (scope.preview?.some((c) => typeof c !== "string")) return renderPreview(scope.preview, ctx);
+    return [{ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: "Label", default: ctx.component, prop: "children" } }];
+  }
+  if (isTextRef(v)) {
+    const property = v.textProp === "children" ? "Label" : sentenceCase(v.textProp);
+    return [{ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property, default: v.text, prop: v.textProp }, ...visible ? { visible } : {} }];
+  }
+  if (isChildrenRef(v)) return renderChildren(v.children, v.scope, ctx);
+  if (typeof v === "string" && v.trim()) return [{ ...textNode(v.trim(), v), ...visible ? { visible } : {} }];
+  if (typeof v === "string" && v) return [spaceNode(v)];
+  if (typeof v === "number") return [textNode(String(v))];
   if (isJsx(v)) return renderJsx(v, ctx, visible);
+  if (Array.isArray(v) || isElementValue(v)) return renderValues([v], ctx);
+  if (v === OPAQUE || isFnRef(v)) {
+    const mapped = renderMap(e, scope, ctx);
+    if (mapped) return mapped;
+    const fn = functionOf(e, scope);
+    if (fn && ctx.items) return renderValues(ctx.items.map((item) => callArrow(fn, [item], scope)), ctx);
+    if (fn && ctx.valueArgs) {
+      const out = callArrow(fn, ctx.valueArgs, scope);
+      if (out !== OPAQUE) return renderValues([out], ctx);
+    }
+    ctx.blockers?.push("shows content computed while the page runs");
+  }
   return [];
 }
-function renderComponent(reader, name, props, ctx, fnOverride) {
+function functionOf(e, scope) {
+  if (ts.isParenthesizedExpression(e)) return functionOf(e.expression, scope);
+  if (ts.isArrowFunction(e) || ts.isFunctionExpression(e)) return e;
+  if (ts.isIdentifier(e)) {
+    const init = scope.inits?.get(e.text) ?? scope.locals.get(e.text);
+    return init ? functionOf(init, scope) : void 0;
+  }
+  if (ts.isConditionalExpression(e)) {
+    const c = evaluate(e.condition, scope);
+    return c === OPAQUE ? void 0 : functionOf(truthy(c) ? e.whenTrue : e.whenFalse, scope);
+  }
+  return void 0;
+}
+const isElementValue = (v) => !!v && typeof v === "object" && "element" in v && "kids" in v;
+function elementNode(el, ctx) {
+  const node = { key: "", tag: el.element, classes: classList(el.props.className), children: [], kind: "frame" };
+  const kids = el.kids.length ? el.kids : el.props.children !== void 0 ? [el.props.children] : [];
+  for (const k of kids) {
+    if (k === CHILDREN) node.children.push({ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: "Label", default: ctx.component, prop: "children" } });
+    else if (isTextRef(k)) node.children.push({ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: k.textProp === "children" ? "Label" : sentenceCase(k.textProp), default: k.text, prop: k.textProp } });
+    else node.children.push(...renderValues([k], ctx));
+  }
+  return node;
+}
+function renderValues(list, ctx) {
+  const out = [];
+  for (const v of list) {
+    if (isElementValue(v)) out.push(elementNode(v, ctx));
+    else if (isChildrenRef(v)) out.push(...renderChildren(v.children, v.scope, ctx));
+    else if (isTextRef(v)) out.push({ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: v.textProp === "children" ? "Label" : sentenceCase(v.textProp), default: v.text, prop: v.textProp } });
+    else if (isJsx(v)) out.push(...renderJsx(v, ctx));
+    else if (Array.isArray(v)) out.push(...renderValues(v, ctx));
+    else if (typeof v === "string" && v.trim() || typeof v === "number") out.push(textNode(String(v).trim(), String(v)));
+    else if (typeof v === "string" && v) out.push(spaceNode(v));
+    else if (v === OPAQUE) ctx.blockers?.push("shows content computed while the page runs");
+  }
+  return out;
+}
+function renderMap(e, scope, ctx) {
+  if (!ts.isCallExpression(e) || !ts.isPropertyAccessExpression(e.expression) || e.expression.name.text !== "map") return void 0;
+  const list = evaluate(e.expression.expression, scope);
+  const fn = e.arguments[0];
+  if (!Array.isArray(list) || !fn || !(ts.isArrowFunction(fn) || ts.isFunctionExpression(fn))) return void 0;
+  const param = fn.parameters[0];
+  const out = [];
+  list.forEach((item, i) => {
+    const vars = new Map(scope.vars);
+    if (param && ts.isIdentifier(param.name)) vars.set(param.name.text, item);
+    else if (param && ts.isObjectBindingPattern(param.name) && item && typeof item === "object") {
+      for (const el of param.name.elements) if (ts.isIdentifier(el.name)) vars.set(el.name.text, item[(el.propertyName ?? el.name).getText(scope.src.sf)]);
+    }
+    const index = fn.parameters[1];
+    if (index && ts.isIdentifier(index.name)) vars.set(index.name.text, i);
+    const inner = { ...scope, vars, locals: new Map(scope.locals), inits: new Map(scope.inits ?? []) };
+    const body = fn.body;
+    if (ts.isBlock(body)) {
+      for (const st of body.statements) {
+        if (ts.isVariableStatement(st))
+          for (const d of st.declarationList.declarations) {
+            if (!ts.isIdentifier(d.name) || !d.initializer) continue;
+            inner.locals.set(d.name.text, d.initializer);
+            inner.inits.set(d.name.text, d.initializer);
+          }
+        if (ts.isReturnStatement(st) && st.expression) {
+          out.push(...renderExpression(st.expression, inner, ctx));
+          break;
+        }
+      }
+    } else out.push(...renderExpression(body, inner, ctx));
+  });
+  return out;
+}
+function previewElement(v, name) {
+  if (Array.isArray(v)) {
+    for (const x of v) {
+      const hit = previewElement(x, name);
+      if (hit) return hit;
+    }
+    return void 0;
+  }
+  if (!v || typeof v !== "object") return void 0;
+  const n = v;
+  if (n.c === name) return n;
+  return previewElement(n.children, name);
+}
+function storyElement(sf, name) {
+  if (!sf) return void 0;
+  const lucide = /* @__PURE__ */ new Set();
+  for (const st of sf.statements) {
+    if (!ts.isImportDeclaration(st) || unquote(st.moduleSpecifier.getText(sf)) !== "lucide-react") continue;
+    const b = st.importClause?.namedBindings;
+    if (b && ts.isNamedImports(b)) for (const e of b.elements) lucide.add(e.name.text);
+  }
+  const convert = (n) => {
+    const open = ts.isJsxElement(n) ? n.openingElement : n;
+    const p = {};
+    for (const a of open.attributes.properties) {
+      if (!ts.isJsxAttribute(a)) continue;
+      const key = a.name.getText(sf);
+      const init = a.initializer;
+      if (!init) p[key] = true;
+      else if (ts.isStringLiteral(init)) p[key] = init.text;
+      else if (ts.isJsxExpression(init) && init.expression) {
+        const e = init.expression;
+        if (ts.isStringLiteral(e) || ts.isNoSubstitutionTemplateLiteral(e)) p[key] = e.text;
+        else if (ts.isNumericLiteral(e)) p[key] = Number(e.text);
+        else if (e.kind === ts.SyntaxKind.TrueKeyword || e.kind === ts.SyntaxKind.FalseKeyword) p[key] = e.kind === ts.SyntaxKind.TrueKeyword;
+        else if (ts.isIdentifier(e) && lucide.has(e.text)) p[key] = e.text;
+      }
+    }
+    const children = [];
+    if (ts.isJsxElement(n))
+      for (const c of n.children) {
+        if (ts.isJsxText(c)) {
+          const t = c.text.replace(/\s+/g, " ").trim();
+          if (t) children.push(t);
+        } else if (ts.isJsxElement(c) || ts.isJsxSelfClosingElement(c)) children.push(convert(c));
+        else if (ts.isJsxExpression(c) && c.expression && (ts.isStringLiteral(c.expression) || ts.isNoSubstitutionTemplateLiteral(c.expression))) children.push(c.expression.text);
+      }
+    return { c: open.tagName.getText(sf), ...Object.keys(p).length ? { p } : {}, ...children.length ? { children } : {} };
+  };
+  let found;
+  const visit = (n) => {
+    if (found) return;
+    if ((ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n)) && (ts.isJsxElement(n) ? n.openingElement : n).tagName.getText(sf) === name) {
+      const el = convert(n);
+      if (el.children?.some((c) => typeof c !== "string")) found = el;
+    }
+    ts.forEachChild(n, visit);
+  };
+  visit(sf);
+  return found;
+}
+function previewProps(el) {
+  const out = {};
+  for (const [k, v] of Object.entries(el.p ?? {})) if (v !== null && v !== void 0) out[k] = jsonValue(v);
+  return out;
+}
+function jsonValue(v) {
+  if (typeof v === "string" || typeof v === "number" || typeof v === "boolean" || v === null) return v;
+  if (Array.isArray(v)) return v.map(jsonValue);
+  if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, jsonValue(x)]));
+  return void 0;
+}
+function renderPreview(children, ctx) {
+  const out = [];
+  for (const c of children) {
+    if (typeof c === "string") {
+      if (c.trim()) out.push(textNode(c.trim()));
+      continue;
+    }
+    if (!ctx.reader.exists(c.c) || ctx.depth >= 4) continue;
+    const kids = c.children ?? [];
+    let props = previewProps(c);
+    if (kids.length && kids.every((k) => typeof k === "string")) props.children = kids.join(" ");
+    else if (kids.length) props.children = CHILDREN;
+    props = withFormError(c.c, props, ctx);
+    const n = renderComponent(ctx.reader, c.c, props, { ...ctx, depth: ctx.depth + 1 }, void 0, kids.some((k) => typeof k !== "string") ? kids : void 0);
+    if (n) out.push(n);
+    else ctx.blockers?.push(`cannot draw its ${c.c} parts yet`);
+  }
+  return out;
+}
+function useRenderElement(fn, scope, ctx) {
+  if (!fn.body || !ts.isBlock(fn.body)) return void 0;
+  const ret = fn.body.statements.find(ts.isReturnStatement)?.expression;
+  if (!ret || !ts.isCallExpression(ret) || ret.expression.getText(scope.src.sf) !== "useRender" || !ret.arguments[0]) return void 0;
+  const opts = evaluate(ret.arguments[0], scope);
+  const tag = typeof opts?.defaultTagName === "string" ? opts.defaultTagName : "div";
+  const props = opts?.props && typeof opts.props === "object" ? opts.props : {};
+  return [elementNode({ element: tag, props, kids: [] }, ctx)];
+}
+function renderComponent(reader, name, props, ctx, fnOverride, preview) {
   const src = reader.load(name);
   const fn = fnOverride ?? src?.fn;
   if (!src || !fn) return void 0;
-  const scope = { src, vars: /* @__PURE__ */ new Map(), locals: /* @__PURE__ */ new Map(), toggles: /* @__PURE__ */ new Map(), main: ctx.depth === 0 };
-  const names = bindProps(fn, scope, props);
+  const scope = { src, vars: /* @__PURE__ */ new Map(), locals: /* @__PURE__ */ new Map(), toggles: /* @__PURE__ */ new Map(), main: ctx.depth === 0, inits: /* @__PURE__ */ new Map(), ...preview ? { preview } : {}, ...ctx.contexts ? { contexts: ctx.contexts } : {} };
+  const given = { ...props };
+  if (!scope.main) {
+    const on = (k) => props[k] === true;
+    scope.checked = on("indeterminate") ? "mixed" : on("checked") || on("defaultChecked") ? "true" : "false";
+  }
   if (scope.main) {
-    for (const [local, prop] of names) if (src.props.get(prop)?.kind === "icon" && src.props.get(prop)?.optional) scope.toggles.set(local, prop);
+    for (const p of src.props.values()) {
+      if (given[p.name] !== void 0 || p.name === "children") continue;
+      if (p.kind === "node" && !p.optional) given[p.name] = { textProp: p.name, text: sentenceCase(p.name) };
+      if (p.kind === "string" && !p.optional) given[p.name] = sentenceCase(p.name);
+    }
+  }
+  const names = bindProps(fn, scope, given);
+  if (scope.main) {
+    scope.toggleValues = /* @__PURE__ */ new Map();
+    for (const [local, prop] of names) {
+      const info = src.props.get(prop);
+      if (!info?.optional || given[prop] !== void 0) continue;
+      if (info.kind === "icon") scope.toggles.set(local, prop);
+      else if (info.kind === "node" && prop !== "children") {
+        scope.toggles.set(local, prop);
+        scope.toggleValues.set(local, { textProp: prop, text: sentenceCase(prop) });
+      } else if (info.kind === "string") {
+        scope.toggles.set(local, prop);
+        const example = ctx.examples?.[prop];
+        scope.toggleValues.set(local, typeof example === "string" ? example : sentenceCase(prop));
+        if (typeof example === "string") (scope.toggleOn ??= /* @__PURE__ */ new Set()).add(prop);
+      }
+    }
   }
   const jsx = renderedJsx(fn, scope);
-  if (!jsx) return void 0;
-  const nodes = renderJsx(jsx, ctx);
+  const nodes = jsx ? renderJsx(jsx, ctx) : useRenderElement(fn, scope, ctx);
+  if (!nodes) return void 0;
   return nodes.length === 1 ? nodes[0] : nodes.length ? { key: "", tag: "div", classes: [], children: nodes, kind: "frame" } : void 0;
 }
-function collapseText(n, root = true) {
-  n.children = n.children.map((c) => collapseText(c, false));
-  if (!root && n.tag === "span" && !n.name && n.kind === "frame" && n.children.length === 1 && n.children[0].kind === "text" && !n.children[0].classes.length && !n.children[0].inputLike) {
+function collapseText(n, root = true, boxed = () => false, unseen = () => false) {
+  n.children = n.children.map((c) => collapseText(c, false, boxed, unseen));
+  const seen = n.children.filter((c) => !unseen(c));
+  if (seen.length < n.children.length && seen.length && /^(span|p|label|small|strong|em|code)$/.test(n.tag)) n.children = seen;
+  const run = (c) => c.kind === "text" && c.chars !== void 0 && !c.visible ? c.raw ?? c.chars : c.tag === "span" && c.kind === "frame" && !c.visible && c.children.length === 1 ? run(c.children[0]) : void 0;
+  if (n.kind === "frame" && n.children.filter((c) => !c.space).length > 1 && /^(span|p|label|small|strong|em|code)$/.test(n.tag) && n.children.every((c) => run(c) !== void 0)) {
+    let chars = "";
+    n.children.forEach((c, i) => {
+      const text = run(c);
+      const prev = n.children[i - 1];
+      if (prev) {
+        const before = run(prev);
+        chars += /\s$/.test(before) || /^\s/.test(text) || prev.tag === "#text" && c.tag === "#text" ? "" : " ";
+      }
+      chars += text;
+    });
+    n.children = [{ ...textNode(chars.replace(/\s+/g, " ").trim()) }];
+  }
+  n.children = n.children.filter((c) => !c.space);
+  if (!root && n.tag === "span" && !n.name && n.kind === "frame" && n.children.length === 1 && n.children[0].kind === "text" && !n.children[0].classes.length && !n.children[0].inputLike && !boxed(n)) {
     const t = n.children[0];
     return { ...t, tag: n.tag, classes: n.classes, ...n.visible ? { visible: n.visible } : {} };
   }
   return n;
 }
-function build(reader, src, props) {
-  const root = renderComponent(reader, src.name, { ...props, children: CHILDREN }, { reader, depth: 0, component: src.name });
+function applyView(root, view) {
+  if (!view) return root;
+  const isPortal = (n) => /\.Portal$/.test(n.tag);
+  if (view === "without-popup") {
+    const strip2 = (n) => ({ ...n, children: n.children.filter((c) => !isPortal(c)).map(strip2) });
+    return isPortal(root) ? void 0 : strip2(root);
+  }
+  let found;
+  const find = (n, inPortal) => {
+    if (found) return;
+    if (inPortal && /\.Popup$/.test(n.tag)) found = n;
+    for (const c of n.children) find(c, inPortal || isPortal(n));
+  };
+  find(root, false);
+  const strip = (n) => ({ ...n, children: n.children.filter((c) => !isPortal(c)).map(strip) });
+  return found ? strip({ ...found, visible: void 0 }) : void 0;
+}
+function build(reader, src, props, preview, view, rules = [], tokens, examples) {
+  const blockers = [];
+  const selected = typeof props.defaultValue === "string" ? props.defaultValue : 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;
+  const overlay = (n) => POPUP_PART.test(n.tag) || /\.Portal$/.test(n.tag);
+  while (root.children.length === 1 && !root.classes.length && !root.attrs && root.kind === "frame" && !overlay(root) && root.children[0].kind === "frame" && !root.children[0].visible && !overlay(root.children[0]))
+    root = root.children[0];
   if (root.takesChildren && !root.children.length && src.subcomponents.length) {
+    root.fromExports = true;
     for (const sub of src.subcomponents) {
       const label = sub.name.slice(src.name.length);
-      const n = renderComponent(reader, src.name, {}, { reader, depth: 1, component: src.name }, sub.fn);
+      const n = renderComponent(reader, src.name, {}, { reader, depth: 1, component: src.name, blockers }, sub.fn);
       if (!n) continue;
       n.name = label;
       if (n.takesChildren && !n.children.length) n.children = [{ key: "", tag: "#text", classes: [], children: [], kind: "text", text: { property: label, default: label } }];
       root.children.push(n);
     }
   }
-  const tree = collapseText(root);
+  const follow = (n, inherited) => {
+    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);
+  };
+  follow(root, void 0);
+  decorate(root, rules, tokens);
+  const boxed = (n) => {
+    const el = { tag: n.tag, classes: new Set(n.classes), children: [], present: true, isRoot: false, inputLike: false };
+    const d = declaredFor(rules, el, DEFAULT_STATE);
+    const set = (k) => d.has(k) && !/^(0|0px|none|transparent)$/.test(d.get(k).value.trim());
+    return ["background-color", "border-top-width", "padding-left", "padding-top"].some(set);
+  };
+  const unseen = (n) => {
+    if (n.kind !== "frame" && n.kind !== "text") return false;
+    const el = { tag: n.tag, classes: new Set(n.classes), children: [], present: true, isRoot: false, inputLike: false };
+    return visuallyHidden(new Map([...declaredFor(rules, el, DEFAULT_STATE)].map(([k, d]) => [k, d.value])));
+  };
+  const tree = collapseText(root, true, boxed, unseen);
   const parts = /* @__PURE__ */ new Map();
   const parents = /* @__PURE__ */ new Map();
   const used = /* @__PURE__ */ new Set();
@@ -1102,7 +2023,7 @@ function build(reader, src, props) {
     else if (n.text && n.kind === "text" && !n.placeholder) base = n.text.prop === "children" ? "text" : `${slug(n.text.property)}-text`;
     else if (n.placeholder) base = "placeholder";
     else if (n.name) base = slug(n.name);
-    else base = slug(n.classes[0]?.split("|")[1] ?? n.tag) || "part";
+    else base = slug(n.classes[0]?.split("|")[1] ?? (n.chars !== void 0 ? "text" : n.tag)) || "part";
     let id = base;
     for (let i = 2; used.has(id); i++) id = `${base}-${i}`;
     used.add(id);
@@ -1112,14 +2033,94 @@ function build(reader, src, props) {
     for (const c of n.children) assign(c, id);
   };
   assign(tree, void 0);
-  return { root: tree, parts, parents };
+  return { root: tree, parts, parents, blockers };
+}
+function cssElements(root) {
+  const out = /* @__PURE__ */ new Map();
+  const make = (n, parent) => {
+    const el = {
+      tag: n.tag,
+      classes: new Set(n.classes),
+      parent,
+      children: [],
+      present: (!n.visible || !!n.visible.on) && !n.pseudo,
+      isRoot: !parent,
+      inputLike: !!n.inputLike,
+      ...n.baseUi ? { baseUi: true, checked: n.checked } : {},
+      ...n.attrs ? { attrs: n.attrs } : {}
+    };
+    out.set(n, el);
+    el.children = n.children.map((c) => make(c, el));
+    return el;
+  };
+  make(root, void 0);
+  return out;
+}
+const declaredVarCache = /* @__PURE__ */ new WeakMap();
+function declaredVars(rules) {
+  let s = declaredVarCache.get(rules);
+  if (!s) {
+    s = new Set(rules.flatMap((r) => r.decls.filter((d) => d.prop.startsWith("--")).map((d) => d.prop)));
+    declaredVarCache.set(rules, s);
+  }
+  return s;
+}
+function runtimeVar(raw, rules, tokens) {
+  const m = raw ? /^var\(\s*(--[\w-]+)\s*\)$/.exec(raw.trim()) : null;
+  return !!m && !declaredVars(rules).has(m[1]) && !tokens?.has(m[1]);
+}
+const PSEUDO_PAINTS = ["background-color", "border-top-width", "border-bottom-width", "border-left-width", "border-right-width"];
+function decorate(root, rules, tokens) {
+  if (!rules.length) return;
+  const els = cssElements(root);
+  const visit = (n, parent) => {
+    for (const c of [...n.children]) visit(c, n);
+    if (n.kind !== "frame" || n.svgAttrs || n.pseudo) return;
+    const el = els.get(n);
+    if (n.baseUi && n.whenChecked && /\.Indicator$/.test(n.tag) && parent) {
+      const d = declaredFor(rules, el, DEFAULT_STATE);
+      if (["left", "top", "width", "height"].some((k) => runtimeVar(d.get(k)?.value, rules, tokens))) {
+        const item = parent.children.find((s) => s !== n && s.baseUi && s.selectedBy && s.checked === "true");
+        if (item) {
+          parent.children.splice(parent.children.indexOf(n), 1);
+          item.children.unshift(n);
+          n.follows = true;
+          delete n.whenChecked;
+        }
+      }
+    }
+    for (const pseudo of ["before", "after"]) {
+      const d = declaredFor(rules, el, DEFAULT_STATE, pseudo);
+      if (!/^(""|'')$/.test(d.get("content")?.value.trim() ?? "")) continue;
+      if (!PSEUDO_PAINTS.some((k) => d.has(k) && !/^(0|none|transparent)$/.test(d.get(k).value.trim()))) continue;
+      const deco = { key: "", tag: `::${pseudo}`, classes: [], children: [], kind: "frame", pseudo, name: "Decoration" };
+      if (pseudo === "before" || /^-/.test(d.get("z-index")?.value.trim() ?? "")) n.children.unshift(deco);
+      else n.children.push(deco);
+    }
+  };
+  visit(root, void 0);
 }
 function toCssTree(b) {
   const els = /* @__PURE__ */ new Map();
   const make = (n, parent) => {
-    const el = { tag: n.tag, classes: new Set(n.classes), parent, children: [], present: !n.visible, isRoot: !parent, inputLike: !!n.inputLike };
+    const el = {
+      tag: n.tag,
+      classes: new Set(n.classes),
+      parent,
+      children: [],
+      present: (!n.visible || !!n.visible.on) && !n.pseudo,
+      isRoot: !parent,
+      inputLike: !!n.inputLike,
+      ...n.baseUi ? { baseUi: true, checked: n.checked } : {},
+      ...n.attrs ? { attrs: n.attrs } : {}
+    };
     els.set(n.key, el);
     el.children = n.children.map((c) => make(c, el));
+    for (const [i, shape] of (n.shapes ?? []).entries()) {
+      const sel = { tag: shape.tag, classes: new Set(shape.classes), parent: el, children: [], present: true, isRoot: false, inputLike: false };
+      els.set(`${n.key}#shape-${i}`, sel);
+      el.children.push(sel);
+    }
     return el;
   };
   make(b.root, void 0);
@@ -1145,6 +2146,14 @@ function resolveValue(raw, values, tokens, depth = 0, parent, forColor = false)
     return { unmapped: `${name} is not a token` };
   }
   if (/^calc\(/i.test(v)) return calcValue(v, values, tokens, depth, parent);
+  const mm = /^min\(([\s\S]+)\)$/i.exec(v);
+  if (mm) {
+    for (const arg of splitTop(mm[1], ",")) {
+      const r = resolveValue(arg, values, tokens, depth + 1, parent, forColor);
+      if (r && r.unmapped === void 0 && typeof r.value === "string") return r;
+    }
+    return { unmapped: "min() of no token" };
+  }
   if (v === "100%") return { unmapped: "fills its container: Figma draws it at a fixed width" };
   if (/%$/.test(v)) return { unmapped: "relative size: the Figma part hugs its content" };
   return { unmapped: "literal value, not a token" };
@@ -1158,7 +2167,7 @@ function calcValue(v, values, tokens, depth, parent) {
       failed ??= r?.unmapped ?? `${m} has no value`;
       return "0";
     }
-    if (r.value === 0) return "0";
+    if (typeof r.value === "number") return String(r.value);
     return r.value.startsWith("calc(") ? `(${r.value.slice(5, -1)})` : r.value;
   });
   if (failed) return { unmapped: `calc(): ${failed}` };
@@ -1194,6 +2203,7 @@ const TEXT_FIELDS = [
   ["line-height", "lineHeight"],
   ["letter-spacing", "letterSpacing"]
 ];
+const NUMBER_FIELDS = /* @__PURE__ */ new Set(["strokeWeight", "opacity"]);
 const SIDE_FIELDS = { top: "strokeTopWeight", right: "strokeRightWeight", bottom: "strokeBottomWeight", left: "strokeLeftWeight" };
 const typeCache = /* @__PURE__ */ new WeakMap();
 function typesOf(tokens) {
@@ -1205,14 +2215,30 @@ function typesOf(tokens) {
   return m;
 }
 function expectedTypes(field) {
+  if (field === "textDecoration") return ["keyword"];
   if (COLOR_FIELDS.has(field)) return ["color"];
   if (field === "fontFamily") return ["fontFamily"];
   if (field === "fontWeight") return ["fontWeight", "number"];
+  if (field === "opacity") return ["number"];
   return ["dimension", "number"];
 }
 function partValues(node, computed, own, tokens, parent) {
   const out = { values: {}, unmapped: [] };
   const set = (field, prop, raw, skipZero = false) => {
+    if (raw !== void 0 && NUMBER_FIELDS.has(field) && /^-?(\d+\.?\d*|\.\d+)$/.test(raw.trim())) {
+      out.values[field] = Number(raw.trim());
+      return;
+    }
+    const em = raw !== void 0 ? /^(\d*\.?\d+)em$/.exec(raw.trim()) : null;
+    if (em) {
+      const base = prop === "font-size" ? parent?.get("font-size") : computed.get("font-size");
+      const b = resolveValue(base, prop === "font-size" ? parent ?? /* @__PURE__ */ new Map() : computed, tokens, 0, parent);
+      if (b && typeof b.value === "string" && !b.value.startsWith("calc(")) {
+        const n = Number(em[1]);
+        out.values[field] = n === 1 ? b.value : `calc(${b.value} * ${n})`;
+        return;
+      }
+    }
     const r = resolveValue(raw, computed, tokens, 0, parent, prop === "color");
     if (!r) return;
     if (r.unmapped) {
@@ -1230,8 +2256,17 @@ function partValues(node, computed, own, tokens, parent) {
     }
     out.values[field] = r.value;
   };
+  const opacity = own.get("opacity");
+  const setOpacity = () => {
+    if (opacity !== void 0 && !/^(0|1|1\.0+)$/.test(opacity.trim())) set("opacity", "opacity", opacity);
+  };
   if (node.kind === "text") {
     for (const [prop, field] of TEXT_FIELDS) set(field, prop, computed.get(prop));
+    const line = computed.get("text-decoration-line") ?? "";
+    const lineColor = (computed.get("text-decoration-color") ?? "").trim().toLowerCase();
+    const keyword = /underline/.test(line) ? "UNDERLINE" : /line-through/.test(line) ? "STRIKETHROUGH" : void 0;
+    if (keyword && lineColor !== "transparent") out.values.textDecoration = keyword;
+    setOpacity();
     return out;
   }
   if (node.kind === "icon") {
@@ -1239,9 +2274,14 @@ function partValues(node, computed, own, tokens, parent) {
     set("height", "height", computed.get("height"));
     set("stroke", "color", computed.get("color"));
     set("strokeWeight", "stroke-width", computed.get("stroke-width"));
+    setOpacity();
     return out;
   }
-  for (const [prop, field] of FRAME_FIELDS) set(field, prop, computed.get(prop), field === "minWidth" || field === "minHeight");
+  setOpacity();
+  const layout = layoutOf(computed);
+  const gap = computed.get(layout.direction === "HORIZONTAL" ? "column-gap" : "row-gap");
+  for (const [prop, field] of FRAME_FIELDS) set(field, prop, field === "itemSpacing" ? gap : computed.get(prop), field === "minWidth" || field === "minHeight");
+  if (layout.wrap) set("counterAxisSpacing", "row-gap", computed.get("row-gap"));
   const widths = ["top", "right", "bottom", "left"].map((s) => computed.get(`border-${s}-width`));
   const colors = ["top", "right", "bottom", "left"].map((s) => computed.get(`border-${s}-color`));
   const present = widths.map((w) => w !== void 0 && !isZero(w));
@@ -1259,7 +2299,23 @@ function partValues(node, computed, own, tokens, parent) {
   }
   return out;
 }
+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";
 function layoutOf(computed) {
+  const shown = computed.get("display");
+  if (shown === "table-row") return { direction: "HORIZONTAL", primary: "MIN", counter: "STRETCH" };
+  if (shown === "table-cell") {
+    const va = computed.get("vertical-align") ?? "middle";
+    const ta = computed.get("text-align") ?? "start";
+    return { direction: "VERTICAL", primary: /middle/.test(va) ? "CENTER" : /bottom/.test(va) ? "MAX" : "MIN", counter: /center/.test(ta) ? "CENTER" : /(end|right)/.test(ta) ? "MAX" : "MIN" };
+  }
+  if (singleCellGrid(computed)) {
+    const align2 = computed.get("align-items") ?? "stretch";
+    const justify2 = computed.get("justify-items") ?? "stretch";
+    const at = (v) => /center/.test(v) ? "CENTER" : /end/.test(v) ? "MAX" : "MIN";
+    return { direction: "VERTICAL", primary: at(align2), counter: /stretch|normal/.test(justify2) ? "STRETCH" : at(justify2) };
+  }
   const dir = computed.get("flex-direction") ?? "row";
   const display = computed.get("display") ?? "block";
   const flex = /flex/.test(display);
@@ -1267,48 +2323,267 @@ function layoutOf(computed) {
   const align = computed.get("align-items") ?? "normal";
   const primary = /center/.test(justify) ? "CENTER" : /space-between/.test(justify) ? "SPACE_BETWEEN" : /end/.test(justify) ? "MAX" : "MIN";
   const counter = /center/.test(align) ? "CENTER" : /end/.test(align) ? "MAX" : /stretch|normal/.test(align) && flex ? "STRETCH" : "MIN";
-  return { direction: flex && !/column/.test(dir) ? "HORIZONTAL" : "VERTICAL", primary, counter: flex ? counter : "STRETCH" };
+  return {
+    direction: flex && !/column/.test(dir) ? "HORIZONTAL" : "VERTICAL",
+    primary,
+    counter: flex ? counter : "STRETCH",
+    ...flex && /reverse/.test(dir) ? { reverse: true } : {},
+    ...flex && !/column/.test(dir) && /^wrap/.test(computed.get("flex-wrap") ?? "") ? { wrap: true } : {}
+  };
+}
+function grows(c) {
+  const flex = c?.get("flex")?.trim();
+  const grow = c?.get("flex-grow") ?? (flex && /^\d/.test(flex) ? flex.split(/\s+/)[0] : flex === "auto" ? "1" : void 0);
+  return grow !== void 0 && Number(grow) >= 1;
+}
+function shrinksToFit(n, c, parent) {
+  return n.kind === "frame" && parent?.direction === "HORIZONTAL" && !parent.wrap && /^0(px)?$/.test(c?.get("min-width")?.trim() ?? "") && c?.get("flex-shrink")?.trim() !== "0" && !/^(none|0 0)/.test(c?.get("flex")?.trim() ?? "");
 }
 const clips = (c) => /^(hidden|clip)\b/.test(c?.get("overflow") ?? c?.get("overflow-x") ?? "");
-function fillsContainer(c) {
+const INLINE_TAGS = /* @__PURE__ */ new Set(["a", "span", "label", "kbd", "code", "em", "strong", "b", "i", "small", "abbr", "button", "input", "textarea", "select", "img"]);
+function fillsContainer(c, tag = "div") {
   if (!c) return false;
   if (c.get("width") === "100%") return true;
-  const display = c.get("display") ?? "block";
+  const display = c.get("display") ?? (INLINE_TAGS.has(tag) ? "inline" : "block");
   return /^(block|flex|grid|flow-root)$/.test(display);
 }
-function evaluateVariant(reader, src, rules, props, state, tokens) {
-  const built = build(reader, src, props);
+class UnsupportedComponentError extends Error {
+  constructor(component, reason) {
+    super(`${component}: ${reason}`);
+    this.component = component;
+    this.reason = reason;
+  }
+  component;
+  reason;
+}
+function svgVector(node, id, els, rules, state, computed, tokens) {
+  const esc = (v) => v.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  const num = (raw, values) => {
+    if (raw === void 0) return void 0;
+    const t = raw.trim();
+    if (/^-?\d*\.?\d+$/.test(t)) return Number(t);
+    const sub = t.replace(/var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\)/g, (_m, name, fb) => values.get(name) ?? fb ?? "NaN");
+    if (/^calc\(/.test(sub) && /^[\d\s.+\-*/()calc]+$/.test(sub)) {
+      try {
+        const n = Number(new Function(`return (${sub.replace(/calc/g, "")});`)());
+        return Number.isFinite(n) ? n : void 0;
+      } catch {
+        return void 0;
+      }
+    }
+    return void 0;
+  };
+  const strokes = [];
+  const shapes = [];
+  for (const [i, shape] of (node.shapes ?? []).entries()) {
+    const el = els.get(`${id}#shape-${i}`);
+    const own = new Map([...declaredFor(rules, el, state)].map(([k, d]) => [k, d.value]));
+    const c = computeValues(declaredFor(rules, el, state), computed);
+    const attrs = { ...shape.svgAttrs };
+    const fill = own.get("fill") ?? attrs.fill;
+    if (fill && !/^(none|transparent)$/.test(fill)) return { blocker: "draws SVG shapes with fills" };
+    const strokeRaw = own.get("stroke") ?? attrs.stroke ?? node.svgAttrs?.stroke ?? "currentcolor";
+    const color = resolveValue(strokeRaw, c, tokens, 0, computed, false);
+    if (!color || color.unmapped !== void 0 || color.value === void 0) return { blocker: "draws SVG shapes in colors that are not tokens" };
+    strokes.push(color.value);
+    const out = { ...attrs, fill: "none", stroke: "#000000" };
+    const width = num(own.get("stroke-width") ?? attrs["stroke-width"] ?? attrs.strokeWidth, c);
+    if (width !== void 0) out["stroke-width"] = String(width);
+    const opacity = num(own.get("opacity"), c);
+    if (opacity !== void 0 && opacity !== 1) out.opacity = String(opacity);
+    const cap = own.get("stroke-linecap");
+    if (cap) out["stroke-linecap"] = cap;
+    const pathLength = num(attrs.pathLength, c);
+    const r = num(attrs.r, c);
+    const scale = pathLength && r !== void 0 ? 2 * Math.PI * r / pathLength : 1;
+    const dash = own.get("stroke-dasharray");
+    if (dash) {
+      const parts = splitTop(dash, /\s|,/).map((x) => num(x, c));
+      if (parts.some((x) => x === void 0)) return { blocker: "draws SVG shapes with dashes it cannot read" };
+      out["stroke-dasharray"] = parts.map((x) => +(x * scale).toFixed(3)).join(" ");
+    }
+    const offset = own.get("stroke-dashoffset");
+    if (offset) {
+      const o = num(offset, c);
+      if (o === void 0) return { blocker: "draws SVG shapes with dashes it cannot read" };
+      out["stroke-dashoffset"] = String(+(o * scale).toFixed(3));
+    }
+    delete out.pathLength;
+    delete out.strokeWidth;
+    delete out.key;
+    shapes.push(`<${shape.tag} ${Object.entries(out).map(([k, v]) => `${k}="${esc(v)}"`).join(" ")}/>`);
+  }
+  if (!shapes.length) return { blocker: "draws SVG it cannot read" };
+  const viewBox = node.svgAttrs?.viewBox ?? "0 0 24 24";
+  const [, , w, h] = viewBox.split(/\s+/).map(Number);
+  const rot = /^rotate\((-?\d+(?:\.\d+)?)deg\)$/.exec(computed.get("transform")?.trim() ?? "");
+  const body = rot ? `<g transform="rotate(${rot[1]} ${(w ?? 24) / 2} ${(h ?? 24) / 2})">${shapes.join("")}</g>` : shapes.join("");
+  return { svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${w ?? 24}" height="${h ?? 24}" viewBox="${viewBox}" fill="none">${body}</svg>`, strokes };
+}
+const POPUP_PART = /\.(Portal|Popup|Positioner|Backdrop|Viewport)$/;
+function translateX(transform) {
+  const m = /^translateX\(([\s\S]+)\)$/.exec(transform?.trim() ?? "");
+  return m?.[1]?.trim();
+}
+const visuallyHidden = (own) => /inset\(50%\)/.test(own.get("clip-path") ?? "") || /rect\(0/.test(own.get("clip") ?? "");
+function evaluateVariant(reader, src, rules, props, state, tokens, preview, page, view, examples) {
+  const built = build(reader, src, props, preview, view, rules, tokens, examples);
   if (!built) return void 0;
   const els = toCssTree(built);
+  const gridRows = /* @__PURE__ */ new Map();
+  const gridGrow = /* @__PURE__ */ new Set();
   const computedById = /* @__PURE__ */ new Map();
+  const ownById = /* @__PURE__ */ new Map();
   const values = {};
   const unmapped = [];
   const layouts = /* @__PURE__ */ new Map();
+  const hidden = /* @__PURE__ */ new Set();
+  const cover = /* @__PURE__ */ new Set();
+  const pins = /* @__PURE__ */ new Map();
+  const vectors = /* @__PURE__ */ new Map();
+  const stretch = /* @__PURE__ */ new Map();
+  const blockers = [...built.blockers];
   for (const [id, node] of built.parts) {
     const el = els.get(id);
     const parentId = built.parents.get(id);
-    const own = declaredFor(rules, el, state);
-    let computed = computeValues(own, parentId ? computedById.get(parentId) : void 0);
+    const own = node.pseudo && el.parent ? declaredFor(rules, el.parent, state, node.pseudo) : declaredFor(rules, el, state);
+    if (node.follows) {
+      for (const [k, far] of [["left", ""], ["top", ""], ["width", "right"], ["height", "bottom"]]) {
+        const d = own.get(k);
+        if (!d || !runtimeVar(d.value, rules, tokens)) continue;
+        if (far) {
+          own.delete(k);
+          own.set(far, { ...d, prop: far, value: "0" });
+        } else own.set(k, { ...d, value: "0" });
+      }
+    }
+    let computed = computeValues(own, parentId ? computedById.get(parentId) : page);
+    for (const [k, v] of node.styleVars ?? []) computed.set(k, v);
+    if (!computed.has("display") && TABLE_DISPLAY[node.tag]) computed.set("display", TABLE_DISPLAY[node.tag]);
+    if (computed.get("display") === "table-cell" && resolveValue(computed.get("width"), computed, tokens) === void 0 || gridGrow.has(id)) computed.set("flex-grow", "1");
     const ownValues = new Map([...own].map(([k, d]) => [k, d.value]));
-    if (node.placeholder) {
-      const ph = declaredFor(rules, el, state, "placeholder");
+    if (node.placeholder && el.parent) {
+      const ph = declaredFor(rules, el.parent, state, "placeholder");
       computed = computeValues(ph, computed);
     }
     computedById.set(id, computed);
-    const pv = partValues(node, computed, ownValues, tokens, parentId ? computedById.get(parentId) : void 0);
+    ownById.set(id, ownValues);
+    if (POPUP_PART.test(node.tag) && parentId !== void 0) blockers.push("opens a popup");
+    const parentHidden = parentId !== void 0 && hidden.has(parentId);
+    const transform = ownValues.get("transform");
+    if (parentHidden || computed.get("display") === "none" || computed.get("visibility") === "hidden" || /^0(\.0+)?$/.test(ownValues.get("opacity")?.trim() ?? "") || /scale\(0\)/.test(transform ?? "") || visuallyHidden(ownValues) || node.inactive || node.whenChecked && !/^(true|mixed)$/.test((node.checked === "state" ? state.checked : node.checked) ?? ""))
+      hidden.add(id);
+    const pv = partValues(node, computed, ownValues, tokens, parentId ? computedById.get(parentId) : page);
     values[id] = pv.values;
+    if (node.svgAttrs && node.tag === "svg") {
+      const vec = svgVector(node, id, els, rules, state, computed, tokens);
+      if ("blocker" in vec) blockers.push(vec.blocker);
+      else vectors.set(id, vec);
+    }
+    if (node.kind === "frame") layouts.set(id, node.inputLike && node.tag !== "textarea" ? { direction: "HORIZONTAL", primary: "MIN", counter: "CENTER" } : layoutOf(computed));
+    let gridDrawn = false;
+    if (node.kind === "frame" && /grid/.test(computed.get("display") ?? "") && !singleCellGrid(computed)) {
+      const kids = [...built.parts].filter(([cid]) => built.parents.get(cid) === id);
+      const tracks = computed.get("grid-template-columns")?.trim();
+      const parentGrid = parentId ? gridRows.get(parentId) : void 0;
+      if (tracks === "subgrid" && parentGrid) {
+        gridDrawn = true;
+        layouts.set(id, { direction: "HORIZONTAL", primary: "MIN", counter: gridCounter(computed.get("align-items")) });
+        const gap = parentGrid.gap === void 0 ? void 0 : resolveValue(parentGrid.gap, computedById.get(parentId) ?? /* @__PURE__ */ new Map(), tokens);
+        const g = gap && gap.unmapped === void 0 && gap.value !== null ? gap.value : void 0;
+        if (g !== void 0) {
+          pv.values.itemSpacing = g;
+          if (/^0(px)?$/.test(parentGrid.tracks[0] ?? "")) pv.values.paddingLeft = g;
+          if (/^0(px)?$/.test(parentGrid.tracks[parentGrid.tracks.length - 1] ?? "")) pv.values.paddingRight = g;
+        }
+        for (const [cid] of kids) {
+          const start = Number(/^\s*(\d+)/.exec(declaredFor(rules, els.get(cid), state).get("grid-column-start")?.value ?? declaredFor(rules, els.get(cid), state).get("grid-column")?.value ?? "")?.[1]);
+          if (start && /fr\)?$/.test(parentGrid.tracks[start - 1] ?? "")) gridGrow.add(cid);
+        }
+        unmapped.push({ part: id, property: "grid-template-columns", value: "subgrid", reason: "columns line up across rows in code; in Figma each row sizes its own" });
+      } else if (tracks && tracks !== "none" && tracks !== "subgrid" && kids.length && kids.every(([cid]) => /^1\s*\/\s*-1$/.test(declaredFor(rules, els.get(cid), state).get("grid-column")?.value.trim() ?? ""))) {
+        gridDrawn = true;
+        gridRows.set(id, { tracks: splitTop(tracks, /\s/).filter(Boolean), gap: computed.get("column-gap") });
+        layouts.set(id, { direction: "VERTICAL", primary: "MIN", counter: "STRETCH" });
+      }
+    }
+    if (hidden.has(id)) continue;
+    for (const pseudo of ["before", "after"]) {
+      if (node.children.some((c) => c.pseudo === pseudo)) continue;
+      const d = declaredFor(rules, el, state, pseudo);
+      const paints = [...PSEUDO_PAINTS, "box-shadow"].some((k) => d.has(k) && !/^(0|none|transparent)$/.test(d.get(k).value));
+      if (d.has("content") && paints) blockers.push("draws with ::before or ::after");
+    }
+    if (node.kind === "frame" && !node.children.length && !node.inputLike && !node.media && !node.svgAttrs && Object.values(pv.values).every((x) => x === 0 || x === null || x === void 0))
+      blockers.push("has parts whose content the generator cannot read yet");
+    if (/grid/.test(computed.get("display") ?? "") && !singleCellGrid(computed) && !gridDrawn) blockers.push("uses CSS grid");
+    if (node.fraction !== void 0 && ownValues.get("height") === void 0) stretch.set(id, { ...stretch.get(id), height: true });
+    if (node.inlineFill) unmapped.push({ part: id, property: "background-color", value: node.inlineFill, reason: "the token's own color, from the content: not bound, set it on each instance" });
+    const position = ownValues.get("position");
+    const full = ownValues.get("width") === "100%" && ownValues.get("height") === "100%";
+    const pVals = parentId ? values[parentId] : void 0;
+    const inset = ["top", "right", "bottom", "left"].every((k) => /^0(px)?$/.test(ownValues.get(k) ?? ""));
+    if (parentId && (position === "absolute" && (inset || full) || position !== "absolute" && full && pVals?.width !== void 0 && pVals?.height !== void 0)) {
+      cover.add(id);
+      delete pv.values.width;
+      delete pv.values.height;
+      pv.unmapped = pv.unmapped.filter((u) => u.property !== "width" && u.property !== "height");
+    } else if (parentId && position !== "absolute" && (ownValues.get("width") === "100%" || ownValues.get("height") === "100%")) {
+      stretch.set(id, { ...ownValues.get("width") === "100%" ? { width: true } : {}, ...ownValues.get("height") === "100%" ? { height: true } : {} });
+      pv.unmapped = pv.unmapped.filter((u) => !((u.property === "width" || u.property === "height") && u.value === "100%"));
+      for (const k of ["width", "height"]) if (ownValues.get(k) === "100%") delete pv.values[k];
+    } else if (parentId && position === "absolute") {
+      const pin = {};
+      let ok = true;
+      for (const side of ["top", "right", "bottom", "left"]) {
+        const raw = ownValues.get(side);
+        if (raw === void 0 || raw === "auto") continue;
+        const r = resolveValue(raw, computed, tokens);
+        if (!r || r.unmapped !== void 0 || r.value === null || r.value === void 0) ok = false;
+        else pin[side] = r.value;
+      }
+      if (ok && Object.keys(pin).length) pins.set(id, pin);
+      else blockers.push("places layers over each other");
+    } else if (parentId && position === "fixed") blockers.push("places layers over each other");
     for (const u of pv.unmapped) unmapped.push({ part: id, ...u });
-    if (node.kind === "frame") layouts.set(id, layoutOf(computed));
+    if (transform && !/^(none|scale\(1\))$/.test(transform.trim()) && !translateX(transform) && /^(translate|rotate|scale)/.test(transform.trim()) && !/^0(\.0+)?$/.test(ownValues.get("opacity") ?? "1")) {
+      unmapped.push({ part: id, property: "transform", value: transform, reason: "transforms are not drawn" });
+    }
+  }
+  for (const [id] of built.parts) {
+    const tx = translateX(ownById.get(id)?.get("transform"));
+    if (!tx || hidden.has(id)) continue;
+    const parentId = built.parents.get(id);
+    const siblings = [...built.parts].filter(([cid, n]) => built.parents.get(cid) === parentId && !hidden.has(cid) && !n.visible);
+    const parentLayout = parentId ? layouts.get(parentId) : void 0;
+    const r = resolveValue(tx, computedById.get(id), tokens);
+    if (r?.value === 0) continue;
+    const pv = parentId ? values[parentId] : void 0;
+    const own = values[id] ?? {};
+    if (!parentId || !pv || siblings.length !== 1 || parentLayout?.direction !== "HORIZONTAL" || !r || r.unmapped !== void 0 || r.value === null || r.value === void 0) {
+      blockers.push("moves a part with a transform");
+      continue;
+    }
+    const v = r.value;
+    const end = typeof v === "string" && v.startsWith("calc(") ? new RegExp(`^calc\\(${escapeRe(String(pv.width))} - ${escapeRe(String(own.width))} - (\\S+)\\)$`).exec(v) : null;
+    if (end) {
+      pv.paddingRight = end[1];
+      layouts.set(parentId, { ...parentLayout, primary: "MAX" });
+    } else if (typeof v === "number" || typeof v === "string" && !v.startsWith("calc(")) {
+      pv.paddingLeft = v;
+      layouts.set(parentId, { ...parentLayout, primary: "MIN" });
+    } else blockers.push("moves a part with a transform");
   }
   const classes = [...built.parts].map(([id, n]) => `${id}:${n.classes.join(",")}:${n.visible?.prop ?? ""}`).join(";");
-  return { built, values, unmapped, layouts, classes, computed: computedById };
+  return { built, values, unmapped, layouts, classes, computed: computedById, hidden, cover, pins, vectors, stretch, blockers };
 }
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 function product(axes) {
   let out = [{}];
   for (const a of axes) out = out.flatMap((p) => a.values.map((v) => ({ ...p, [a.name]: v })));
   return out;
 }
-const sameValues = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+const drawn = (e) => JSON.stringify([e.values, [...e.hidden].sort(), [...e.layouts], [...e.vectors]]);
 const BOX_FIELDS = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "itemSpacing"];
 const PAINT_FIELDS = ["fill", "stroke", "strokeWeight", "strokeTopWeight", "strokeRightWeight", "strokeBottomWeight", "strokeLeftWeight", "cornerRadius", "width", "height", "minWidth", "minHeight"];
 const empty = (v) => v === void 0 || v === 0 || v === null;
@@ -1316,11 +2591,12 @@ function flattenWrapper(parts, variants, unmapped) {
   const root = parts.find((p) => !p.parent);
   const children = parts.filter((p) => p.parent === root?.id);
   const w = children[0];
-  if (!root || root.kind !== "frame" || children.length !== 1 || !w || w.kind !== "frame" || w.visible || w.clip) return;
+  if (!root || root.kind !== "frame" || children.length !== 1 || !w || w.kind !== "frame" || w.visible || w.clip || w.cover) return;
   for (const v of variants) {
     const r = v.values[root.id] ?? {};
     const x = v.values[w.id] ?? {};
-    if (BOX_FIELDS.some((f) => !empty(r[f])) || PAINT_FIELDS.some((f) => !empty(x[f]))) return;
+    if (BOX_FIELDS.some((f) => !empty(r[f])) || PAINT_FIELDS.some((f) => !empty(x[f])) || x.opacity !== void 0) return;
+    if (v.hidden?.includes(w.id) || v.layout?.[w.id] || v.layout?.[root.id]) return;
   }
   for (const v of variants) {
     const r = v.values[root.id] ??= {};
@@ -1334,11 +2610,37 @@ function flattenWrapper(parts, variants, unmapped) {
   for (const u of unmapped) if (u.part === w.id) u.part = root.id;
   parts.splice(parts.indexOf(w), 1);
 }
-function generateComponentSpec(name, opts) {
+function mergeFieldBoxes(parts, variants, unmapped, fields) {
+  for (const box of parts.filter((p) => fields.has(p.id))) {
+    const kids = parts.filter((p) => p.parent === box.id);
+    const text = kids[0];
+    if (kids.length !== 1 || text?.kind !== "text" || !box.parent || box.visible || box.cover) continue;
+    const drawsNothing = variants.every((v) => {
+      const x = v.values[box.id] ?? {};
+      return BOX_FIELDS.every((f) => empty(x[f])) && PAINT_FIELDS.every((f) => empty(x[f])) && x.opacity === void 0 && !v.hidden?.includes(box.id) && !v.layout?.[box.id];
+    });
+    if (!drawsNothing) continue;
+    text.parent = box.parent;
+    if (box.source) text.source = box.source;
+    for (const v of variants) delete v.values[box.id];
+    for (const u of unmapped) if (u.part === box.id) u.part = text.id;
+    parts.splice(parts.indexOf(box), 1);
+  }
+}
+const REASON_ORDER = ["opens a popup", "draws SVG shapes", "uses CSS grid", "draws with ::before or ::after", "moves a part with a transform", "places layers over each other", "shows content computed while the page runs"];
+function mainReason(reasons) {
+  const rank = (r) => {
+    const i = REASON_ORDER.indexOf(r);
+    return i < 0 ? REASON_ORDER.length : i;
+  };
+  return [...new Set(reasons)].sort((a, b) => rank(a) - rank(b))[0];
+}
+const CHECKED = { false: "false", true: "true", mixed: "mixed" };
+function generateComponentSpec(name, opts, view, setName = name, fixed = {}) {
   const reader = new Reader(opts);
   const src = reader.load(name);
   if (!src) throw new Error(`${name}: ${opts.componentsDir}/${name}/${name}.tsx was not found.`);
-  if (!src.fn) throw new Error(`${name}: no forwardRef(function ${name}(...)) or exported function ${name} in ${src.file}.`);
+  if (!src.fn) throw new UnsupportedComponentError(name, "is shown from a hook or a provider, not placed as a component");
   const modules = /* @__PURE__ */ new Map();
   const addModules = (s) => {
     if (!s) return;
@@ -1366,16 +2668,49 @@ function generateComponentSpec(name, opts) {
     visit(s.sf);
   };
   findNested(src, 0);
-  const ordered = [...modules].sort(([a], [b]) => Number(a.startsWith(`${opts.componentsDir}/${name}/`)) - Number(b.startsWith(`${opts.componentsDir}/${name}/`)));
+  const docs = readDocs(src.folder, opts);
+  const fromDocs = previewElement(docs?.preview, name);
+  const previewEl = fromDocs ?? storyElement(readStories(src.folder, opts), name);
+  const previewKids = previewEl?.children?.some((c) => typeof c !== "string") ? previewEl.children : void 0;
+  for (const c of docElements(previewKids)) {
+    if (typeof c.c !== "string" || nestedNames.has(c.c) || !reader.exists(c.c)) continue;
+    nestedNames.add(c.c);
+    const other = reader.load(c.c);
+    addModules(other);
+    if (other) findNested(other, 1);
+  }
+  const ownDir = `${opts.componentsDir}/${src.folder}/`;
+  const ordered = [...modules].sort(([a], [b]) => Number(a.startsWith(ownDir)) - Number(b.startsWith(ownDir)));
   const rules = [];
   const cssErrors = [];
+  let page;
+  const baseText = opts.baseCss ? opts.read(opts.baseCss) : void 0;
+  if (baseText !== void 0) {
+    const r = parseCssModule(opts.baseCss, baseText, 0);
+    rules.push(...r.rules);
+    const html = { tag: "html", classes: /* @__PURE__ */ new Set(), children: [], present: true, isRoot: false, inputLike: false };
+    page = computeValues(declaredFor(r.rules, html, DEFAULT_STATE), void 0);
+  }
   for (const [path, text] of ordered) {
     const r = parseCssModule(path, text, rules.length);
     rules.push(...r.rules);
     cssErrors.push(...r.errors);
   }
-  const base = evaluateVariant(reader, src, rules, {}, DEFAULT_STATE, opts.tokens);
-  if (!base) throw new Error(`${name}: could not read what the component renders.`);
+  const baseProps = {};
+  for (const p of src.props.values()) {
+    const v = previewEl?.p?.[p.name];
+    if (v === void 0 || v === null) continue;
+    if (p.kind === "string" && typeof v === "string" && (!p.optional || p.name === "defaultValue")) baseProps[p.name] = v;
+    if (p.kind === "other" && (typeof v === "object" || typeof v === "number" || typeof v === "string" && p.name === "defaultValue")) baseProps[p.name] = jsonValue(v);
+  }
+  const examples = {};
+  for (const p of src.props.values()) {
+    const v = previewEl?.p?.[p.name];
+    if (p.kind === "string" && p.optional && typeof v === "string" && baseProps[p.name] === void 0) examples[p.name] = v;
+  }
+  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");
   const unmappedProps = [];
   const axes = [];
   const defaults = /* @__PURE__ */ new Map();
@@ -1385,8 +2720,8 @@ function generateComponentSpec(name, opts) {
     for (const [prop] of src.props) defaults.set(prop, scope.vars.get(prop));
   }
   for (const p of src.props.values()) {
-    if (p.kind !== "union" || !p.values) continue;
-    const changes = p.values.some((v) => evaluateVariant(reader, src, rules, { [p.name]: v }, DEFAULT_STATE, opts.tokens)?.classes !== base.classes);
+    if (p.kind !== "union" || !p.values || fixed[p.name] !== void 0) continue;
+    const changes = p.values.some((v) => evalAt({ [p.name]: v }, DEFAULT_STATE)?.classes !== base.classes);
     if (!changes) {
       unmappedProps.push({ part: "root", property: `prop ${p.name}`, value: p.values.join(" | "), reason: "does not change the styles" });
       continue;
@@ -1394,15 +2729,25 @@ function generateComponentSpec(name, opts) {
     const def = defaults.get(p.name);
     axes.push({ name: sentenceCase(p.name), prop: p.name, values: [...p.values], default: typeof def === "string" && p.values.includes(def) ? def : p.values[0] });
   }
+  const checkable = ["checked", "defaultChecked", "indeterminate"].some((p) => src.props.has(p)) || [...src.baseUiModules].some((m) => /^(checkbox|switch|radio|toggle|menu)/.test(m));
+  if (view !== "popup" && checkable) {
+    const on = evalAt({}, { ...DEFAULT_STATE, checked: "true" });
+    const off = evalAt({}, { ...DEFAULT_STATE, checked: "false" });
+    if (on && off && drawn(on) !== drawn(off)) {
+      const mixed = src.props.has("indeterminate") ? evalAt({}, { ...DEFAULT_STATE, checked: "mixed" }) : void 0;
+      axes.push({ name: "Checked", values: mixed && drawn(mixed) !== drawn(on) ? ["false", "true", "mixed"] : ["false", "true"], default: "false" });
+    }
+  }
   const combos = product(axes);
-  const propsFor = (combo) => Object.fromEntries(axes.map((a) => [a.prop, combo[a.name]]));
+  const propsFor = (combo) => Object.fromEntries(axes.filter((a) => a.prop).map((a) => [a.prop, combo[a.name]]));
+  const stateFor = (combo, s) => combo.Checked ? { ...s, checked: CHECKED[combo.Checked] } : s;
   const canDisable = src.native === "button" || src.native === "input" || src.native === "textarea" || src.props.has("disabled");
-  const states = STATES.filter((s) => s.name !== "Disabled" || canDisable);
+  const states = view === "popup" ? STATES.slice(0, 1) : STATES.filter((s) => s.name !== "Disabled" || canDisable);
   const byState = /* @__PURE__ */ new Map();
   for (const s of states) {
     const m = /* @__PURE__ */ new Map();
     for (const combo of combos) {
-      const ev = evaluateVariant(reader, src, rules, propsFor(combo), s.state, opts.tokens);
+      const ev = evalAt(propsFor(combo), stateFor(combo, s.state));
       if (ev) m.set(JSON.stringify(combo), ev);
     }
     byState.set(s.name, m);
@@ -1410,51 +2755,140 @@ function generateComponentSpec(name, opts) {
   const differs = (s, from) => combos.some((c) => {
     const a = byState.get(s).get(JSON.stringify(c));
     const b = byState.get(from)?.get(JSON.stringify(c));
-    return a && b && !sameValues(a.values, b.values);
+    return a && b && drawn(a) !== drawn(b);
   });
   const stateNames = states.map((s) => s.name).filter((s) => s === "Default" || differs(s, "Default") && (s !== "Pressed" || differs(s, "Hover")));
   if (stateNames.length > 1) axes.push({ name: "State", values: stateNames, default: "Default" });
-  const variants = [];
-  const unmapped = [];
+  const blockers = /* @__PURE__ */ new Set();
+  const evaluated = [];
   for (const combo of combos) {
     for (const s of stateNames.length > 1 ? stateNames : ["Default"]) {
       const ev = byState.get(s).get(JSON.stringify(combo));
       if (!ev) continue;
-      const props = stateNames.length > 1 ? { ...combo, State: s } : { ...combo };
-      variants.push({ props, values: ev.values });
-      unmapped.push(...ev.unmapped);
+      evaluated.push({ props: stateNames.length > 1 ? { ...combo, State: s } : { ...combo }, ev });
+      for (const b of ev.blockers) blockers.add(b);
+    }
+  }
+  const order = [...base.built.parts.keys()];
+  const owner = new Map(order.map((id) => [id, base]));
+  for (const { ev } of evaluated) {
+    let prev;
+    for (const id of ev.built.parts.keys()) {
+      const known = owner.get(id);
+      if (known && known.built.parents.get(id) !== ev.built.parents.get(id)) blockers.add("changes its layers between variants");
+      if (!known) {
+        order.splice(prev === void 0 ? 0 : order.indexOf(prev) + 1, 0, id);
+        owner.set(id, ev);
+      }
+      prev = id;
+    }
+  }
+  for (const { ev } of evaluated) for (const id of order) if (!ev.built.parts.has(id)) ev.hidden.add(id);
+  if (blockers.size) throw new UnsupportedComponentError(name, mainReason([...blockers]));
+  for (const axis of [...axes]) {
+    if (!axis.prop) continue;
+    const key = (p) => JSON.stringify(Object.entries(p).filter(([k]) => k !== axis.name));
+    const groups = /* @__PURE__ */ new Map();
+    for (const e of evaluated) groups.set(key(e.props), [...groups.get(key(e.props)) ?? [], drawn(e.ev)]);
+    if ([...groups.values()].some((g) => new Set(g).size > 1)) continue;
+    axes.splice(axes.indexOf(axis), 1);
+    unmappedProps.push({ part: "root", property: `prop ${axis.prop}`, value: axis.values.join(" | "), reason: "changes nothing the set draws (margins, or content it does not show), not drawn" });
+    for (let i = evaluated.length - 1; i >= 0; i--) {
+      const e = evaluated[i];
+      if (e.props[axis.name] !== axis.default) {
+        evaluated.splice(i, 1);
+        continue;
+      }
+      delete e.props[axis.name];
+    }
+  }
+  const variants = [];
+  const unmapped = [];
+  const neverShown = new Set(order.filter((id) => evaluated.every((e) => e.ev.hidden.has(id))));
+  for (const e of evaluated) {
+    const ev = e.ev;
+    const values = Object.fromEntries(Object.entries(ev.values).filter(([id]) => !neverShown.has(id)));
+    const parentOf = (id) => owner.get(id)?.built.parents.get(id) ?? "";
+    const hidden = order.filter((id) => ev.hidden.has(id) && !neverShown.has(id) && !neverShown.has(parentOf(id)));
+    const layout = {};
+    for (const [id, l] of ev.layouts) if (JSON.stringify(l) !== JSON.stringify(owner.get(id)?.layouts.get(id))) layout[id] = l;
+    const icons = {};
+    for (const [id, n] of ev.built.parts) if (n.kind === "icon" && n.icon && !neverShown.has(id)) icons[id] = iconComponentName(n.icon);
+    const vectors = Object.fromEntries([...ev.vectors].filter(([id]) => !neverShown.has(id)));
+    const pinOf = (x, id) => x.cover.has(id) ? { top: 0, right: 0, bottom: 0, left: 0 } : x.pins.get(id);
+    const pins = {};
+    for (const id of order) {
+      const own = pinOf(ev, id);
+      const base2 = owner.get(id) && pinOf(owner.get(id), id);
+      if (own && base2 && JSON.stringify(own) !== JSON.stringify(base2) && !neverShown.has(id)) pins[id] = own;
     }
+    variants.push({
+      props: e.props,
+      values,
+      ...Object.keys(icons).length ? { slots: icons } : {},
+      ...hidden.length ? { hidden } : {},
+      ...Object.keys(layout).length ? { layout } : {},
+      ...Object.keys(vectors).length ? { vectors } : {},
+      ...Object.keys(pins).length ? { pins } : {}
+    });
+    unmapped.push(...ev.unmapped.filter((u) => !neverShown.has(u.part)));
   }
-  if (variants.length > MAX_VARIANTS) throw new Error(`${name}: ${variants.length} variants, more than ${MAX_VARIANTS}. Split an axis before generating.`);
+  if (variants.length > MAX_VARIANTS) throw new UnsupportedComponentError(name, `has ${variants.length} variants, more than ${MAX_VARIANTS}`);
   const parts = [];
   const properties = [];
-  for (const [id, n] of base.built.parts) {
-    const parent = base.built.parents.get(id);
+  const dropped = /* @__PURE__ */ new Set();
+  for (const id of order) {
+    const at = owner.get(id);
+    const n = at.built.parts.get(id);
+    const parent = at.built.parents.get(id);
+    if (neverShown.has(id) || parent && dropped.has(parent)) {
+      dropped.add(id);
+      continue;
+    }
+    const cls = n.classes[0]?.split("|")[1];
     const part = {
       id,
-      name: !parent ? name : n.kind === "text" ? n.text.property : n.visible ? n.visible.property : n.name ?? (n.kind === "icon" ? "Icon" : n.classes[0]?.split("|")[1] ?? n.tag),
-      kind: n.kind,
+      name: !parent ? setName : n.kind === "text" ? n.text?.property ?? (cls ? sentenceCase(cls) : "Text") : n.visible ? n.visible.property.replace(/^Show /, "").replace(/^./, (c) => c.toUpperCase()) : n.name ?? (n.kind === "icon" ? "Icon" : cls ?? n.tag),
+      kind: n.svgAttrs && n.tag === "svg" ? "vector" : n.kind,
       ...parent ? { parent } : {},
       ...n.classes.length ? { source: n.classes.map((c) => c.split("|").map((x, i) => i === 0 ? posix.basename(x) : `.${x}`).join(" ")).join(", ") } : {},
-      ...n.kind === "frame" ? { layout: base.layouts.get(id) } : {},
-      ...n.kind === "frame" && clips(base.computed.get(id)) ? { clip: true } : {},
-      ...!parent && fillsContainer(base.computed.get(id)) ? { fill: true } : {},
+      ...n.kind === "frame" ? { layout: at.layouts.get(id) ?? layoutOf(at.computed.get(id) ?? /* @__PURE__ */ new Map()) } : {},
+      ...n.kind === "frame" && clips(at.computed.get(id)) ? { clip: true } : {},
+      ...!parent && fillsContainer(at.computed.get(id), n.tag) ? { fill: true } : {},
       ...n.text ? { text: n.text.property } : {},
-      ...n.visible ? { visible: n.visible.property } : {}
+      ...n.chars !== void 0 ? { characters: n.chars } : {},
+      ...n.visible ? { visible: n.visible.property } : {},
+      ...at.cover.has(id) ? { cover: true } : {},
+      ...at.pins.has(id) ? { pin: at.pins.get(id) } : {},
+      ...at.stretch.has(id) ? { stretch: at.stretch.get(id) } : {},
+      ...n.fraction !== void 0 ? { fraction: n.fraction } : {},
+      ...n.at !== void 0 ? { at: n.at } : {},
+      ...parent && (grows(at.computed.get(id)) || shrinksToFit(n, at.computed.get(id), at.layouts.get(parent))) ? { grow: true } : {},
+      ...n.kind === "icon" && n.icon ? { icon: iconComponentName(n.icon) } : {}
     };
     parts.push(part);
     if (n.text && !properties.some((p) => p.name === n.text.property)) properties.push({ name: n.text.property, type: "TEXT", default: n.text.default, ...n.text.prop ? { prop: n.text.prop } : {} });
   }
-  for (const n of base.built.parts.values())
-    if (n.visible && !properties.some((p) => p.name === n.visible.property)) properties.push({ name: n.visible.property, type: "BOOLEAN", default: false, prop: n.visible.prop });
+  for (const id of order) {
+    const n = owner.get(id).built.parts.get(id);
+    if (!dropped.has(id) && n.visible && !properties.some((p) => p.name === n.visible.property)) properties.push({ name: n.visible.property, type: "BOOLEAN", default: !!n.visible.on, prop: n.visible.prop });
+  }
   const used = /* @__PURE__ */ new Set([...axes.map((a) => a.prop), ...properties.map((p) => p.prop), "disabled", "className", "children", "render"]);
+  if (axes.some((a) => a.name === "Checked")) for (const p of ["checked", "defaultChecked", "indeterminate"]) used.add(p);
   for (const p of src.props.values()) {
     if (used.has(p.name) || p.kind === "function" || p.kind === "string" || p.kind === "other" || p.kind === "union") continue;
     unmappedProps.push({ part: "root", property: `prop ${p.name}`, value: p.kind, reason: p.kind === "node" ? "slot content is not drawn" : p.kind === "icon" ? "icon prop with no icon part" : "not drawn in this version" });
   }
   for (const e of cssErrors) unmappedProps.push({ part: "root", property: "css", value: e, reason: "selector not understood" });
+  mergeFieldBoxes(parts, variants, unmapped, new Set([...base.built.parts].filter(([, n]) => n.inputLike).map(([id]) => id)));
   flattenWrapper(parts, variants, unmapped);
-  const swapped = addSwaps(name, src, parts, properties, axes, variants, opts);
+  const compoundParts = new Set([...base.built.parts].filter(([, n]) => n.name).map(([id]) => id));
+  const swapped = addSwaps(name, src, parts, properties, axes, variants, opts, compoundParts);
+  for (const part of parts) {
+    if (!base.built.parts.get(part.id)?.media || part.swap) continue;
+    part.swap = { property: part.name, default: MEDIA_SLOT.name, options: [MEDIA_SLOT.name] };
+    for (const v of variants) (v.slots ??= {})[part.id] = MEDIA_SLOT.name;
+  }
   for (let i = unmappedProps.length - 1; i >= 0; i--) if (swapped.has(unmappedProps[i].property.replace(/^prop /, ""))) unmappedProps.splice(i, 1);
   const seen = /* @__PURE__ */ new Set();
   const dedup = [...unmappedProps, ...unmapped].filter((u) => {
@@ -1464,9 +2898,31 @@ function generateComponentSpec(name, opts) {
     return true;
   });
   const source = [src.file, ...[...modules.keys()].sort()];
-  const spec = { name, source, axes, properties, parts, variants, unmapped: dedup };
-  return { name, hash: hashSpec(spec), source, axes, properties, parts, variants, unmapped: dedup };
+  const shownExamples = Object.fromEntries(Object.entries(examples).filter(([k]) => properties.some((p) => p.type === "BOOLEAN" && p.prop === k && p.default === true)));
+  const exampleProps = Object.fromEntries(Object.entries({ ...baseProps, ...shownExamples }).filter(([, v]) => isData(v)));
+  const example = previewKids && !base.built.root.fromExports || Object.keys(exampleProps).length ? { c: src.name, ...Object.keys(exampleProps).length ? { p: exampleProps } : {}, ...previewKids && !base.built.root.fromExports ? { children: previewKids } : {} } : void 0;
+  const component = {
+    ...src.folder !== setName ? { component: src.folder } : {},
+    ...Object.keys(fixed).length ? { fixed: { ...fixed } } : {},
+    ...view ? { view } : {},
+    ...example ? { example } : {}
+  };
+  const spec = { name: setName, ...component, source, axes, properties, parts, variants, unmapped: dedup };
+  return { name: setName, ...component, hash: hashSpec(spec), source, axes, properties, parts, variants, unmapped: dedup };
+}
+function specDrawsSomething(spec) {
+  const kinds = new Map(spec.parts.map((p) => [p.id, p]));
+  for (const v of spec.variants)
+    for (const [id, vals] of Object.entries(v.values)) {
+      const part = kinds.get(id);
+      if (part?.kind === "icon" || part?.kind === "vector") return true;
+      if (part?.kind === "text" && part.text !== "Label") return true;
+      if (part?.kind === "text" && (vals.textDecoration !== void 0 || typeof vals.textFill === "string" && vals.textFill !== "color.text.default")) return true;
+      if (vals.fill !== void 0 && vals.fill !== null || vals.stroke !== void 0 && vals.stroke !== null) return true;
+    }
+  return false;
 }
+const ICON_COMPONENT = "Icon";
 const COMMON_ICONS = ["Plus", "Minus", "Pencil", "Trash2", "Copy", "Search", "X", "Check", "ChevronDown", "ChevronRight", "Info", "AlertTriangle", "Star", "Settings", "ExternalLink", "Download", "Upload", "Ellipsis"];
 const FALLBACK_ICON = { Badge: "Info" };
 const DEFAULT_FALLBACK_ICON = "Plus";
@@ -1541,13 +2997,13 @@ function allStatesIcon(sf, name, prop) {
   if (decl) visit(decl);
   return found;
 }
-function defaultIcon(name, prop, opts) {
-  const docs = readDocs(name, opts);
+function defaultIcon(name, prop, opts, folder = name) {
+  const docs = readDocs(folder, opts);
   for (const el of docElements(docs?.preview)) {
     const v = el.c === name ? el.p?.[prop] : void 0;
     if (typeof v === "string" && /^[A-Z]\w*$/.test(v)) return v;
   }
-  return allStatesIcon(readStories(name, opts), name, prop) ?? FALLBACK_ICON[name] ?? DEFAULT_FALLBACK_ICON;
+  return allStatesIcon(readStories(folder, opts), name, prop) ?? FALLBACK_ICON[name] ?? DEFAULT_FALLBACK_ICON;
 }
 function referencedIcons(name, opts) {
   const out = [];
@@ -1557,7 +3013,7 @@ function referencedIcons(name, opts) {
   return out;
 }
 const zeroInline = (v) => !!v && v.paddingLeft === 0 && v.paddingRight === 0;
-function addSwaps(name, src, parts, properties, axes, variants, opts) {
+function addSwaps(name, src, parts, properties, axes, variants, opts, compound) {
   const props = /* @__PURE__ */ new Set();
   const iconProps = [...src.props.values()].filter((p) => p.kind === "icon");
   const defaultKey = variantKeyOf(Object.fromEntries(axes.map((a) => [a.name, a.default])));
@@ -1570,14 +3026,14 @@ function addSwaps(name, src, parts, properties, axes, variants, opts) {
       const visibleProp = part.visible ? properties.find((p) => p.type === "BOOLEAN" && p.name === part.visible)?.prop : void 0;
       const prop = visibleProp ?? iconProps.find((p) => !p.optional && !properties.some((x) => x.prop === p.name))?.name;
       if (!prop) continue;
-      const icon = iconComponentName(defaultIcon(name, prop, opts));
+      const icon = iconComponentName(defaultIcon(name, prop, opts, src.folder));
       part.swap = { property: sentenceCase(prop), default: icon, prop };
       setSlot(part.id, () => icon);
       props.add(prop);
       continue;
     }
     const parent = parts.find((p) => p.id === part.parent);
-    if (part.kind !== "text" || !part.text || !parent?.parent || parent.kind !== "frame") continue;
+    if (part.kind !== "text" || !part.text || !parent?.parent || parent.kind !== "frame" || !compound.has(parent.id)) continue;
     if (!variants.some((v) => zeroInline(v.values[parent.id]))) continue;
     const textSlot = `Slot/${name} ${part.text.toLowerCase()} text`;
     const media = MEDIA_SLOT.name;
@@ -1645,8 +3101,12 @@ function generateIcons(components, opts, slots = []) {
   const index = lucideIndex(dir, opts);
   const names = [];
   for (const c of components) {
-    for (const p of c.parts) if (p.swap && !p.swap.options) names.push(p.swap.default.replace(/^Icon\//, ""));
-    names.push(...referencedIcons(c.name, opts));
+    for (const p of c.parts) {
+      if (p.swap && !p.swap.options) names.push(p.swap.default.replace(/^Icon\//, ""));
+      if (p.icon) names.push(p.icon.replace(/^Icon\//, ""));
+    }
+    for (const v of c.variants) for (const x of Object.values(v.slots ?? {})) if (x.startsWith("Icon/")) names.push(x.slice(5));
+    names.push(...referencedIcons(c.component ?? c.name, opts));
   }
   for (const s of slots) if (s.icon) names.push(s.icon);
   names.push(...COMMON_ICONS);
@@ -1677,8 +3137,7 @@ function generateSlots(components) {
   if (media) out.push(MEDIA_SLOT);
   return out;
 }
-function generateComponentSpecs(names, opts) {
-  const components = names.map((n) => generateComponentSpec(n, opts));
+function specsFile(components, opts, coverage) {
   const slots = generateSlots(components);
   return {
     version: COMPONENT_SPECS_VERSION,
@@ -1686,10 +3145,144 @@ function generateComponentSpecs(names, opts) {
     components,
     icons: generateIcons(components, opts, slots),
     iconStyle: ICON_STYLE,
-    slots
+    slots,
+    ...coverage ? { coverage } : {}
   };
 }
-const SPEC_COMPONENTS = ["Button", "IconButton", "Badge", "Tag", "Input", "Card"];
+function generateComponentSpecs(names, opts) {
+  return specsFile(
+    names.map((n) => generateComponentSpec(n, opts)),
+    opts
+  );
+}
+function splitByLayers(folder, opts) {
+  const src = new Reader(opts).load(folder);
+  for (const p of src?.props.values() ?? []) {
+    if (p.kind !== "union" || !p.values) continue;
+    const out = [];
+    for (const v of p.values) {
+      try {
+        const spec = generateComponentSpec(folder, opts, void 0, `${folder}/${sentenceCase(v)}`, { [p.name]: v });
+        if (specDrawsSomething(spec)) out.push(spec);
+      } catch {
+        out.length = 0;
+        break;
+      }
+    }
+    if (out.length === p.values.length) return out;
+  }
+  return [];
+}
+const PAINTS = /(^|[;{\s])(color|background(-color)?|border(-(top|right|bottom|left))?(-color)?|box-shadow|fill|stroke)\s*:(?!\s*(0[;\s}]|none|transparent))/m;
+function generateAllComponentSpecs(folders, opts) {
+  const withList = { ...opts, components: opts.components ?? folders };
+  const reader = new Reader(withList);
+  const components = [];
+  const coverage = [];
+  const cssOf = (folder) => [...reader.load(folder)?.styles.values() ?? []].map((path) => (opts.read(path) ?? "").replace(/\/\*[\s\S]*?\*\//g, "")).join("\n");
+  const paints = (folder) => PAINTS.test(cssOf(folder));
+  for (const folder of [...folders].sort()) {
+    const reasons = [];
+    const attempt = (name, view, setName) => {
+      try {
+        const spec = generateComponentSpec(name, withList, view, setName);
+        return specDrawsSomething(spec) ? spec : void 0;
+      } catch (err) {
+        reasons.push(err instanceof UnsupportedComponentError ? err.reason : "renders in a way the generator cannot read yet");
+        return void 0;
+      }
+    };
+    const exports = [folder, ...[...reader.load(folder)?.exported.keys() ?? []].filter((n) => n !== folder)];
+    const sets = [];
+    let main = attempt(folder);
+    if (!main && reasons.includes("changes its layers between variants")) {
+      const split = splitByLayers(folder, withList);
+      if (split.length) {
+        sets.push(...split);
+        main = split[0];
+        reasons.length = 0;
+      }
+    }
+    if (main && !sets.length) {
+      sets.push(main);
+      const compound = new Set(main.parts.map((p) => p.name));
+      const drawnIn = new Set(main.parts.map((p) => p.source).filter(Boolean));
+      for (const other of exports.slice(1)) {
+        if (other.startsWith(folder) && compound.has(other.slice(folder.length))) continue;
+        const spec = attempt(other);
+        if (!spec) continue;
+        const readsParent = spec.unmapped.some((u) => /^--_[\w-]+ is not a token$/.test(u.reason));
+        const duplicate = drawnIn.has(spec.parts[0]?.source) && !spec.properties.length && spec.axes.every((a) => a.name === "State");
+        if (readsParent || duplicate) continue;
+        sets.push(spec);
+      }
+    }
+    const hasPopup = /\.(Portal|Popup)\b/.test(opts.read(`${opts.componentsDir}/${folder}/${folder}.tsx`) ?? "");
+    if (!main && hasPopup) {
+      reasons.length = 0;
+      for (const name of exports) {
+        const closedSpec = attempt(name, "without-popup");
+        const closed = closedSpec?.parts.some((p) => p.source?.includes(`${folder}.module.css`)) ? closedSpec : void 0;
+        if (closed && !sets.some((x) => x.name === closed.name)) sets.push(closed);
+        const suffix = name === folder ? "" : name.startsWith(folder) ? name.slice(folder.length) : name;
+        const popupName = `${folder}/${sets.some((x) => x.name === `${folder}/Popup`) ? suffix || "Popup" : "Popup"}`;
+        const fnNode = reader.load(name)?.fn;
+        const ownsPortal = !!fnNode && /\.Portal\b/.test(fnNode.getText());
+        const open = ownsPortal ? attempt(name, "popup", popupName) : void 0;
+        if (open && !sets.some((x) => x.name === open.name)) sets.push(open);
+      }
+    }
+    if (!sets.length && folder === ICON_COMPONENT) {
+      coverage.push({ name: folder, status: "generated", reason: "drawn as icon components on the Icons page" });
+      continue;
+    }
+    if (!sets.length) {
+      const fileText = opts.read(`${opts.componentsDir}/${folder}/${folder}.tsx`) ?? "";
+      const reason = /\.(Portal|Popup|Positioner)\b/.test(fileText) && !reasons.length ? "opens a popup" : reasons.length ? mainReason(reasons) : void 0;
+      const drafted = draftedSpec(folder, withList);
+      if (drafted) {
+        components.push(drafted);
+        coverage.push({ name: folder, status: "drafted", reason: drafted.drafted.reason, ...drafted.name !== folder ? { sets: [drafted.name] } : {} });
+        continue;
+      }
+      if (!paints(folder)) coverage.push({ name: folder, status: "layout", reason: /inset\(50%\)/.test(cssOf(folder)) ? "screen reader text only, nothing to draw" : "layout only, use auto layout" });
+      else coverage.push({ name: folder, status: "unsupported", reason: reason ?? "draws nothing the generator can read yet" });
+      continue;
+    }
+    components.push(...sets);
+    coverage.push({ name: folder, status: "generated", ...sets.length > 1 || sets[0].name !== folder ? { sets: sets.map((x) => x.name) } : {} });
+  }
+  return specsFile(components, withList, coverage);
+}
+const overridesDirOf = (componentsDir) => posix.join(posix.dirname(posix.dirname(componentsDir)), "component-spec-overrides");
+function draftedCodeHash(files, read) {
+  return specHash(files.map((f) => `${f}
+${read(f) ?? ""}`).join("\n"));
+}
+function draftedSpec(folder, opts) {
+  const path = `${opts.overridesDir ?? overridesDirOf(opts.componentsDir)}/${folder}.json`;
+  const text = opts.read(path);
+  if (text === void 0) return void 0;
+  let raw;
+  try {
+    raw = JSON.parse(text);
+  } catch {
+    throw new Error(`${path} is not valid JSON.`);
+  }
+  if (raw.source !== "drafted") throw new Error(`${path}: a drafted spec says "source": "drafted".`);
+  const files = Array.isArray(raw.files) ? raw.files.filter((f) => typeof f === "string") : [];
+  if (!files.length) throw new Error(`${path}: list the code it was drafted from in "files".`);
+  const reason = typeof raw.reason === "string" && raw.reason ? raw.reason : "the generator cannot read it yet";
+  const { $comment: _c, source: _s, files: _f, reason: _r, codeHash, hash: _h, drafted: _d, ...fields } = raw;
+  const stale = typeof codeHash === "string" && codeHash !== draftedCodeHash(files, opts.read);
+  const body = { ...fields, drafted: { reason, ...stale ? { stale: true } : {} } };
+  const problems = validateComponentSpec({ ...body }, new Map([...typesOf(opts.tokens)].map(([k, v]) => [k, v.type])));
+  if (problems.length) throw new Error(`${path} does not match the component spec format:
+- ${problems.join("\n- ")}`);
+  const { name, axes, properties, parts, variants, unmapped, ...rest } = body;
+  const spec = { name, ...rest, source: files, axes, properties, parts, variants, unmapped };
+  return { name, ...rest, hash: hashSpec(spec), source: files, axes, properties, parts, variants, unmapped };
+}
 function tokenCssIndex(files, opts = {}) {
   const set = buildTokenSet(files, opts.layout ?? {});
   const out = /* @__PURE__ */ new Map();
@@ -1699,14 +3292,14 @@ function tokenCssIndex(files, opts = {}) {
   }
   return out;
 }
-function generateRepoComponentSpecs(root, names = SPEC_COMPONENTS) {
+function repoSpecOptions(root) {
   const configText = readFileSync(join(root, CONFIG_FILE), "utf8");
   const config = loadConfig(configText);
   const tokensRoot = join(root, config.tokens.root);
   const files = {};
-  const walk2 = (dir) => {
-    for (const n of readdirSync(dir)) {
-      const full = join(dir, n);
+  const walk2 = (dir2) => {
+    for (const n of readdirSync(dir2)) {
+      const full = join(dir2, n);
       if (statSync(full).isDirectory()) walk2(full);
       else if (n.endsWith(".tokens.json")) files[relative(tokensRoot, full).split("\\").join("/")] = readFileSync(full, "utf8");
     }
@@ -1721,7 +3314,14 @@ function generateRepoComponentSpecs(root, names = SPEC_COMPONENTS) {
     }
   };
   const componentsDir = config.components?.dir ?? "packages/react/src/components";
-  return generateComponentSpecs(names, { componentsDir, read, tokens, styleSuffix: config.components?.styleSuffix });
+  const dir = join(root, componentsDir);
+  const folders = readdirSync(dir).filter((n) => /^[A-Z]/.test(n) && statSync(join(dir, n)).isDirectory() && read(`${componentsDir}/${n}/${n}.tsx`) !== void 0).sort();
+  const baseCss = posix.join(posix.dirname(componentsDir), "styles/base.css");
+  return { opts: { componentsDir, read, tokens, styleSuffix: config.components?.styleSuffix, components: folders, ...read(baseCss) !== void 0 ? { baseCss } : {} }, folders };
+}
+function generateRepoComponentSpecs(root, names) {
+  const { opts, folders } = repoSpecOptions(root);
+  return names ? generateComponentSpecs(names, opts) : generateAllComponentSpecs(folders, opts);
 }
 const serializeComponentSpecs = (f) => `${JSON.stringify(f, null, 2)}
 `;
@@ -1731,16 +3331,19 @@ export {
   ICON_STYLE,
   INHERITED,
   MEDIA_SLOT,
-  SPEC_COMPONENTS,
+  UnsupportedComponentError,
   branchExists,
   collectAuditFiles,
   commitToNewLocalBranch,
   computeValues,
   currentBranch,
   declaredFor,
+  draftedCodeHash,
+  draftedSpec,
   expandDecl,
   findDesignSystemRoot,
   fixCss,
+  generateAllComponentSpecs,
   generateComponentSpec,
   generateComponentSpecs,
   generateIcons,
@@ -1748,6 +3351,7 @@ export {
   generateSlots,
   git,
   isGitRepo,
+  jsxText,
   listFilesAt,
   loadAllowlist,
   loadDesignSystem,
@@ -1757,12 +3361,15 @@ export {
   matchComplex,
   mediaApplies,
   originRepo,
+  overridesDirOf,
   parseCssModule,
   parseSelector,
+  repoSpecOptions,
   runAudit,
   sentenceCase,
   serializeComponentSpecs,
   showFile,
+  specDrawsSomething,
   splitTop,
   tokenCssIndex
 };