synthesisui 0.16.39 → 0.16.40

package/dist/commands/import.js

@@ -1,8 +1,9 @@
-import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { join, relative } from "node:path";
 import { readToken, resolveRegistry } from "../config.js";
 import { isNearDuplicate } from "../doctor/color-distance.js";
 import { diagnose, scanSource } from "../doctor/scan.js";
+import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { buildTable } from "../doctor/tokens.js";
 import { body, paint, section } from "../output.js";
 import { walk, walkAll } from "./doctor.js";
@@ -35,6 +36,56 @@ const MAX_PER_KIND = {
     motion: 40,
     font: 30,
 };
+/**
+ * SIBLING APPS UNDER ONE ROOT - the shape a monorepo takes, and a question the
+ * census cannot answer on its own.
+ *
+ * Reading a workspace root averages every app in it. On the project this was
+ * built for that meant one LIGHT app and one DARK app producing a system that
+ * is neither, while the shared package that actually holds their design system
+ * contributed 97 tokens out of 137 and no special standing.
+ *
+ * So the command says what it sees and names the shape that works: the system
+ * comes from wherever the vocabulary is centralised, and each app is a consumer
+ * measured against it.
+ */
+async function siblingProjects(root) {
+    const apps = [];
+    const shared = [];
+    for (const group of ["apps", "packages", "libs"]) {
+        const dir = join(root, group);
+        for (const e of await readdir(dir, { withFileTypes: true }).catch(() => [])) {
+            if (!e.isDirectory())
+                continue;
+            const has = await readFile(join(dir, e.name, "package.json"), "utf8")
+                .then(() => true)
+                .catch(() => false);
+            if (!has)
+                continue;
+            (group === "apps" ? apps : shared).push(`${group}/${e.name}`);
+        }
+    }
+    // The shared package that actually DECLARES the vocabulary leads - picking the
+    // first one alphabetically suggested `packages/core` for a project whose
+    // design system lives in `packages/ui` (97 of its 137 tokens).
+    const weighed = await Promise.all(shared.map(async (rel) => {
+        let n = 0;
+        for await (const file of walkAll([join(root, rel)])) {
+            if (!/\.(css|scss|sass|less)$/i.test(file))
+                continue;
+            const css = await readFile(file, "utf8").catch(() => "");
+            n += (css.match(/(^|[\s{;])--[a-z0-9-]+\s*:/gi) ?? []).length;
+        }
+        return { rel, n };
+    }));
+    return {
+        apps,
+        shared: weighed
+            .filter((w) => w.n > 0)
+            .sort((a, b) => b.n - a.n)
+            .map((w) => w.rel),
+    };
+}
 /**
  * Dependencies as the project actually resolves them - which means reading
  * ANCESTOR package.json files too.
@@ -112,14 +163,14 @@ async function detectStack(root) {
  * this" - could not be said, and we ended up rediscovering by colour distance
  * what their stylesheet had spelled out all along.
  */
-async function harvestOwnTable(root) {
+async function harvestOwnCss(root) {
     let css = "";
     for await (const file of walkAll([root])) {
         if (!/\.(css|scss|sass|less)$/i.test(file))
             continue;
         css += `\n${await readFile(file, "utf8").catch(() => "")}`;
     }
-    return buildTable({ css, source: "yours" });
+    return css;
 }
 /**
  * EVERY distinct design value, commonest first - not just the repeated ones.
@@ -212,7 +263,9 @@ function distinctValues(d) {
     return kept.sort((a, b) => b.count - a.count || a.value.localeCompare(b.value));
 }
 export async function takeCensus(root) {
-    const table = await harvestOwnTable(root);
+    const css = await harvestOwnCss(root);
+    const table = buildTable({ css, source: "yours" });
+    const schemes = parseSchemeBlocks(css);
     const reports = [];
     for await (const file of walk(root)) {
         const src = await readFile(file, "utf8").catch(() => "");
@@ -235,6 +288,9 @@ export async function takeCensus(root) {
         census: 1,
         project: { name, stack: await detectStack(root) },
         declared: Object.fromEntries(table.byName),
+        ...(schemes.alt.size > 0
+            ? { declaredAlt: Object.fromEntries(schemes.alt) }
+            : {}),
         observed: distinctValues(d),
         totals: {
             scanned: d.scanned,
@@ -264,6 +320,9 @@ function summarize(c) {
     // The sharpest number in the report, and it only became sayable once the scan
     // started using their own token table: not "you have drift" but "you have
     // drift your own system already solved".
+    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`));
+    }
     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`));
     }
@@ -304,6 +363,39 @@ function printAgentContract() {
     console.log("");
     console.log(body(`    ${paint.strong("synthesisui import --census _synthesisui/census.json")}`));
 }
+/**
+ * Name the shape when the root holds several projects, and point at the one
+ * that should be the system.
+ *
+ * Not a refusal, and not a guess dressed as a fact: the run still happens and
+ * still produces something useful (a diagnosis across the whole workspace). It
+ * just stops letting a person believe the average of three apps is their design
+ * system.
+ */
+async function sayIfWorkspace(root) {
+    const { apps, shared } = await siblingProjects(root);
+    if (apps.length < 2)
+        return;
+    console.log("");
+    console.log(section("This root holds several projects"));
+    console.log(body(`${apps.length} apps (${apps.slice(0, 3).join(", ")}${apps.length > 3 ? ", …" : ""}) - and this census is the average of all of them.`));
+    console.log(body("That is a fine DIAGNOSIS and a poor system: a light app and a dark one"));
+    console.log(body("average into a palette that is neither."));
+    console.log("");
+    if (shared.length > 0) {
+        console.log(body("The shape that works, if your vocabulary is shared:"));
+        console.log(body(`    ${paint.strong(`synthesisui import --dir ${shared[0]}`)}   ${paint.faint("the system comes from here")}`));
+    }
+    else {
+        console.log(body("The shape that works:"));
+        console.log(body(`    ${paint.strong(`synthesisui import --dir ${apps[0]}`)}   ${paint.faint("one app, one vocabulary")}`));
+    }
+    for (const app of apps.slice(0, 3)) {
+        console.log(body(`    ${paint.dim(`synthesisui doctor ${app}`)}   ${paint.faint("how far this one is from it")}`));
+    }
+    console.log("");
+    console.log(body(paint.dim("One system, many consumers - each app gets its own number against the same contract.")));
+}
 export async function runImport(opts) {
     const root = opts.root ?? process.cwd();
     // A census handed to us (an agent annotated it) is sent as-is; the numbers
@@ -335,6 +427,8 @@ export async function runImport(opts) {
         census = await takeCensus(root);
     }
     summarize(census);
+    if (!opts.census)
+        await sayIfWorkspace(root);
     const out = join(root, "_synthesisui", "census.json");
     await mkdir(join(root, "_synthesisui"), { recursive: true });
     await writeFile(out, `${JSON.stringify(census, null, 2)}\n`, "utf8");

package/dist/doctor/scheme-blocks.js

@@ -0,0 +1,77 @@
+/**
+ * TOKENS BY SCHEME - which declarations belong to the base scheme and which to
+ * the dark one.
+ *
+ * The harvest used to flatten every stylesheet into one `name → value` map with
+ * the first declaration winning, which silently discards the second half of
+ * every themed project. A shadcn codebase declares its whole vocabulary twice -
+ * `:root` and `.dark` - so half of it was being thrown away before anything
+ * could read it.
+ *
+ * Honest scope note (measured 30/07 on the project this was written for): its
+ * own dark block holds exactly two tokens, because its dark mode lives in a
+ * Tailwind `dark:` variant applied in components rather than in token values.
+ * This reader finds what a project declares; it cannot find what a project
+ * expresses in class names.
+ *
+ * Deliberately a scanner, not a CSS parser. It tracks brace depth and the
+ * selector that opened each level, which is all that is needed to answer "which
+ * scope is this declaration in" - and it survives the nesting Tailwind v4
+ * produces (`@layer base { :root { … } }`) without a dependency.
+ */
+/** A scope that means "this is the dark theme". Covers the spellings that
+ *  actually appear: shadcn's `.dark`, the data-attribute forms, and the
+ *  `:where(...)` wrapper Tailwind v4 emits for a custom variant.
+ *
+ *  The closing `]` is load-bearing and a spec caught it missing:
+ *  `[data-theme="darkroom"]` was being read as the dark theme. */
+const DARK_SCOPE = /(^|[\s,(])(\.dark\b|\.theme-dark\b|\[data-(?:theme|scheme|mode)\s*[~^|*$]?=\s*["']?dark["']?\s*\])/i;
+/** A scope that carries a document's own tokens, as opposed to a component's. */
+const ROOT_SCOPE = /(^|[\s,(])(:root\b|html\b|body\b)/i;
+const DECL = /(--[a-z0-9-]+)\s*:\s*([^;]+)/gi;
+export function parseSchemeBlocks(css) {
+    const base = new Map();
+    const alt = new Map();
+    const clean = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    // The selector (or at-rule) that opened each open brace, innermost last.
+    const stack = [];
+    let prelude = "";
+    for (let i = 0; i < clean.length; i++) {
+        const ch = clean[i];
+        if (ch === "{") {
+            stack.push(prelude.trim());
+            prelude = "";
+            continue;
+        }
+        if (ch === "}") {
+            stack.pop();
+            prelude = "";
+            continue;
+        }
+        if (ch === ";") {
+            // A declaration ends here: everything since the last delimiter is it.
+            const text = prelude;
+            prelude = "";
+            if (stack.length === 0)
+                continue;
+            const dark = stack.some((s) => DARK_SCOPE.test(s));
+            const rooted = stack.some((s) => ROOT_SCOPE.test(s) || /^@theme\b/i.test(s));
+            if (!dark && !rooted)
+                continue;
+            DECL.lastIndex = 0;
+            const m = DECL.exec(text);
+            if (!m)
+                continue;
+            const name = m[1].toLowerCase();
+            const value = m[2].trim();
+            const into = dark ? alt : base;
+            // First declaration wins, the same rule the flat harvest used - a later
+            // sheet overriding an earlier one is a cascade question this cannot see.
+            if (!into.has(name))
+                into.set(name, value);
+            continue;
+        }
+        prelude += ch;
+    }
+    return { base, alt };
+}

package/package.json

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