@loworbitstudio/visor-theme-engine 0.17.1 → 0.18.0

package/dist/adapters/index.d.ts

@@ -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

@@ -83,7 +83,7 @@ ${prefersInner}
 }
 
 // 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 +99,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 +162,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor-theme-engine",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Theme engine for the Visor design system — shade generation, token mapping, font resolution, and import/export for .visor.yaml themes.",
   "type": "module",
   "main": "./dist/index.js",