synthesisui 0.16.47 → 0.16.50

package/dist/commands/doctor.js

@@ -1,6 +1,8 @@
 import { readdir, readFile } from "node:fs/promises";
 import { join, relative, resolve } from "node:path";
 import { findDivergences } from "../doctor/coherence.js";
+import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
+import { checkContracts } from "../doctor/contract-check.js";
 import { findFrozenBindings } from "../doctor/frozen.js";
 import { appendEvent, readEvents, summarize } from "../doctor/ledger.js";
 import { bindingsFromDocument, countComponents, findOverrides, } from "../doctor/overrides.js";
@@ -29,6 +31,8 @@ import { body, paint, section, snippet } from "../output.js";
  * Runs offline, needs no account, and touches nothing. A tool that asks for a
  * signup before it tells you anything is a tool nobody runs twice.
  */
+/** Files that compose components to SHOW them, not to ship them. */
+const IS_ASIDE = /(\.(spec|test|stories)\.[a-z]+$|__tests__\/|(^|\/)\.storybook\/)/;
 const EXTS = [".tsx", ".ts", ".jsx", ".js", ".css", ".scss", ".vue", ".svelte"];
 const SKIP = new Set([
     "node_modules",
@@ -404,6 +408,8 @@ export async function doctor(opts) {
      */
     const wiring = await readWiring(root, table.slug);
     const skippedProjects = [];
+    const tally = emptyTally();
+    const internalSpecs = await internalSpecifiers(root);
     for await (const file of scopes.length > 0
         ? walkAll(scopes)
         : walk(root, skippedProjects)) {
@@ -412,6 +418,13 @@ export async function doctor(opts) {
             continue;
         const rel = relative(root, file);
         reports.push(scanSource(rel, src, table));
+        // Composition, alongside values: the contract check needs to know which
+        // elements this file writes and with what options. Stories and tests are
+        // excluded for the reason they are excluded everywhere else - they compose
+        // components to SHOW them.
+        if (documents.length > 0 && !IS_ASIDE.test(rel)) {
+            scanComponentsInto(tally, rel, src, internalSpecs);
+        }
         if (recipes.size > 0) {
             for (const o of findOverrides(src, recipes))
                 overrides.push({ ...o, file: rel });
@@ -433,6 +446,7 @@ export async function doctor(opts) {
     for (const r of reports) {
         r.findings = r.findings.filter((f) => !explained.has(`${r.file}:${f.line}:${f.literal.toLowerCase()}`));
     }
+    const breaches = checkContracts(tallyToInventory(tally, 400), documents);
     const d = diagnose(reports);
     // Nine releases in one evening added a section each, every one justified on
     // its own, and nobody read the whole. The result was 151 lines carrying about
@@ -1081,6 +1095,35 @@ export async function doctor(opts) {
                         : "")));
             }
         }
+        /**
+         * A CONTRACT BROKEN, which is the first thing this command has ever said
+         * about composition rather than about values.
+         *
+         * A colour outside the palette has always been drift. This is the same
+         * sentence about a component: `<WidgetCard variant="danger">` on a
+         * component whose contract offers `neutral` and `ocean`. No linter and no
+         * type can say it, because the answer lives in the design system.
+         */
+        if (breaches.length > 0) {
+            // Grouped by element AND axis: grouping by element alone printed
+            // `variant="danger" | "huge"` and then offered the options for variant,
+            // when `huge` was a size. One line per axis or the line lies.
+            const byAxis = new Map();
+            for (const b of breaches) {
+                const k = `${b.element}\u0000${b.axis}`;
+                byAxis.set(k, [...(byAxis.get(k) ?? []), b]);
+            }
+            console.log("");
+            console.log(body(`${paint.strong(String(breaches.length))} use${breaches.length === 1 ? "" : "s"} outside the contract`));
+            for (const list of [...byAxis.values()].slice(0, 5)) {
+                const first = list[0];
+                const values = [...new Set(list.map((b) => b.used))];
+                console.log(body(`    <${first.element} ${first.axis}="${values.join('" | "')}"> ${paint.faint(`- your ds-${first.recipe} offers ${first.offered.join(", ")}`)}`));
+            }
+            if (byAxis.size > 5) {
+                console.log(body(paint.faint(`    (${byAxis.size - 5} more)`)));
+            }
+        }
         if (plan.length > 0) {
             console.log("");
             console.log(body("Where to start"));

package/dist/commands/import.js

@@ -2,7 +2,7 @@ import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { basename, join, relative } from "node:path";
 import { readToken, resolveRegistry } from "../config.js";
 import { isNearDuplicate } from "../doctor/color-distance.js";
-import { emptyTally, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
+import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
 import { crosswalk } from "../doctor/crosswalk.js";
 import { diagnose, scanSource } from "../doctor/scan.js";
 import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
@@ -126,57 +126,6 @@ async function resolveDeps(root) {
     }
     return deps;
 }
-/**
- * Specifier prefixes this workspace owns: the aliases its tsconfig declares and
- * the names of its sibling packages. Everything else that is not relative comes
- * from node_modules.
- */
-async function internalSpecifiers(root) {
-    const out = new Set();
-    for (let up = 0, dir = root; up < 4; up++) {
-        for (const f of ["tsconfig.json", "tsconfig.base.json"]) {
-            const raw = await readFile(join(dir, f), "utf8").catch(() => null);
-            if (!raw)
-                continue;
-            try {
-                // tsconfig allows comments and trailing commas; a census must not die
-                // on either, and the keys are all we want.
-                for (const m of raw.matchAll(/"([^"]+)\/?\*?"\s*:\s*\[/g)) {
-                    const key = m[1].replace(/\/\*$/, "").replace(/\*$/, "");
-                    if (key && !key.startsWith("."))
-                        out.add(key.replace(/\/$/, ""));
-                }
-            }
-            catch {
-                // unreadable config costs the aliases, not the run
-            }
-        }
-        for (const group of ["packages", "libs", "apps"]) {
-            for (const e of await readdir(join(dir, group), {
-                withFileTypes: true,
-            }).catch(() => [])) {
-                if (!e.isDirectory())
-                    continue;
-                const raw = await readFile(join(dir, group, e.name, "package.json"), "utf8").catch(() => null);
-                if (!raw)
-                    continue;
-                try {
-                    const name = JSON.parse(raw).name;
-                    if (typeof name === "string" && name)
-                        out.add(name);
-                }
-                catch {
-                    // same
-                }
-            }
-        }
-        const parent = join(dir, "..");
-        if (parent === dir)
-            break;
-        dir = parent;
-    }
-    return [...out];
-}
 async function detectStack(root) {
     const stack = [];
     const has = async (f) => (await readFile(join(root, f), "utf8").catch(() => null)) !== null;
@@ -336,7 +285,18 @@ export async function takeCensus(root) {
         }
     }
     const d = diagnose(reports);
-    const components = tallyToInventory(tally);
+    const inventory = tallyToInventory(tally);
+    // The verdict travels WITH the payload: the platform reads one reading rather
+    // than computing a second opinion from the same numbers, which is how two
+    // implementations of the same judgement start disagreeing.
+    const verdicts = new Map(crosswalk(inventory).map((r) => [
+        r.component.name,
+        { bucket: r.bucket, canonical: r.canonical, because: r.because },
+    ]));
+    const components = inventory.map((c) => ({
+        ...c,
+        ...(verdicts.get(c.name) ?? {}),
+    }));
     const pkgRaw = await readFile(join(root, "package.json"), "utf8").catch(() => null);
     let name = null;
     if (pkgRaw) {
@@ -477,6 +437,20 @@ function printCrosswalk(mine) {
     show(`Already in the catalogue (${exists.length})`, exists, 6);
     show(`The same decision, twice (${nearly.length})`, nearly, 6);
     show(`Only yours (${exclusive.length})`, exclusive, 8);
+    // Counted, never listed: four icons and a provider under "only yours" pad the
+    // one list worth reading with the least interesting thing in it.
+    const icons = of("icon").length;
+    const providers = of("provider").length;
+    if (icons > 0 || providers > 0) {
+        const bits = [
+            icons > 0 &&
+                `${icons} icon${icons === 1 ? "" : "s"} (a library, not recipes)`,
+            providers > 0 &&
+                `${providers} provider${providers === 1 ? "" : "s"} (no UI of their own)`,
+        ].filter(Boolean);
+        console.log(body(paint.faint(`Set aside: ${bits.join(" · ")}`)));
+        console.log("");
+    }
     console.log(body(paint.dim("Nothing was mapped. This is a reading - the adopting is a decision you make.")));
 }
 function printAgentContract() {

package/dist/doctor/components-scan.js

@@ -1,24 +1,5 @@
-/**
- * WHAT COMPONENTS A PROJECT ACTUALLY USES, and with which props.
- *
- * The census reads vocabulary - colours, radii, spacing, fonts - and is blind
- * to components. So a component library imported cleanly (dono, 30/07) arrived
- * with thirteen colour ramps and not one of its eight atoms, and the system
- * came out looking like ours instead of theirs.
- *
- * This is the same kind of arithmetic pointed at a different question: which
- * elements does this code compose, how often, in how many files, and which
- * literal values do their props take. No semantics, no judgement, no guessing
- * what a component MEANS - that comparison happens later and with a person in
- * the loop.
- *
- * A SCANNER, NOT A PARSER, and honest about it. The CLI ships no AST, so this
- * reads JSX the way the drift scanner reads colours: by shape. It therefore
- * sees what is written literally and misses what is computed
- * (`<Comp {...props} />` contributes a use and no prop values), which is the
- * right failure - a census that guessed at spread props would be inventing
- * usage nobody wrote.
- */
+import { readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
 /**
  * Opens a JSX element whose name is capitalised - which is React's own rule for
  * "this is a component, not an html tag".
@@ -59,7 +40,19 @@ function looksLikeType(source, at) {
  * of copy wearing the shape of a variant axis. An axis is a closed set somebody
  * designed; a title is whatever that screen happens to say.
  */
-const NOT_A_DECISION = /^(class|className|style|key|ref|id|href|src|alt|type|name|value|placeholder|children|on[A-Z]|data-|aria-|title|label|text|heading|subtitle|caption|description|message|content|tooltip|hint|error|helper)$|^(class|className|on[A-Z]|data-|aria-)/;
+const CONTENT_WORD = "class|className|style|key|ref|id|href|src|alt|type|name|value|placeholder|children|title|label|text|heading|subtitle|caption|description|message|content|tooltip|hint|error|helper";
+/**
+ * Whole name, or the TAIL of a camelCase compound.
+ *
+ * `bodyClassName` and `infoContent` walked straight past a whole-name match
+ * (dono, 30/07), and `infoContent` brought four sentences of screen copy into
+ * what is supposed to be a list of variant axes. The tail is what says what a
+ * prop IS: `infoContent` is content, `bodyClassName` is a class name.
+ *
+ * Matching the tail rather than anywhere keeps `titleTone` - an axis whose name
+ * merely starts with a content word.
+ */
+const NOT_A_DECISION = new RegExp(`^(?:${CONTENT_WORD})$|[a-z](?:${CONTENT_WORD.replace(/\b([a-z])/g, (_, c) => `[${c}${c.toUpperCase()}]`)})$|^(?:on[A-Z]|data-|aria-)`);
 /** `import X, { A, B as C } from "spec"` - who owns each local name. */
 const IMPORT = /import\s+(?:type\s+)?([\s\S]*?)\s+from\s+["']([^"']+)["']/g;
 function importedNames(source, internal = []) {
@@ -166,3 +159,54 @@ export function tallyToInventory(tally, max = 80) {
         .sort((a, b) => b.files - a.files || b.count - a.count)
         .slice(0, max);
 }
+/**
+ * Specifier prefixes this workspace owns: the aliases its tsconfig declares and
+ * the names of its sibling packages. Everything else that is not relative comes
+ * from node_modules.
+ */
+export async function internalSpecifiers(root) {
+    const out = new Set();
+    for (let up = 0, dir = root; up < 4; up++) {
+        for (const f of ["tsconfig.json", "tsconfig.base.json"]) {
+            const raw = await readFile(join(dir, f), "utf8").catch(() => null);
+            if (!raw)
+                continue;
+            try {
+                // tsconfig allows comments and trailing commas; a census must not die
+                // on either, and the keys are all we want.
+                for (const m of raw.matchAll(/"([^"]+)\/?\*?"\s*:\s*\[/g)) {
+                    const key = m[1].replace(/\/\*$/, "").replace(/\*$/, "");
+                    if (key && !key.startsWith("."))
+                        out.add(key.replace(/\/$/, ""));
+                }
+            }
+            catch {
+                // unreadable config costs the aliases, not the run
+            }
+        }
+        for (const group of ["packages", "libs", "apps"]) {
+            for (const e of await readdir(join(dir, group), {
+                withFileTypes: true,
+            }).catch(() => [])) {
+                if (!e.isDirectory())
+                    continue;
+                const raw = await readFile(join(dir, group, e.name, "package.json"), "utf8").catch(() => null);
+                if (!raw)
+                    continue;
+                try {
+                    const name = JSON.parse(raw).name;
+                    if (typeof name === "string" && name)
+                        out.add(name);
+                }
+                catch {
+                    // same
+                }
+            }
+        }
+        const parent = join(dir, "..");
+        if (parent === dir)
+            break;
+        dir = parent;
+    }
+    return [...out];
+}

package/dist/doctor/contract-check.js

@@ -0,0 +1,94 @@
+/**
+ * DOES THE CODE STAY INSIDE THE CONTRACT IT SIGNED?
+ *
+ * A system that arrived from `import` carries its exclusive components as
+ * CONTRACTS: the axes declared, the styles empty. That was worth doing only if
+ * something checks them afterwards - otherwise the declaration is a comment.
+ *
+ * This is that check, and it is the first one the product makes about
+ * COMPOSITION rather than about values. A colour outside the palette has always
+ * been drift; now `<WidgetCard variant="danger">` is drift too, on a component
+ * whose contract offers `neutral` and `ocean` - and nothing else in the
+ * toolchain can say that, because the answer lives in the design system rather
+ * than in the types.
+ *
+ * Silent by construction. An axis the contract does not declare is not checked
+ * (the system has no opinion about it), a component the system does not carry is
+ * not checked, and a value that cannot be read as a literal is not guessed at.
+ * A check that fires on what it does not know teaches people to ignore it.
+ */
+/** `WidgetCard` → `widget-card`, the same shape the contract was written under. */
+export function recipeNameOf(element) {
+    return element
+        .split(".")
+        .join("-")
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "");
+}
+/** axis → the options a recipe declares, read off the document. */
+export function axesOfDocument(doc) {
+    const out = new Map();
+    const comps = doc?.components;
+    if (!comps)
+        return out;
+    for (const [name, recipe] of Object.entries(comps)) {
+        const variants = recipe
+            ?.variants;
+        if (!variants)
+            continue;
+        const axes = new Map();
+        for (const [axis, options] of Object.entries(variants)) {
+            const keys = Object.keys((options ?? {})).filter(Boolean);
+            // One option is not a closed set; the contract writer refuses to declare
+            // those, and this refuses to enforce them for the same reason.
+            if (keys.length >= 2)
+                axes.set(axis.toLowerCase(), keys);
+        }
+        if (axes.size > 0)
+            out.set(name.toLowerCase(), axes);
+    }
+    return out;
+}
+export function checkContracts(used, documents) {
+    const axes = new Map();
+    for (const doc of documents) {
+        for (const [name, a] of axesOfDocument(doc))
+            axes.set(name, a);
+    }
+    if (axes.size === 0)
+        return [];
+    const out = [];
+    for (const c of used) {
+        // A third party's component answers to its own package, not to this system.
+        if (c.from)
+            continue;
+        const recipe = recipeNameOf(c.name);
+        const contract = axes.get(recipe);
+        if (!contract)
+            continue;
+        for (const [prop, values] of Object.entries(c.props)) {
+            const offered = contract.get(prop.toLowerCase());
+            if (!offered)
+                continue;
+            const allowed = new Set(offered.map((o) => o.toLowerCase()));
+            for (const value of values) {
+                const v = value.trim().toLowerCase();
+                // `true` is what a bare boolean records; a contract about options has
+                // nothing to say about a flag.
+                if (!v || v === "true" || allowed.has(v))
+                    continue;
+                out.push({
+                    element: c.name,
+                    recipe,
+                    axis: prop,
+                    used: value,
+                    offered,
+                });
+            }
+        }
+    }
+    return out;
+}

package/dist/doctor/crosswalk.js

@@ -207,6 +207,26 @@ export function axisOverlap(a, b) {
             shared += 1;
     return shared / new Set([...va, ...vb]).size;
 }
+/**
+ * Names that are not components in the sense this crosswalk means.
+ *
+ * An ICON is a glyph in a set, and a design system models it as a library
+ * rather than as a recipe with variant axes - so listing four of them under
+ * "only yours" pads the interesting list with the least interesting thing in
+ * it (dono, 30/07). A PROVIDER renders no UI at all.
+ *
+ * Both are reported as counts instead, which says more in one line than four
+ * lines of "nothing in the catalogue does this".
+ */
+const IS_ICON = /(^Icon|Icon$)/;
+const IS_PROVIDER = /(Provider|Context)$/;
+export function classifyAside(name) {
+    if (IS_ICON.test(name))
+        return "icon";
+    if (IS_PROVIDER.test(name))
+        return "provider";
+    return null;
+}
 /** Below this, two components share a value or two by accident. */
 export const TWIN_OVERLAP = 0.5;
 /**
@@ -254,6 +274,18 @@ export function crosswalk(components) {
     }
     return mine
         .map((component) => {
+        const aside = classifyAside(component.name);
+        if (aside) {
+            return {
+                component,
+                canonical: null,
+                twins: [],
+                bucket: aside,
+                because: aside === "icon"
+                    ? "a glyph, which a system models as a library rather than a recipe"
+                    : "renders no UI - infrastructure, not a component",
+            };
+        }
         const canonical = canonicalName(component.name);
         const twins = mine
             .filter((o) => o.name !== component.name)

package/package.json

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