synthesisui 0.16.93 → 0.16.94

package/dist/commands/import.js

@@ -396,7 +396,30 @@ export async function takeCensus(root, opts) {
             // component's own look, and everything below it is a part this slice does
             // not attempt.
             if (found.length > 0) {
-                const t = transcribe(rootClasses(src), declaredValues);
+                /**
+                 * EVERY COMPONENT THE FILE DEFINES, not just the first.
+                 *
+                 * One file in a real library defines two - `RadioCard` and
+                 * `RadioCardGroup` - and the second arrived with an empty base while its
+                 * `flex flex-col gap-3` sat six lines below the first component's return
+                 * (audit, dono, 01/08). The file-level readings (the CSS module, the
+                 * variant tables) belong to the PRIMARY definition; the root classes and
+                 * the root tag are per component, scoped by name.
+                 */
+                for (const extra of found.slice(1)) {
+                    const et = transcribe(rootClasses(src, extra.name), declaredValues);
+                    const etag = rootTag(src, extra.name);
+                    const esize = Object.keys(et.base).length +
+                        Object.keys(et.dark).length +
+                        Object.keys(et.states).length;
+                    if (esize > 0 || etag) {
+                        looks[extra.name] = {
+                            ...et,
+                            ...(etag ? { rootTag: etag } : {}),
+                        };
+                    }
+                }
+                const t = transcribe(rootClasses(src, found[0].name), declaredValues);
                 /**
                  * THE VARIANT STYLES, FOLDED IN.
                  *
@@ -480,7 +503,7 @@ export async function takeCensus(root, opts) {
                     Object.keys(states).length +
                     Object.keys(parts).length +
                     layers.length;
-                const tag = rootTag(src);
+                const tag = rootTag(src, found[0].name);
                 /**
                  * 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,

package/dist/doctor/sketch.js

@@ -23,6 +23,56 @@ import { scanTags } from "./css-modules.js";
 const MAX_NODES = 60;
 /** `className="..."` or className={"..."} / {`...`} with no interpolation. */
 const CLASS_ATTR = /className=\{?["'`]([^"'`{}$]*)["'`]\}?/;
+/**
+ * `className={cn("a b", "c", cond && "d", record[x])}` - the STATIC strings.
+ *
+ * The plain-attr regex above sees a call expression and reads nothing, and
+ * 19 of 36 components in a real library style exactly this way - so their
+ * elements arrived in the sketch with no classes at all, and the Tooltip's
+ * popup carried none when the base had to be transcribed by hand
+ * (not-expressed.md, dono, 01/08). The always-on string arguments ARE the
+ * element's resting classes; the conditional halves are variants, which the
+ * variant readers already read - so only TOP-LEVEL string literals count.
+ * Template literals with `${}` and computed values stay out: a class we
+ * cannot see in full is a class we would be guessing at.
+ *
+ * THE NAMESPACE COUNTS. Measured on the real library: 64 calls are a bare
+ * `cn(`, 11 are `twUtils.cn(` and 2 are `clsx(` - and the first version of this
+ * regex read only the bare form, so a Modal's whole surface (its fill, border,
+ * radius and padding) stayed invisible while its siblings read fine
+ * (e2e, dono, 01/08).
+ */
+const CLASS_CALL = /className=\{\s*(?:[A-Za-z_$][\w$]*\.)?(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat)\(/;
+function staticCallClasses(body) {
+    const call = CLASS_CALL.exec(body);
+    if (!call)
+        return null;
+    const start = call.index + call[0].length;
+    // Walk the call's arguments at depth 0, collecting bare string literals.
+    let depth = 1;
+    let argStart = start;
+    const args = [];
+    for (let i = start; i < body.length && depth > 0; i++) {
+        const ch = body[i];
+        if (ch === "(" || ch === "{" || ch === "[")
+            depth += 1;
+        else if (ch === ")" || ch === "}" || ch === "]") {
+            depth -= 1;
+            if (depth === 0)
+                args.push(body.slice(argStart, i));
+        }
+        else if (ch === "," && depth === 1) {
+            args.push(body.slice(argStart, i));
+            argStart = i + 1;
+        }
+    }
+    const classes = args
+        .map((a) => a.trim())
+        .filter((a) => /^(["'`]).*\1$/.test(a) && !a.includes("${"))
+        .map((a) => a.slice(1, -1).trim())
+        .filter(Boolean);
+    return classes.length > 0 ? classes.join(" ") : null;
+}
 /**
  * The sketch of one component file.
  *
@@ -47,6 +97,11 @@ export function sketchOf(source) {
         const cls = CLASS_ATTR.exec(event.body);
         if (cls?.[1].trim())
             node.classes = cls[1].trim();
+        else {
+            const called = staticCallClasses(event.body);
+            if (called)
+                node.classes = called;
+        }
         // Literal text: the slice between this open and the next event, when it is prose.
         const next = events[i + 1];
         if (next) {

package/dist/doctor/transcribe.js

@@ -1090,15 +1090,40 @@ export function transcribe(classes, declared) {
  * which is still a signal, just a weaker one, so it travels as written and the
  * platform decides what to do with it.
  */
-export function rootTag(source) {
-    const ret = source.search(/return\s*\(/);
+/**
+ * WHERE *THIS* COMPONENT'S `return (` IS.
+ *
+ * Both readers below took the FIRST `return (` in the file, which is right for
+ * the 34 files that define one component and wrong for the one that defines
+ * two: `RadioCard.tsx` exports `RadioCard` and `RadioCardGroup`, and the group
+ * - a real `flex flex-col gap-3` - arrived with an empty base and the screen
+ * said "Not written yet" over it (audit, dono, 01/08).
+ *
+ * Scoped by NAME when a name is given: find that declaration, then its return.
+ * Absent or unfound, the old behaviour stands exactly - which keeps every
+ * single-component file reading byte-identically.
+ */
+function returnAt(source, name) {
+    if (name) {
+        const decl = new RegExp(`(?:function|const|let|var)\\s+${name}\\b|${name}\\s*[:=]\\s*(?:function|\\()`).exec(source);
+        if (decl) {
+            const from = source.slice(decl.index);
+            const ret = from.search(/return\s*\(/);
+            if (ret !== -1)
+                return decl.index + ret;
+        }
+    }
+    return source.search(/return\s*\(/);
+}
+export function rootTag(source, name) {
+    const ret = returnAt(source, name);
     if (ret === -1)
         return null;
     const m = /<([A-Za-z][A-Za-z0-9.]*)/.exec(source.slice(ret));
     return m ? m[1] : null;
 }
-export function rootClasses(source) {
-    const ret = source.search(/return\s*\(/);
+export function rootClasses(source, name) {
+    const ret = returnAt(source, name);
     if (ret === -1)
         return [];
     const open = source.indexOf("<", ret);

package/package.json

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