synthesisui 0.16.109 → 0.16.111

package/dist/anatomy-from-sketch.js

@@ -436,10 +436,27 @@ versionOf) {
                 },
             ];
         }
+        /**
+         * A BOX OF OURS THAT IS SOMEBODY ELSE'S ELEMENT SAYS SO.
+         *
+         * A headless primitive is ours to draw - the classes on it are the client's - and
+         * that is why it becomes a PART rather than a frontier. But the element itself is
+         * `<Collapsible.Trigger>`, and the usage snippet was emitting a plain `<div>` with
+         * our class on it: a person following it gets the look and none of the behaviour, no
+         * `aria-expanded` and no keyboard (dono, 03/08). Measured on their library: 31 parts
+         * across 9 components are a library element, plus 11 roots.
+         *
+         * The package AND their own spelling, because the snippet needs both - the import
+         * line comes from the first and the tag from the second.
+         */
+        const fromLib = kind === "headless" && node.from
+            ? { from: String(node.from), refName: tag }
+            : {};
         const built = {
             as,
             ...(name ? { name } : {}),
             ...(classes ? { at: index } : {}),
+            ...fromLib,
             ...(node.text ? { text: node.text } : {}),
         };
         const inside = hasKids ? descend() : [];

package/dist/anatomy-read.js

@@ -265,6 +265,17 @@ sketch) {
                 continue;
             }
             const node_ = { as };
+            /**
+             * A PART THAT IS A LIBRARY ELEMENT CARRIES BOTH FACTS - see `AnatomyRead.from`.
+             * Inert for the renderer, which dispatches on `as`; read by the usage snippet,
+             * which has to emit `<Collapsible.Trigger>` and the import line rather than a
+             * `<div>` that looks right and does nothing.
+             */
+            if (typeof node.from === "string" && node.from.trim()) {
+                node_.from = node.from.trim();
+                if (typeof node.refName === "string" && node.refName.trim())
+                    node_.refName = node.refName.trim();
+            }
             // The NAME is what carries the styles, so it is claimed even when nothing
             // resolved: the tree triggers on presence, and structure is most of the
             // value. A node with no name is pure structure and that is legitimate.

package/dist/commands/import.js

@@ -428,6 +428,12 @@ export async function takeCensus(root, opts) {
                     }
                 }
                 const t = transcribe(rootClasses(src, found[0].name), declaredValues);
+                /**
+                 * The transcription carries `dark` too, and spreading it put the key back after
+                 * the conditional below decided to leave it out. Two writers for one field is
+                 * how a decision gets undone by the line above it.
+                 */
+                const { dark: _measuredDark, ...withoutDark } = t;
                 /**
                  * THE VARIANT STYLES, FOLDED IN.
                  *
@@ -540,10 +546,20 @@ export async function takeCensus(root, opts) {
                 if (size > 0 || tag) {
                     looks[found[0].name] = {
                         ...(sketch.length > 0 ? { sketch } : {}),
-                        ...t,
+                        ...withoutDark,
                         base,
                         states,
-                        dark,
+                        /**
+                         * OMITTED WHEN EMPTY, so a real loss is legible.
+                         *
+                         * `dark` is a field of the READING, not of the contract - the platform
+                         * converts it into a `{when:{scheme:"dark"}}` layer, which is the one way
+                         * a recipe says dark. Emitting the key regardless made a validator report
+                         * all 36 components as "not arriving whole" for a key with nothing in it,
+                         * and the 7 that carry a real value were buried in the noise
+                         * (not-expressed.md, dono, 03/08). 29 of 36 were empty.
+                         */
+                        ...(Object.keys(dark).length > 0 ? { dark } : {}),
                         ...(Object.keys(parts).length > 0 ? { parts } : {}),
                         ...(tree.length > 0 ? { tree } : {}),
                         ...(tag ? { rootTag: tag } : {}),
@@ -864,7 +880,7 @@ export async function takeCensus(root, opts) {
      */
     const coverage = summarizeCoverage(shapes, componentFiles, Object.keys(looks).length, Object.values(looks).reduce((n, look) => n +
         Object.keys(look.base).length +
-        Object.keys(look.dark).length +
+        Object.keys(look.dark ?? {}).length +
         Object.values(look.states).reduce((m, block) => m + Object.keys(block).length, 0) +
         // The LAYERS count: the record and ternary readers produce layers rather than a
         // base, so leaving them out reported a Tag with eight colours as three

package/dist/doctor/broken-refs.js

@@ -17,8 +17,51 @@
  * this product has (dono, 01/08: "a normalização será de acordo com cada
  * projeto").
  */
+import { frontierKind } from "../frontier-kind.js";
+import { importMap } from "./imports.js";
 /** `var(--x)`, including inside a Tailwind arbitrary value: `bg-[var(--x)]`. */
 const VAR_REF = /var\(\s*(--[a-zA-Z0-9_-]+)/g;
+/**
+ * VARIABLES A HEADLESS LIBRARY SETS AT RUNTIME, which no stylesheet can declare.
+ *
+ * Base UI measures the trigger and writes `--anchor-width` on the positioner element
+ * before paint, so `min-w-[var(--anchor-width)]` on their Select is correct and works.
+ * Counting it as a broken reference told the owner their own code was defective, and it
+ * cost the report its credibility on the twelve that ARE broken (not-expressed.md,
+ * dono, 03/08). Two of their thirteen were this.
+ *
+ * The list is the SHARED vocabulary of headless positioning - Base UI, Radix, Ark and
+ * Floating UI all name the anchor's width `--anchor-width` - plus the self-identifying
+ * per-library prefixes. Same reasoning as `NON_RENDERING` in `frontier-kind.ts`: a name
+ * is only read after the PACKAGE has answered.
+ */
+const RUNTIME_ANCHOR = new Set([
+    "--anchor-width",
+    "--anchor-height",
+    "--available-width",
+    "--available-height",
+    "--transform-origin",
+    "--popup-width",
+    "--popup-height",
+    "--trigger-width",
+    "--trigger-height",
+]);
+/** `--radix-popper-anchor-width` and its siblings in the other libraries. */
+const RUNTIME_PREFIX = /^--(?:radix|reka|ark|kb|floating|reactour)-/;
+/**
+ * Does this file import a library that supplies such a variable?
+ *
+ * THE PACKAGE DECIDES, never the variable name on its own: a project that declares no
+ * headless dependency and writes `var(--anchor-width)` really has written a reference
+ * to nothing, and saying so is the whole value of this scan.
+ */
+function importsHeadless(source) {
+    for (const spec of Object.values(importMap(source))) {
+        if (frontierKind(spec) === "headless")
+            return true;
+    }
+    return false;
+}
 /**
  * PREFIXES A DECLARATION MAY CARRY that a reference dropped.
  *
@@ -46,10 +89,13 @@ const NAMESPACES = [
 export function findBrokenRefs(sources, declared) {
     const seen = new Map();
     for (const { file, source } of sources) {
+        const runtime = importsHeadless(source);
         for (const m of source.matchAll(VAR_REF)) {
             const name = m[1];
             if (declared.has(name))
                 continue;
+            if (runtime && (RUNTIME_ANCHOR.has(name) || RUNTIME_PREFIX.test(name)))
+                continue;
             const hit = seen.get(name) ?? { count: 0, files: new Set() };
             hit.count += 1;
             hit.files.add(file);

package/dist/skill-import.js

@@ -388,9 +388,15 @@ Open the project and answer the questions below. Then add a \`reading\` object t
           "name": "body",
           "at": 2,
           "children": [
-            { "as": "text", "name": "label", "at": 3 },
+            { "as": "component", "ref": "Text", "at": 3 },
             { "as": "heading", "name": "value", "at": 4 }
           ]
+        },
+        {
+          "as": "component",
+          "ref": "Tooltip",
+          "at": 5,
+          "children": [{ "as": "icon", "name": "info", "at": 6 }]
         }
       ]
     },
@@ -399,7 +405,7 @@ Open the project and answer the questions below. Then add a \`reading\` object t
       "anatomy": [
         { "as": "image", "name": "cover", "at": 1 },
         { "as": "heading", "name": "title", "at": 2 },
-        { "as": "component", "ref": "TextEditor" },
+        { "as": "component", "ref": "TextEditor", "at": 5 },
         {
           "as": "row",
           "name": "footer",
@@ -702,6 +708,21 @@ because a button's content model is *phrasing* and an icon is phrasing. So an \`
 Everything else is a leaf, and a leaf that holds elements has them HOISTED OUT to become
 its siblings - which destroys the nesting you read. If something arranges, say \`row\`/\`stack\`.
 
+**A frontier keeps its own \`at\`, so it keeps its own classes.** This is the one that gets
+talked out of: \`<Text className="text-lightgray-500 font-medium">\` is one of THEIR
+components, so it is a \`component\` node - and pointing \`at\` its sketch index carries the
+typography onto it exactly as a part would. Reading it as a \`text\` part instead is a
+downgrade with a real cost: \`composes\` is built from \`component\` nodes, so a library whose
+most-used atom is composed 363 times reported composing it ZERO times, and its strongest
+composition law became invisible (not-expressed.md, dono, 03/08).
+
+    <Tooltip><Info/></Tooltip>          frontier with a child, both survive
+    <Text className="…">Label</Text>    frontier with "at", the type survives
+
+If you find yourself writing "the contract cannot hold this, so I sent something else",
+check it against \`recipe_vocabulary\` before you write the workaround - and if the check
+disagrees with this file, the check is right and this file is old.
+
 ### \`{children}\` is a node, not an absence
 
 Four things decide what a component looks like on screen, and only the first is in its own source:
@@ -847,6 +868,18 @@ a recipe before these tools existed, and four separate readings were lost in sil
 \`dark:\` inside a variant, a state the compiler cannot spell, a part name with a dot in it,
 a layer with an empty style. Each of those was correct work that arrived as nothing.
 
+**A FIELD OF THE READING IS NOT A FIELD OF THE RECIPE.** \`looks[X].dark\` is how the census
+reports a dark half it measured; a recipe has one way to say the same thing, and it is a
+layer:
+
+\`\`\`json
+{ "when": { "scheme": "dark" }, "style": { "backgroundColor": "{color.darkgray.300}" } }
+\`\`\`
+
+Copying \`dark\` in at the top level of a recipe costs you that block, silently, on every
+component that has one - and \`import\` already converts it for the recipes IT writes, so the
+only place this can be lost is a recipe you hand-built (not-expressed.md, dono, 03/08).
+
 **In ONE call.** Build every recipe in memory, then send the whole reading to
 \`validate_recipes\` - one round trip for 35 components instead of 35. \`validate_recipe\`
 (singular) is for the one recipe you rewrote after the batch named it; reaching for it in a

package/package.json

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