synthesisui 0.16.127 → 0.16.128

package/dist/commands/import.js

@@ -1444,12 +1444,12 @@ function sayBrokenRefs(c) {
     const uses = broken.reduce((n, b) => n + b.count, 0);
     console.log("");
     console.log(section("These resolve to nothing"));
-    console.log(body(`${uses} reference${uses === 1 ? "" : "s"} to ${broken.length} token${broken.length === 1 ? "" : "s"} your CSS never declares. A ${paint.strong("var()")} with no declaration paints no colour - not a different colour.`));
+    console.log(body(`${uses} reference${uses === 1 ? "" : "s"} to ${broken.length} token${broken.length === 1 ? "" : "s"} your CSS never declares. A ${paint.strong("var()")} with no declaration paints no colour - not a different colour. Where exactly one declared token differs by a namespace, the recipe now uses THAT one, so the look survives; the rest travel as the value you typed.`));
     console.log("");
     for (const b of broken.slice(0, 8)) {
         const where = `${b.count}× in ${b.files} file${b.files === 1 ? "" : "s"}`;
         console.log(body(b.meant
-            ? `${paint.strong(`var(${b.name})`)} ${paint.faint(where)} - you declare ${paint.strong(b.meant)}`
+            ? `${paint.strong(`var(${b.name})`)} ${paint.faint(where)} - you declare ${paint.strong(b.meant)}, and that is what the recipe carries. Fix the class and the two agree.`
             : `${paint.strong(`var(${b.name})`)} ${paint.faint(`${where}, and nothing close is declared`)}`));
     }
     if (broken.length > 8) {

package/dist/doctor/transcribe.js

@@ -1179,10 +1179,44 @@ function resolveArbitrary(inner, declared) {
         return /[<>{}@;]/.test(raw) ? null : { value: raw };
     }
     const name = v[1];
-    if (!declared.has(name))
-        return { value: raw };
-    return { value: tokenRefFor(name), token: name };
+    if (declared.has(name))
+        return { value: tokenRefFor(name), token: name };
+    /**
+     * A `var()` THEY NEVER DECLARED, WHEN THEY DECLARED IT UNDER ITS NAMESPACE.
+     *
+     * `bg-[var(--ocean-200)]` where the theme declares `--color-ocean-200` is their own
+     * defect - Tailwind v4 namespaces the property and they wrote the bare name - and it is
+     * ALSO unambiguous: exactly one declared token differs from it by a namespace. The census
+     * already computes that answer for the report (`brokenRefs.meant`); carrying the broken
+     * name into the recipe instead meant the declaration reached the document and painted
+     * nothing, because `var(--ocean-200)` exists in their stylesheet and in none of ours.
+     *
+     * Measured on his library (test50, dono, 04/08): 6 declarations across 5 components, all
+     * colours, all dead - and invisible to the ref validator, which only ever looks for `{…}`.
+     *
+     * A name that matches NO namespace stays the literal it was: that one is broken in their
+     * repo too, and inventing a target would be the guess. It travels as the value they typed
+     * and is reported by `brokenRefs`.
+     */
+    const meant = MEANT_NAMESPACES.map((ns) => `--${ns}-${name.slice(2)}`).find((candidate) => declared.has(candidate));
+    if (meant)
+        return { value: tokenRefFor(meant), token: meant };
+    return { value: raw };
 }
+/**
+ * The namespaces a bare name could have been written under, in the order Tailwind v4 uses
+ * them. Mirrors `NAMESPACES` in `broken-refs.ts`, which computes the same answer for the
+ * report - two readers of one fact, and the fact is "exactly one declared token differs
+ * from this by a prefix".
+ */
+const MEANT_NAMESPACES = [
+    "color",
+    "spacing",
+    "radius",
+    "shadow",
+    "font",
+    "text",
+];
 /**
  * A declared custom property, as a token ref in the document's own namespace.
  *

package/package.json

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