synthesisui 0.16.99 → 0.16.100

package/dist/doctor/transcribe.js

@@ -241,6 +241,15 @@ const TAILWIND_COLOR = {
     white: "#ffffff",
     black: "#000000",
     transparent: "transparent",
+    /**
+     * KEYWORDS ARE VALUES. `bg-current` is `background-color: currentColor` and
+     * `text-inherit` is `color: inherit` - real CSS, no palette needed, and they
+     * were being dropped as unreadable. Nine utilities across the owner's library,
+     * and `bg-current` is how a spinner takes its colour from its parent - drop it
+     * and the spinner is invisible (not-expressed.md, dono, 01/08).
+     */
+    current: "currentColor",
+    inherit: "inherit",
     // zinc and blue, because a real Select is styled entirely in them and every
     // reference read as nothing (test14, 01/08). Tailwind's own values, verbatim.
     "zinc-50": "#fafafa",
@@ -351,6 +360,9 @@ const STATE_SPELLING = {
     first: "first",
     last: "last",
     empty: "empty",
+    /** Base UI's enter/exit faces - `data-[starting-style]:opacity-0`. */
+    "starting-style": "startingStyle",
+    "ending-style": "endingStyle",
 };
 const DATA_STATE = /^data-\[(?:state=)?([a-z-]+)\]$/;
 /**
@@ -837,6 +849,33 @@ function refFor(name) {
         return `{color.${name}}`;
     return `{color.${m[1]}.${m[2]}}`;
 }
+/** Their breakpoint names, as Tailwind ships them. A project that renames these
+ *  declares its own, and the census carries that - this is the default ladder. */
+const BREAKPOINT = /^(sm|md|lg|xl|2xl|min-\[[^\]]+\]|max-\[[^\]]+\])$/;
+/**
+ * The layer for one set of conditions, created once and reused.
+ *
+ * Reused rather than appended per utility, because `dark:hover:bg-x` and
+ * `dark:hover:border-y` are ONE conditional look with two declarations - two
+ * layers with identical conditions would compile to two identical rules.
+ */
+function layerFor(out, when, at) {
+    out.layers ??= [];
+    const same = out.layers.find((l) => (l.at ?? null) === (at ?? null) &&
+        (l.when?.state ?? null) === (when.state ?? null) &&
+        (l.when?.within ?? null) === (when.within ?? null) &&
+        (l.when?.scheme ?? null) === (when.scheme ?? null) &&
+        l.when?.variant == null);
+    if (same)
+        return same;
+    const created = {
+        ...(Object.keys(when).length > 0 ? { when } : {}),
+        ...(at ? { at } : {}),
+        style: {},
+    };
+    out.layers.push(created);
+    return created;
+}
 /**
  * Read every class in a component's root element and route each declaration by
  * its modifier.
@@ -1005,20 +1044,63 @@ export function transcribe(classes, declared) {
         if (rest.length === 0) {
             target = isDark ? out.dark : out.base;
         }
-        else if (rest.length === 1 && !isDark) {
-            const raw = STATE_SPELLING[rest[0]] != null
-                ? rest[0]
-                : (DATA_STATE.exec(rest[0])?.[1] ?? null);
-            const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
-            if (state)
-                target = out.states[state] ?? (out.states[state] = {});
-            else
-                unslotted = true;
-        }
         else {
-            // A state under `dark:` is the dark scheme's version of that state, and a
-            // recipe has no slot for it.
-            unslotted = true;
+            /**
+             * EVERY MODIFIER GETS A SLOT, and the contract has had one all along.
+             *
+             * This used to route a bare state and drop everything else, on a comment
+             * that said "a recipe has no slot for it" - true when it was written and
+             * false since the transcription grew `layers`, which hold `scheme`,
+             * `state`, `within` and `at` TOGETHER. Measured on the owner's library:
+             * 29 real decisions dropped on that stale line, most of them a `dark:`
+             * over a state (not-expressed.md, dono, 01/08).
+             *
+             * A recipe that reconstructs the component must carry them, so the router
+             * reads the whole modifier list and only gives up on a modifier that
+             * genuinely has no home - and then it SAYS so.
+             */
+            const when = {};
+            let at;
+            for (const mod of rest) {
+                /** `group-hover:`, `group-data-[checked]:` - the PARENT's state. */
+                const group = /^group-(.+)$/.exec(mod);
+                const bare = group ? group[1] : mod;
+                const raw = STATE_SPELLING[bare] != null
+                    ? bare
+                    : (DATA_STATE.exec(bare)?.[1] ?? null);
+                const state = raw ? (STATE_SPELLING[raw] ?? null) : null;
+                if (state) {
+                    if (group)
+                        when.within = state;
+                    else
+                        when.state = state;
+                    continue;
+                }
+                /** `md:`, `lg:` - a breakpoint of theirs, by their own name. */
+                if (BREAKPOINT.test(mod) && !at) {
+                    at = mod;
+                    continue;
+                }
+                unslotted = true;
+            }
+            if (!unslotted) {
+                if (isDark)
+                    when.scheme = "dark";
+                // A bare single state with no scheme keeps its own slot: `states` is what
+                // the compiler and every lens already read, and moving it to a layer
+                // would be a shape change nothing asked for.
+                if (when.state &&
+                    !when.within &&
+                    !when.scheme &&
+                    !at &&
+                    rest.length === 1) {
+                    target = out.states[when.state] ?? (out.states[when.state] = {});
+                }
+                else {
+                    const layer = layerFor(out, when, at);
+                    target = layer.style;
+                }
+            }
         }
         const decl = readUtility(utility, declared);
         if (unslotted) {

package/package.json

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