synthesisui 0.8.0 → 0.8.1

package/dist/commands/doctor.js

@@ -308,8 +308,13 @@ export async function doctor(opts) {
             console.log(body(file));
             for (const o of opts.all ? list : list.slice(0, 3)) {
                 console.log(`      ${String(o.line).padStart(4)}  ds-${o.component} · ${o.prop}: ${o.wrote}`);
+                // Always say what is being overruled. A finding that cannot name it is
+                // indistinguishable from a bug in the reader's eyes, and one of these
+                // (`.ds-card:hover { transform: none }`) was a real, deliberate call.
                 if (o.recipe)
                     console.log(`            the recipe binds ${o.recipe}`);
+                else if (o.where)
+                    console.log(`            the recipe binds it ${o.where}`);
             }
             if (!opts.all && list.length > 3) {
                 console.log(`            +${list.length - 3} more`);

package/dist/doctor/overrides.js

@@ -46,10 +46,37 @@ export function bindingsOf(recipe) {
     collect(r.variants, false);
     collect(r.states, false);
     collect(r.parts, false);
+    // Where a non-base property lives, so the report can name it. Base wins: if
+    // base binds it too, that value is the one worth showing.
+    const boundIn = new Map();
+    const note = (block, label) => {
+        if (!block || typeof block !== "object")
+            return;
+        for (const [k, v] of Object.entries(block)) {
+            if (typeof v === "string" || typeof v === "number") {
+                const p = kebab(k);
+                if (!baseValues.has(p) && !boundIn.has(p))
+                    boundIn.set(p, `${label}: ${v}`);
+            }
+            else if (v && typeof v === "object") {
+                note(v, label);
+            }
+        }
+    };
+    for (const [state, block] of Object.entries((r.states ?? {}))) {
+        note(block, `on ${state}`);
+    }
+    for (const [axis, opts] of Object.entries((r.variants ?? {}))) {
+        if (!opts || typeof opts !== "object")
+            continue;
+        for (const [opt, block] of Object.entries(opts)) {
+            note(block, `on ${axis}="${opt}"`);
+        }
+    }
     const usage = Array.isArray(r.usage)
         ? r.usage.filter((x) => typeof x === "string")
         : [];
-    return { props, baseValues, usage };
+    return { props, baseValues, boundIn, usage };
 }
 /**
  * How many places each known component is used. An inventory nobody has today:
@@ -117,6 +144,55 @@ function enclosingTag(src, at) {
     return null;
 }
 const lineAt = (src, index) => src.slice(0, index).split("\n").length;
+/**
+ * Whatever the `style` prop was given, with where it starts. The expression
+ * container, not `{{` specifically: a real component writes
+ * `style={showImg ? undefined : { color: "#fff" }}`, and requiring the double
+ * brace dropped that finding on the floor. Brace matching rather than a regex,
+ * because the value nests.
+ */
+function styleRegions(tag) {
+    const out = [];
+    const open = /style\s*=\s*\{/g;
+    let m = open.exec(tag);
+    while (m !== null) {
+        const start = m.index + m[0].length;
+        let depth = 1; // the container brace just consumed
+        let end = start;
+        for (; end < tag.length; end++) {
+            if (tag[end] === "{")
+                depth++;
+            else if (tag[end] === "}" && --depth === 0)
+                break;
+        }
+        // Only the OBJECT LITERALS inside the container. Scanning the container
+        // whole let a one-line ternary eat the declaration: in
+        // `style={on ? undefined : { padding: "7px" }}` the colon after `undefined`
+        // reads as a property separator and swallows the padding behind it.
+        const container = tag.slice(start, end);
+        let d = 0;
+        let objStart = -1;
+        for (let i = 0; i < container.length; i++) {
+            if (container[i] === "{") {
+                if (d === 0)
+                    objStart = i + 1;
+                d++;
+            }
+            else if (container[i] === "}" && d > 0 && --d === 0) {
+                out.push({
+                    text: container.slice(objStart, i),
+                    offset: start + objStart,
+                });
+            }
+        }
+        // `style={{ … }}` - the container IS the object
+        if (objStart === -1)
+            out.push({ text: container, offset: start });
+        open.lastIndex = end;
+        m = open.exec(tag);
+    }
+    return out;
+}
 /**
  * The literal a style property was given, or null when it was given an
  * expression instead.
@@ -159,22 +235,29 @@ export function findOverrides(source, recipes) {
         const tag = enclosingTag(source, m.index ?? 0);
         if (!tag)
             continue;
-        // inline style={{ borderRadius: 4 }}
-        for (const s of tag.text.matchAll(/([a-zA-Z-]+)\s*:\s*("[^"]*"|'[^']*'|[^,}\n]+)/g)) {
-            const prop = kebab(s[1]);
-            if (!bind.props.has(prop))
-                continue;
-            const wrote = literalValue(s[2]);
-            if (wrote === null)
-                continue;
-            record({
-                component: name,
-                prop,
-                wrote,
-                recipe: bind.baseValues.get(prop) ?? null,
-                line: lineAt(source, tag.start + (s.index ?? 0)),
-                excerpt: clip(lines[lineAt(source, tag.start + (s.index ?? 0)) - 1]?.trim() ?? ""),
-            });
+        // inline style={{ borderRadius: 4 }} - and ONLY that. Reading the whole tag
+        // meant reading every object prop on it, so Framer Motion's
+        // `animate={{ opacity: 1 }}` came back as "ds-card overrules opacity"
+        // (investidorez, 25/07). An animation is not a design decision.
+        for (const region of styleRegions(tag.text)) {
+            for (const s of region.text.matchAll(/([a-zA-Z-]+)\s*:\s*("[^"]*"|'[^']*'|[^,}\n]+)/g)) {
+                const prop = kebab(s[1]);
+                if (!bind.props.has(prop))
+                    continue;
+                const wrote = literalValue(s[2]);
+                if (wrote === null)
+                    continue;
+                const at = tag.start + region.offset + (s.index ?? 0);
+                record({
+                    component: name,
+                    prop,
+                    wrote,
+                    recipe: bind.baseValues.get(prop) ?? null,
+                    where: bind.boundIn.get(prop) ?? null,
+                    line: lineAt(source, at),
+                    excerpt: clip(lines[lineAt(source, at) - 1]?.trim() ?? ""),
+                });
+            }
         }
         // utility classes sitting beside the ds-* class
         for (const cls of tag.text.matchAll(/[\w:[\]#().%/-]+/g)) {
@@ -186,6 +269,7 @@ export function findOverrides(source, recipes) {
                 prop,
                 wrote: cls[0],
                 recipe: bind.baseValues.get(prop) ?? null,
+                where: bind.boundIn.get(prop) ?? null,
                 line: lineAt(source, tag.start + (cls.index ?? 0)),
                 excerpt: clip(lines[lineAt(source, tag.start + (cls.index ?? 0)) - 1]?.trim() ?? ""),
             });
@@ -193,7 +277,10 @@ export function findOverrides(source, recipes) {
     }
     // ── CSS: a rule whose selector reaches a ds-* component ───────────────────
     for (const rule of source.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
-        const selector = rule[1];
+        // A CSS comment is not a selector. `/* botões (.ds-button) … */` above an
+        // unrelated rule made the doctor attribute that rule to ds-button - it was
+        // reading prose as structure (investidorez, 25/07).
+        const selector = rule[1].replace(/\/\*[\s\S]*?\*\//g, "");
         const hit = /\.ds-([a-z][a-z0-9-]*)\b/.exec(selector);
         const bind = hit ? recipes.get(hit[1]) : undefined;
         if (!hit || !bind)
@@ -211,6 +298,7 @@ export function findOverrides(source, recipes) {
                 prop,
                 wrote: decl[2].trim(),
                 recipe: bind.baseValues.get(prop) ?? null,
+                where: bind.boundIn.get(prop) ?? null,
                 line: lineAt(source, at),
                 excerpt: clip(lines[lineAt(source, at) - 1]?.trim() ?? ""),
             });

package/package.json

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