@loworbitstudio/visor-theme-engine 0.25.0 → 0.29.0

package/dist/adapters/index.d.ts

@@ -1,4 +1,4 @@
-import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-ZPTjTL_-.js';
+import { k as GeneratedPrimitives, s as SemanticTokens, R as ResolvedThemeConfig } from '../types-C7nWZ5fB.js';
 
 /**
  * Adapter types for the Visor theme engine.

package/dist/adapters/index.js

@@ -2,6 +2,8 @@ import {
   FULL_SHADE_STEPS,
   MATERIAL_TEXT_SLOTS,
   SELECTIVE_SHADE_STEPS,
+  VISOR_CORE_DARK_SEMANTIC_ALIASES,
+  VISOR_CORE_SEMANTIC_ALIASES_DARK_HOST,
   aliasFamily,
   block,
   buildVisorFontUrl,
@@ -9,7 +11,9 @@ import {
   collectDeclaredProperties,
   fontStack,
   generateDarkCss,
+  generateFontMetricDecls,
   generateFontSizeDecls,
+  generateFontTextTransformDecls,
   generateFontWeightDecls,
   generateHairlineDecls,
   generateIntentDecls,
@@ -25,7 +29,7 @@ import {
   resolveThemeBrand,
   resolveThemeFonts,
   sectionComment
-} from "../chunk-C2DUPZVY.js";
+} from "../chunk-YMCDUC7N.js";
 
 // src/adapters/brand-passthrough.ts
 var SENTINEL_COLOR = "#ff00ff";
@@ -307,10 +311,11 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
   const darkBody = stripHeader(generateDarkCss(input.tokens, { scopePrefix, colorScheme }));
   const adaptiveBody = [lightBody, darkBody].filter(Boolean).join("\n\n");
   if (scopePrefix) {
-    const declared = collectDeclaredProperties(
-      [primitivesBody, semanticLines.join("\n"), adaptiveBody].join("\n")
-    );
-    const aliasDecls = generateSemanticAliasDecls(declared);
+    const themeCss = [primitivesBody, semanticLines.join("\n"), adaptiveBody].join("\n");
+    const declared = collectDeclaredProperties(themeCss);
+    const aliasDecls = generateSemanticAliasDecls(declared, {
+      table: colorScheme === "dark-only" ? VISOR_CORE_SEMANTIC_ALIASES_DARK_HOST : void 0
+    });
     if (aliasDecls.length > 0) {
       semanticLines.push(
         sectionComment("visor-core alias re-substitution at theme scope (VI-648)")
@@ -318,6 +323,27 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
       semanticLines.push(block(hostSelector, aliasDecls));
       semanticLines.push("");
     }
+    if (colorScheme === "adaptive") {
+      const darkAliasDecls = generateSemanticAliasDecls(
+        collectDeclaredProperties(themeCss, { exclude: [lightModeSelector] }),
+        { table: VISOR_CORE_DARK_SEMANTIC_ALIASES }
+      );
+      if (darkAliasDecls.length > 0) {
+        semanticLines.push(
+          sectionComment("visor-core alias re-substitution (dark) \u2014 manual toggle (VI-696)")
+        );
+        semanticLines.push(block(darkSelectors.join(",\n"), darkAliasDecls));
+        semanticLines.push("");
+        semanticLines.push(
+          sectionComment("visor-core alias re-substitution (dark) \u2014 prefers-color-scheme (VI-696)")
+        );
+        const inner = block(prefersSelector, darkAliasDecls);
+        semanticLines.push(`@media (prefers-color-scheme: dark) {
+${inner.split("\n").map((l) => `  ${l}`).join("\n")}
+}`);
+        semanticLines.push("");
+      }
+    }
   }
   const semanticLayer = wrapInLayer("visor-semantic", semanticLines.join("\n").trim());
   if (semanticLayer) {
@@ -559,7 +585,9 @@ function generateTypographyDecls(config, aliases) {
   decls.push(`--font-body: ${fontStack(config.typography.body.family, aliases)};`);
   decls.push(`--font-mono: ${fontStack(config.typography.mono.family, aliases)};`);
   decls.push(...generateFontSizeDecls(config.typography.scale));
+  decls.push(...generateFontMetricDecls(config.typography.body.family));
   decls.push(...generateFontWeightDecls(config.typography));
+  decls.push(...generateFontTextTransformDecls(config.typography));
   const lineHeights = {
     none: 1,
     tight: 1.25,
@@ -898,6 +926,33 @@ ${inner.split("\n").map((l) => `  ${l}`).join("\n")}
     },
     colorScheme
   );
+  const themeCss = [lines.join("\n"), semanticLines.join("\n"), componentTokensCss, brandResult.css, passthroughCss].join("\n");
+  const declared = collectDeclaredProperties(themeCss);
+  const aliasDecls = generateSemanticAliasDecls(declared, {
+    table: colorScheme === "dark-only" ? VISOR_CORE_SEMANTIC_ALIASES_DARK_HOST : void 0
+  });
+  if (aliasDecls.length > 0) {
+    semanticLines.push(sectionComment2("visor-core alias re-substitution at theme scope (VI-695)"));
+    semanticLines.push(block2(scopeClass, aliasDecls));
+    semanticLines.push("");
+  }
+  if (emitPrefers) {
+    const darkAliasDecls = generateSemanticAliasDecls(
+      collectDeclaredProperties(themeCss, { exclude: [lightSel] }),
+      { table: VISOR_CORE_DARK_SEMANTIC_ALIASES }
+    );
+    if (darkAliasDecls.length > 0) {
+      semanticLines.push(sectionComment2("visor-core alias re-substitution (dark) \u2014 manual toggle (VI-696)"));
+      semanticLines.push(block2(darkSel, darkAliasDecls));
+      semanticLines.push("");
+      semanticLines.push(sectionComment2("visor-core alias re-substitution (dark) \u2014 prefers-color-scheme (VI-696)"));
+      const inner = block2(`${scopeClass}:not(.light):not(.theme-light):not([data-theme="light"])`, darkAliasDecls);
+      semanticLines.push(`@media (prefers-color-scheme: dark) {
+${inner.split("\n").map((l) => `  ${l}`).join("\n")}
+}`);
+      semanticLines.push("");
+    }
+  }
   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());

package/dist/{chunk-C2DUPZVY.js → chunk-YMCDUC7N.js}

@@ -1261,6 +1261,8 @@ var SKELETON = "components/ui/skeleton/skeleton.module.css";
 var SPINNER = "components/ui/spinner/spinner.module.css";
 var CHECKBOX = "components/ui/checkbox/checkbox.module.css";
 var INPUT = "components/ui/input/input.module.css";
+var SEPARATOR = "components/ui/separator/separator.module.css";
+var NUMBER_INPUT = "components/ui/number-input/number-input.module.css";
 var TEXTAREA = "components/ui/textarea/textarea.module.css";
 var SELECT = "components/ui/select/select.module.css";
 var SWITCH = "components/ui/switch/switch.module.css";
@@ -1271,8 +1273,10 @@ var FIELD = "components/ui/field/field.module.css";
 var TEXT = "components/ui/text/text.module.css";
 var INLINE_EDIT = "components/ui/inline-edit/inline-edit.module.css";
 var SAVE_STATUS = "components/ui/save-status/save-status.module.css";
+var SEGMENTED_CONTROL = "components/ui/segmented-control/segmented-control.module.css";
 var TOOLTIP = "components/ui/tooltip/tooltip.module.css";
 var ACTION_ROW = "components/ui/action-row/action-row.module.css";
+var DIALOG_FIELD = "blocks/dialog-field/dialog-field.module.css";
 function at(file, fallback) {
   return [{ file, fallback }];
 }
@@ -1691,7 +1695,84 @@ var checkboxFamily = {
     { key: "border-checked", property: "outline-color", description: "Checked edge colour.", consumers: at(CHECKBOX, "var(--interactive-primary-bg, var(--primary, #111827))") }
   ]
 };
-var EDGE_CONTROLS = [INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT, BUTTON];
+var INPUT_MD_PADDING = "var(--spacing-3_5, 0.875rem) var(--spacing-4, 1rem)";
+var INPUT_MD_PADDING_NUDGED = "calc(var(--spacing-3_5, 0.875rem) + var(--input-nudge, 0px)) var(--spacing-4, 1rem) calc(var(--spacing-3_5, 0.875rem) - var(--input-nudge, 0px))";
+var inputFamily = {
+  family: "input",
+  prefix: "input",
+  description: "Input shape at the default `md` size. Each key falls back to the matching `--input-*-md` variable, so a scope that sets one still applies while the key is unbound; a bound key wins.",
+  tokens: [
+    {
+      key: "md-height",
+      property: "height",
+      description: "`md` height. Unbound, the height follows the padding and the line. Bind `md-padding` with it.",
+      consumers: at(INPUT, "var(--input-height-md, auto)")
+    },
+    {
+      key: "md-padding",
+      property: "padding",
+      description: "`md` padding. Also the padding of DialogField's medium well, so the well tracks the field.",
+      consumers: [
+        { file: INPUT, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING})` },
+        { file: INPUT, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING_NUDGED})` },
+        { file: DIALOG_FIELD, fallback: `var(--input-padding-md, ${INPUT_MD_PADDING})` }
+      ]
+    },
+    {
+      key: "md-radius",
+      property: "border-radius",
+      description: "`md` corner rounding. Also the rounding of DialogField's well.",
+      consumers: each([INPUT, DIALOG_FIELD], "var(--input-radius-md, var(--radius-sm, 0.5rem))")
+    }
+  ]
+};
+var textareaFamily = {
+  family: "textarea",
+  prefix: "textarea",
+  description: "Textarea shape at the default `md` size.",
+  tokens: [
+    { key: "padding", property: "padding", description: "`md` padding.", consumers: at(TEXTAREA, INPUT_MD_PADDING) },
+    { key: "radius", property: "border-radius", description: "`md` corner rounding.", consumers: at(TEXTAREA, "var(--radius-sm, 0.5rem)") }
+  ]
+};
+var selectFamily = {
+  family: "select",
+  prefix: "select",
+  description: "Select trigger shape at the default `md` size.",
+  tokens: [
+    {
+      key: "height",
+      property: "height",
+      description: "`md` trigger height. Unbound, the height follows the padding and the line. Bind `padding` with it.",
+      consumers: [
+        { file: SELECT, fallback: "auto" },
+        { file: SELECT, fallback: "calc(1lh + var(--spacing-3_5, 0.875rem) * 2 + 2px)" }
+      ]
+    },
+    { key: "padding", property: "padding", description: "`md` trigger padding.", consumers: at(SELECT, INPUT_MD_PADDING) },
+    { key: "radius", property: "border-radius", description: "`md` trigger corner rounding.", consumers: at(SELECT, "var(--radius-sm, 0.5rem)") }
+  ]
+};
+var tagInputFamily = {
+  family: "tag-input",
+  prefix: "tag-input",
+  description: 'TagInput \u2014 the field around the tags, each held tag, and the opt-in typing slot (`entryAs="slot"`). The slot follows the tag\'s shape unless its own keys are set.',
+  tokens: [
+    { key: "min-height", property: "min-height", description: "Field minimum height. The field grows as tags wrap.", consumers: at(TAG_INPUT, "2.25rem") },
+    { key: "padding", property: "padding", description: "Field padding around the tags.", consumers: at(TAG_INPUT, "var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem)") },
+    { key: "radius", property: "border-radius", description: "Field corner rounding.", consumers: at(TAG_INPUT, "var(--radius-md, 0.375rem)") },
+    { key: "tag-height", property: "height", description: "Held-tag height. Unbound, the tag is as tall as its line.", consumers: at(TAG_INPUT, "auto") },
+    { key: "tag-padding-x", property: "padding-left / padding-right", description: "Held-tag horizontal padding.", consumers: at(TAG_INPUT, "var(--spacing-2, 0.5rem)") },
+    { key: "tag-font-size", property: "font-size", description: "Held-tag type size. The typing slot types at it too.", consumers: each([TAG_INPUT, TAG_INPUT], "var(--font-size-xs, 0.75rem)") },
+    { key: "tag-font-weight", property: "font-weight", description: "Held-tag weight. Unbound, the tag inherits its row's weight.", consumers: at(TAG_INPUT, "revert-layer") },
+    { key: "tag-radius", property: "border-radius", description: "Held-tag corner rounding (a pill today).", consumers: at(TAG_INPUT, "var(--radius-full, 9999px)") },
+    { key: "slot-height", property: "height", description: "Typing-slot height. Follows `tag-height`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-height, 1.375rem)") },
+    { key: "slot-padding-x", property: "padding-left / padding-right", description: "Typing-slot horizontal padding. Follows `tag-padding-x`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-padding-x, var(--spacing-2, 0.5rem))") },
+    { key: "slot-radius", property: "border-radius", description: "Typing-slot corner rounding. Follows `tag-radius`.", consumers: at(TAG_INPUT, "var(--tag-input-tag-radius, var(--radius-full, 9999px))") },
+    { key: "slot-min-width", property: "min-width", description: "Typing-slot minimum width. The slot grows with what is typed.", consumers: at(TAG_INPUT, "4rem") }
+  ]
+};
+var EDGE_CONTROLS = [INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT, BUTTON];
 var controlFamily = {
   family: "control",
   prefix: "control",
@@ -1712,7 +1793,7 @@ var controlFamily = {
       key: "edge-color",
       property: "outline-color",
       description: "Resting-edge colour. A component's own `--<component>-border` override still wins over it.",
-      consumers: each([INPUT, TEXTAREA, SELECT, CHECKBOX, TAG_INPUT, CHIP, FILE_UPLOAD, EMPTY_STATE, BUTTON], "var(--border-default, #e5e7eb)")
+      consumers: each([INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, TAG_INPUT, CHIP, FILE_UPLOAD, EMPTY_STATE, BUTTON], "var(--border-default, #e5e7eb)")
     },
     {
       key: "edge-style",
@@ -1724,19 +1805,40 @@ var controlFamily = {
       key: "drop-edge-width",
       property: "outline-width",
       description: "Dashed-edge weight (file-upload draws it at 2\xD7). Follows `edge-width` unless set \u2014 set it alone to keep dashed edges while solid edges are off.",
-      consumers: each([FILE_UPLOAD, EMPTY_STATE], "var(--control-edge-width, 1px)")
+      consumers: each([FILE_UPLOAD, EMPTY_STATE, TAG_INPUT], "var(--control-edge-width, 1px)")
     },
     {
       key: "drop-edge-style",
       property: "outline-style",
-      description: "Dashed-edge style for drop targets and empty states.",
-      consumers: each([FILE_UPLOAD, EMPTY_STATE], "dashed")
+      description: "Dashed-edge style for drop targets, empty states and the TagInput typing slot.",
+      consumers: each([FILE_UPLOAD, EMPTY_STATE, TAG_INPUT], "dashed")
     },
     {
       key: "state-edge-width",
       property: "outline-width",
       description: "Focus and invalid edge weight. Independent of `edge-width`, so focus and invalid stay visible with edges off.",
-      consumers: each([INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT], "1px")
+      consumers: each([INPUT, NUMBER_INPUT, TEXTAREA, SELECT, CHECKBOX, SWITCH, TAG_INPUT], "1px")
+    },
+    // VI-663: the refused-value look on Input, Textarea and Select — a ring in
+    // the error colour plus a halo around it. Neither reads `edge-width`, so
+    // invalid stays visible with edges off.
+    {
+      key: "invalid-ring-width",
+      property: "box-shadow (Input) / outline-width",
+      description: "Width of the error-colour ring on a refused value. Unbound, Input draws a 1.5px inset ring and Textarea and Select draw it at `state-edge-width`.",
+      consumers: [
+        ...each([INPUT, INPUT], "1.5px"),
+        ...each([TEXTAREA, TEXTAREA, SELECT, SELECT], "var(--control-state-edge-width, 1px)")
+      ]
+    },
+    {
+      key: "invalid-halo-width",
+      property: "box-shadow",
+      description: "Width of the soft error-colour halo outside the ring. Unbound, Input draws none and Textarea and Select draw it at `--focus-ring-width`.",
+      consumers: [
+        { file: INPUT, fallback: "0px" },
+        ...each([TEXTAREA, SELECT], "var(--focus-ring-width, 2px)")
+      ]
     }
   ]
 };
@@ -1768,10 +1870,10 @@ var fieldFamily = {
   ]
 };
 var BUTTON_SIZES = [
-  { size: "sm", fontSize: ["var(--font-size-xs, 0.75rem)", "0.8125rem"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "md", fontSize: ["var(--font-size-sm, 0.875rem)"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "lg", fontSize: ["var(--font-size-base, 1rem)"], radius: "var(--radius-md, 0.375rem)" },
-  { size: "dlg", fontSize: ["var(--font-size-2xs, 0.6875rem)"], radius: "var(--radius-lg, 0.5rem)" }
+  { size: "sm", fontSize: ["var(--font-size-xs, 0.75rem)", "0.8125rem"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "md", fontSize: ["var(--font-size-sm, 0.875rem)"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "lg", fontSize: ["var(--font-size-base, 1rem)"], fontWeight: "var(--font-weight-medium, 500)", radius: "var(--radius-md, 0.375rem)" },
+  { size: "dlg", fontSize: ["var(--font-size-2xs, 0.6875rem)"], fontWeight: "var(--font-weight-semibold, 600)", radius: "var(--radius-lg, 0.5rem)" }
 ];
 var buttonFamily = {
   family: "button",
@@ -1790,6 +1892,12 @@ var buttonFamily = {
       description: "Tracking for every size.",
       consumers: BUTTON_SIZES.map(() => ({ file: BUTTON, fallback: "revert-layer" }))
     },
+    {
+      key: "font-weight",
+      property: "font-weight",
+      description: "Weight for every size.",
+      consumers: BUTTON_SIZES.map(({ fontWeight }) => ({ file: BUTTON, fallback: fontWeight }))
+    },
     {
       key: "radius",
       property: "border-radius",
@@ -1799,13 +1907,19 @@ var buttonFamily = {
         { file: BUTTON, fallback: "var(--radius-md, 0.375rem)" }
       ]
     },
-    ...BUTTON_SIZES.flatMap(({ size, fontSize, radius }) => [
+    ...BUTTON_SIZES.flatMap(({ size, fontSize, fontWeight, radius }) => [
       {
         key: `${size}-font-size`,
         property: "font-size",
         description: fontSize.length > 1 ? `\`${size}\` type size. Drives both the standard and editorial-density steps.` : `\`${size}\` type size.`,
         consumers: fontSize.map((fallback) => ({ file: BUTTON, fallback }))
       },
+      {
+        key: `${size}-font-weight`,
+        property: "font-weight",
+        description: `\`${size}\` weight.`,
+        consumers: at(BUTTON, `var(--button-font-weight, ${fontWeight})`)
+      },
       {
         key: `${size}-text-transform`,
         property: "text-transform",
@@ -1874,7 +1988,7 @@ var textFamily = {
 var switchFamily = {
   family: "switch",
   prefix: "switch",
-  description: 'Switch track and knob dimensions (default size; `size="sm"` keeps its own). Set `knob-inset` to size the knob from the track: it sits that far from the track\'s outer edge on every side.',
+  description: 'Switch track and knob dimensions (default size; `size="sm"` keeps its own) and colours. Set `knob-inset` to size the knob from the track: it sits that far from the track\'s outer edge on every side.',
   tokens: [
     { key: "track-width", property: "width", description: "Track width.", consumers: at(SWITCH, "2rem") },
     {
@@ -1895,6 +2009,30 @@ var switchFamily = {
       property: "outline-color",
       description: "Track edge colour \u2014 transparent by default. Width and style come from the shared `control` edge, so `control.edge-width: 0` turns it off.",
       consumers: at(SWITCH, "transparent")
+    },
+    {
+      key: "track-hover-bg",
+      property: "background-color (hover)",
+      description: "Unchecked track fill under the pointer. Bind it in a borderless theme, where `--border-strong` is transparent.",
+      consumers: at(SWITCH, "var(--border-strong, #d1d5db)")
+    },
+    {
+      key: "track-hover-bg-checked",
+      property: "background-color (hover)",
+      description: "Checked track fill under the pointer. Unbound it is `--border-strong`, as it always was; bind it to keep the checked fill under the pointer.",
+      consumers: at(SWITCH, "var(--border-strong, #d1d5db)")
+    },
+    {
+      key: "knob-bg",
+      property: "background-color (knob)",
+      description: "Unchecked knob fill. Bind it in a dark theme, where the page colour is a black knob on a dark track.",
+      consumers: at(SWITCH, "var(--surface-page, #ffffff)")
+    },
+    {
+      key: "knob-bg-checked",
+      property: "background-color (knob)",
+      description: "Checked knob fill. Independent of `knob-bg`, so a light unchecked knob can sit beside a dark knob on a bright checked track.",
+      consumers: at(SWITCH, "var(--surface-page, #ffffff)")
     }
   ]
 };
@@ -1905,7 +2043,22 @@ var saveStatusFamily = {
   tokens: [
     { key: "width", property: "width", description: "Slot width. Unbound, the slot is as wide as the longest label in the current font plus the retry mark, the same in every state. Bind it to pin a width; a longer label then truncates inside it.", consumers: at(SAVE_STATUS, "auto") },
     { key: "syncing-color", property: "color", description: "Ink of the Syncing state (a first sync from an outside source). Unbound it reads `--text-secondary`.", consumers: at(SAVE_STATUS, "var(--text-secondary, #6b7280)") },
-    { key: "dot-size", property: "width", description: 'Diameter of the dot that draws Unsaved when `unsavedAs="dot"`. The slot width does not change.', consumers: at(SAVE_STATUS, "var(--spacing-2, 0.5rem)") },
+    { key: "font-size", property: "font-size", description: "Readout type size.", consumers: at(SAVE_STATUS, "var(--font-size-xs, 0.75rem)") },
+    {
+      key: "dot-size",
+      property: "width / height",
+      description: "Diameter of the status dot (`dot`), in every state but Unsaved. Also the Unsaved dot's, until `unsaved-dot-size` is set. The slot width does not change.",
+      consumers: [
+        { file: SAVE_STATUS, fallback: "var(--spacing-2, 0.5rem)" },
+        { file: SAVE_STATUS, fallback: "var(--spacing-2, 0.5rem)" }
+      ]
+    },
+    {
+      key: "unsaved-dot-size",
+      property: "width / height",
+      description: 'Diameter of the dot that draws Unsaved \u2014 the status dot while Unsaved, and the dot alone of `unsavedAs="dot"`. Follows `dot-size`.',
+      consumers: each([SAVE_STATUS, SAVE_STATUS], "var(--save-status-dot-size, var(--spacing-2, 0.5rem))")
+    },
     { key: "font-family", property: "font-family", description: "Readout family (e.g. the theme's mono).", consumers: at(SAVE_STATUS, "revert-layer") },
     { key: "text-transform", property: "text-transform", description: "Readout casing.", consumers: at(SAVE_STATUS, "revert-layer") },
     { key: "letter-spacing", property: "letter-spacing", description: "Readout tracking.", consumers: at(SAVE_STATUS, "revert-layer") }
@@ -1941,6 +2094,38 @@ var actionRowFamily = {
     { key: "trailing-color", property: "color", description: "Trailing value or caret colour.", consumers: at(ACTION_ROW, "var(--text-secondary, #6b7280)") }
   ]
 };
+var inputAffixFamily = {
+  family: "input-affix",
+  prefix: "input-affix",
+  description: "Input and NumberInput prefix and suffix: the gap between a fixed affix and the value, and the affix's ink.",
+  tokens: [
+    {
+      key: "gap",
+      property: "gap",
+      description: "Space between a prefix or suffix and the value.",
+      consumers: [...at(INPUT, "var(--spacing-2, 0.5rem)"), ...at(NUMBER_INPUT, "var(--spacing-2, 0.5rem)")]
+    },
+    {
+      key: "color",
+      property: "color",
+      description: "Prefix and suffix ink.",
+      consumers: [...at(INPUT, "var(--text-secondary, #6b7280)"), ...at(NUMBER_INPUT, "var(--text-secondary, #6b7280)")]
+    }
+  ]
+};
+var separatorFamily = {
+  family: "separator",
+  prefix: "separator",
+  description: "Separator rule: the colour of the line, bare or on both sides of a label.",
+  tokens: [
+    {
+      key: "color",
+      property: "background-color",
+      description: "Rule colour. Falls back to the default border colour.",
+      consumers: at(SEPARATOR, "var(--border-default, #e5e7eb)")
+    }
+  ]
+};
 var HAIRLINE_PX = [
   "components/ui/bulk-action-bar/bulk-action-bar.module.css",
   "components/ui/dialog/dialog.module.css",
@@ -1980,6 +2165,29 @@ var hairlineFamily = {
     }
   ]
 };
+var segmentedControlFamily = {
+  family: "segmented-control",
+  prefix: "segmented-control",
+  description: "SegmentedControl \u2014 the well, its corner radius, the sliding pill, the ink and the state edge on it. The resting edge is the shared `control` edge.",
+  tokens: [
+    { key: "track-bg", property: "background-color", description: "The well the pill slides in. Default is the page nudged 12% toward the ink, so it reads as a well in light and dark.", consumers: at(SEGMENTED_CONTROL, "color-mix(in srgb, var(--text-primary, #111827) 12%, var(--surface-page, #ffffff))") },
+    {
+      key: "radius",
+      property: "border-radius",
+      description: "Track corner radius. Unset, each size keeps its ToggleGroup radius (md and sm `--radius-lg`, xs `--radius-md`, lg `--radius-xl`).",
+      consumers: [
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-md, 0.375rem)" },
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-lg, 0.5rem)" },
+        { file: SEGMENTED_CONTROL, fallback: "var(--radius-xl, 0.75rem)" }
+      ]
+    },
+    { key: "indicator-bg", property: "background-color", description: "Sliding active pill. Bind a lifted dark fill where the theme wants one.", consumers: at(SEGMENTED_CONTROL, "var(--interactive-primary-bg, var(--primary, #111827))") },
+    { key: "indicator-text", property: "color", description: "Active segment label ink, on the pill.", consumers: at(SEGMENTED_CONTROL, "var(--interactive-primary-text, #f9fafb)") },
+    { key: "indicator-edge", property: "box-shadow (inset, at --control-state-edge-width)", description: "Colour of the 1px state edge on the active pill. Set `transparent` where the fill already clears 3:1 against the well.", consumers: at(SEGMENTED_CONTROL, "var(--text-primary, #111827)") },
+    { key: "inactive-text", property: "color", description: "Inactive segment label colour.", consumers: at(SEGMENTED_CONTROL, "var(--text-primary, #111827)") },
+    { key: "active-weight", property: "font-weight", description: "Active segment label weight.", consumers: at(SEGMENTED_CONTROL, "var(--font-weight-medium, 500)") }
+  ]
+};
 var adminUiFamily = {
   family: "admin-ui",
   prefix: "admin-ui",
@@ -2008,6 +2216,10 @@ var COMPONENT_TOKEN_FAMILIES = [
   skeletonFamily,
   spinnerFamily,
   checkboxFamily,
+  inputFamily,
+  textareaFamily,
+  selectFamily,
+  tagInputFamily,
   controlFamily,
   hairlineFamily,
   fieldFamily,
@@ -2015,8 +2227,11 @@ var COMPONENT_TOKEN_FAMILIES = [
   textFamily,
   switchFamily,
   saveStatusFamily,
+  segmentedControlFamily,
   tooltipFamily,
   actionRowFamily,
+  inputAffixFamily,
+  separatorFamily,
   adminUiFamily
 ];
 var COMPONENT_TOKEN_FAMILY_BY_NAME = new Map(
@@ -2306,6 +2521,23 @@ function applyOverrides(tokens, overrides) {
   return result;
 }
 
+// src/font-metrics.ts
+var FONT_VERTICAL_METRICS = {
+  arial: { ascent: 0.905, descent: 0.212 },
+  inter: { ascent: 0.969, descent: 0.241 },
+  outfit: { ascent: 1, descent: 0.26 },
+  "pitch sans": { ascent: 0.9, descent: 0.32 },
+  "pp model mono": { ascent: 1.02, descent: 0.288 },
+  "product sans": { ascent: 0.96, descent: 0.253 },
+  satoshi: { ascent: 1.01, descent: 0.24 },
+  "system-ui": { ascent: 0.967, descent: 0.211 }
+};
+function generateFontMetricDecls(family) {
+  const key = family.trim().replace(/^["']|["']$/g, "").toLowerCase();
+  const m = FONT_VERTICAL_METRICS[key];
+  return m ? [`--font-ascent: ${m.ascent};`, `--font-descent: ${m.descent};`] : [];
+}
+
 // src/font-weights.ts
 var WEIGHT_RAMP_TARGETS = {
   medium: 500,
@@ -2512,6 +2744,14 @@ function generateFontSizeDecls(scale) {
     return `--font-size-${name}: ${rem}rem; /* ${Number(scaled.toFixed(2))}px */`;
   });
 }
+function generateFontTextTransformDecls(typography) {
+  const decls = [];
+  for (const slot of ["heading", "display", "body", "mono"]) {
+    const value = typography[slot]["text-transform"];
+    if (value) decls.push(`--font-${slot}-text-transform: ${value};`);
+  }
+  return decls;
+}
 function generateTypographyPrimitives(config, aliases = EMPTY_ALIASES) {
   const decls = [];
   decls.push(`--font-heading: ${fontStack(config.typography.heading.family, aliases)};`);
@@ -2520,7 +2760,9 @@ function generateTypographyPrimitives(config, aliases = EMPTY_ALIASES) {
   decls.push(`--font-body: ${fontStack(config.typography.body.family, aliases)};`);
   decls.push(`--font-mono: ${fontStack(config.typography.mono.family, aliases)};`);
   decls.push(...generateFontSizeDecls(config.typography.scale));
+  decls.push(...generateFontMetricDecls(config.typography.body.family));
   decls.push(...generateFontWeightDecls(config.typography));
+  decls.push(...generateFontTextTransformDecls(config.typography));
   const lineHeights = {
     none: 1,
     tight: 1.25,
@@ -2925,16 +3167,46 @@ var VISOR_CORE_SEMANTIC_ALIASES = {
   // Field-attached floating panels (VI-497).
   "field-menu-bg": "surface-popover"
 };
-function collectDeclaredProperties(css) {
+var VISOR_CORE_DARK_SEMANTIC_ALIASES = {
+  "border-input": "color-neutral-700",
+  "skeleton-from": "color-neutral-800",
+  "skeleton-to": "color-neutral-700",
+  "chart-1": "color-primary-400",
+  "sidebar-bg": "color-neutral-900",
+  "sidebar-text": "color-neutral-300",
+  "sidebar-primary-bg": "color-primary-500",
+  "sidebar-accent-bg": "color-neutral-800",
+  "sidebar-accent-text": "color-neutral-50",
+  "sidebar-border": "color-neutral-700",
+  "sidebar-ring": "color-primary-400",
+  "sidebar-text-muted": "color-neutral-400"
+};
+var MODE_DEPENDENT_SEMANTIC_ALIASES = new Set(
+  Object.keys(VISOR_CORE_DARK_SEMANTIC_ALIASES)
+);
+var VISOR_CORE_SEMANTIC_ALIASES_DARK_HOST = {
+  ...VISOR_CORE_SEMANTIC_ALIASES,
+  ...VISOR_CORE_DARK_SEMANTIC_ALIASES
+};
+function collectDeclaredProperties(css, options = {}) {
   const declared = /* @__PURE__ */ new Set();
-  for (const match of css.matchAll(/(^|[{;\s])--([a-zA-Z0-9-]+)\s*:/g)) {
-    declared.add(match[2]);
+  if (!options.exclude?.length) {
+    for (const match of css.matchAll(/(^|[{;\s])--([a-zA-Z0-9-]+)\s*:/g)) {
+      declared.add(match[2]);
+    }
+    return declared;
+  }
+  const exclude = new Set(options.exclude);
+  for (const rule of css.replace(/\/\*[\s\S]*?\*\//g, "").matchAll(/([^{}]*)\{([^{}]*)\}/g)) {
+    if (exclude.has(rule[1].trim())) continue;
+    for (const prop of collectDeclaredProperties(rule[2])) declared.add(prop);
   }
   return declared;
 }
-function generateSemanticAliasDecls(declared) {
+function generateSemanticAliasDecls(declared, options = {}) {
   const decls = [];
-  for (const [alias, referent] of Object.entries(VISOR_CORE_SEMANTIC_ALIASES)) {
+  for (const [alias, referent] of Object.entries(options.table ?? VISOR_CORE_SEMANTIC_ALIASES)) {
+    if (options.skip?.has(alias)) continue;
     if (declared.has(alias)) continue;
     if (!declared.has(referent)) continue;
     decls.push(`--${alias}: var(--${referent});`);
@@ -2943,6 +3215,7 @@ function generateSemanticAliasDecls(declared) {
 }
 
 // src/types.ts
+var TEXT_TRANSFORMS = ["none", "uppercase", "lowercase", "capitalize"];
 var MATERIAL_TEXT_SLOTS = [
   "displayLarge",
   "displayMedium",
@@ -2999,6 +3272,7 @@ export {
   isValidColor,
   compositeOverBackground,
   serializeColor,
+  TEXT_TRANSFORMS,
   MATERIAL_TEXT_SLOTS,
   componentTokenName,
   COMPONENT_TOKEN_FAMILIES,
@@ -3014,6 +3288,8 @@ export {
   collectBrandPassthrough,
   hasBrandPassthrough,
   applyOverrides,
+  FONT_VERTICAL_METRICS,
+  generateFontMetricDecls,
   WEIGHT_RAMP_TARGETS,
   loadedWeights,
   declaresWeights,
@@ -3027,6 +3303,7 @@ export {
   sectionComment,
   block2 as block,
   generateFontSizeDecls,
+  generateFontTextTransformDecls,
   generatePrimitivesCss,
   generateSemanticCss,
   generateTextScaleAliasDecls,
@@ -3037,6 +3314,9 @@ export {
   generateDarkCss,
   generateFullBundleCss,
   VISOR_CORE_SEMANTIC_ALIASES,
+  VISOR_CORE_DARK_SEMANTIC_ALIASES,
+  MODE_DEPENDENT_SEMANTIC_ALIASES,
+  VISOR_CORE_SEMANTIC_ALIASES_DARK_HOST,
   collectDeclaredProperties,
   generateSemanticAliasDecls
 };