synthesisui 0.16.44 → 0.16.45

package/dist/commands/import.js

@@ -2,6 +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 { diagnose, scanSource } from "../doctor/scan.js";
 import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { buildTable } from "../doctor/tokens.js";
@@ -124,6 +125,57 @@ 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;
@@ -267,13 +319,23 @@ export async function takeCensus(root) {
     const table = buildTable({ css, source: "yours" });
     const schemes = parseSchemeBlocks(css);
     const reports = [];
+    const tally = emptyTally();
+    const internal = await internalSpecifiers(root);
     for await (const file of walk(root)) {
         const src = await readFile(file, "utf8").catch(() => "");
         if (!src)
             continue;
-        reports.push(scanSource(relative(root, file), src, table));
+        const rel = relative(root, file);
+        reports.push(scanSource(rel, src, table));
+        // Stories and tests compose components to SHOW them; counting those as the
+        // product's own composition is the same lie the colour census told before
+        // they were set aside.
+        if (!/(\.(spec|test|stories)\.[a-z]+$|__tests__\/|(^|\/)\.storybook\/)/.test(rel)) {
+            scanComponentsInto(tally, rel, src, internal);
+        }
     }
     const d = diagnose(reports);
+    const components = tallyToInventory(tally);
     const pkgRaw = await readFile(join(root, "package.json"), "utf8").catch(() => null);
     let name = null;
     if (pkgRaw) {
@@ -292,6 +354,7 @@ export async function takeCensus(root) {
             ? { declaredAlt: Object.fromEntries(schemes.alt) }
             : {}),
         observed: distinctValues(d),
+        ...(components.length > 0 ? { components } : {}),
         totals: {
             scanned: d.scanned,
             values: d.findings.length,
@@ -323,6 +386,13 @@ function summarize(c) {
     if (c.declaredAlt && Object.keys(c.declaredAlt).length > 0) {
         console.log(body(`${Object.keys(c.declaredAlt).length} of them are declared again for dark - both schemes travel`));
     }
+    // The inventory, phase one: what this project composes. Printed, never
+    // mapped - deciding that their `Pill` is our `ds-badge` is a judgement a
+    // person approves, and it does not happen in a census.
+    if (c.components && c.components.length > 0) {
+        const withProps = c.components.filter((x) => Object.keys(x.props).length > 0).length;
+        console.log(body(`${c.components.length} components composed here, ${withProps} of them with props written literally`));
+    }
     if (c.totals.named > 0) {
         console.log(body(`${paint.strong(String(c.totals.named))} of those values ALREADY have a name in your system - ${c.totals.coverage}% of your design values come from it today`));
     }
@@ -346,6 +416,31 @@ function summarize(c) {
  * census stays arithmetic, and every value in `roles` must be one the census
  * already found - the endpoint drops anything else.
  */
+/** The component inventory, in full, on a dry run - the whole point of a dry
+ *  run being that you read what was measured before anything is sent. */
+function printComponents(c) {
+    const list = c.components ?? [];
+    if (list.length === 0)
+        return;
+    console.log("");
+    const mine = list.filter((x) => !x.from);
+    const theirs = list.filter((x) => x.from);
+    console.log(section("What this project composes"));
+    if (theirs.length > 0) {
+        console.log(body(paint.faint(`${mine.length} written here, ${theirs.length} from packages (${[...new Set(theirs.map((x) => x.from))].slice(0, 3).join(", ")}…)`)));
+        console.log("");
+    }
+    for (const x of mine.slice(0, 12)) {
+        const props = Object.entries(x.props)
+            .slice(0, 3)
+            .map(([p, values]) => values.length > 0 ? `${p}(${values.slice(0, 4).join("|")})` : p)
+            .join(" ");
+        console.log(body(`${paint.strong(x.name.padEnd(18))} ${paint.faint(`${x.count}× in ${x.files} files`)}  ${paint.dim(props)}`));
+    }
+    if (mine.length > 12) {
+        console.log(body(paint.faint(`(${mine.length - 12} more of yours)`)));
+    }
+}
 function printAgentContract() {
     console.log("");
     console.log(section("If you are an agent reading this"));
@@ -500,6 +595,7 @@ export async function runImport(opts) {
     console.log(body(`Written to ${paint.strong(relative(root, out))}`));
     if (opts.dry) {
         console.log(body("Nothing was sent. Read the file, then run it without --dry."));
+        printComponents(census);
         printAgentContract();
         console.log("");
         return;

package/dist/doctor/components-scan.js

@@ -0,0 +1,163 @@
+/**
+ * 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.
+ */
+/**
+ * Opens a JSX element whose name is capitalised - which is React's own rule for
+ * "this is a component, not an html tag".
+ *
+ * The name allows dots (`Card.Header`) and the body is captured lazily up to
+ * the first `>` that is not inside a quoted value.
+ */
+const ELEMENT = /<([A-Z][A-Za-z0-9_]*(?:\.[A-Z][A-Za-z0-9_]*)*)(\s[^>]*?)?\/?>/gs;
+/** `variant="primary"` or `variant={"primary"}` - a literal a person typed. */
+const LITERAL_PROP = /([a-zA-Z][a-zA-Z0-9_-]*)\s*=\s*\{?\s*["']([^"']*)["']\s*\}?/g;
+/** `dense` with no value is a boolean prop set to true, and that IS a literal
+ *  decision worth counting. */
+const BARE_PROP = /(^|\s)([a-z][a-zA-Z0-9_]*)(?=\s|$)/g;
+/**
+ * A generic in type position (`useState<Foo>()`, `Array<Item>`) is not an
+ * element. The tell is what precedes the `<`: an identifier or a closing paren
+ * means a type argument, while JSX follows `(`, `{`, `>`, a newline or nothing.
+ */
+function looksLikeType(source, at) {
+    for (let i = at - 1; i >= 0; i--) {
+        const c = source[i];
+        if (c === " " || c === "\t")
+            continue;
+        return /[A-Za-z0-9_)\]]/.test(c);
+    }
+    return false;
+}
+/**
+ * Props that carry no design decision.
+ *
+ * `className` is the loudest and the least useful: its value is a Tailwind
+ * string, which the drift scanner already reads value by value, and listing it
+ * here buries the one prop that matters (`variant`, `tone`, `size`) under forty
+ * utility classes. The rest are plumbing or accessibility, never a variant axis.
+ */
+const NOT_A_DECISION = /^(class|className|style|key|ref|id|href|src|alt|type|name|value|placeholder|children|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 = []) {
+    const out = new Map();
+    for (const m of source.matchAll(IMPORT)) {
+        const clause = m[1];
+        const spec = m[2];
+        // The project's own code, by three signals: a relative path, the default
+        // alias, or a prefix the workspace declares for itself (a tsconfig path or
+        // a sibling package's name). Without the third, `@ui/lib/SignalUI/atoms/Text`
+        // - a company's own component behind its own alias - was filed as a
+        // third-party package (dono, 30/07).
+        if (/^[./]/.test(spec) || spec.startsWith("@/"))
+            continue;
+        if (internal.some((pre) => spec === pre || spec.startsWith(`${pre}/`))) {
+            continue;
+        }
+        for (const raw of clause.replace(/[{}]/g, ",").split(",")) {
+            const part = raw.trim();
+            if (!part || part === "*")
+                continue;
+            const local = (part.split(/\s+as\s+/).pop() ?? "").trim();
+            if (/^[A-Z]/.test(local))
+                out.set(local, spec);
+        }
+    }
+    return out;
+}
+export function emptyTally() {
+    return new Map();
+}
+/** Fold one file into the tally. */
+export function scanComponentsInto(tally, file, source, 
+/** Specifier prefixes the workspace owns - tsconfig paths and sibling
+ *  package names. Anything matching is the project's own code. */
+internal = []) {
+    if (!/\.(tsx|jsx|vue|svelte)$/i.test(file))
+        return;
+    const owners = importedNames(source, internal);
+    ELEMENT.lastIndex = 0;
+    for (const m of source.matchAll(ELEMENT)) {
+        if (m.index != null && looksLikeType(source, m.index))
+            continue;
+        const name = m[1];
+        const body = m[2] ?? "";
+        let hit = tally.get(name);
+        if (!hit) {
+            // A dotted name belongs to whoever exported its root (`Popover.Root`).
+            const owner = owners.get(name) ?? owners.get(name.split(".")[0]);
+            hit = {
+                count: 0,
+                files: new Set(),
+                props: new Map(),
+                ...(owner ? { from: owner } : {}),
+            };
+            tally.set(name, hit);
+        }
+        hit.count += 1;
+        hit.files.add(file);
+        LITERAL_PROP.lastIndex = 0;
+        const named = new Set();
+        for (const p of body.matchAll(LITERAL_PROP)) {
+            const [, prop, value] = p;
+            named.add(prop);
+            if (NOT_A_DECISION.test(prop))
+                continue;
+            const bucket = hit.props.get(prop) ?? new Map();
+            bucket.set(value, (bucket.get(value) ?? 0) + 1);
+            hit.props.set(prop, bucket);
+        }
+        // Bare booleans, minus anything already read as a valued prop.
+        // Strip the WHOLE pair, name included: stripping only the value left
+        // `onClose` standing alone, and the bare-boolean pass then recorded a
+        // callback as a decision somebody made.
+        const withoutValues = body
+            .replace(LITERAL_PROP, " ")
+            .replace(/[a-zA-Z][\w-]*\s*=\s*\{[^}]*\}/g, " ");
+        BARE_PROP.lastIndex = 0;
+        for (const b of withoutValues.matchAll(BARE_PROP)) {
+            const prop = b[2];
+            if (named.has(prop) || NOT_A_DECISION.test(prop))
+                continue;
+            const bucket = hit.props.get(prop) ?? new Map();
+            bucket.set("true", (bucket.get("true") ?? 0) + 1);
+            hit.props.set(prop, bucket);
+        }
+    }
+}
+/** The inventory, commonest first. */
+export function tallyToInventory(tally, max = 80) {
+    return [...tally.entries()]
+        .map(([name, v]) => ({
+        name,
+        ...(v.from ? { from: v.from } : {}),
+        count: v.count,
+        files: v.files.size,
+        props: Object.fromEntries([...v.props.entries()].map(([p, values]) => [
+            p,
+            [...values.entries()]
+                .sort((a, b) => b[1] - a[1])
+                .map(([value]) => value),
+        ])),
+    }))
+        .sort((a, b) => b.files - a.files || b.count - a.count)
+        .slice(0, max);
+}

package/package.json

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