synthesisui 0.16.126 → 0.16.128

package/dist/commands/import.js

@@ -874,7 +874,23 @@ export async function takeCensus(root, opts) {
      * because every declared option now looked used.
      */
     const declaredBy = new Map(defined.map((d) => [d.name, d]));
-    const enriched = inventory.map((c) => {
+    const enriched = inventory.map((c0) => {
+        /**
+         * A NAME THIS SCOPE DECLARES IS THEIRS, whoever else imports the same identifier.
+         *
+         * The usage scan reads imports per FILE, so a name gets the package of the file that
+         * imported it. Their `Pill` does `import { Toggle } from "@base-ui/react/toggle"`, and
+         * that name collides with the `Toggle` atom they wrote one folder over: the entry came
+         * out carrying `from: "@base-ui/react/toggle"`, and `from` is what makes the crosswalk
+         * skip a component and `exclusiveContracts` drop it. Their Toggle - 12 declarations, 3
+         * parts, `size` and `checked` - was absent from the whole system (test50, dono, 04/08).
+         *
+         * `defined` is a DEFINITION: a function of theirs that returns JSX. A scope that merely
+         * re-exports a library component under the same name is not in it, so a real
+         * third-party keeps its package. This is law 14's ordering, one level up: what they
+         * declare breaks the tie before the crosswalk is asked.
+         */
+        const c = declaredWins(c0, declaredBy.has(c0.name));
         const d = declaredBy.get(c.name);
         const fromVariants = variantAxes.get(c.name);
         if (!d && !fromVariants)
@@ -1428,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) {
@@ -1901,6 +1917,19 @@ function sayReach(c) {
  * (a return the scanner did not follow) must say nothing rather than borrow the
  * first node's package.
  */
+/**
+ * A NAME THIS SCOPE DECLARES IS THEIRS - see the call site in `takeCensus` for what it cost.
+ *
+ * Kept as a function so the rule has a name and a test: the usage scan is per FILE, so an
+ * identifier takes the package of whoever imported it, and one of their own components can
+ * shadow one of their own names. `declared` is a DEFINITION of theirs, which is what makes
+ * this a tie-break rather than a preference.
+ */
+export function declaredWins(component, declared) {
+    return component.from && declared
+        ? { ...component, from: undefined }
+        : component;
+}
 function rootPackage(tag, sketch) {
     if (!tag || !/^[A-Z]/.test(tag))
         return {};

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.126",
+  "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": {