@loworbitstudio/visor-theme-engine 0.9.0 → 0.10.0

package/dist/adapters/index.d.ts

@@ -1,4 +1,4 @@
-import { c as GeneratedPrimitives, i as SemanticTokens, R as ResolvedThemeConfig } from '../types-0hotGz1u.js';
+import { c as GeneratedPrimitives, i as SemanticTokens, R as ResolvedThemeConfig } from '../types-Dwc1V0Nc.js';
 
 /**
  * Adapter types for the Visor theme engine.

package/dist/adapters/index.js

@@ -6,14 +6,18 @@ import {
   buildVisorFontUrl,
   fontStack,
   generateDarkCss,
+  generateHairlineDecls,
+  generateIntentDecls,
   generateLightCss,
   generatePrimitivesCss,
   generateShadeScale,
+  generateSpaceAliasDecls,
+  generateTextScaleAliasDecls,
   header,
   parseColor,
   resolveThemeFonts,
   sectionComment
-} from "../chunk-BEFH5BTX.js";
+} from "../chunk-43TVIXUS.js";
 
 // src/adapters/layers.ts
 var LAYER_ORDER = "@layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;";
@@ -589,9 +593,46 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
   lines.push(sectionComment2("Fumadocs bridge: light"));
   lines.push(block(`html:not(.dark) ${scopeClass}`, generateFumadocsBridgeDecls(input.tokens, "light")));
   lines.push("");
-  const layered = wrapInLayer("visor-adaptive", lines.join("\n").trim());
+  const semanticLines = [];
+  semanticLines.push("\n/* \u2500\u2500 Layer: Semantic aliases (VI-451) \u2500\u2500 */");
+  semanticLines.push(sectionComment2("Discrete: Text size aliases (--text-N)"));
+  semanticLines.push(block(scopeClass, generateTextScaleAliasDecls()));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Discrete: Space aliases (--space-N)"));
+  semanticLines.push(block(scopeClass, generateSpaceAliasDecls(input.config)));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Intent aliases (light)"));
+  semanticLines.push(block(`html:not(.dark) ${scopeClass}`, generateIntentDecls(input.tokens, "light")));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Hairline aliases (light)"));
+  semanticLines.push(block(`html:not(.dark) ${scopeClass}`, generateHairlineDecls(input.tokens, "light")));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Intent aliases (dark) \u2014 manual toggle"));
+  semanticLines.push(block(`.dark ${scopeClass}`, generateIntentDecls(input.tokens, "dark")));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Hairline aliases (dark) \u2014 manual toggle"));
+  semanticLines.push(block(`.dark ${scopeClass}`, generateHairlineDecls(input.tokens, "dark")));
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Intent aliases (dark) \u2014 prefers-color-scheme"));
+  {
+    const inner = block(`${scopeClass}:not(.light)`, generateIntentDecls(input.tokens, "dark"));
+    semanticLines.push(`@media (prefers-color-scheme: dark) {
+${inner.split("\n").map((l) => `  ${l}`).join("\n")}
+}`);
+  }
+  semanticLines.push("");
+  semanticLines.push(sectionComment2("Hairline aliases (dark) \u2014 prefers-color-scheme"));
+  {
+    const inner = block(`${scopeClass}:not(.light)`, generateHairlineDecls(input.tokens, "dark"));
+    semanticLines.push(`@media (prefers-color-scheme: dark) {
+${inner.split("\n").map((l) => `  ${l}`).join("\n")}
+}`);
+  }
+  semanticLines.push("");
+  const adaptiveLayer = wrapInLayer("visor-adaptive", lines.join("\n").trim());
+  const semanticLayer = wrapInLayer("visor-semantic", semanticLines.join("\n").trim());
   const head = fontLines.length > 0 ? fontLines.join("\n") + "\n" : "";
-  return head + LAYER_ORDER + "\n\n" + layered + "\n";
+  return head + LAYER_ORDER + "\n\n" + semanticLayer + "\n\n" + adaptiveLayer + "\n";
 }
 
 // src/flutter/color-to-dart.ts

package/dist/{chunk-BEFH5BTX.js → chunk-43TVIXUS.js}

@@ -1324,6 +1324,9 @@ function generateMotionPrimitives(config) {
   decls.push(
     "--motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);"
   );
+  if (config.motion["easing-overshoot"]) {
+    decls.push(`--motion-easing-overshoot: ${config.motion["easing-overshoot"]};`);
+  }
   return decls;
 }
 function generateMiscPrimitives() {
@@ -1369,6 +1372,9 @@ function generatePrimitivesCss(primitives, config, options) {
   lines.push(block(host, generateMiscPrimitives()));
   return header("Visor Theme \u2014 Primitives") + lines.join("\n");
 }
+function hairlineDeclName(name) {
+  return name === "default" ? "--hairline" : `--hairline-${name}`;
+}
 function generateSemanticCss(tokens) {
   const lines = [];
   lines.push(sectionComment("Semantic: Text"));
@@ -1391,8 +1397,61 @@ function generateSemanticCss(tokens) {
     ([name, { light }]) => `--interactive-${name}: ${light};`
   );
   lines.push(block(":root", interactiveDecls));
+  lines.push(sectionComment("Semantic: Intent (aliases)"));
+  const intentDecls = Object.entries(tokens.intent).map(
+    ([name, { light }]) => `--${name}: ${light};`
+  );
+  lines.push(block(":root", intentDecls));
+  lines.push(sectionComment("Semantic: Hairline (aliases)"));
+  const hairlineDecls = Object.entries(tokens.hairline).map(
+    ([name, { light }]) => `${hairlineDeclName(name)}: ${light};`
+  );
+  lines.push(block(":root", hairlineDecls));
   return header("Visor Theme \u2014 Semantic") + lines.join("\n");
 }
+var TEXT_SCALE_ALIASES = [
+  11,
+  13,
+  14,
+  16,
+  20,
+  24,
+  32,
+  40,
+  48
+];
+function generateTextScaleAliasDecls() {
+  return TEXT_SCALE_ALIASES.map((px) => `--text-${px}: ${px}px;`);
+}
+var SPACE_ALIAS_MULTIPLIERS = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  8,
+  10,
+  12,
+  16
+];
+function generateSpaceAliasDecls(config) {
+  const base = config.spacing.base;
+  return SPACE_ALIAS_MULTIPLIERS.map((m) => {
+    const px = base * m;
+    return `--space-${m}: ${px}px;`;
+  });
+}
+function generateIntentDecls(tokens, mode) {
+  return Object.entries(tokens.intent).map(
+    ([name, value]) => `--${name}: ${value[mode]};`
+  );
+}
+function generateHairlineDecls(tokens, mode) {
+  return Object.entries(tokens.hairline).map(
+    ([name, value]) => `${hairlineDeclName(name)}: ${value[mode]};`
+  );
+}
 function buildAdaptiveDecls(tokens, theme) {
   const textDecls = Object.entries(tokens.text).map(
     ([name, values]) => `--text-${name}: ${values[theme]};`
@@ -1406,11 +1465,13 @@ function buildAdaptiveDecls(tokens, theme) {
   const interactiveDecls = Object.entries(tokens.interactive).map(
     ([name, values]) => `--interactive-${name}: ${values[theme]};`
   );
-  return { textDecls, surfaceDecls, borderDecls, interactiveDecls };
+  const intentDecls = generateIntentDecls(tokens, theme);
+  const hairlineDecls = generateHairlineDecls(tokens, theme);
+  return { textDecls, surfaceDecls, borderDecls, interactiveDecls, intentDecls, hairlineDecls };
 }
 function generateLightCss(tokens, options) {
   const lines = [];
-  const { textDecls, surfaceDecls, borderDecls, interactiveDecls } = buildAdaptiveDecls(tokens, "light");
+  const { textDecls, surfaceDecls, borderDecls, interactiveDecls, intentDecls, hairlineDecls } = buildAdaptiveDecls(tokens, "light");
   const host = options?.scopePrefix ?? ":root";
   lines.push(sectionComment("Adaptive: Text (light)"));
   lines.push(block(host, textDecls));
@@ -1420,11 +1481,15 @@ function generateLightCss(tokens, options) {
   lines.push(block(host, borderDecls));
   lines.push(sectionComment("Adaptive: Interactive (light)"));
   lines.push(block(host, interactiveDecls));
+  lines.push(sectionComment("Adaptive: Intent aliases (light)"));
+  lines.push(block(host, intentDecls));
+  lines.push(sectionComment("Adaptive: Hairline aliases (light)"));
+  lines.push(block(host, hairlineDecls));
   return header("Visor Theme \u2014 Light") + lines.join("\n");
 }
 function generateDarkCss(tokens, options) {
   const lines = [];
-  const { textDecls, surfaceDecls, borderDecls, interactiveDecls } = buildAdaptiveDecls(tokens, "dark");
+  const { textDecls, surfaceDecls, borderDecls, interactiveDecls, intentDecls, hairlineDecls } = buildAdaptiveDecls(tokens, "dark");
   const prefix = options?.scopePrefix;
   const darkSelectors = prefix ? [`${prefix}.dark`, `${prefix}.theme-dark`, `${prefix}[data-theme="dark"]`] : [".dark", ".theme-dark", '[data-theme="dark"]'];
   const darkSelector = darkSelectors.join(",\n");
@@ -1437,6 +1502,10 @@ function generateDarkCss(tokens, options) {
   lines.push(block(darkSelector, borderDecls));
   lines.push(sectionComment("Adaptive: Interactive (dark) \u2014 manual toggle"));
   lines.push(block(darkSelector, interactiveDecls));
+  lines.push(sectionComment("Adaptive: Intent aliases (dark) \u2014 manual toggle"));
+  lines.push(block(darkSelector, intentDecls));
+  lines.push(sectionComment("Adaptive: Hairline aliases (dark) \u2014 manual toggle"));
+  lines.push(block(darkSelector, hairlineDecls));
   lines.push(
     sectionComment("Adaptive: Text (dark) \u2014 prefers-color-scheme")
   );
@@ -1467,6 +1536,22 @@ ${block(prefersSelector, borderDecls)}}`
   lines.push(
     `@media (prefers-color-scheme: dark) {
 ${block(prefersSelector, interactiveDecls)}}`
+  );
+  lines.push("");
+  lines.push(
+    sectionComment("Adaptive: Intent aliases (dark) \u2014 prefers-color-scheme")
+  );
+  lines.push(
+    `@media (prefers-color-scheme: dark) {
+${block(prefersSelector, intentDecls)}}`
+  );
+  lines.push("");
+  lines.push(
+    sectionComment("Adaptive: Hairline aliases (dark) \u2014 prefers-color-scheme")
+  );
+  lines.push(
+    `@media (prefers-color-scheme: dark) {
+${block(prefersSelector, hairlineDecls)}}`
   );
   lines.push("");
   return header("Visor Theme \u2014 Dark") + lines.join("\n");
@@ -1561,6 +1646,10 @@ export {
   sectionComment,
   generatePrimitivesCss,
   generateSemanticCss,
+  generateTextScaleAliasDecls,
+  generateSpaceAliasDecls,
+  generateIntentDecls,
+  generateHairlineDecls,
   generateLightCss,
   generateDarkCss,
   generateFullBundleCss

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { F as FontResolveOptions, a as FontResolution, V as VisorTypography, b as FontDisplayStrategy, T as ThemeFontResult, G as GoogleFontEntry, R as ResolvedThemeConfig, c as GeneratedPrimitives, d as ThemeOutput, e as ThemeData, f as VisorThemeConfig, g as FullShadeScale, C as ColorRole, S as SelectiveShadeScale, h as RGB, P as ParsedColor, O as OKLCH, i as SemanticTokens, j as ShadeStep } from './types-0hotGz1u.js';
-export { k as ColorFormat, l as FontSource, m as RGBA, n as SemanticTokenValue } from './types-0hotGz1u.js';
+import { F as FontResolveOptions, a as FontResolution, V as VisorTypography, b as FontDisplayStrategy, T as ThemeFontResult, G as GoogleFontEntry, R as ResolvedThemeConfig, c as GeneratedPrimitives, d as ThemeOutput, e as ThemeData, f as VisorThemeConfig, g as FullShadeScale, C as ColorRole, S as SelectiveShadeScale, h as RGB, P as ParsedColor, O as OKLCH, i as SemanticTokens, j as ShadeStep } from './types-Dwc1V0Nc.js';
+export { k as ColorFormat, l as FontSource, m as RGBA, n as SemanticTokenValue } from './types-Dwc1V0Nc.js';
 
 /**
  * Font resolver — maps font family names to loadable font resources.
@@ -898,6 +898,8 @@ declare const SEMANTIC_MAP: {
     surface: Record<string, SemanticMapping>;
     border: Record<string, SemanticMapping>;
     interactive: Record<string, SemanticMapping>;
+    intent: Record<string, SemanticMapping>;
+    hairline: Record<string, SemanticMapping>;
 };
 
 /**

package/dist/index.js

@@ -34,7 +34,7 @@ import {
   rgbToHex,
   rgbToOklch,
   serializeColor
-} from "./chunk-BEFH5BTX.js";
+} from "./chunk-43TVIXUS.js";
 
 // src/fonts/validate-coverage.ts
 var FONT_VAR_RE = /--font-(heading|display|body|sans|mono)\s*:\s*([^;]+);/g;
@@ -605,7 +605,7 @@ var KNOWN_SPACING_KEYS = /* @__PURE__ */ new Set(["base"]);
 var KNOWN_RADIUS_KEYS = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "pill"]);
 var KNOWN_SHADOW_KEYS = /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl"]);
 var KNOWN_STROKE_WIDTH_KEYS = /* @__PURE__ */ new Set(["thin", "regular", "medium", "thick"]);
-var KNOWN_MOTION_KEYS = /* @__PURE__ */ new Set(["duration-fast", "duration-normal", "duration-slow", "easing"]);
+var KNOWN_MOTION_KEYS = /* @__PURE__ */ new Set(["duration-fast", "duration-normal", "duration-slow", "easing", "easing-overshoot"]);
 var KNOWN_OVERRIDES_KEYS = /* @__PURE__ */ new Set(["light", "dark"]);
 function checkUnknownKeys(obj, errors) {
   for (const key of Object.keys(obj)) {
@@ -1024,7 +1024,10 @@ function resolveConfig(config) {
       "duration-fast": config.motion?.["duration-fast"] ?? DEFAULTS.motion["duration-fast"],
       "duration-normal": config.motion?.["duration-normal"] ?? DEFAULTS.motion["duration-normal"],
       "duration-slow": config.motion?.["duration-slow"] ?? DEFAULTS.motion["duration-slow"],
-      easing: config.motion?.easing ?? DEFAULTS.motion.easing
+      easing: config.motion?.easing ?? DEFAULTS.motion.easing,
+      // VI-451 (drive-by): pass through opt-in bouncy easing when set; absent
+      // themes leave this undefined and fall through to --motion-easing-spring.
+      ...config.motion?.["easing-overshoot"] !== void 0 ? { "easing-overshoot": config.motion["easing-overshoot"] } : {}
     },
     overrides: config.overrides,
     originalColors,
@@ -1057,6 +1060,11 @@ var SEMANTIC_TEXT_MAP = {
     light: { role: "neutral", shade: 600 },
     dark: { role: "neutral", shade: 400 }
   },
+  // VI-451: deemphasized but readable — slots between tertiary and disabled.
+  muted: {
+    light: { role: "neutral", shade: 500 },
+    dark: { role: "neutral", shade: 500 }
+  },
   disabled: {
     light: { role: "neutral", shade: 300 },
     dark: { role: "neutral", shade: 600 }
@@ -1117,6 +1125,16 @@ var SEMANTIC_SURFACE_MAP = {
     light: { role: "neutral", shade: 100 },
     dark: { role: "neutral", shade: 700 }
   },
+  // VI-451: deeper than page — used by admin-ui chrome (deepest backdrop).
+  screen: {
+    light: { role: "neutral", shade: 50 },
+    dark: { role: "neutral", shade: 950 }
+  },
+  // VI-451: singular elevation alias, distinct from elev-0..4. Defaults to mid (elev-2).
+  elev: {
+    light: { role: "neutral", shade: 100 },
+    dark: { role: "neutral", shade: 800 }
+  },
   overlay: {
     light: { role: "neutral", shade: 900 },
     dark: { role: "neutral", shade: 950 }
@@ -1311,11 +1329,56 @@ var SEMANTIC_INTERACTIVE_MAP = {
     dark: { role: "neutral", shade: 700 }
   }
 };
+var SEMANTIC_INTENT_MAP = {
+  primary: {
+    light: { role: "primary", shade: 500 },
+    dark: { role: "primary", shade: 500 }
+  },
+  // Text color paired with --primary backgrounds. Default white; themes whose
+  // primary fails AA on white pin to a graphite via overrides (entr does this).
+  "primary-text": {
+    light: { constant: "#ffffff" },
+    dark: { constant: "#ffffff" }
+  },
+  accent: {
+    light: { role: "accent", shade: 500 },
+    dark: { role: "accent", shade: 500 }
+  },
+  success: {
+    light: { role: "success", shade: 500 },
+    dark: { role: "success", shade: 500 }
+  },
+  warning: {
+    light: { role: "warning", shade: 500 },
+    dark: { role: "warning", shade: 500 }
+  },
+  // shadcn naming — aliases the `error` role.
+  destructive: {
+    light: { role: "error", shade: 500 },
+    dark: { role: "error", shade: 500 }
+  },
+  info: {
+    light: { role: "info", shade: 500 },
+    dark: { role: "info", shade: 500 }
+  }
+};
+var SEMANTIC_HAIRLINE_MAP = {
+  default: {
+    light: { constant: "rgba(0, 0, 0, 0.06)" },
+    dark: { constant: "rgba(255, 255, 255, 0.06)" }
+  },
+  strong: {
+    light: { constant: "rgba(0, 0, 0, 0.10)" },
+    dark: { constant: "rgba(255, 255, 255, 0.10)" }
+  }
+};
 var SEMANTIC_MAP = {
   text: SEMANTIC_TEXT_MAP,
   surface: SEMANTIC_SURFACE_MAP,
   border: SEMANTIC_BORDER_MAP,
-  interactive: SEMANTIC_INTERACTIVE_MAP
+  interactive: SEMANTIC_INTERACTIVE_MAP,
+  intent: SEMANTIC_INTENT_MAP,
+  hairline: SEMANTIC_HAIRLINE_MAP
 };
 
 // src/assign.ts
@@ -1357,6 +1420,8 @@ function assignSemanticTokens(lightPrimitives, darkPrimitives, config) {
   const surface = {};
   const border = {};
   const interactive = {};
+  const intent = {};
+  const hairline = {};
   for (const [name, mapping] of Object.entries(SEMANTIC_MAP.text)) {
     text[name] = resolveMapping(mapping, lightPrimitives, darkPrimitives, config);
   }
@@ -1369,7 +1434,13 @@ function assignSemanticTokens(lightPrimitives, darkPrimitives, config) {
   for (const [name, mapping] of Object.entries(SEMANTIC_MAP.interactive)) {
     interactive[name] = resolveMapping(mapping, lightPrimitives, darkPrimitives, config);
   }
-  return { text, surface, border, interactive };
+  for (const [name, mapping] of Object.entries(SEMANTIC_MAP.intent)) {
+    intent[name] = resolveMapping(mapping, lightPrimitives, darkPrimitives, config);
+  }
+  for (const [name, mapping] of Object.entries(SEMANTIC_MAP.hairline)) {
+    hairline[name] = resolveMapping(mapping, lightPrimitives, darkPrimitives, config);
+  }
+  return { text, surface, border, interactive, intent, hairline };
 }
 
 // src/overrides.ts
@@ -1377,9 +1448,13 @@ var TOKEN_CATEGORIES = [
   { prefix: "text-", key: "text" },
   { prefix: "surface-", key: "surface" },
   { prefix: "border-", key: "border" },
-  { prefix: "interactive-", key: "interactive" }
+  { prefix: "interactive-", key: "interactive" },
+  { prefix: "hairline-", key: "hairline" }
 ];
 function findToken(key, tokens) {
+  if (key === "hairline" && "default" in tokens.hairline) {
+    return { group: tokens.hairline, name: "default" };
+  }
   for (const { prefix, key: groupKey } of TOKEN_CATEGORIES) {
     if (key.startsWith(prefix)) {
       const name = key.slice(prefix.length);
@@ -1388,6 +1463,9 @@ function findToken(key, tokens) {
       }
     }
   }
+  if (key in tokens.intent) {
+    return { group: tokens.intent, name: key };
+  }
   return null;
 }
 function applyOverrides(tokens, overrides) {
@@ -1396,9 +1474,11 @@ function applyOverrides(tokens, overrides) {
     text: { ...tokens.text },
     surface: { ...tokens.surface },
     border: { ...tokens.border },
-    interactive: { ...tokens.interactive }
+    interactive: { ...tokens.interactive },
+    intent: { ...tokens.intent },
+    hairline: { ...tokens.hairline }
   };
-  for (const group of ["text", "surface", "border", "interactive"]) {
+  for (const group of ["text", "surface", "border", "interactive", "intent", "hairline"]) {
     for (const [name, value] of Object.entries(result[group])) {
       result[group][name] = { ...value };
     }
@@ -1615,10 +1695,13 @@ function exportTheme(primitives, config) {
   const motion = {};
   for (const [key, defaultVal] of Object.entries(DEFAULT_MOTION)) {
     const val = config.motion[key];
-    if (val !== defaultVal) {
+    if (val !== void 0 && val !== defaultVal) {
       motion[key] = val;
     }
   }
+  if (config.motion["easing-overshoot"] !== void 0) {
+    motion["easing-overshoot"] = config.motion["easing-overshoot"];
+  }
   if (Object.keys(motion).length > 0) {
     output.motion = motion;
   }

package/dist/{types-0hotGz1u.d.ts → types-Dwc1V0Nc.d.ts}

@@ -268,6 +268,12 @@ interface VisorThemeConfig {
         "duration-normal"?: string;
         "duration-slow"?: string;
         easing?: string;
+        /**
+         * VI-451 (drive-by): opt-in tier-2 easing for bouncy entrances
+         * (marker pops, scale-in entrances). Emitted as `--motion-easing-overshoot`
+         * when set; absent themes fall through to the default `--motion-easing-spring`.
+         */
+        "easing-overshoot"?: string;
     };
     overrides?: {
         light?: Record<string, string>;
@@ -380,6 +386,8 @@ interface ResolvedThemeConfig {
         "duration-normal": string;
         "duration-slow": string;
         easing: string;
+        /** VI-451 (drive-by): opt-in bouncy easing for marker pops / scale-in entrances. */
+        "easing-overshoot"?: string;
     };
     overrides?: {
         light?: Record<string, string>;
@@ -408,6 +416,8 @@ interface SemanticTokens {
     surface: Record<string, SemanticTokenValue>;
     border: Record<string, SemanticTokenValue>;
     interactive: Record<string, SemanticTokenValue>;
+    intent: Record<string, SemanticTokenValue>;
+    hairline: Record<string, SemanticTokenValue>;
 }
 interface ThemeOutput {
     primitivesCss: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor-theme-engine",
-  "version": "0.9.0",
+  "version": "0.10.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",