synthesisui 0.16.90 → 0.16.92

package/dist/commands/import.js

@@ -18,6 +18,7 @@ import { describeConvention, describeRemainder, detectConventions, } from "../do
 import { diagnose, scanSource } from "../doctor/scan.js";
 import { parseSchemeBlocks } from "../doctor/scheme-blocks.js";
 import { describeSignals, emptySignals, finishSignals, readSignalsInto, } from "../doctor/signals.js";
+import { sketchOf } from "../doctor/sketch.js";
 import { buildTable } from "../doctor/tokens.js";
 import { readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
@@ -472,8 +473,16 @@ export async function takeCensus(root, opts) {
                     Object.keys(parts).length +
                     layers.length;
                 const tag = rootTag(src);
+                /**
+                 * THE SKETCH travels with the look, so the reading phase never opens this
+                 * file again: naming parts is a sentence over data the census already holds,
+                 * and a file read whose content is here is a pipeline optimization failure -
+                 * the owner's rule, adopted verbatim (dono, 01/08).
+                 */
+                const sketch = sketchOf(src);
                 if (size > 0 || tag) {
                     looks[found[0].name] = {
+                        ...(sketch.length > 0 ? { sketch } : {}),
                         ...t,
                         base,
                         states,

package/dist/doctor/css-modules.js

@@ -267,7 +267,7 @@ function looksLikeTypeArg(source, at) {
     }
     return false;
 }
-function scanTags(source) {
+export function scanTags(source) {
     const out = [];
     for (let i = 0; i < source.length; i++) {
         if (source[i] !== "<")

package/dist/doctor/sketch.js

@@ -0,0 +1,68 @@
+/**
+ * THE ANATOMY SKETCH - the component's own markup, carried by the census so nobody
+ * reads the file twice.
+ *
+ * The owner's directive, verbatim in intent (dono, 01/08): the census is the ONLY
+ * source of truth about the project's tree; iterative per-layer sweeps are forbidden;
+ * and any file read whose content the census already carries is a pipeline
+ * optimization failure. The reading phase was the last consumer of raw files - it
+ * opened every component to see its JSX before naming parts, which is most of the
+ * tokens and most of the minutes of a run.
+ *
+ * The sketch is everything that reading extracted, minus the one thing that is
+ * genuinely a judgment: the NAMES. Tag, class string, depth, text, and the
+ * capitalised frontiers, per element, in document order. A reader holding this names
+ * `trigger`/`status-dot`/`panel` without opening anything - and naming is a sentence,
+ * not a sweep.
+ *
+ * GENERALIZED BY CONSTRUCTION: it reads JSX shape, not folder layout, so it works the
+ * same in an atomic library, a feature-foldered app, or a single flat directory.
+ */
+import { scanTags } from "./css-modules.js";
+/** Past this a component is a page in disguise, and the gate already said no. */
+const MAX_NODES = 60;
+/** `className="..."` or className={"..."} / {`...`} with no interpolation. */
+const CLASS_ATTR = /className=\{?["'`]([^"'`{}$]*)["'`]\}?/;
+/**
+ * The sketch of one component file.
+ *
+ * Depth comes from the same tag scanner the CSS-module reader trusts (brace-counting,
+ * quote-aware, type-argument-proof). Text is captured only when it is a short literal
+ * sitting directly between an open and its close - dynamic children are the caller's,
+ * and the slot form already says so.
+ */
+export function sketchOf(source) {
+    const events = scanTags(source);
+    const out = [];
+    let depth = 0;
+    for (let i = 0; i < events.length; i++) {
+        const event = events[i];
+        if (event.kind === "close") {
+            depth = Math.max(0, depth - 1);
+            continue;
+        }
+        if (out.length >= MAX_NODES)
+            break;
+        const node = { tag: event.tag, depth };
+        const cls = CLASS_ATTR.exec(event.body);
+        if (cls?.[1].trim())
+            node.classes = cls[1].trim();
+        // Literal text: the slice between this open and the next event, when it is prose.
+        const next = events[i + 1];
+        if (next) {
+            const between = source
+                .slice(event.at + event.tag.length, next.at)
+                .replace(/^[^>]*>/, "")
+                .trim();
+            if (between &&
+                between.length <= 60 &&
+                !between.includes("{") &&
+                !between.includes("<")) {
+                node.text = between;
+            }
+        }
+        out.push(node);
+        depth += 1;
+    }
+    return out;
+}

package/dist/doctor/transcribe.js

@@ -121,10 +121,114 @@ const RADIUS = {
 /** Tailwind's own colour table, for the values a project uses without declaring.
  *  Only the ones that actually turn up: white, black, and the neutral ramp a
  *  real project reached for 106 times. */
+/**
+ * THE SIXTY DROPS WERE MINE, NOT THEIRS. test14's not-expressed listed ~60 classes that
+ * "start like a design decision and read as nothing" - and enumerating them found that
+ * every family is real, valid Tailwind these tables never held: `w-full`, `text-center`,
+ * `leading-tight`, `tracking-wide`, `shadow-sm` (with the token DECLARED), `gap-x-6`,
+ * `rounded-t-lg`, `border-none` (dono, 01/08). The unreadable report did its job; this is
+ * the coverage it bought.
+ */
+/** Tailwind's spacing formula: N x 0.25rem, halves included - `size-4.5` is 1.125rem,
+ *  and a table of steps is always one step short (test14). */
+function numericSpacing(step) {
+    if (!/^\d+(\.\d+)?$/.test(step))
+        return null;
+    const n = Number(step);
+    return n === 0 ? "0" : `${n * 0.25}rem`;
+}
+const SIZE_KEYWORD = {
+    full: "100%",
+    auto: "auto",
+    min: "min-content",
+    max: "max-content",
+    fit: "fit-content",
+    px: "1px",
+    "0": "0",
+};
+/** Axis-dependent: `w-screen` is 100vw and `h-screen` is 100vh. */
+const SCREEN = {
+    w: "100vw",
+    h: "100vh",
+    "min-w": "100vw",
+    "min-h": "100vh",
+    "max-w": "100vw",
+    "max-h": "100vh",
+};
+const TEXT_ALIGN = new Set([
+    "left",
+    "center",
+    "right",
+    "justify",
+    "start",
+    "end",
+]);
+const LEADING = {
+    none: "1",
+    tight: "1.25",
+    snug: "1.375",
+    normal: "1.5",
+    relaxed: "1.625",
+    loose: "2",
+};
+const TRACKING = {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+};
+/** Tailwind's own shadows, for when a project uses them undeclared. A declared
+ *  `--shadow-x` always wins and travels as the ref. */
+const TAILWIND_SHADOW = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    none: "none",
+};
+const BORDER_STYLE = new Set([
+    "solid",
+    "dashed",
+    "dotted",
+    "double",
+    "hidden",
+    "none",
+]);
+/** `rounded-t-lg` → the two top corners: the side names half the corners each. */
+const RADIUS_SIDE = {
+    t: ["borderTopLeftRadius", "borderTopRightRadius"],
+    b: ["borderBottomLeftRadius", "borderBottomRightRadius"],
+    l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
+    r: ["borderTopRightRadius", "borderBottomRightRadius"],
+    tl: ["borderTopLeftRadius"],
+    tr: ["borderTopRightRadius"],
+    bl: ["borderBottomLeftRadius"],
+    br: ["borderBottomRightRadius"],
+};
 const TAILWIND_COLOR = {
     white: "#ffffff",
     black: "#000000",
     transparent: "transparent",
+    // zinc and blue, because a real Select is styled entirely in them and every
+    // reference read as nothing (test14, 01/08). Tailwind's own values, verbatim.
+    "zinc-50": "#fafafa",
+    "zinc-100": "#f4f4f5",
+    "zinc-200": "#e4e4e7",
+    "zinc-300": "#d4d4d8",
+    "zinc-400": "#a1a1aa",
+    "zinc-500": "#71717a",
+    "zinc-600": "#52525b",
+    "zinc-700": "#3f3f46",
+    "zinc-800": "#27272a",
+    "zinc-900": "#18181b",
+    "zinc-950": "#09090b",
+    "blue-400": "#60a5fa",
+    "blue-500": "#3b82f6",
+    "blue-600": "#2563eb",
     "neutral-50": "#fafafa",
     "neutral-100": "#f5f5f5",
     "neutral-200": "#e5e5e5",
@@ -340,6 +444,18 @@ export function readUtility(utility, declared) {
         return null;
     const prefix = core.slice(0, dash);
     const rest = core.slice(dash + 1);
+    /**
+     * `border-none` is a style and `border-collapse` a table's own model - neither a
+     * width nor a colour. BEFORE the colour branch, because `border` is a colour prefix
+     * and that branch returns null for a name it does not know (test14).
+     */
+    if (prefix === "border") {
+        if (BORDER_STYLE.has(rest))
+            return { property: "borderStyle", value: rest };
+        if (rest === "collapse" || rest === "separate") {
+            return { property: "borderCollapse", value: rest };
+        }
+    }
     const colorProp = COLOR_PROPERTY[prefix];
     if (colorProp) {
         /**
@@ -381,6 +497,10 @@ export function readUtility(utility, declared) {
             return null;
     }
     if (prefix === "text") {
+        // `text-center` is an alignment, not a colour and not a size - and it read as
+        // nothing on a real table's cells (test14).
+        if (TEXT_ALIGN.has(rest))
+            return { property: "textAlign", value: rest };
         /**
          * A SIZE TRAVELS AS A LITERAL, and that is not a shortcut.
          *
@@ -406,6 +526,10 @@ export function readUtility(utility, declared) {
     if (prefix === "font") {
         // A family (`font-sans`) and a weight (`font-bold`) share this prefix, and
         // the weight table is what tells them apart.
+        // `font-regular` is this library's own spelling of 400 - non-standard Tailwind,
+        // real in their files, and dropped whole (test14).
+        if (rest === "regular")
+            return { property: "fontWeight", value: "400" };
         if (FONT_WEIGHT[rest]) {
             /**
              * ALSO A LITERAL, for a reason worth writing down: a weight ref is a valid
@@ -439,11 +563,100 @@ export function readUtility(utility, declared) {
     if (prefix === "opacity" && /^\d{1,3}$/.test(rest)) {
         return { property: "opacity", value: String(Number(rest) / 100) };
     }
-    const spaceProp = SPACING_PROPERTY[prefix];
-    if (spaceProp && SPACING[rest]) {
-        return { property: spaceProp, value: SPACING[rest] };
+    /**
+     * `shadow-sm` with `--shadow-sm` DECLARED read as nothing - there was no shadow branch
+     * at all, and elevations on parts vanished across a whole real library (test14).
+     */
+    if (prefix === "shadow") {
+        const own = `--shadow-${rest}`;
+        if (declared.has(own)) {
+            return { property: "boxShadow", value: `{shadow.${rest}}`, token: own };
+        }
+        if (TAILWIND_SHADOW[rest]) {
+            return { property: "boxShadow", value: TAILWIND_SHADOW[rest] };
+        }
+    }
+    // `leading-tight`, `tracking-wide` - the typography refinements, fixed scales.
+    if (prefix === "leading") {
+        if (LEADING[rest])
+            return { property: "lineHeight", value: LEADING[rest] };
+        if (/^\d+(\.\d+)?$/.test(rest)) {
+            return { property: "lineHeight", value: `${Number(rest) * 0.25}rem` };
+        }
+    }
+    if (prefix === "tracking" && TRACKING[rest]) {
+        return { property: "letterSpacing", value: TRACKING[rest] };
+    }
+    /**
+     * `min-w-0` splits at the FIRST dash into prefix `min`, which no table holds - the
+     * `min-w`/`max-h` keys were dead on arrival. Recombine the axis before looking up.
+     */
+    let sizePrefix = prefix;
+    let sizeRest = rest;
+    if (prefix === "min" || prefix === "max") {
+        const axis = /^(w|h)-(.+)$/.exec(rest);
+        if (axis) {
+            sizePrefix = `${prefix}-${axis[1]}`;
+            sizeRest = axis[2];
+        }
+    }
+    const spaceProp = SPACING_PROPERTY[sizePrefix];
+    if (spaceProp) {
+        /** `gap-x-6` / `gap-y-2` - the two halves of gap, which one prefix cannot say. */
+        if (sizePrefix === "gap" && /^[xy]-/.test(sizeRest)) {
+            const axisProp = sizeRest.startsWith("x-") ? "columnGap" : "rowGap";
+            const step = sizeRest.slice(2);
+            const size = SPACING[step] ?? numericSpacing(step);
+            if (size)
+                return { property: axisProp, value: size };
+        }
+        /**
+         * THEIR OWN SPACING STEP IS A LIVE UTILITY IN v4: `gap-sm` compiles to
+         * `var(--spacing-sm)` the moment the theme declares it. A real Label uses exactly
+         * that, and the reading filed it under "known typos in their source" - the typo
+         * was ours (test15, 01/08). Their name first, the numeric formula second.
+         */
+        const own = `--spacing-${sizeRest}`;
+        if (declared.has(own)) {
+            return {
+                property: spaceProp,
+                value: `{spacing.${sizeRest}}`,
+                token: own,
+            };
+        }
+        const size = SPACING[sizeRest] ?? numericSpacing(sizeRest);
+        if (size)
+            return { property: spaceProp, value: size };
+        /** `w-full`, `h-screen`, `min-w-0` - the keyword sizes, axis-aware. */
+        if (sizeRest === "screen" && SCREEN[sizePrefix]) {
+            return { property: spaceProp, value: SCREEN[sizePrefix] };
+        }
+        if (SIZE_KEYWORD[sizeRest] &&
+            /^(w|h|min-w|min-h|max-w|max-h|size)$/.test(sizePrefix)) {
+            return { property: spaceProp, value: SIZE_KEYWORD[sizeRest] };
+        }
     }
     if (prefix === "rounded") {
+        /**
+         * `rounded-t-lg` - one side, two corners. The side names which half; the scale is
+         * the same one the whole-box read already resolves, their token first.
+         */
+        const side = /^(tl|tr|bl|br|t|b|l|r)-(.+)$/.exec(rest);
+        if (side && RADIUS_SIDE[side[1]]) {
+            const own = `--radius-${side[2]}`;
+            const value = declared.has(own)
+                ? `{radius.${side[2]}}`
+                : (RADIUS[side[2]] ?? null);
+            if (value) {
+                // One utility, two corners: returned as the first and the caller's write
+                // handles pairs the same way `size-N` is handled - see the transcribe loop.
+                return {
+                    property: RADIUS_SIDE[side[1]].join("+"),
+                    value,
+                    ...(declared.has(own) ? { token: own } : {}),
+                };
+            }
+        }
         const own = `--radius-${rest}`;
         if (declared.has(own)) {
             return {
@@ -828,6 +1041,19 @@ export function transcribe(classes, declared) {
                 out.fromLiteral += 1;
             continue;
         }
+        // `rounded-t-lg` names two corners: the reader returns them joined with `+`, and
+        // the write splits - the same shape the `size` expansion above uses.
+        if (decl.property.includes("+")) {
+            for (const property of decl.property.split("+")) {
+                if (target[property] == null)
+                    target[property] = decl.value;
+            }
+            if (decl.token)
+                out.fromToken += 1;
+            else
+                out.fromLiteral += 1;
+            continue;
+        }
         if (target[decl.property] != null)
             continue;
         target[decl.property] = decl.value;

package/dist/skill-import.js

@@ -669,6 +669,41 @@ what shows while it loads     a skeleton, a blur, or the surface colour
 what shows when it is missing a missing asset must never look broken
 \`\`\`
 
+### The census is the ONLY source of truth - four universal rules
+
+These hold in ANY project, whatever its folders, and they exist because a run spent most
+of its tokens re-reading what the census already carried (dono, 01/08):
+
+1. **No iterative sweeps by layer or folder.** Never walk atoms/, then molecules/, then
+   organisms/ reading files - the census walked everything once.
+2. **Batch over the census's own data.** Everything you consume comes out of
+   \`_synthesisui/census.json\` - the looks, the sketch, the signals, the coverage.
+3. **Metadata is one pass, already done.** Theme, fonts, page, libraries, architecture
+   arrive counted. You confirm in a sentence; you never re-derive.
+4. **A file read whose content the census carries is a PIPELINE FAILURE.** Say so in
+   not-expressed.md when you catch yourself - that report is how the census grows.
+
+### Name the parts from the SKETCH - the file is already in the census
+
+Every component's look carries \`sketch\`: its own markup as data - tag, class string,
+depth and text per element, in document order. That is everything you used to open the
+file for, minus the one thing that is genuinely yours: the NAMES.
+
+\`\`\`json
+"sketch": [
+  { "tag": "div",  "depth": 0, "classes": "rounded-md border ..." },
+  { "tag": "button", "depth": 1, "classes": "flex w-full ..." },
+  { "tag": "span", "depth": 2, "classes": "size-2 rounded-full bg-success-500" },
+  { "tag": "span", "depth": 2, "text": "Status" },
+  { "tag": "ChevronDownIcon", "depth": 2 }
+]
+\`\`\`
+
+Read that and write the anatomy: depth 1 is \`trigger\`, the dot is \`status-dot\`, the
+capitalised tag is a frontier. **Do not open the component file** - if the sketch is
+missing or visibly truncated (60-node cap), say so in not-expressed.md and only then
+read, because that gap is the census's to close.
+
 ### What the CLI now reads for you, so do not spend a turn on it
 
 **The rule under all of this: you are given EVIDENCE and asked to DECIDE.** You are never

package/package.json

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