synthesisui 0.16.122 → 0.16.123

package/dist/doctor/variant-read.js

@@ -508,14 +508,39 @@ export function readVariants(source) {
  * Read separately from `cva` because a file can have both, and because this shape is
  * what a codebase that never adopted a variant library uses everywhere.
  */
-const INLINE_COND = /([A-Za-z_$][\w$.]*)\s*(?:===|==)\s*["']([^"']+)["']\s*&&\s*(["'`])((?:(?!\3).)*)\3|([A-Za-z_$][\w$]*)\s*&&\s*(["'`])((?:(?!\6).)*)\6/g;
+/**
+ * THE `!` HAS TO BE PART OF THE MATCH, or the two opposite branches of one `cn()` become
+ * the same condition.
+ *
+ * `!` is not in `[A-Za-z_$]`, so `!isLoading && "cursor-pointer"` matched starting at
+ * `isLoading` and the negation fell outside the match, in silence. Their collapsible card
+ * writes both branches:
+ *
+ *     !isLoading && "cursor-pointer hover:bg-lightgray-200/50"
+ *     isLoading  && "cursor-not-allowed opacity-80"
+ *
+ * and both arrived as `{isLoading: "true"}` - so the same state carried `cursor: pointer`
+ * AND `cursor: not-allowed`, with whichever came last winning. A dead rule is bad; a rule
+ * that says the opposite of their code is worse (dono, 04/08). Measured on his library: 8
+ * inline conditions with a class list, 2 of them negated.
+ */
+const INLINE_COND = /(!?)\s*([A-Za-z_$][\w$.]*)\s*(?:===|==)\s*["']([^"']+)["']\s*&&\s*(["'`])((?:(?!\4).)*)\4|(!?)\s*([A-Za-z_$][\w$]*)\s*&&\s*(["'`])((?:(?!\8).)*)\8/g;
 export function readInlineConditions(source) {
     const layers = [];
     INLINE_COND.lastIndex = 0;
     for (const m of source.matchAll(INLINE_COND)) {
-        const prop = (m[1] ?? m[5] ?? "").split(".").pop() ?? "";
-        const option = m[2] ?? "true";
-        const raw = m[4] ?? m[7] ?? "";
+        const negated = (m[1] ?? m[6]) === "!";
+        const prop = (m[2] ?? m[7] ?? "").split(".").pop() ?? "";
+        const raw = m[5] ?? m[9] ?? "";
+        /**
+         * `!status === "loading"` is not a thing anybody writes, and negating a comparison we
+         * cannot invert would guess. A comparison is taken as written; only the bare boolean
+         * flips, and it flips to the option `false` - which is what `data-x="false"` means.
+         */
+        const compared = m[3];
+        if (compared != null && negated)
+            continue;
+        const option = compared ?? (negated ? "false" : "true");
         if (!prop || raw.includes("${"))
             continue;
         const classes = raw.split(/\s+/).filter(Boolean);

package/dist/guide.js

@@ -198,6 +198,16 @@ function componentEntry(cname, recipe) {
     /** Its own laws, computed from its own usage - and nothing read them (dono, 04/08). */
     const laws = (recipe.usage ?? []).map((law) => `\n  - ${law}`).join("");
     const lawsText = laws ? `\n  it obeys:${laws}` : "";
+    /**
+     * WHAT IT DOES, beside what it obeys - and they are not the same reader.
+     *
+     * `usage` is law: short, imperative, checkable, injected into a Build Script. This is the
+     * briefing for somebody rebuilding the component in a project that has none of these prop
+     * names, which is the question the guide exists to answer (dono, 04/08). Measured on a
+     * real system: 23 of 35 components have something derived to say here.
+     */
+    const does = (recipe.behaviour ?? []).map((line) => `\n  - ${line}`).join("");
+    const doesText = does ? `\n  what it does:${does}` : "";
     const behaviour = behaviourLine(cname, recipe);
     const behaviourText = behaviour ? `\n  ${behaviour}` : "";
     /**
@@ -240,7 +250,7 @@ function componentEntry(cname, recipe) {
     const anatomyText = anatomy.length
         ? `\n  anatomy, in this nesting:\n${anatomy.join("\n")}`
         : "";
-    return `- **${cname}** (\`${cls}\`)${variantsText}\n  ${recipe.description}${factsText}${defaultsText}${partsText}${statesText}${behaviourText}${contractText}${anatomyText}${lawsText}`;
+    return `- **${cname}** (\`${cls}\`)${variantsText}\n  ${recipe.description}${factsText}${defaultsText}${partsText}${statesText}${behaviourText}${contractText}${anatomyText}${doesText}${lawsText}`;
 }
 /**
  * Builds GUIDE.md - instructions *for the agent* on how to build components
@@ -402,6 +412,14 @@ It writes \`<componentsDir>/button/\` with \`button.tsx\` (+ colocated \`button.
 The boundary: tokens are global (\`tokens.css\` + the \`data-ds\` root attribute, once per app);
 everything a component owns lives in its own folder.
 
+**A component's conditional classes are decided at the call site, not in the stylesheet.** A recipe
+carries the look of a state as a rule keyed on a data attribute (\`[data-size="lg"]\`), and the caller
+is what turns it on. \`synthesisui component\` emits this system's own \`cn()\` beside the component: it
+resolves two utilities that set the SAME property in favour of the one the caller passed, which plain
+Tailwind decides by emission order instead. Compose with it and an override wins; concatenate strings
+and which one applies is a coin flip. Where a component needs an attribute nobody sets by default, its
+own entry below says so.
+
 ---
 `
         : "";

package/package.json

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