synthesisui 0.16.81 → 0.16.83

package/dist/commands/import.js

@@ -2,20 +2,23 @@ import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
 import { basename, dirname, join, relative } from "node:path";
 import { resolveAnatomy, resolveFlatParts, safePartName, } from "../anatomy-read.js";
 import { readCredentials, readToken, resolveRegistry, sameRegistry, } from "../config.js";
-import { describeArchitecture, describeChoice, detectArchitectures, } from "../doctor/architecture.js";
+import { architectureRule, describeArchitecture, describeChoice, detectArchitectures, } from "../doctor/architecture.js";
 import { findBrokenRefs } from "../doctor/broken-refs.js";
 import { nestingRules, propRules, readDefinitionProps, readNesting, } from "../doctor/call-sites.js";
 import { describeClassStyle, detectClassStyle, } from "../doctor/class-style.js";
 import { isNearDuplicate, isNeutral, lightness, } from "../doctor/color-distance.js";
 import { describeGate, gateComponent, groupSkips, } from "../doctor/component-gate.js";
 import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
+import { countShape, describeCoverage, summarizeCoverage, } from "../doctor/coverage.js";
 import { crosswalk, isLibrary, observedRules } from "../doctor/crosswalk.js";
+import { moduleImports, readModuleCss, readModuleUsage, transcribeModule, } from "../doctor/css-modules.js";
 import { reconcile, scanDefinitions, } from "../doctor/definitions-scan.js";
 import { describeConvention, describeRemainder, detectConventions, } from "../doctor/idiom.js";
 import { diagnose, scanSource } from "../doctor/scan.js";
 import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { buildTable } from "../doctor/tokens.js";
-import { rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
+import { readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
+import { transcribeVariants } from "../doctor/variant-read.js";
 import { body, paint, section } from "../output.js";
 import { startProgress } from "../progress.js";
 import { detectStack, resolveDeps } from "../stack.js";
@@ -242,6 +245,18 @@ export async function takeCensus(root, opts) {
     const nesting = new Map();
     /** Component → what its own definition names and whether it forwards the rest. */
     const propsOf = new Map();
+    /** Component → the axes its own `cva` declares. See `variant-read.ts`. */
+    const variantAxes = new Map();
+    /** How much came out of CSS Modules, for the coverage report. */
+    let moduleFiles = 0;
+    let moduleDeclarations = 0;
+    const moduleKeyframes = {};
+    /** How each component expresses style, so the census can state its own coverage. */
+    const shapes = new Map();
+    /** Component FILES the gate accepted - the honest denominator for coverage. A first
+     *  version used the whole inventory, which includes everything they compose from a
+     *  package, and reported 128 for a library of 36 (probe, 01/08). */
+    let componentFiles = 0;
     /**
      * A census over a real monorepo reads 2797 files, and the terminal said nothing for
      * most of it. Twenty silent minutes is indistinguishable from twenty broken ones
@@ -306,6 +321,10 @@ export async function takeCensus(root, opts) {
             for (const d of found) {
                 propsOf.set(d.name, readDefinitionProps(d.name, src));
             }
+            if (found.length > 0) {
+                countShape(src, found[0].name, shapes);
+                componentFiles += 1;
+            }
             defined.push(...found);
             // THE LOOK, from their own class names. One transcription per file, keyed
             // by the component it defines - the root element's classes are the
@@ -313,12 +332,102 @@ export async function takeCensus(root, opts) {
             // not attempt.
             if (found.length > 0) {
                 const t = transcribe(rootClasses(src), declaredValues);
-                const size = Object.keys(t.base).length +
-                    Object.keys(t.dark).length +
-                    Object.keys(t.states).length;
+                /**
+                 * THE VARIANT STYLES, FOLDED IN.
+                 *
+                 * `rootClasses` reads the class string ON the element, which for a component
+                 * built with `cva` is a call - `className={cn(buttonVariants({ variant }))}` -
+                 * and carries none of the nine variants' colours. The definition does, in an
+                 * object literal, and reading it is deterministic (see `variant-read.ts`).
+                 *
+                 * Folded here rather than reported separately because this is the one funnel:
+                 * the reader was computing 23 layers for a real Button and nobody was asking
+                 * for the result, which is the "valid and unread" failure this pipeline has
+                 * paid for twice already.
+                 */
+                const v = transcribeVariants(src, declaredValues);
+                /**
+                 * THE CSS MODULE, if this component styles that way.
+                 *
+                 * 239 of 317 components in a real app do, and they arrived with ZERO
+                 * declarations - 5,777 real CSS declarations sat in 530 stylesheets nobody
+                 * read (dono, 01/08). Read here rather than in a pass of its own so a
+                 * component that uses BOTH a module and utilities comes out as one look.
+                 */
+                const modules = moduleImports(src);
+                let fromModule = null;
+                for (const mod of modules) {
+                    const cssPath = join(dirname(file), mod.specifier);
+                    const moduleCss = await readFile(cssPath, "utf8").catch(() => "");
+                    if (!moduleCss)
+                        continue;
+                    const usage = readModuleUsage(src, mod.local);
+                    if (usage.length === 0)
+                        continue;
+                    const readModule = transcribeModule(readModuleCss(moduleCss), usage, declaredValues);
+                    if (readModule.read === 0)
+                        continue;
+                    fromModule = readModule;
+                    moduleFiles += 1;
+                    moduleDeclarations += readModule.read;
+                    for (const [name, frames] of Object.entries(readModule.keyframes)) {
+                        if (!moduleKeyframes[name])
+                            moduleKeyframes[name] = frames;
+                    }
+                    // One module per component is the shape every one of the 530 follows.
+                    break;
+                }
+                // The MODULE first and the utilities on top: a component that has both is
+                // adding a utility to a module-styled element, not the other way round.
+                /**
+                 * `style={{ }}` UNDER everything: a literal is the weakest source, so a class or
+                 * a module rule that names the same property wins. It travels rather than being
+                 * dropped because the alternative is the component arriving empty, and empty is
+                 * not more honest than literal - v1 mirrors, v2 normalises.
+                 */
+                const inlineStyle = readInlineStyle(src);
+                const base = {
+                    ...inlineStyle,
+                    ...fromModule?.base,
+                    ...v.base.base,
+                    ...t.base,
+                };
+                const states = {
+                    ...fromModule?.states,
+                    ...v.base.states,
+                    ...t.states,
+                };
+                const dark = { ...fromModule?.dark, ...t.dark };
+                const layers = [...(fromModule?.layers ?? []), ...v.layers];
+                const parts = { ...fromModule?.parts, ...t.parts };
+                const tree = fromModule?.tree ?? [];
+                const size = Object.keys(base).length +
+                    Object.keys(dark).length +
+                    Object.keys(states).length +
+                    Object.keys(parts).length +
+                    layers.length;
                 const tag = rootTag(src);
                 if (size > 0 || tag) {
-                    looks[found[0].name] = tag ? { ...t, rootTag: tag } : t;
+                    looks[found[0].name] = {
+                        ...t,
+                        base,
+                        states,
+                        dark,
+                        ...(Object.keys(parts).length > 0 ? { parts } : {}),
+                        ...(tree.length > 0 ? { tree } : {}),
+                        ...(tag ? { rootTag: tag } : {}),
+                        ...(layers.length > 0 ? { layers } : {}),
+                        ...(Object.keys(v.axes).length > 0 ? { declaredAxes: v.axes } : {}),
+                        ...(Object.keys(v.defaults).length > 0
+                            ? { defaults: v.defaults }
+                            : {}),
+                    };
+                }
+                // Their variant DEFINITION beats what usage happened to pick, and it is the
+                // better source: usage shows what somebody chose, the declaration shows what
+                // the author designed.
+                if (Object.keys(v.axes).length > 0) {
+                    variantAxes.set(found[0].name, v.axes);
                 }
             }
         }
@@ -408,12 +517,25 @@ export async function takeCensus(root, opts) {
         files: 0,
         props: {
             ...Object.fromEntries(Object.entries(d.axes)),
+            ...Object.fromEntries(Object.entries(variantAxes.get(d.name) ?? {})),
             ...Object.fromEntries(d.flags.map((f) => [f, ["true"]])),
         },
         propFiles: {},
         // Their own rung, off the folder. It travels from the DEFINITION because
         // that is the only reading that knows which file the component lives in.
         ...(d.tier ? { tier: d.tier } : {}),
+        /**
+         * The axes, kept BESIDE `props` as well as in it.
+         *
+         * A library composes nothing, so its components arrive through this branch and
+         * `declaredAxes` is where the contract writer looks. Leaving it out meant a
+         * Button whose `cva` declares nine variants reported none of them (probe,
+         * 01/08) - the styles reached the recipe and the axis names did not.
+         */
+        ...(Object.keys({ ...d.axes, ...(variantAxes.get(d.name) ?? {}) })
+            .length > 0
+            ? { declaredAxes: { ...d.axes, ...(variantAxes.get(d.name) ?? {}) } }
+            : {}),
     }));
     /**
      * A composed component that is ALSO defined keeps its usage and gains the
@@ -435,13 +557,22 @@ export async function takeCensus(root, opts) {
     const declaredBy = new Map(defined.map((d) => [d.name, d]));
     const enriched = inventory.map((c) => {
         const d = declaredBy.get(c.name);
-        if (!d)
+        const fromVariants = variantAxes.get(c.name);
+        if (!d && !fromVariants)
             return c;
-        const tier = d.tier ? { tier: d.tier } : {};
-        if (Object.keys(d.axes).length === 0) {
+        const tier = d?.tier ? { tier: d.tier } : {};
+        /**
+         * THREE SOURCES FOR AN AXIS, and this is their order.
+         *
+         * The `cva` definition is the strongest: it declares the option AND what the
+         * option does. The prop type is next - it declares the closed set. Usage is last,
+         * because it shows what somebody happened to pick.
+         */
+        const axes = { ...(d?.axes ?? {}), ...(fromVariants ?? {}) };
+        if (Object.keys(axes).length === 0) {
             return Object.keys(tier).length > 0 ? { ...c, ...tier } : c;
         }
-        return { ...c, declaredAxes: d.axes, ...tier };
+        return { ...c, declaredAxes: axes, ...tier };
     });
     const scoped = [...enriched, ...fromTypes];
     /**
@@ -519,6 +650,33 @@ export async function takeCensus(root, opts) {
             console.log(body(paint.faint(`(${theirsOnly.length} component${theirsOnly.length === 1 ? "" : "s"} live there and not in the system - ${shown.join(", ")}${theirsOnly.length > shown.length ? ", …" : ""}. Left out on purpose: the system is one place, and a union of two codebases is not a system. Point --scope at them if they belong in it.)`)));
         }
     }
+    /**
+     * WHAT THIS VERSION CAN AND CANNOT READ, on their files.
+     *
+     * Before this, importing a CSS-Modules app produced 283 components with no
+     * declarations and said nothing about why - and a person seeing that concludes the
+     * product is broken, reasoning correctly from what they were shown. The gap was never
+     * the defect; the silence was (dono, 01/08).
+     */
+    const coverage = summarizeCoverage(shapes, componentFiles, Object.keys(looks).length, Object.values(looks).reduce((n, look) => n +
+        Object.keys(look.base).length +
+        Object.keys(look.dark).length +
+        Object.values(look.states).reduce((m, block) => m + Object.keys(block).length, 0) +
+        // The LAYERS count: the record and ternary readers produce layers rather than a
+        // base, so leaving them out reported a Tag with eight colours as three
+        // declarations (probe, 01/08).
+        (look.layers ?? []).reduce((m, layer) => m + Object.keys(layer.style).length, 0) +
+        Object.values(look.parts ?? {}).reduce((m, part) => m +
+            Object.keys(part.base).length +
+            Object.keys(part.dark).length +
+            Object.values(part.states).reduce((k, block) => k + Object.keys(block).length, 0), 0), 0));
+    const coverageLines = describeCoverage(coverage);
+    if (coverageLines.length > 0) {
+        console.log("");
+        console.log(section("What this version reads, on your files"));
+        for (const line of coverageLines)
+            console.log(body(line));
+    }
     /**
      * WHAT THE GATE TURNED AWAY - said out loud, grouped, with the reason.
      *
@@ -625,8 +783,40 @@ export async function takeCensus(root, opts) {
         observed: distinctValues(d),
         ...(components.length > 0 ? { components } : {}),
         ...(defined.length > 0 ? { defined } : {}),
+        /**
+         * THE SHAPE, AND THE RULE IT BECOMES.
+         *
+         * `rule` travels with each one so the platform writes it without owning a second
+         * copy of the sentence. The reader picks which architecture has PRIORITY; absent a
+         * choice the first is the one, which is the shape holding the most code.
+         *
+         * Carried rather than only printed: the whole point of the feature is that the
+         * chosen shape reaches CLAUDE.md, and a version of this that detected the shape,
+         * printed it, and never turned it into a rule is a feature that does nothing (dono,
+         * 01/08).
+         */
+        ...(coverage.components > 0
+            ? {
+                coverage: {
+                    components: coverage.components,
+                    read: coverage.read,
+                    declarations: coverage.declarations,
+                    shapes: coverage.counts.map((c) => ({
+                        key: c.shape.key,
+                        label: c.shape.label,
+                        reads: c.shape.reads,
+                        files: c.files,
+                    })),
+                },
+            }
+            : {}),
         ...(architectures.length > 0
-            ? { architectures: architectures.slice(0, 6) }
+            ? {
+                architectures: architectures.slice(0, 6).map((a) => ({
+                    ...a,
+                    rule: architectureRule(a),
+                })),
+            }
             : {}),
         ...(skips.length > 0
             ? {

package/dist/doctor/coverage.js

@@ -0,0 +1,129 @@
+/**
+ * WHAT THIS VERSION CAN AND CANNOT READ, MEASURED ON THEIR OWN REPO.
+ *
+ * The most commercially important thing in the pipeline, and it took a person saying
+ * "nothing works" to see it (dono, 01/08).
+ *
+ * Before this, importing a CSS-Modules app produced 283 components with zero
+ * declarations and said nothing about why. A person seeing that concludes the product is
+ * broken, and they are reasoning correctly from what they were shown. The defect was
+ * never the gap - every reader has a boundary. The defect was the SILENCE about it.
+ *
+ * So the census measures its own coverage and says the number before anything is sent:
+ * how each component expresses style, how many of those this version reads, and which
+ * ones it does not - by name, with the count from their repo rather than a disclaimer.
+ *
+ * A governance product that cannot state what it does not govern is not trustworthy.
+ */
+/**
+ * Every shape, in the order the enumeration found them. Each entry survived being
+ * counted on a real repo: a shape with no evidence is a shape I assumed.
+ */
+export const STYLE_SHAPES = [
+    {
+        key: "static",
+        label: "a class list written out",
+        reads: "full",
+        test: /className=["'][^"']+["']/,
+    },
+    {
+        key: "module",
+        label: "CSS Modules",
+        reads: "full",
+        test: /from\s+["'][^"']*\.module\.(?:css|scss|sass|less)["']/,
+    },
+    {
+        key: "cva",
+        label: "cva / tailwind-variants",
+        reads: "full",
+        test: /\b(?:cva|tv)\s*\(/,
+    },
+    {
+        key: "record",
+        label: "a lookup record of option to classes",
+        reads: "full",
+        test: /(?:const|let)\s+\w*(?:[Ss]tyles?|[Cc]lasses|[Vv]ariants?|[Mm]ap|[Cc]olors?|[Ss]izes?|[Tt]ones?)\w*\s*(?::\s*[^=]+)?=\s*\{/,
+    },
+    {
+        key: "ternary",
+        label: "a ternary between class literals",
+        reads: "full",
+        test: /\?\s*["'][^"']*(?:bg-|text-|border-|p-|px-|rounded-)/,
+    },
+    {
+        key: "inline",
+        label: "style={{ }}",
+        reads: "partial",
+        because: "a literal travels as a literal, so it re-themes nowhere until you promote it - and a value computed at render time is not in the source at all",
+        test: /style=\{\{/,
+    },
+    {
+        key: "interpolated",
+        label: "a template with a runtime value in it",
+        reads: "partial",
+        because: "the literal halves are read and a `${cond ? a : b}` between two known classes is read as a variant; a class assembled from a variable does not exist in the source, so there is nothing to read",
+        test: /className=\{`[^`]*\$\{/,
+    },
+    {
+        key: "styled",
+        label: "styled-components / emotion",
+        reads: "none",
+        because: "not read by this version. It was left out deliberately rather than guessed at: zero files in the repo this was measured against, and building for a shape with no evidence is the same mistake as building for one file",
+        test: /styled[.(]|@emotion/,
+    },
+    {
+        key: "sx",
+        label: "a style-prop system (Chakra, Panda, MUI sx)",
+        reads: "none",
+        because: "the styling lives in props this version does not read; a component that only forwards to that library is reported as an adapter instead",
+        test: /\bsx=\{|@chakra-ui|@pandacss/,
+    },
+];
+export function countShape(source, name, into) {
+    for (const shape of STYLE_SHAPES) {
+        if (!shape.test.test(source))
+            continue;
+        const at = into.get(shape.key) ?? { shape, files: 0, examples: [] };
+        at.files += 1;
+        if (at.examples.length < 4)
+            at.examples.push(name);
+        into.set(shape.key, at);
+    }
+}
+export function summarizeCoverage(counts, components, read, declarations) {
+    return {
+        components,
+        read,
+        declarations,
+        counts: [...counts.values()].sort((a, b) => b.files - a.files),
+    };
+}
+/**
+ * The report, in the words a person needs before they decide whether to import.
+ *
+ * Leads with the number that matters - how many components came out with a look - and
+ * then names every shape that is not fully read, with the reason. No percentages without
+ * the count behind them: "75%" of an unknown total is a marketing number.
+ */
+export function describeCoverage(c) {
+    if (c.components === 0)
+        return [];
+    const lines = [];
+    const pct = Math.round((c.read / c.components) * 100);
+    lines.push(`${c.read} of ${c.components} components came out with a look - ${pct}%, ${c.declarations} declarations in total. This is measured on your files, not an estimate.`);
+    for (const { shape, files, examples } of c.counts) {
+        const share = Math.round((files / c.components) * 100);
+        const head = `  ${files} (${share}%) ${shape.label}`;
+        if (shape.reads === "full") {
+            lines.push(`${head} - read`);
+            continue;
+        }
+        lines.push(`${head} - ${shape.reads === "none" ? "NOT read" : "partly read"}. ${shape.because ?? ""}`);
+        lines.push(`      ${examples.join(", ")}`);
+    }
+    const missing = c.components - c.read;
+    if (missing > 0) {
+        lines.push(`${missing} came out with no look at all. They still arrive as contracts - the axes their types declare, their name, their place in your tree - and the look stays yours to write. That is the design, but you should know the number before you decide.`);
+    }
+    return lines;
+}

package/dist/doctor/css-modules.js

@@ -0,0 +1,535 @@
+/**
+ * CSS MODULES - the largest source of style in a real repo, and the one nothing read.
+ *
+ * Enumerated before a line of this was written, which is the rule that produced it
+ * (dono, 01/08). In `apps/web-dashboard`:
+ *
+ *     530     module stylesheets, 32,947 lines
+ *   3,978     simple class selectors     each one a part, under the author's own name
+ *   5,777     real CSS declarations      against 0.2 per component read before this
+ *   1,623     (28%) point at var(--their-token)
+ *      51     dark rules via [data-theme], all in one stylesheet
+ *     154     keyframes
+ *      47     descendant selectors
+ *      45     media queries
+ *      29     states
+ *       0     `composes:` - no inheritance to resolve
+ *
+ * 239 of 317 components (75%) style this way, and they arrived with ZERO declarations.
+ * A person importing that app would get 283 empty components and conclude the product
+ * is broken, which is a reasonable conclusion to reach.
+ *
+ * IT IS MORE RELIABLE THAN READING TAILWIND, not less. There is no utility table to
+ * maintain and nothing is inferred from a name: the declaration is already CSS, and the
+ * part name is the word the author typed. The mapping is arithmetic:
+ *
+ *     Loader.tsx        import styles from './Chat.module.css'
+ *                       <div className={styles.loader}>          → the base
+ *                         <div className={styles.spinner}>       → part "spinner"
+ *                         <p className={styles.loadingMessage}>  → part "loading-message"
+ *
+ *     Chat.module.css   .loader { display:flex; gap:8px }
+ *                       .spinner { width:20px; animation:spinPulse 4s }
+ *                       .loadingMessage { … }
+ *
+ * THE INTERPOLATED TEMPLATE IS THE SAME FAMILY, which the enumeration also settled. Of
+ * 200 real `className={`…`}` occurrences, 165 are a literal plus `${styles.x}` and 85
+ * are `${cond ? styles.a : styles.b}` - a variant, with the condition naming the prop
+ * and both branches naming a class in this file. Exactly one is a ternary between two
+ * string literals. So this reader covers a family I had written off as impossible.
+ */
+/** A CSS pseudo-class or attribute, mapped to the state name the contract uses. */
+const STATE_OF = [
+    [/:hover\b/, "hover"],
+    [/:focus-visible\b/, "focusVisible"],
+    [/:focus-within\b/, "focus"],
+    [/:focus\b/, "focus"],
+    [/:active\b/, "active"],
+    [/:disabled\b|\[disabled\]/, "disabled"],
+    [/:checked\b|\[data-checked\]|\[aria-checked="?true"?\]/, "checked"],
+    [/\[aria-selected="?true"?\]|\[data-selected\]/, "selected"],
+    [/\[open\]|\[aria-expanded="?true"?\]|\[data-state="?open"?\]/, "open"],
+    [/:invalid\b|\[aria-invalid="?true"?\]/, "invalid"],
+    [/:read-only\b|\[readonly\]/, "readOnly"],
+    [/::placeholder\b/, "placeholder"],
+    [/:nth-child\(even\)/, "even"],
+    [/:nth-child\(odd\)/, "odd"],
+    [/:first-child\b/, "first"],
+    [/:last-child\b/, "last"],
+    [/:empty\b/, "empty"],
+];
+/** `[data-theme="dark"]`, `.dark`, `[data-scheme=dark]` - how a project says dark. */
+const DARK = /\[data-theme=["']?dark["']?\]|\[data-scheme=["']?dark["']?\]|(^|\s)\.dark(\s|$)/;
+/** `kebab-case` → `camelCase`, which is the only spelling the contract accepts. */
+export function camel(prop) {
+    return prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/** `.loadingMessage` → `loading-message`. THEIR word, only re-spelled for a class. */
+export function partName(authored) {
+    return authored
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+/** Comments out, so a `{` inside one cannot end a block early. */
+function stripCssComments(css) {
+    return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+function rules(css, media = null, out = []) {
+    let i = 0;
+    while (i < css.length) {
+        const open = css.indexOf("{", i);
+        if (open === -1)
+            break;
+        const head = css.slice(i, open).trim();
+        // Balance to the matching close, because an at-rule contains whole rules.
+        let depth = 0;
+        let close = -1;
+        for (let j = open; j < css.length; j++) {
+            if (css[j] === "{")
+                depth += 1;
+            else if (css[j] === "}") {
+                depth -= 1;
+                if (depth === 0) {
+                    close = j;
+                    break;
+                }
+            }
+        }
+        if (close === -1)
+            break;
+        const body = css.slice(open + 1, close);
+        if (head.startsWith("@")) {
+            const at = /^@media\b/.test(head) ? head : null;
+            if (/^@(?:media|supports|layer)\b/.test(head)) {
+                rules(body, at ?? media, out);
+            }
+            else {
+                // `@keyframes` and friends: the caller reads them whole.
+                out.push({ selector: head, body, media });
+            }
+        }
+        else if (head) {
+            out.push({ selector: head, body, media });
+        }
+        i = close + 1;
+    }
+    return out;
+}
+/** `prop: value;` pairs, in the camelCase the contract uses. */
+function declarations(body) {
+    const out = {};
+    // Only the top level: a nested rule's declarations belong to that rule.
+    const flat = body.replace(/\{[^{}]*\}/g, "").replace(/[^;]*\{/g, "");
+    for (const piece of flat.split(";")) {
+        const colon = piece.indexOf(":");
+        if (colon === -1)
+            continue;
+        const prop = piece.slice(0, colon).trim();
+        const value = piece.slice(colon + 1).trim();
+        if (!/^-?[a-z][a-z-]*$/.test(prop) || !value)
+            continue;
+        // A value that could break out of the stylesheet is not a value we carry.
+        if (/[<>{}@]/.test(value))
+            continue;
+        out[camel(prop)] = value;
+    }
+    return out;
+}
+/** `min-width: 768px` out of a media query, or null for anything else. */
+function minWidthOf(media) {
+    if (!media)
+        return null;
+    const m = /min-width\s*:\s*([\d.]+(?:px|rem|em))/i.exec(media);
+    return m ? m[1] : null;
+}
+const CLASS_TOKEN = /\.(-?[_a-zA-Z][\w-]*)/g;
+/** Every class the selector names, in order - the last one is the target. */
+function classesIn(selector) {
+    CLASS_TOKEN.lastIndex = 0;
+    return [...selector.matchAll(CLASS_TOKEN)].map((m) => m[1]);
+}
+function emptyClass() {
+    return {
+        base: {},
+        states: {},
+        dark: {},
+        at: {},
+        darkStates: {},
+        children: [],
+    };
+}
+/**
+ * One module stylesheet, read.
+ *
+ * `declared` resolves a `var(--their-token)` to the ref for the token they named, the
+ * same way the utility reader does - so the value travels as `{radius.md}` rather than
+ * as a literal, and the recipe re-themes.
+ */
+export function readModuleCss(css) {
+    const out = { classes: {}, keyframes: {}, unslotted: [] };
+    const clean = stripCssComments(css);
+    for (const rule of rules(clean)) {
+        if (rule.selector.startsWith("@keyframes")) {
+            const name = rule.selector.replace(/^@keyframes\s+/, "").trim();
+            if (name)
+                out.keyframes[name] = rule.body.trim();
+            continue;
+        }
+        if (rule.selector.startsWith("@")) {
+            out.unslotted.push(rule.selector);
+            continue;
+        }
+        // A comma-separated selector is several rules with one body.
+        for (const one of rule.selector.split(",")) {
+            const selector = one.trim();
+            if (!selector)
+                continue;
+            const names = classesIn(selector);
+            if (names.length === 0) {
+                // An element or `:root` selector styles something this reader cannot attach to
+                // a component. Said out loud rather than dropped.
+                out.unslotted.push(selector);
+                continue;
+            }
+            const target = names[names.length - 1];
+            const entry = out.classes[target] ?? emptyClass();
+            out.classes[target] = entry;
+            // A descendant selector records the RELATION as well as the styles: `.panel
+            // .title` says title lives inside panel, which is the anatomy for free.
+            if (names.length > 1) {
+                const parent = names[names.length - 2];
+                const above = out.classes[parent] ?? emptyClass();
+                if (!above.children.includes(target))
+                    above.children.push(target);
+                out.classes[parent] = above;
+            }
+            const block = declarations(rule.body);
+            if (Object.keys(block).length === 0)
+                continue;
+            const isDark = DARK.test(selector);
+            const state = STATE_OF.find(([re]) => re.test(selector))?.[1] ?? null;
+            const width = minWidthOf(rule.media);
+            if (width) {
+                // A breakpoint layer wins over the state split: `@media … { .x:hover }` is rare
+                // enough that carrying it as the breakpoint's block is the honest simplification,
+                // and the selector is reported when it is neither.
+                entry.at[width] = { ...entry.at[width], ...block };
+                continue;
+            }
+            if (isDark && state) {
+                entry.darkStates[state] = { ...entry.darkStates[state], ...block };
+                continue;
+            }
+            if (isDark) {
+                entry.dark = { ...entry.dark, ...block };
+                continue;
+            }
+            if (state) {
+                entry.states[state] = { ...entry.states[state], ...block };
+                continue;
+            }
+            entry.base = { ...entry.base, ...block };
+        }
+    }
+    return out;
+}
+// ---------------------------------------------------------------------------
+// The other half: which element wears which class
+// ---------------------------------------------------------------------------
+/** `import styles from "./X.module.css"` - the local name and the file. */
+const MODULE_IMPORT = /import\s+([A-Za-z_$][\w$]*)\s+from\s+["']([^"']*\.module\.(?:css|scss|sass|less))["']/g;
+export function moduleImports(source) {
+    MODULE_IMPORT.lastIndex = 0;
+    return [...source.matchAll(MODULE_IMPORT)].map((m) => ({
+        local: m[1],
+        specifier: m[2],
+    }));
+}
+/**
+ * A generic in type position, not an element.
+ *
+ * The same discriminator the utility reader uses, for the same reason: JSX follows `(`,
+ * `{`, `>`, a newline, a keyword or nothing, while a type argument follows an
+ * identifier. `return <Foo />` is the keyword case, so the keyword list is here too.
+ */
+const JSX_BEFORE = /\b(return|case|default|await|yield|typeof|in|of|do|else|new)$/;
+function looksLikeTypeArg(source, at) {
+    for (let i = at - 1; i >= 0; i--) {
+        const c = source[i];
+        if (c === " " || c === "\t")
+            continue;
+        if (!/[A-Za-z0-9_)\]]/.test(c))
+            return false;
+        return !JSX_BEFORE.test(source.slice(Math.max(0, i - 11), i + 1));
+    }
+    return false;
+}
+function scanTags(source) {
+    const out = [];
+    for (let i = 0; i < source.length; i++) {
+        if (source[i] !== "<")
+            continue;
+        const closing = source[i + 1] === "/";
+        const nameAt = i + (closing ? 2 : 1);
+        const name = /^[A-Za-z][\w.]*/.exec(source.slice(nameAt, nameAt + 64))?.[0];
+        if (!name)
+            continue;
+        if (!closing && looksLikeTypeArg(source, i))
+            continue;
+        let depth = 0;
+        let quote = null;
+        let end = -1;
+        for (let j = nameAt + name.length; j < source.length; j++) {
+            const ch = source[j];
+            if (quote) {
+                if (ch === "\\")
+                    j += 1;
+                else if (ch === quote)
+                    quote = null;
+                continue;
+            }
+            if (ch === '"' || ch === "'" || ch === "`") {
+                quote = ch;
+                continue;
+            }
+            if (ch === "{")
+                depth += 1;
+            else if (ch === "}")
+                depth -= 1;
+            else if (ch === ">" && depth === 0) {
+                end = j;
+                break;
+            }
+        }
+        if (end === -1)
+            continue;
+        const body = source.slice(nameAt + name.length, end);
+        if (closing) {
+            out.push({ at: i, kind: "close", tag: name, body: "" });
+        }
+        else {
+            out.push({ at: i, kind: "open", tag: name, body });
+            // Self-closing opens and closes at once.
+            if (body.trimEnd().endsWith("/")) {
+                out.push({ at: i + 1, kind: "close", tag: name, body: "" });
+            }
+        }
+        i = end;
+    }
+    return out;
+}
+/**
+ * Which class each element wears, and how deep it sits.
+ *
+ * The FIRST element carrying a module class is the component's own surface; everything
+ * below it is a part. That is the same rule the utility reader follows with
+ * `rootClasses`, applied to a different way of spelling a class.
+ */
+export function readModuleUsage(source, local) {
+    const out = [];
+    const ref = new RegExp(`\\b${local}\\.([A-Za-z_$][\\w$]*)`, "g");
+    const bracket = new RegExp(`\\b${local}\\[`, "g");
+    // Depth by counting opens and closes as they appear, which is enough for well-formed
+    // JSX and degrades to a flat list rather than to a wrong tree.
+    const events = scanTags(source);
+    let depth = 0;
+    for (const event of events) {
+        if (event.kind === "close") {
+            depth = Math.max(0, depth - 1);
+            continue;
+        }
+        const body = event.body;
+        if (bracket.test(body)) {
+            // `styles[key]` picks a class at runtime, and the class is not in the source.
+            // Impossible rather than hard, so it is not attempted.
+            bracket.lastIndex = 0;
+        }
+        ref.lastIndex = 0;
+        const named = [...body.matchAll(ref)].map((m) => m[1]);
+        if (named.length > 0) {
+            /**
+             * THE TERNARY IS A VARIANT, and the enumeration is why this is here: 85 of 200
+             * real interpolated templates are `${cond ? styles.a : styles.b}`. The condition
+             * names the prop; each branch names a class in this file.
+             */
+            const variants = [];
+            const TERNARY = new RegExp(`([!A-Za-z_$][\\w$.!]*)\\s*\\?\\s*(?:${local}\\.([\\w$]+)|["'][^"']*["'])\\s*:\\s*(?:${local}\\.([\\w$]+)|["'][^"']*["'])`, "g");
+            for (const t of body.matchAll(TERNARY)) {
+                const prop = t[1].replace(/^!/, "").split(".").pop() ?? "";
+                if (!prop)
+                    continue;
+                variants.push({
+                    prop,
+                    whenTrue: t[2] ?? null,
+                    whenFalse: t[3] ?? null,
+                });
+            }
+            // The resting class is the first one that is not a ternary branch.
+            const inTernary = new Set(variants.flatMap((v) => [v.whenTrue, v.whenFalse].filter(Boolean)));
+            const resting = named.find((n) => !inTernary.has(n)) ?? named[0];
+            out.push({ className: resting, depth, tag: event.tag, variants });
+        }
+        depth += 1;
+    }
+    return out;
+}
+// ---------------------------------------------------------------------------
+// The bridge: a module read + its usage, as one Transcription
+// ---------------------------------------------------------------------------
+/**
+ * ONE FUNNEL, so a module-styled component arrives in exactly the shape a
+ * utility-styled one does.
+ *
+ * Everything downstream - the anatomy tree, the floor, the compiler, the vitrine -
+ * already knows how to read a `Transcription`. Adding a second shape beside it would
+ * mean every consumer learning a second one, and a consumer that learns half is how
+ * "valid and unread" happens.
+ *
+ * `declared` resolves `var(--their-token)` to the ref for the token they named, the same
+ * way the utility reader does, so the value re-themes instead of being frozen.
+ */
+export function transcribeModule(read, usage, declared) {
+    const resolve = (block) => {
+        const out = {};
+        for (const [prop, value] of Object.entries(block)) {
+            out[prop] = value.replace(/var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,[^)]*)?\)/g, (whole, name) => declared.has(name) ? tokenRefFor(name) : whole);
+        }
+        return out;
+    };
+    const sorted = [...usage].sort((a, b) => a.depth - b.depth);
+    const root = sorted[0];
+    const parts = {};
+    const layers = [];
+    let count = 0;
+    const take = (className) => {
+        const c = read.classes[className];
+        if (!c)
+            return null;
+        const base = resolve(c.base);
+        const dark = resolve(c.dark);
+        const states = {};
+        for (const [state, block] of Object.entries(c.states)) {
+            states[state] = resolve(block);
+        }
+        count +=
+            Object.keys(base).length +
+                Object.keys(dark).length +
+                Object.values(states).reduce((n, b) => n + Object.keys(b).length, 0);
+        return { base, dark, states, own: c };
+    };
+    const rootTaken = root ? take(root.className) : null;
+    for (const u of sorted) {
+        const taken = u === root ? rootTaken : take(u.className);
+        if (!taken)
+            continue;
+        if (u !== root) {
+            parts[partName(u.className)] = {
+                base: taken.base,
+                dark: taken.dark,
+                states: taken.states,
+            };
+        }
+        // A breakpoint block and a dark state are LAYERS, because neither the flat map nor
+        // the dark half can hold a condition of two halves.
+        for (const [width, block] of Object.entries(taken.own.at)) {
+            const style = resolve(block);
+            if (Object.keys(style).length === 0)
+                continue;
+            count += Object.keys(style).length;
+            layers.push({ at: width, style });
+        }
+        for (const [state, block] of Object.entries(taken.own.darkStates)) {
+            const style = resolve(block);
+            if (Object.keys(style).length === 0)
+                continue;
+            count += Object.keys(style).length;
+            layers.push({ when: { state, scheme: "dark" }, style });
+        }
+        /**
+         * `${selected ? styles.selected : styles.notSelected}` - a variant, read from the
+         * markup. Both branches name a class in this file, so both become a layer under the
+         * prop the condition names.
+         */
+        for (const v of u.variants) {
+            for (const [option, className] of [
+                ["true", v.whenTrue],
+                ["false", v.whenFalse],
+            ]) {
+                if (!className)
+                    continue;
+                const branch = read.classes[className];
+                if (!branch)
+                    continue;
+                const style = resolve(branch.base);
+                if (Object.keys(style).length === 0)
+                    continue;
+                count += Object.keys(style).length;
+                layers.push({ when: { variant: { [v.prop]: option } }, style });
+            }
+        }
+    }
+    /**
+     * The tree, from the depth the markup put each element at. `children` of the root are
+     * everything one level down; deeper than that is folded up rather than guessed, because
+     * the depth counter degrades to a flat list on malformed JSX and a wrong tree is worse
+     * than a shallow one.
+     */
+    const tree = sorted
+        .filter((u) => u !== root)
+        .map((u) => ({ as: formFor(u.tag), part: partName(u.className) }));
+    return {
+        base: rootTaken?.base ?? {},
+        dark: rootTaken?.dark ?? {},
+        states: rootTaken?.states ?? {},
+        layers,
+        parts,
+        tree,
+        keyframes: read.keyframes,
+        read: count,
+    };
+}
+/** The html tag → the preview form. The same nine the anatomy contract accepts. */
+function formFor(tag) {
+    if (/^(img|picture|video|canvas|svg)$/.test(tag))
+        return "image";
+    if (/^h[1-6]$/.test(tag))
+        return "heading";
+    if (/^(button|a)$/.test(tag))
+        return "button";
+    if (/^(input|textarea|select)$/.test(tag))
+        return "field";
+    if (/^(span|p|label|strong|em|small|li|td|th|dt|dd)$/.test(tag))
+        return "text";
+    if (/^(ul|ol|table|tbody|thead|tr|section|article|nav|aside|header|footer|form|main|div)$/.test(tag)) {
+        return "stack";
+    }
+    // A capitalised tag is a component of theirs, and the frontier reader decides what it
+    // reaches - not this.
+    return /^[A-Z]/.test(tag) ? "component" : "stack";
+}
+/**
+ * A declared custom property as a token ref in the document's namespace. Their name is
+ * the path, which is "your names travel unchanged" one level deeper.
+ */
+function tokenRefFor(name) {
+    const bare = name.replace(/^--/, "");
+    if (bare.startsWith("color-")) {
+        const rest = bare.slice("color-".length);
+        const m = /^(.*)-(\d{2,4})$/.exec(rest);
+        return m ? `{color.${m[1]}.${m[2]}}` : `{color.${rest}}`;
+    }
+    if (bare.startsWith("radius-"))
+        return `{radius.${bare.slice(7)}}`;
+    if (bare.startsWith("spacing-"))
+        return `{spacing.${bare.slice(8)}}`;
+    if (bare.startsWith("shadow-"))
+        return `{shadow.${bare.slice(7)}}`;
+    if (bare.startsWith("text-"))
+        return `{typography.scale.${bare.slice(5)}.fontSize}`;
+    if (bare.startsWith("font-"))
+        return `{typography.families.${bare.slice(5)}}`;
+    return `var(${name})`;
+}

package/dist/doctor/transcribe.js

@@ -235,6 +235,20 @@ export function readUtility(utility, declared) {
     const keyword = TYPE_KEYWORD[core];
     if (keyword)
         return keyword;
+    /**
+     * BORDER WIDTH - `border`, `border-2`, `border-b`, `border-t-4`.
+     *
+     * `border-b border-lightgray-300` on a real table row gave up the colour and lost the
+     * WIDTH, so the row reproduced its border colour and no border (spec, 01/08). Tailwind
+     * splits the two across separate utilities and only one of them was in a table.
+     */
+    const width = BORDER_WIDTH.exec(core);
+    if (width) {
+        const side = width[1] ? BORDER_SIDE[width[1]] : "";
+        const property = side ? `border${side}Width` : "borderWidth";
+        const value = width[2] ? `${width[2]}px` : "1px";
+        return { property, value };
+    }
     /**
      * AN ARBITRARY VALUE POINTING AT ONE OF THEIR OWN TOKENS.
      *
@@ -258,8 +272,22 @@ export function readUtility(utility, declared) {
     if (bracket !== -1 && core.endsWith("]")) {
         const head = core.slice(0, bracket);
         const inner = core.slice(bracket + 2, -1);
-        const property = COLOR_PROPERTY[head] ?? SPACING_PROPERTY[head] ?? BRACKET_PROPERTY[head];
         const value = resolveArbitrary(inner, declared);
+        /**
+         * `text-[…]` IS AMBIGUOUS AND THE VALUE DECIDES.
+         *
+         * `text-[1.8em]` is a font size and `text-[#fff]` is a colour, and the head alone
+         * cannot tell them apart. Reading the head first put `fontSize: 1.8em` into `color`
+         * on a real `Text` component - a wrong value, which is worse than a missing one
+         * (probe, 01/08). The same ambiguity the scale branch below already resolves.
+         */
+        const property = head === "text"
+            ? value && LOOKS_LIKE_LENGTH.test(value.value)
+                ? "fontSize"
+                : COLOR_PROPERTY.text
+            : (COLOR_PROPERTY[head] ??
+                SPACING_PROPERTY[head] ??
+                BRACKET_PROPERTY[head]);
         if (property && value) {
             return { property, value: value.value, token: value.token };
         }
@@ -380,6 +408,19 @@ export function readUtility(utility, declared) {
  * `rounded-[…]` is a radius, `shadow-[…]` an elevation, `text-[…]` ambiguous by design
  * (a colour or a size) and resolved by what the value looks like.
  */
+/** `border`, `border-2`, `border-b`, `border-b-2` - a width, never a colour. The colour
+ *  is a separate utility (`border-ocean-500`) and the colour table already reads it. */
+const BORDER_WIDTH = /^border(?:-([xytrbl]))?(?:-(\d+))?$/;
+const BORDER_SIDE = {
+    t: "Top",
+    r: "Right",
+    b: "Bottom",
+    l: "Left",
+    x: "Inline",
+    y: "Block",
+};
+/** A length or a token ref to one - not a colour. `1.8em`, `20px`, `{typography.…}`. */
+const LOOKS_LIKE_LENGTH = /^-?[\d.]+(?:px|rem|em|ch|ex|vw|vh|vmin|vmax|%|pt|cm|mm|in)$|^\{(?:typography|spacing|radius)\.|^(?:calc|clamp|min|max)\(/;
 const BRACKET_PROPERTY = {
     rounded: "borderRadius",
     shadow: "boxShadow",
@@ -454,6 +495,51 @@ function refFor(name) {
  * `group-data-[checked]:` value written into the resting state would be a look
  * the component never has.
  */
+/**
+ * `style={{ … }}` - 7 of 35 components in a real library and 73 of 317 in a real app.
+ *
+ * A literal, so it re-themes nowhere - and that is exactly why it travels. v1 is a
+ * MIRROR and v2 is where a literal becomes a token they approve, which is the rule this
+ * pipeline already runs on everywhere else. The alternative is the component arriving
+ * empty, and an empty component is not more honest than a literal one (dono, 01/08).
+ *
+ * Only the FIRST inline style in the file, matching what `rootClasses` does: it is the
+ * element the component returns, and everything deeper is a part this reader does not
+ * attempt.
+ */
+const INLINE_STYLE = /style=\{\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}\}/;
+export function readInlineStyle(source) {
+    const m = INLINE_STYLE.exec(source);
+    if (!m)
+        return {};
+    const out = {};
+    for (const piece of m[1].split(",")) {
+        const colon = piece.indexOf(":");
+        if (colon === -1)
+            continue;
+        const prop = piece
+            .slice(0, colon)
+            .trim()
+            .replace(/^["']|["']$/g, "");
+        let value = piece.slice(colon + 1).trim();
+        // A value computed at runtime is not in the source, so there is nothing to read.
+        if (!value || /[`$]|\?|=>|\(/.test(value))
+            continue;
+        value = value.replace(/^["']|["']$/g, "");
+        if (!/^[a-zA-Z][\w]*$/.test(prop))
+            continue;
+        if (/[<>{}@;]/.test(value))
+            continue;
+        // React accepts a bare number for a length property and means pixels.
+        if (/^-?\d+(\.\d+)?$/.test(value) && !UNITLESS.test(prop)) {
+            value = `${value}px`;
+        }
+        out[prop] = value;
+    }
+    return out;
+}
+/** Properties React leaves unitless, so a bare number is not pixels. */
+const UNITLESS = /^(opacity|zIndex|flex|flexGrow|flexShrink|order|lineHeight|fontWeight|zoom|columnCount|fillOpacity|strokeOpacity|animationIterationCount)$/;
 export function transcribe(classes, declared) {
     const out = {
         base: {},
@@ -598,20 +684,3 @@ export function rootClasses(source) {
         .flatMap((m) => m[1].split(/\s+/))
         .filter((c) => c.length > 0 && !c.includes("${"));
 }
-/**
- * Transcribe the parts a skill named, using the same reader the root used.
- *
- * `declared` comes from the census itself on the `--census` path, so a run that
- * only sends a file it was handed still resolves their tokens by name.
- */
-export function transcribeParts(parts, declared) {
-    const out = {};
-    for (const part of parts) {
-        const name = part.name?.trim();
-        if (!name || typeof part.classes !== "string")
-            continue;
-        const t = transcribe(part.classes.split(/\s+/).filter(Boolean), declared);
-        out[name] = { base: t.base, dark: t.dark, states: t.states };
-    }
-    return out;
-}

package/dist/doctor/variant-read.js

@@ -525,6 +525,116 @@ export function readInlineConditions(source) {
     }
     return layers;
 }
+/**
+ * A LOOKUP RECORD - the shape 16 of 35 components in a real library use, against 2 for
+ * `cva`.
+ *
+ *     const colorStyles: Record<TagColor, string> = {
+ *       primary: "bg-ocean-500 text-white",
+ *       danger:  "bg-danger-400 text-white",
+ *     };
+ *     className={cn("inline-flex px-2.5 rounded-full", colorStyles[color], className)}
+ *
+ * As structured as `cva` and more common by five to one. The first version of this file
+ * read `cva` and the conditional expression - the two shapes I assumed - and covered 6%
+ * of the library. Enumerating first is the rule that produced this function (dono, 01/08).
+ *
+ * THE PROP COMES FROM THE INDEX, not from the record's name. `colorStyles[color]` says
+ * the axis is `color`; the variable could be called anything. When the index is not a
+ * bare identifier - `styles[key]`, `map[a ?? b]` - the axis is unknowable and the record
+ * is skipped rather than attached to a guess.
+ */
+const LOOKUP_RECORD = /(?:const|let)\s+([A-Za-z_$][\w$]*)\s*(?::\s*(?:Record|Partial<Record)<[^>]*>+)?\s*=\s*\{/g;
+/** `colorStyles[color]` - the record, and the prop that indexes it. */
+const RECORD_INDEX = /([A-Za-z_$][\w$]*)\s*\[\s*([A-Za-z_$][\w$]*)\s*\]/g;
+export function readLookupRecords(source, 
+/** Filled with axis → options, because the axis NAMES have to travel too: a first pass
+ *  sent the styles and not the names, so a Tag with eight colours reported no axis at
+ *  all (probe, 01/08). */
+axesOut) {
+    const clean = stripComments(source);
+    // Which prop indexes which record. Read first, because a record nobody indexes is a
+    // constant rather than a variant axis.
+    const axisOf = new Map();
+    RECORD_INDEX.lastIndex = 0;
+    for (const m of clean.matchAll(RECORD_INDEX)) {
+        if (!axisOf.has(m[1]))
+            axisOf.set(m[1], m[2]);
+    }
+    const layers = [];
+    LOOKUP_RECORD.lastIndex = 0;
+    for (const m of clean.matchAll(LOOKUP_RECORD)) {
+        const symbol = m[1];
+        const axis = axisOf.get(symbol);
+        if (!axis)
+            continue;
+        const open = (m.index ?? 0) + m[0].length - 1;
+        const end = endOf(clean, open);
+        if (end === -1)
+            continue;
+        const entries = topLevelEntries(clean.slice(open + 1, end - 1));
+        // Two options is what makes a closed set somebody chose from - the same rule the
+        // contract writer and the doctor already follow.
+        const options = entries.filter((e) => literalClasses(e.value).length > 0);
+        if (options.length < 2)
+            continue;
+        if (axesOut) {
+            const names = options.map((o) => o.key);
+            axesOut[axis] = [...new Set([...(axesOut[axis] ?? []), ...names])];
+        }
+        for (const option of options) {
+            const per = splitByCondition(literalClasses(option.value), {
+                [axis]: option.key,
+            });
+            layers.push(...per.layers);
+        }
+    }
+    return layers;
+}
+/**
+ * A TERNARY BETWEEN TWO CLASS LITERALS - 8 of 35 in the same library.
+ *
+ *     className={cn("base", isActive ? "bg-ocean-500" : "bg-transparent")}
+ *
+ * Both branches are a look, so both are a layer: the truthy one under the prop being
+ * `true` and the falsy one under `false`. Reading only the truthy half would say the
+ * component has one conditional look when it has two.
+ */
+const CLASS_TERNARY = /([!A-Za-z_$][\w$.!]*)\s*(?:===\s*["']([^"']+)["']\s*)?\?\s*["']([^"']*)["']\s*:\s*["']([^"']*)["']/g;
+export function readClassTernaries(source) {
+    const layers = [];
+    CLASS_TERNARY.lastIndex = 0;
+    for (const m of stripComments(source).matchAll(CLASS_TERNARY)) {
+        const negated = m[1].startsWith("!");
+        const prop = m[1].replace(/^!/, "").split(".").pop() ?? "";
+        if (!prop)
+            continue;
+        // `x === "solid" ? a : b` names the option; a bare `x ? a : b` is the boolean, and a
+        // negated condition swaps which branch means true.
+        const whenTrue = m[2] ?? (negated ? "false" : "true");
+        const whenFalse = m[2] ? null : negated ? "true" : "false";
+        for (const [option, raw] of [
+            [whenTrue, m[3]],
+            [whenFalse, m[4]],
+        ]) {
+            if (!option)
+                continue;
+            const classes = raw.split(/\s+/).filter(Boolean);
+            if (classes.length === 0)
+                continue;
+            const per = splitByCondition(classes, { [prop]: option });
+            layers.push(...per.layers);
+        }
+    }
+    return layers;
+}
+/**
+ * A LOOKUP INDEXED BY A TERNARY, which is how the same record serves a boolean.
+ *
+ * Left out on purpose, and said so rather than half-read: `styles[selected ? "on" : "off"]`
+ * would need both the record and the condition resolved together, and the enumeration
+ * found exactly four of them in 530 files. Four is not worth a wrong reading.
+ */
 /**
  * The whole reading of one file's variant styling, transcribed - ready for a recipe.
  *
@@ -533,7 +643,13 @@ export function readInlineConditions(source) {
  */
 export function transcribeVariants(source, declared) {
     const reads = readVariants(source);
-    const inline = readInlineConditions(source);
+    const fromRecords = {};
+    const inline = [
+        ...readInlineConditions(source),
+        // The two shapes the enumeration found to be five times more common than `cva`.
+        ...readLookupRecords(source, fromRecords),
+        ...readClassTernaries(source),
+    ];
     const axes = {};
     const defaults = {};
     const allLayers = [];
@@ -553,6 +669,10 @@ export function transcribeVariants(source, declared) {
         }
     }
     allLayers.push(...inline);
+    for (const [axis, options] of Object.entries(fromRecords)) {
+        if (options.length >= 2)
+            axes[axis] = options;
+    }
     const layers = allLayers
         .map((layer) => {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.81",
+  "version": "0.16.83",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {