synthesisui 0.16.219 → 0.16.220

package/dist/commands/component.js

@@ -6,7 +6,7 @@ import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-templates.js";
 import { body, section, snippet } from "../output.js";
-import { findCollision, reactMajorOf, readInstalledConvention, } from "../project-facts.js";
+import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, RegistryError } from "../registry.js";
 /**
  * Writes the shared `cn.ts` next to the components, built from THIS project's
@@ -157,7 +157,7 @@ export async function component(slug, name, opts) {
              * it, so the TSX and the stylesheet in the same folder agree by
              * construction. Falling back to disk keeps an older registry working.
              */
-            res.classNames ?? (await readInstalledConvention(root, slug)));
+            res.classNames ?? (await readInstalledConvention(root, slug)), res.name, await readInstalledScheme(root, slug));
             for (const file of files) {
                 await writeFile(join(compDir, file.filename), file.code, "utf8");
             }

package/dist/commands/generate.js

@@ -2,7 +2,7 @@ import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
-import { reactMajorOf, readInstalledConvention } from "../project-facts.js";
+import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { postGenerate, RegistryError } from "../registry.js";
 /** PascalCase para o hint de import (course-card → CourseCard). */
 function pascalName(name) {
@@ -74,7 +74,7 @@ export async function generate(description, opts) {
         const files = generateComponentFiles(slug, res.name, res.recipe, res.css, version, config.styles, await reactMajorOf(root), 
         // Read off the installed document: a generated component lands in the same
         // project as the stylesheet it has to match.
-        await readInstalledConvention(root, slug));
+        await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug));
         for (const file of files) {
             await writeFile(join(compDir, file.filename), file.code, "utf8");
         }

package/dist/commands/refit.js

@@ -3,7 +3,7 @@ import { basename, join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention } from "../project-facts.js";
+import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, postRefit, postSaveComponent, RegistryError, } from "../registry.js";
 /** Slugs INSTALLED under `_synthesisui/ds/` (a `.lock` marks a real install -
  *  a folder holding only refit artifacts doesn't count). */
@@ -133,7 +133,7 @@ export async function refit(file, opts) {
     if (config.target === "next") {
         const compDir = join(root, config.componentsDir, res.name);
         await mkdir(compDir, { recursive: true });
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, saved.version, config.styles, await reactMajorOf(root), await readInstalledConvention(root, slug));
+        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, saved.version, config.styles, await reactMajorOf(root), await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug));
         for (const f of files) {
             await writeFile(join(compDir, f.filename), f.code, "utf8");
         }

package/dist/commands/upgrade.js

@@ -7,7 +7,7 @@ import { readProjectConfig, resolveRegistry } from "../config.js";
 import { diffLocalDocuments, localChangelogMarkdown, } from "../document-diff.js";
 import { installedBehind, MATERIALISER_SINCE } from "../install-marks.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention } from "../project-facts.js";
+import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchChangelog, fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { add } from "./add.js";
 import { reportWhatIsLeft } from "./align.js";
@@ -300,7 +300,7 @@ export async function upgrade(asked, opts) {
                 // Both were missing here, and `upgrade` is the command that REWRITES
                 // components somebody already has: without the convention it would have
                 // taken a working component and stripped its styles.
-                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)));
+                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)), res.name, await readInstalledScheme(root, slug));
                 for (const file of files) {
                     await writeFile(join(componentsRoot, entry, file.filename), file.code, "utf8");
                 }

package/dist/component-codegen.js

@@ -192,12 +192,50 @@ function layerAxes(part, variants) {
     }
     return out;
 }
-/** The axes of a part: the ones it declares, plus the ones its layers read. */
+/**
+ * The axes of a NODE - root or part: the ones it declares, plus the ones its layers
+ * read. Both callers use this; a node that reads only `variants` is the reader that
+ * dropped 15 of his 19 components.
+ */
 function partAxesOf(part, variants) {
     const own = axesOf(part.variants ?? {});
     const keys = new Set(own.map((a) => a.key));
     return [...own, ...layerAxes(part, variants).filter((a) => !keys.has(a.key))];
 }
+/**
+ * THE AXES OF THE COMPONENT ITSELF - and an axis nothing styles is still his API.
+ *
+ * `axesOf` drops an axis whose every option block is empty, which is right for a
+ * recipe we generated: there the option IS the styles, so an empty one is noise we
+ * invented. On a recipe we READ it is the opposite. His `Card` declares
+ * `variant: default | full-border | left-border` and this document carries no
+ * declarations for any of the three - the axis is a fact about HIS component that
+ * we failed to read the look for, and dropping the prop would silently narrow the
+ * API his own call sites already use.
+ *
+ * So the prop and the `data-variant` ship. The missing look is a reading gap, and
+ * it is already counted as one - `gaps` and the ledger say so with a number, which
+ * is the honest place for it. Ten of his components sat in exactly this state.
+ */
+function rootAxes(recipe) {
+    const fromLayers = partAxesOf(recipe, recipe.variants);
+    const seen = new Set(fromLayers.map((a) => a.key));
+    const declared = [];
+    for (const [axis, options] of Object.entries(recipe.variants ?? {})) {
+        const keys = Object.keys(options);
+        if (keys.length === 0 || seen.has(axis))
+            continue;
+        declared.push({
+            key: axis,
+            prop: camel(axis),
+            attr: kebab(axis),
+            boolean: keys.every((k) => k === "true" || k === "false"),
+            styledFalse: keys.includes("false"),
+            options: keys,
+        });
+    }
+    return [...fromLayers, ...declared];
+}
 function axesOf(variants) {
     const axes = [];
     for (const [axis, options] of Object.entries(variants ?? {})) {
@@ -489,17 +527,196 @@ function declToTailwind(prop, value) {
     }
     return [arbitrary(prop, value)];
 }
-const STATE_PREFIX = {
-    hover: "hover:",
-    focus: "focus:",
-    focusVisible: "focus-visible:",
-    active: "active:",
-    disabled: "disabled:",
+/**
+ * TAILWIND'S OWN WORD FOR A STATE, WHEN IT HAS ONE - and a mechanical rule when it
+ * does not, because a hand-written table would be a table of LIBRARIES.
+ *
+ * The contract's `STATE_SELECTORS` is a closed vocabulary of about thirty states,
+ * and most of them are attribute-shaped on purpose: `pressed` is how @base-ui
+ * spells it, `highlighted` is the option the arrow keys are on, `startingStyle` is
+ * an enter animation. Naming each one here by hand would rot the moment the
+ * contract grows a thirty-first, and the CLI cannot import the contract (it ships
+ * standalone), so a mirror would be a second copy to keep in step.
+ *
+ * The rule instead: a state Tailwind already has a variant for uses that word;
+ * everything else becomes `data-[<kebab>]:`, which is exactly the selector the
+ * compiler emits for it. New state in the contract, no edit here.
+ */
+const TW_NATIVE = new Set([
+    "hover",
+    "active",
+    "checked",
+    "disabled",
+    "empty",
+    "even",
+    "first",
+    "indeterminate",
+    "invalid",
+    "last",
+    "odd",
+    "open",
+    "placeholder",
+    "read-only",
+    "required",
+    "target",
+    "visited",
+    "after",
+    "before",
+]);
+/**
+ * WHERE ONE STATE HAS MORE THAN ONE SPELLING, ALL OF THEM SHIP.
+ *
+ * `disabled` is `:disabled` on a real control, `[aria-disabled]` on an accessible
+ * div and `[data-disabled]` in every headless kit - the compiler matches all three
+ * with one comma-joined rule, and picking one here would be picking a library. In
+ * utilities that costs one extra class per declaration, on the handful of states
+ * that actually have two grammars.
+ */
+const TW_ALSO = {
+    disabled: ["aria-disabled:", "data-[disabled]:"],
+    checked: ["aria-checked:", "data-[checked]:"],
+    open: ["aria-expanded:", "data-[open]:"],
+    selected: ["aria-selected:", "data-[selected]:"],
 };
+/** A state name → every Tailwind variant that expresses it. */
+function twStateVariants(state) {
+    // The compiler maps both to `:focus-visible` - a focus ring that also shows on
+    // a mouse click is the one thing nobody wants back.
+    if (state === "focus" || state === "focusVisible")
+        return ["focus-visible:"];
+    const word = kebab(state);
+    const native = TW_NATIVE.has(word) ? [`${word}:`] : [`data-[${word}]:`];
+    return [...native, ...(TW_ALSO[state] ?? [])];
+}
 function blockToTailwind(block, prefix = "") {
     return Object.entries(block).flatMap(([prop, value]) => declToTailwind(prop, value).map((cls) => `${prefix}${cls}`));
 }
+/** Every prefix combination one layer needs. A condition that cannot be
+ *  expressed returns no combination, and the layer is dropped rather than
+ *  emitted wrong - the same choice the compiler makes for an unknown state. */
+function twPrefixes(when, at, scheme, 
+/** On the ROOT, `within` IS its own state - the compiler says so explicitly. */
+asRoot) {
+    const groups = [];
+    /**
+     * THE SCHEME THE DOCUMENT OPENS IN IS THE RESTING LOOK, and getting this
+     * backwards is the one mistake here that inverts light and dark. His document
+     * opens DARK, so its 79 `scheme: dark` layers are what the component looks like
+     * at rest and they take no prefix at all; `light` is the one that needs the
+     * ancestor. `compile-css.ts` decides it the same way, off `docScheme`.
+     */
+    if (when.scheme && when.scheme !== scheme) {
+        // Both attributes, because that is what the compiled stylesheet matches and a
+        // real project puts one or the other on <html>.
+        groups.push([
+            `[[data-scheme=${when.scheme}]_&]:`,
+            `[[data-theme=${when.scheme}]_&]:`,
+        ]);
+    }
+    if (when.within) {
+        const own = twStateVariants(when.within);
+        if (own.length === 0)
+            return [];
+        groups.push(asRoot ? own : own.map((v) => `group-${v}`));
+    }
+    if (when.state) {
+        const own = twStateVariants(when.state);
+        if (own.length === 0)
+            return [];
+        groups.push(own);
+    }
+    for (const [axis, option] of Object.entries(when.variant ?? {})) {
+        // `!option` is every OTHER option - `not-data-[…]` is the utility for the
+        // `:not()` the compiler writes.
+        groups.push(option.startsWith("!")
+            ? [`not-data-[${kebab(axis)}=${option.slice(1)}]:`]
+            : [`data-[${kebab(axis)}=${option}]:`]);
+    }
+    if (at)
+        groups.push([`${at}:`]);
+    return groups.reduce((acc, group) => acc.flatMap((prefix) => group.map((g) => `${prefix}${g}`)), [""]);
+}
+function resolveNode(node, scheme, asRoot) {
+    const variants = {};
+    for (const [axis, options] of Object.entries(node.variants ?? {})) {
+        variants[axis] = {};
+        for (const [option, block] of Object.entries(options))
+            variants[axis][option] = { ...block };
+    }
+    const states = {};
+    for (const [state, block] of Object.entries(node.states ?? {}))
+        states[state] = { ...block };
+    const conditional = [];
+    for (const layer of node.layers ?? []) {
+        if (!layer.style || Object.keys(layer.style).length === 0)
+            continue;
+        const when = { ...(layer.when ?? {}) };
+        /**
+         * A LAYER FOR THE DOCUMENT'S OWN SCHEME CARRIES NO CONDITION - dropping the key
+         * here is what lets `{scheme: dark, variant: ocean}` land in the variant map as
+         * plain `ocean`, instead of being pushed into a compound prefix nobody needs.
+         */
+        if (when.scheme === scheme)
+            delete when.scheme;
+        const axes = Object.entries(when.variant ?? {});
+        const simpleVariant = !layer.at &&
+            !when.state &&
+            !when.within &&
+            !when.scheme &&
+            axes.length === 1 &&
+            !axes[0][1].startsWith("!");
+        const simpleState = !layer.at &&
+            !when.within &&
+            !when.scheme &&
+            axes.length === 0 &&
+            Boolean(when.state);
+        if (simpleVariant) {
+            const [axis, option] = axes[0];
+            variants[axis] = variants[axis] ?? {};
+            variants[axis][option] = { ...variants[axis][option], ...layer.style };
+            continue;
+        }
+        if (simpleState && when.state) {
+            states[when.state] = { ...states[when.state], ...layer.style };
+            continue;
+        }
+        for (const prefix of twPrefixes(when, layer.at, scheme, asRoot))
+            conditional.push({ prefix, style: layer.style });
+    }
+    /**
+     * AND THE TOGGLE HAS TO BE ABLE TO UNDO THE RESTING LOOK.
+     *
+     * A part reads as `base: bg-white` + a `dark` layer; on a dark document that
+     * layer is correct bare, but bare it also wins when somebody flips to light. So
+     * every property a resting-scheme layer overrides gets its BASE value back under
+     * the other scheme's ancestor - the same rule `compile-css.ts` applies, and
+     * without it the flip is one-way.
+     */
+    const alt = scheme === "dark" ? "light" : "dark";
+    for (const layer of node.layers ?? []) {
+        if (layer.when?.scheme !== scheme)
+            continue;
+        if (layer.when?.state || layer.when?.within)
+            continue;
+        const restore = {};
+        for (const prop of Object.keys(layer.style ?? {}))
+            if (node.base?.[prop] != null)
+                restore[prop] = node.base[prop];
+        if (Object.keys(restore).length === 0)
+            continue;
+        for (const prefix of [
+            `[[data-scheme=${alt}]_&]:`,
+            `[[data-theme=${alt}]_&]:`,
+        ])
+            conditional.push({ prefix, style: restore });
+    }
+    return { variants, states, conditional };
+}
+/** The classes every compound condition contributes, in layer order. */
+const conditionalClasses = (resolved) => resolved.conditional.flatMap((c) => blockToTailwind(c.style, c.prefix));
 function tailwindClassList(recipe, 
+/** The node's states and compound conditions, already read off its layers. */
+resolved, 
 /** CSS properties a variant axis owns - see `variantOwnedProps`. */
 exclude) {
     const base = exclude
@@ -509,7 +726,10 @@ exclude) {
         ...blockToTailwind(base),
         // States keep everything: `hover:` and `disabled:` cannot collide with an
         // unprefixed variant class, so there is nothing to resolve.
-        ...Object.entries(recipe.states ?? {}).flatMap(([state, block]) => STATE_PREFIX[state] ? blockToTailwind(block, STATE_PREFIX[state]) : []),
+        ...Object.entries(resolved.states).flatMap(([state, block]) => twStateVariants(state).flatMap((prefix) => blockToTailwind(block, prefix))),
+        // Compound conditions last: they are the most specific thing the recipe says,
+        // and in utilities the later class is the one a reader expects to win.
+        ...conditionalClasses(resolved),
     ];
     return classes.join(" ");
 }
@@ -771,7 +991,16 @@ function emitCssMode(slug, name, recipe, version, props, convention,
 localName = name) {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
     const el = asElement(tag, attrs, voidEl);
-    const axes = axesOf(recipe.variants);
+    /**
+     * THE ROOT READS ITS AXES THE SAME WAY ITS PARTS DO, which is the whole fix.
+     *
+     * `axesOf` alone keeps an axis only when the option's own block carries
+     * declarations - true for a recipe we generated, and false for every recipe we
+     * READ, where the block is empty and the look is in `layers`. The parts learned
+     * this on 04/08; the root was left on the old reader and 15 of his 19 components
+     * with an axis shipped with no prop for it.
+     */
+    const axes = rootAxes(recipe);
     const comp = pascal(localName);
     const propNames = axes.map((a) => a.prop);
     const tree = recipe.preview?.parts ?? [];
@@ -857,28 +1086,56 @@ ${parts.filter(Boolean).join("\n")}`;
 }
 function emitTailwindMode(slug, name, recipe, version, props, 
 /** The name it takes in THEIR project. The utilities stay the system's. */
-localName = name) {
+localName = name, 
+/** The scheme the document opens in - see `generateComponentFiles`. */
+scheme = "dark") {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
     const el = asElement(tag, attrs, voidEl);
-    const axes = axesOf(recipe.variants);
+    const axes = rootAxes(recipe);
     const comp = pascal(localName);
+    const resolved = resolveNode(recipe, scheme, true);
     const variantConsts = axes
         .filter((a) => !a.boolean)
         .map((a) => {
         const entries = a.options
-            .map((o) => `  ${JSON.stringify(o)}: ${JSON.stringify(blockToTailwind(recipe.variants[a.key]?.[o] ?? {}).join(" "))},`)
+            .map((o) => `  ${JSON.stringify(o)}: ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.[o] ?? {}).join(" "))},`)
             .join("\n");
         return `const ${a.prop.toUpperCase()}: Record<string, string> = {\n${entries}\n};`;
     });
     const booleanConsts = axes
         .filter((a) => a.boolean)
-        .map((a) => `const ${a.prop.toUpperCase()} = ${JSON.stringify(blockToTailwind(recipe.variants[a.key]?.true ?? {}).join(" "))};`);
+        .map((a) => `const ${a.prop.toUpperCase()} = ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.true ?? {}).join(" "))};`);
     // Every property some axis controls leaves BASE, and the base value becomes
     // that axis's default - so exactly one class ever sets it and the prop
     // actually wins.
-    const owned = new Map(axes.map((a) => [a.prop, variantOwnedProps(recipe.variants, a)]));
+    const owned = new Map(axes.map((a) => [a.prop, variantOwnedProps(resolved.variants, a)]));
     const excluded = new Set([...owned.values()].flat());
-    const fallbackFor = (a) => JSON.stringify(blockToTailwind(Object.fromEntries(Object.entries(recipe.base).filter(([prop]) => (owned.get(a.prop) ?? []).includes(prop)))).join(" "));
+    /**
+     * `group-hover:` NEEDS A GROUP, and the root is the only node that can carry it.
+     *
+     * `within` is a state of the ROOT read from a PART - the idiom a real table row
+     * is built on, and the contract names the utility outright. Emitting
+     * `group-hover:` on the part while nothing marks the group is a class that
+     * matches nothing, which is the same silent nothing this whole file is about.
+     */
+    const needsGroup = Object.values(recipe.parts ?? {}).some((part) => (part.layers ?? []).some((layer) => layer.when?.within));
+    /**
+     * THE DEFAULT OPTION IS THE RESTING LOOK - which the destructuring already says.
+     *
+     * `{ variant }` undefined means the component IS its default, and on a READ
+     * recipe the base has no value for the property at all (his Button declares no
+     * `backgroundColor` in base - every one of the nine lives in a layer). Falling
+     * back to base alone therefore rendered the default variant as nothing. The
+     * compiler emits the default's layer bare for exactly this reason.
+     */
+    const fallbackFor = (a) => {
+        const fromBase = Object.fromEntries(Object.entries(recipe.base).filter(([prop]) => (owned.get(a.prop) ?? []).includes(prop)));
+        const preset = recipe.defaults?.[a.key];
+        const fromDefault = preset
+            ? (resolved.variants[a.key]?.[preset] ?? {})
+            : {};
+        return JSON.stringify(blockToTailwind({ ...fromBase, ...fromDefault }).join(" "));
+    };
     const clsParts = [
         "BASE",
         ...axes.map((a) => a.boolean
@@ -922,7 +1179,7 @@ ${dataAttrLines(axes)}${axes.length ? "\n" : ""}    `;
 import type { ${needsElementType ? `ElementType, ${props}` : props} } from "react";
 import { cn } from "../cn";
 
-const BASE = ${JSON.stringify(tailwindClassList(recipe, excluded))};
+const BASE = ${JSON.stringify([needsGroup ? "group" : "", tailwindClassList(recipe, resolved, excluded)].filter(Boolean).join(" "))};
 ${[...variantConsts, ...booleanConsts].join("\n")}
 
 type ${comp}Props = ${propsType(axes, tag, props, el.offersAs)};
@@ -965,8 +1222,19 @@ ${orderedParts
          * toggles data-active from its own state, which is how the GUIDE
          * documents the contract.
          */
-        const partVariantClasses = partAxes.flatMap((a) => a.options.flatMap((o) => blockToTailwind(part.variants?.[a.key]?.[o] ?? {}, `data-[${a.attr}=${o}]:`)));
-        const partCls = [tailwindClassList(part), ...partVariantClasses]
+        /**
+         * AND THE OPTION'S LOOK COMES OFF THE LAYERS TOO - the half of 04/08 that was
+         * left behind. The part got its prop and its `data-status` attribute, and the
+         * classes were read from `part.variants[axis][option]`, which on a read recipe
+         * is the empty block: the attribute shipped, nothing answered it, and the
+         * status colours of his card were still nowhere.
+         */
+        const partResolved = resolveNode(part, scheme, false);
+        const partVariantClasses = partAxes.flatMap((a) => a.options.flatMap((o) => blockToTailwind(partResolved.variants[a.key]?.[o] ?? {}, `data-[${a.attr}=${o}]:`)));
+        const partCls = [
+            tailwindClassList(part, partResolved),
+            ...partVariantClasses,
+        ]
             .filter(Boolean)
             .join(" ");
         /**
@@ -1020,7 +1288,24 @@ convention = DEFAULT_CONVENTION,
  *
  * Absent means the component keeps its own name, which is every caller today.
  */
-localName = name) {
+localName = name, 
+/**
+ * WHICH SCHEME THE DOCUMENT OPENS IN - `meta.scheme`, and the one input here that
+ * cannot be guessed without inverting light and dark.
+ *
+ * A layer for the document's own scheme is the RESTING look and takes no prefix;
+ * the other one hangs off a `[data-scheme]` ancestor. Read it backwards on a
+ * dark-native system and every dark value moves behind an attribute nothing sets,
+ * so the component arrives unpainted. `readInstalledScheme` answers it off the
+ * document on disk - the same one the stylesheet next to it came from, so the two
+ * can never disagree.
+ *
+ * REQUIRED, with no default, deliberately. `compile-css.ts` defaults to `"dark"`
+ * and a default here would agree with it - but it would also let a new caller ship
+ * without ever deciding, and an optional argument that can be forgotten is the
+ * shape this file has already been bitten by. `tsc` refuses the half-call instead.
+ */
+scheme) {
     const files = [];
     const props = propsTypeName(reactMajor);
     if (styles === "css") {
@@ -1033,7 +1318,7 @@ localName = name) {
     else {
         files.push({
             filename: `${localName}.tsx`,
-            code: `${emitTailwindMode(slug, name, recipe, version, props, localName)}\n`,
+            code: `${emitTailwindMode(slug, name, recipe, version, props, localName, scheme)}\n`,
         });
     }
     files.push({

package/dist/install-marks.js

@@ -64,8 +64,14 @@
  * carrega - as regras de elemento da folha global dele. Elas viajavam no `design-system.json` desde
  * sempre e o arquivo que o agente é mandado ler não as citava, então seis regras adotadas no sistema
  * real eram invisíveis para quem ia escrever a próxima tela.
+ *
+ * 0.16.217 -> 0.16.220 em 13/08, e o SIM mais forte que esta marca já teve: o COMPONENTE que cai na
+ * pasta dele mudou. O codegen lia o estilo condicional só onde uma receita NOSSA o guarda, e uma
+ * receita LIDA guarda em `layers` - então 15 dos 19 componentes dele com eixo eram materializados sem
+ * a prop, e 104 das 207 condições sem expressão nenhuma. Um `upgrade` anterior a esta versão reescreve
+ * os componentes dele com a perda intacta.
  */
-export const MATERIALISER_SINCE = "0.16.217";
+export const MATERIALISER_SINCE = "0.16.220";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/project-facts.js

@@ -143,3 +143,31 @@ export async function readInstalledConvention(root, slug) {
         return DEFAULT_CONVENTION;
     }
 }
+/**
+ * WHICH SCHEME THE INSTALLED SYSTEM OPENS IN, read off the same document on disk.
+ *
+ * The twin of `readInstalledConvention`, and for the same reason: the document is
+ * the one the compiled stylesheet came from, so this can never disagree with the
+ * CSS sitting next to it.
+ *
+ * It decides whether a `scheme: dark` layer is the RESTING look or the alternative
+ * one - the whole difference between a component that arrives painted and one whose
+ * every dark value hides behind an attribute nothing sets. `"dark"` when the
+ * document cannot be read, which is what the compiler assumes when nobody says.
+ */
+export async function readInstalledScheme(root, slug) {
+    const dir = join(root, "_synthesisui", "ds", slug);
+    const version = await pinnedVersion(dir);
+    const raw = version
+        ? await readFile(join(dir, `v${version}`, "design-system.json"), "utf8").catch(() => "")
+        : "";
+    if (!raw)
+        return "dark";
+    try {
+        const doc = JSON.parse(raw);
+        return doc.meta?.scheme === "light" ? "light" : "dark";
+    }
+    catch {
+        return "dark";
+    }
+}

package/package.json

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