@loworbitstudio/visor-theme-engine 0.17.1 → 0.19.0

package/dist/adapters/index.d.ts

@@ -1,4 +1,4 @@
-import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-Cvm7vFwe.js';
+import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-DF5StphJ.js';
 
 /**
  * Adapter types for the Visor theme engine.
@@ -32,6 +32,13 @@ interface NextJSAdapterOptions extends AdapterOptions {
      * (`:root`) for backward compatibility. See VI-368.
      */
     scopePrefix?: string;
+    /**
+     * Emit the `@import "@loworbitstudio/visor-core/reset";` line and the
+     * `@layer visor-base` origination block that binds theme tokens to the page
+     * root (default: true). Set false for consumers that ship Tailwind preflight
+     * or their own reset. See VI-616.
+     */
+    includeBaseLayer?: boolean;
 }
 /** Options specific to the Deck adapter. */
 interface DeckAdapterOptions extends AdapterOptions {
@@ -198,12 +205,19 @@ declare function flutterAdapter(input: AdapterInput, options?: FlutterAdapterOpt
 /**
  * Layer order declaration — must appear before any @layer blocks.
  *
+ * `visor-base` (VI-616) is FIRST — i.e. lowest priority. It carries the
+ * element-level baseline (token-to-page binding + UA reset). Lowest placement
+ * means a consumer's own unlayered `body {}` always wins, and component
+ * `.module.css` (which uses no `@layer` at all) beats the base layer
+ * unconditionally. Author-origin still beats the UA stylesheet regardless of
+ * layer, so the reset does its job.
+ *
  * `visor-brand` (VI-470) is ordered immediately after `visor-semantic`: brand
  * asset vars (`--brand-*`) sit above semantic tokens so brand overrides stay
  * cleanly separable, while still below `visor-adaptive` chrome and the
  * `visor-bridge` framework layer.
  */
-declare const LAYER_ORDER = "@layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;";
+declare const LAYER_ORDER = "@layer visor-base, visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;";
 /**
  * Wrap CSS content in a named @layer block.
  */

package/dist/adapters/index.js

@@ -17,10 +17,11 @@ import {
   generateTextScaleAliasDecls,
   header,
   parseColor,
+  resolveComponentBindings,
   resolveThemeBrand,
   resolveThemeFonts,
   sectionComment
-} from "../chunk-BUWBBUFG.js";
+} from "../chunk-32DC5DAR.js";
 
 // src/adapters/brand-passthrough.ts
 var SENTINEL_COLOR = "#ff00ff";
@@ -82,8 +83,44 @@ ${prefersInner}
   return blocks.filter(Boolean).join("\n\n");
 }
 
+// src/adapters/component-tokens-css.ts
+function indentBlock2(selector, decls) {
+  if (decls.length === 0) return "";
+  return [selector + " {", ...decls.map((d) => `  ${d}`), "}"].join("\n");
+}
+function declsFor(values) {
+  return Object.keys(values).sort().map((name) => `--${name}: ${values[name]};`);
+}
+function generateComponentTokensCss(tokens, selectors, colorScheme = "adaptive") {
+  const lightDecls = declsFor(tokens.light);
+  const darkDecls = declsFor(tokens.dark);
+  if (lightDecls.length === 0 && darkDecls.length === 0) return "";
+  const blocks = [
+    "/* \u2500\u2500 Component tokens (VI-625) \u2014 theme bindings for the admin-UI families \u2500\u2500 */"
+  ];
+  if (colorScheme === "dark-only") {
+    blocks.push(indentBlock2(selectors.light, darkDecls));
+    return blocks.filter(Boolean).join("\n\n");
+  }
+  if (colorScheme === "light-only") {
+    blocks.push(indentBlock2(selectors.light, lightDecls));
+    return blocks.filter(Boolean).join("\n\n");
+  }
+  if (lightDecls.length > 0) {
+    blocks.push(indentBlock2(selectors.light, lightDecls));
+  }
+  if (darkDecls.length > 0) {
+    blocks.push(indentBlock2(selectors.dark, darkDecls));
+    const prefersInner = indentBlock2(selectors.prefers, darkDecls).split("\n").map((l) => `  ${l}`).join("\n");
+    blocks.push(`@media (prefers-color-scheme: dark) {
+${prefersInner}
+}`);
+  }
+  return blocks.filter(Boolean).join("\n\n");
+}
+
 // src/adapters/layers.ts
-var LAYER_ORDER = "@layer visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;";
+var LAYER_ORDER = "@layer visor-base, visor-primitives, visor-semantic, visor-brand, visor-adaptive, visor-bridge;";
 function wrapInLayer(layerName, css) {
   const trimmed = css.trim();
   if (!trimmed) return "";
@@ -99,12 +136,17 @@ function toKebabCase(name) {
 function nextjsAdapter(input, options) {
   const includeFontImports = options?.includeFontImports ?? true;
   const includeFowt = options?.includeFowt ?? true;
+  const includeBaseLayer = options?.includeBaseLayer ?? true;
   const scopePrefix = options?.scopePrefix;
   const colorScheme = input.config["color-scheme"] ?? "adaptive";
   const lines = [];
   const slug = toKebabCase(input.config.name);
   const aliasedFamilies = /* @__PURE__ */ new Map();
   lines.push(header("Visor Theme \u2014 NextJS Adapter"));
+  if (includeBaseLayer) {
+    lines.push('@import "@loworbitstudio/visor-core/reset";');
+    lines.push("");
+  }
   if (includeFontImports && input.config.typography) {
     const fontResult = resolveThemeFonts(input.config.typography);
     const fontSlots = [fontResult.heading, fontResult.display, fontResult.body, fontResult.mono];
@@ -157,6 +199,27 @@ function nextjsAdapter(input, options) {
   }
   lines.push(LAYER_ORDER);
   lines.push("");
+  if (includeBaseLayer) {
+    const baseLines = [];
+    if (colorScheme === "dark-only" || colorScheme === "light-only") {
+      baseLines.push(sectionComment("Base: UA color-scheme"));
+      baseLines.push(
+        block("html", [`color-scheme: ${colorScheme === "dark-only" ? "dark" : "light"};`])
+      );
+      baseLines.push("");
+    }
+    baseLines.push(sectionComment("Base: token-to-page binding"));
+    baseLines.push(
+      block(scopePrefix ?? "body", [
+        "font-family: var(--font-body);",
+        "font-size: 1rem;",
+        "color: var(--text-primary);",
+        "background: var(--surface-page, var(--surface-background));"
+      ])
+    );
+    lines.push(wrapInLayer("visor-base", baseLines.join("\n").trim()));
+    lines.push("");
+  }
   const primitivesBody = stripHeader(
     generatePrimitivesCss(input.primitives, input.config, {
       aliasedFamilies,
@@ -243,6 +306,15 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
   lines.push(
     wrapInLayer("visor-adaptive", adaptiveBody)
   );
+  const componentTokensCss = generateComponentTokensCss(
+    resolveComponentBindings(input.config.components),
+    { light: hostSelector, dark: darkSelectors.join(",\n"), prefers: prefersSelector },
+    colorScheme
+  );
+  if (componentTokensCss) {
+    lines.push("");
+    lines.push(wrapInLayer("visor-adaptive", componentTokensCss));
+  }
   if (includeFowt) {
     lines.push("");
     lines.push(
@@ -811,7 +883,17 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
     },
     colorScheme
   );
-  const adaptiveLayer = wrapInLayer("visor-adaptive", lines.join("\n").trim());
+  const componentTokensCss = generateComponentTokensCss(
+    resolveComponentBindings(input.config.components),
+    {
+      light: lightSel,
+      dark: darkSel,
+      prefers: `${scopeClass}:not(.light):not(.theme-light):not([data-theme="light"])`
+    },
+    colorScheme
+  );
+  const adaptiveBody = [lines.join("\n").trim(), componentTokensCss].filter(Boolean).join("\n\n");
+  const adaptiveLayer = wrapInLayer("visor-adaptive", adaptiveBody);
   const semanticLayer = wrapInLayer("visor-semantic", semanticLines.join("\n").trim());
   const brandLayerBody = [brandResult.css, passthroughCss].filter(Boolean).join("\n\n");
   const brandLayer = wrapInLayer("visor-brand", brandLayerBody);