@loworbitstudio/visor-theme-engine 0.17.1 → 0.19.0

package/dist/{chunk-BUWBBUFG.js → chunk-32DC5DAR.js}

@@ -1242,6 +1242,489 @@ function serializeColor(parsed) {
   }
 }
 
+// src/component-tokens.ts
+function componentTokenName(family, key) {
+  return `${family.prefix}-${key}`;
+}
+var TABLE = "components/ui/table/table.module.css";
+var DATA_TABLE = "components/ui/data-table/data-table.module.css";
+var CHIP = "components/ui/chip/chip.module.css";
+var BADGE = "components/ui/badge/badge.module.css";
+var STATUS_BADGE = "components/ui/status-badge/status-badge.module.css";
+var FILTER_BAR = "components/ui/filter-bar/filter-bar.module.css";
+var PAGE_HEADER = "components/ui/page-header/page-header.module.css";
+var EMPTY_STATE = "components/ui/empty-state/empty-state.module.css";
+var BANNER = "components/ui/banner/banner.module.css";
+var SIDEBAR = "components/ui/sidebar/sidebar.module.css";
+var TABS = "components/ui/tabs/tabs.module.css";
+var SKELETON = "components/ui/skeleton/skeleton.module.css";
+var SPINNER = "components/ui/spinner/spinner.module.css";
+var CHECKBOX = "components/ui/checkbox/checkbox.module.css";
+function at(file, fallback) {
+  return [{ file, fallback }];
+}
+var tableFamily = {
+  family: "table",
+  prefix: "table",
+  description: "Table head, row and cell treatment. The retro measured the same header cell rendered four ways across one admin app; binding this family pins it once.",
+  tokens: [
+    { key: "font-size", property: "font-size", description: "Base table type size.", consumers: at(TABLE, "var(--font-size-sm, 0.875rem)") },
+    { key: "text-color", property: "color", description: "Base table text colour.", consumers: at(TABLE, "var(--text-primary, #111827)") },
+    { key: "head-height", property: "height", description: "Header row height.", consumers: at(TABLE, "3rem") },
+    { key: "head-padding-x", property: "padding-left / padding-right", description: "Header cell horizontal padding.", consumers: at(TABLE, "var(--spacing-3, 0.75rem)") },
+    { key: "head-font-family", property: "font-family", description: "Header cell family \u2014 set a mono/condensed face for a chrome-style header.", consumers: at(TABLE, "inherit") },
+    { key: "head-font-size", property: "font-size", description: "Header cell type size.", consumers: at(TABLE, "inherit") },
+    { key: "head-font-weight", property: "font-weight", description: "Header cell weight.", consumers: at(TABLE, "var(--font-weight-medium, 500)") },
+    { key: "head-letter-spacing", property: "letter-spacing", description: "Header cell tracking.", consumers: at(TABLE, "inherit") },
+    { key: "head-text-transform", property: "text-transform", description: "Header cell casing \u2014 `uppercase` for the editorial admin header.", consumers: at(TABLE, "inherit") },
+    { key: "head-color", property: "color", description: "Header cell text colour.", consumers: at(TABLE, "var(--text-primary, #111827)") },
+    { key: "head-bg", property: "background-color", description: "Header cell fill. Sits above the shared `--dt-header-bg` surface role.", consumers: at(TABLE, "var(--dt-header-bg, transparent)") },
+    { key: "row-border", property: "border-bottom", description: "Row separator (width, style and colour).", consumers: at(TABLE, "1px solid var(--border-default, #e5e7eb)") },
+    { key: "row-hover-bg", property: "background-color", description: "Row hover fill.", consumers: at(TABLE, "var(--surface-muted, #f3f4f6)") },
+    { key: "row-selected-bg", property: "background-color", description: "Selected-row fill.", consumers: at(TABLE, "var(--surface-muted, #f3f4f6)") },
+    { key: "cell-padding", property: "padding", description: "Body cell padding.", consumers: at(TABLE, "var(--spacing-3, 0.75rem)") },
+    { key: "cell-font-size", property: "font-size", description: "Body cell type size.", consumers: at(TABLE, "inherit") },
+    { key: "cell-color", property: "color", description: "Body cell text colour.", consumers: at(TABLE, "var(--text-primary, #111827)") },
+    { key: "cell-bg", property: "background-color", description: "Body cell fill. Sits above the shared `--dt-row-bg` surface role.", consumers: at(TABLE, "var(--dt-row-bg, transparent)") },
+    { key: "cell-border-top", property: "border-top", description: "Cell hairline.", consumers: at(TABLE, "1px solid var(--hairline, transparent)") },
+    { key: "footer-bg", property: "background-color", description: "Footer row fill.", consumers: at(TABLE, "var(--surface-muted, #f3f4f6)") },
+    { key: "caption-color", property: "color", description: "Caption text colour.", consumers: at(TABLE, "var(--text-secondary, #6b7280)") }
+  ]
+};
+var dataTableFamily = {
+  family: "data-table",
+  prefix: "dt",
+  description: "The admin-ui Tier-2 data-table surface stack (D3). Shared between the Table primitive and the DataTable shell so a list page and its table read as one surface.",
+  tokens: [
+    {
+      key: "header-bg",
+      property: "background-color",
+      description: "Header-row surface tier.",
+      consumers: [
+        { file: TABLE, fallback: "transparent" },
+        { file: DATA_TABLE, fallback: "var(--surface-card)" }
+      ]
+    },
+    {
+      key: "row-bg",
+      property: "background-color",
+      description: "Data-row surface tier \u2014 a hair above the page so rows track any palette.",
+      consumers: [
+        { file: TABLE, fallback: "transparent" },
+        { file: DATA_TABLE, fallback: "color-mix(in srgb, var(--surface-page) 75%, var(--surface-card) 25%)" }
+      ]
+    },
+    {
+      key: "container-radius",
+      property: "border-radius",
+      description: "Table container rounding \u2014 `0` lets the consumer shell own the corners.",
+      consumers: [
+        { file: TABLE, fallback: "var(--radius-lg, 0.5rem)" },
+        { file: DATA_TABLE, fallback: "0" }
+      ]
+    },
+    {
+      key: "container-shadow",
+      property: "box-shadow",
+      description: "Table container elevation.",
+      consumers: [
+        { file: TABLE, fallback: "var(--shadow-sm)" },
+        { file: DATA_TABLE, fallback: "none" }
+      ]
+    },
+    { key: "row-py", property: "padding-top / padding-bottom", description: "Row vertical rhythm (the density axis).", consumers: at(DATA_TABLE, "var(--spacing-3, 0.75rem)") },
+    { key: "cell-px", property: "padding-left / padding-right", description: "Cell horizontal inset.", consumers: at(DATA_TABLE, "var(--spacing-5, 1.25rem)") },
+    { key: "header-font-size", property: "font-size", description: "Sort-header type size.", consumers: at(DATA_TABLE, "11px") }
+  ]
+};
+var chipFamily = {
+  family: "chip",
+  prefix: "chip",
+  description: "Chip / filter-pill treatment. The retro found the same mono status chip at 8.5 / 9 / 9.5 / 10 / 11px with tracking .03\u2013.14em across nine implementations; this family is the single dial.",
+  tokens: [
+    { key: "radius", property: "border-radius", description: "Chip corner rounding.", consumers: at(CHIP, "var(--radius-full, 9999px)") },
+    { key: "border", property: "border", description: "Chip outline.", consumers: at(CHIP, "var(--stroke-width-thin, 1px) solid var(--border-default, #e5e7eb)") },
+    { key: "bg", property: "background-color", description: "Resting chip fill.", consumers: at(CHIP, "var(--surface-card, #ffffff)") },
+    { key: "text-color", property: "color", description: "Chip label colour.", consumers: at(CHIP, "var(--text-primary, #111827)") },
+    { key: "font-family", property: "font-family", description: "Chip label family \u2014 bind a mono face for token/ID chips.", consumers: at(CHIP, "var(--font-body, inherit)") },
+    { key: "font-weight", property: "font-weight", description: "Chip label weight.", consumers: at(CHIP, "var(--font-weight-medium, 500)") },
+    { key: "letter-spacing", property: "letter-spacing", description: "Chip label tracking.", consumers: at(CHIP, "inherit") },
+    { key: "text-transform", property: "text-transform", description: "Chip label casing.", consumers: at(CHIP, "inherit") },
+    { key: "sm-height", property: "height", description: "Small chip height.", consumers: at(CHIP, "1.5rem") },
+    { key: "sm-padding-x", property: "padding", description: "Small chip horizontal padding.", consumers: at(CHIP, "var(--spacing-2, 0.5rem)") },
+    { key: "sm-font-size", property: "font-size", description: "Small chip type size.", consumers: at(CHIP, "var(--font-size-xs, 0.75rem)") },
+    { key: "md-height", property: "height", description: "Default chip height.", consumers: at(CHIP, "2rem") },
+    { key: "md-padding-x", property: "padding", description: "Default chip horizontal padding.", consumers: at(CHIP, "var(--spacing-3, 0.75rem)") },
+    { key: "md-font-size", property: "font-size", description: "Default chip type size.", consumers: at(CHIP, "var(--font-size-sm, 0.875rem)") },
+    { key: "lg-height", property: "height", description: "Large chip height.", consumers: at(CHIP, "2.5rem") },
+    { key: "lg-padding-x", property: "padding", description: "Large chip horizontal padding.", consumers: at(CHIP, "var(--spacing-4, 1rem)") },
+    { key: "lg-font-size", property: "font-size", description: "Large chip type size.", consumers: at(CHIP, "var(--font-size-base, 1rem)") },
+    { key: "selected-bg", property: "background-color", description: "Selected chip fill.", consumers: at(CHIP, "var(--surface-accent-subtle, #eff6ff)") },
+    { key: "selected-border-color", property: "border-color", description: "Selected chip outline colour.", consumers: at(CHIP, "var(--surface-accent-default, #3b82f6)") },
+    { key: "selected-text-color", property: "color", description: "Selected chip label colour.", consumers: at(CHIP, "var(--text-link, #2563eb)") }
+  ]
+};
+var badgeFamily = {
+  family: "badge",
+  prefix: "badge",
+  description: "Badge treatment \u2014 the D3 Tier-2 `--badge-text-transform` / `-letter-spacing` / `-font-size` / `-font-weight` set, promoted from the admin-ui audit to a bindable contract.",
+  tokens: [
+    { key: "radius", property: "border-radius", description: "Badge corner rounding.", consumers: at(BADGE, "var(--radius-full, 9999px)") },
+    { key: "border", property: "border", description: "Badge outline.", consumers: at(BADGE, "1px solid transparent") },
+    { key: "font-family", property: "font-family", description: "Badge label family.", consumers: at(BADGE, "inherit") },
+    { key: "font-weight", property: "font-weight", description: "Badge label weight (Tier-2: 600).", consumers: at(BADGE, "var(--font-weight-medium, 500)") },
+    { key: "text-transform", property: "text-transform", description: "Badge casing (Tier-2: uppercase).", consumers: at(BADGE, "none") },
+    { key: "letter-spacing", property: "letter-spacing", description: "Badge tracking (Tier-2: 0.04em).", consumers: at(BADGE, "normal") },
+    {
+      key: "font-size",
+      property: "font-size",
+      description: "Default badge type size (Tier-2: 11px). Drives both the standard and editorial-density steps.",
+      consumers: [
+        { file: BADGE, fallback: "var(--font-size-xs, 0.75rem)" },
+        { file: BADGE, fallback: "11px" }
+      ]
+    },
+    { key: "md-padding", property: "padding", description: "Default badge padding.", consumers: at(BADGE, "calc(var(--spacing-1, 0.25rem) / 2) var(--spacing-2, 0.5rem)") },
+    { key: "md-gap", property: "gap", description: "Default badge icon gap.", consumers: at(BADGE, "var(--spacing-1, 0.25rem)") }
+  ]
+};
+var statusBadgeFamily = {
+  family: "status-badge",
+  prefix: "status-badge",
+  description: "Status-badge indicator dot and the mono readout label. Chrome is inherited from the Badge family.",
+  tokens: [
+    { key: "dot-size", property: "width / height", description: "Indicator dot diameter.", consumers: at(STATUS_BADGE, "0.5rem") },
+    { key: "dot-radius", property: "border-radius", description: "Indicator dot rounding \u2014 square it for a Linear-style status marker.", consumers: at(STATUS_BADGE, "var(--radius-full, 9999px)") },
+    { key: "mono-font-family", property: "font-family", description: "Mono-label family.", consumers: at(STATUS_BADGE, 'var(--font-mono, "SF Mono", "Fira Code", "Fira Mono", monospace)') },
+    { key: "mono-font-size", property: "font-size", description: "Mono-label type size.", consumers: at(STATUS_BADGE, "var(--text-11, 0.6875rem)") },
+    { key: "mono-letter-spacing", property: "letter-spacing", description: "Mono-label tracking.", consumers: at(STATUS_BADGE, "0.02em") }
+  ]
+};
+var filterBarFamily = {
+  family: "filter-bar",
+  prefix: "filter-bar",
+  description: `The operator's named case: "the filter bar above the table in many admin pages was pretty different from one to the next; that should be streamlined."`,
+  tokens: [
+    { key: "bg", property: "background-color", description: "Filter-bar fill.", consumers: at(FILTER_BAR, "var(--surface-card, #ffffff)") },
+    { key: "border", property: "border", description: "Filter-bar frame.", consumers: at(FILTER_BAR, "1px solid var(--border-default, #e5e7eb)") },
+    { key: "radius", property: "border-radius", description: "Filter-bar corner rounding.", consumers: at(FILTER_BAR, "var(--radius-lg, 0.75rem)") },
+    { key: "padding", property: "padding", description: "Filter-bar inset.", consumers: at(FILTER_BAR, "var(--spacing-3, 0.75rem) var(--spacing-4, 1rem)") },
+    { key: "gap", property: "gap", description: "Vertical rhythm between the control row and the chip row.", consumers: at(FILTER_BAR, "var(--spacing-3, 0.75rem)") },
+    { key: "text-color", property: "color", description: "Filter-bar text colour.", consumers: at(FILTER_BAR, "var(--text-primary, #111827)") },
+    { key: "dense-padding", property: "padding", description: "Dense-variant inset.", consumers: at(FILTER_BAR, "var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem)") },
+    { key: "dense-gap", property: "gap", description: "Dense-variant rhythm.", consumers: at(FILTER_BAR, "var(--spacing-2, 0.5rem)") },
+    { key: "control-radius", property: "border-radius", description: "Rounding of the search input and filter triggers inside the bar.", consumers: at(FILTER_BAR, "var(--radius-md, 0.25rem)") },
+    { key: "results-font-size", property: "font-size", description: "Results-count type size.", consumers: at(FILTER_BAR, "var(--font-size-sm, 0.875rem)") },
+    { key: "results-color", property: "color", description: "Results-count colour.", consumers: at(FILTER_BAR, "var(--text-secondary, #6b7280)") }
+  ]
+};
+var pageHeaderFamily = {
+  family: "page-header",
+  prefix: "page-header",
+  description: "Page-header lockup. The retro found the page title rendered five ways across one app.",
+  tokens: [
+    { key: "gap", property: "gap", description: "Header stack rhythm.", consumers: at(PAGE_HEADER, "var(--spacing-4, 1rem)") },
+    { key: "text-color", property: "color", description: "Header text colour.", consumers: at(PAGE_HEADER, "var(--text-primary, #111827)") },
+    { key: "leading-gap", property: "gap", description: "Gap between the leading media slot and the text stack.", consumers: at(PAGE_HEADER, "var(--spacing-3, 0.75rem)") },
+    { key: "eyebrow-font-size", property: "font-size", description: "Eyebrow type size.", consumers: at(PAGE_HEADER, "var(--font-size-xs, 0.75rem)") },
+    { key: "eyebrow-font-weight", property: "font-weight", description: "Eyebrow weight.", consumers: at(PAGE_HEADER, "var(--font-weight-semibold, 600)") },
+    { key: "eyebrow-letter-spacing", property: "letter-spacing", description: "Eyebrow tracking.", consumers: at(PAGE_HEADER, "var(--letter-spacing-wide, 0.05em)") },
+    { key: "eyebrow-text-transform", property: "text-transform", description: "Eyebrow casing.", consumers: at(PAGE_HEADER, "uppercase") },
+    { key: "eyebrow-color", property: "color", description: "Eyebrow colour.", consumers: at(PAGE_HEADER, "var(--text-tertiary, #6b7280)") },
+    {
+      key: "title-family",
+      property: "font-family",
+      description: 'Marquee title family (`titleFamily="display"`). Falls through to the admin-ui marquee role before the theme display font.',
+      consumers: at(PAGE_HEADER, "var(--admin-ui-marquee-family, var(--font-display, var(--font-family-heading, inherit)))")
+    },
+    { key: "title-size", property: "font-size", description: 'Marquee title size (`titleSize="marquee"`).', consumers: at(PAGE_HEADER, "3.5rem") },
+    { key: "title-leading", property: "line-height", description: "Title leading.", consumers: [{ file: PAGE_HEADER, fallback: "var(--line-height-tight, 1.2)" }, { file: PAGE_HEADER, fallback: "1" }] },
+    { key: "title-font-size", property: "font-size", description: "Standard title size.", consumers: at(PAGE_HEADER, "var(--font-size-2xl, 1.5rem)") },
+    { key: "title-font-weight", property: "font-weight", description: "Title weight.", consumers: at(PAGE_HEADER, "var(--font-weight-semibold, 600)") },
+    { key: "title-letter-spacing", property: "letter-spacing", description: "Title tracking.", consumers: at(PAGE_HEADER, "var(--letter-spacing-tight, -0.01em)") },
+    { key: "title-color", property: "color", description: "Title colour.", consumers: at(PAGE_HEADER, "var(--text-primary, #111827)") },
+    { key: "description-font-size", property: "font-size", description: "Description type size.", consumers: at(PAGE_HEADER, "var(--font-size-sm, 0.875rem)") },
+    { key: "description-color", property: "color", description: "Description colour.", consumers: at(PAGE_HEADER, "var(--text-secondary, #6b7280)") },
+    { key: "actions-gap", property: "gap", description: "Gap between header action buttons.", consumers: at(PAGE_HEADER, "var(--spacing-2, 0.5rem)") }
+  ]
+};
+var emptyStateFamily = {
+  family: "empty-state",
+  prefix: "empty-state",
+  description: "Empty-state placard \u2014 surface, icon chip and copy scale.",
+  tokens: [
+    { key: "radius", property: "border-radius", description: "Placard corner rounding.", consumers: at(EMPTY_STATE, "var(--radius-lg, 0.75rem)") },
+    { key: "text-color", property: "color", description: "Placard base text colour.", consumers: at(EMPTY_STATE, "var(--text-secondary, #6b7280)") },
+    { key: "gap", property: "gap", description: "Placard stack rhythm.", consumers: at(EMPTY_STATE, "var(--spacing-2, 0.5rem)") },
+    { key: "padding", property: "padding", description: "Default-size placard inset.", consumers: at(EMPTY_STATE, "var(--spacing-8, 2rem) var(--spacing-5, 1.25rem)") },
+    { key: "bg", property: "background-color", description: "Default-tone fill.", consumers: at(EMPTY_STATE, "var(--surface-muted, #f9fafb)") },
+    { key: "border", property: "border", description: "Default-tone frame (dashed by default).", consumers: at(EMPTY_STATE, "1px dashed var(--border-default, #e5e7eb)") },
+    { key: "icon-size", property: "width / height", description: "Icon-chip diameter.", consumers: at(EMPTY_STATE, "72px") },
+    { key: "icon-radius", property: "border-radius", description: "Icon-chip rounding.", consumers: at(EMPTY_STATE, "var(--radius-full, 9999px)") },
+    { key: "icon-bg", property: "background-color", description: "Icon-chip fill.", consumers: at(EMPTY_STATE, "var(--surface-subtle, #f5f5f6)") },
+    { key: "icon-color", property: "color", description: "Icon-chip glyph colour.", consumers: at(EMPTY_STATE, "var(--text-tertiary, #6b7280)") },
+    { key: "heading-font-family", property: "font-family", description: "Heading family.", consumers: at(EMPTY_STATE, "var(--font-family-heading, inherit)") },
+    { key: "heading-font-size", property: "font-size", description: "Default-size heading type size.", consumers: at(EMPTY_STATE, "var(--font-size-base, 1rem)") },
+    { key: "heading-font-weight", property: "font-weight", description: "Heading weight.", consumers: at(EMPTY_STATE, "var(--font-weight-semibold, 600)") },
+    { key: "heading-color", property: "color", description: "Heading colour.", consumers: at(EMPTY_STATE, "var(--text-primary, #111827)") },
+    { key: "description-font-size", property: "font-size", description: "Description type size.", consumers: at(EMPTY_STATE, "var(--font-size-sm, 0.875rem)") },
+    { key: "description-color", property: "color", description: "Description colour.", consumers: at(EMPTY_STATE, "var(--text-secondary, #6b7280)") },
+    { key: "actions-gap", property: "gap", description: "Gap between placard actions.", consumers: at(EMPTY_STATE, "var(--spacing-2, 0.5rem)") }
+  ]
+};
+var bannerFamily = {
+  family: "banner",
+  prefix: "banner",
+  description: "Full-width notice bar. The retro found six separate banner systems across ~180 instances in one app; binding this family collapses them to one.",
+  tokens: [
+    { key: "padding", property: "padding", description: "Banner inset.", consumers: at(BANNER, "var(--spacing-3, 0.75rem) var(--spacing-4, 1rem)") },
+    { key: "gap", property: "gap", description: "Gap between icon, content and actions.", consumers: at(BANNER, "var(--spacing-3, 0.75rem)") },
+    { key: "font-size", property: "font-size", description: "Banner base type size.", consumers: at(BANNER, "var(--font-size-sm, 0.875rem)") },
+    { key: "radius", property: "border-radius", description: "Banner corner rounding \u2014 `0` keeps the full-bleed bar.", consumers: at(BANNER, "0") },
+    { key: "border-width", property: "border-bottom-width", description: "Banner rule weight.", consumers: at(BANNER, "1px") },
+    { key: "shadow", property: "box-shadow", description: "Banner elevation.", consumers: at(BANNER, "var(--shadow-sm)") },
+    { key: "title-font-weight", property: "font-weight", description: "Banner title weight.", consumers: at(BANNER, "var(--font-weight-semibold, 600)") },
+    { key: "description-font-size", property: "font-size", description: "Banner description type size.", consumers: at(BANNER, "var(--font-size-sm, 0.875rem)") },
+    { key: "info-bg", property: "background-color", description: "Info-intent fill.", consumers: at(BANNER, "var(--surface-info-subtle, transparent)") },
+    { key: "info-text-color", property: "color", description: "Info-intent text colour.", consumers: at(BANNER, "var(--text-info, currentColor)") },
+    { key: "info-border-color", property: "border-color", description: "Info-intent rule colour.", consumers: at(BANNER, "var(--border-info, currentColor)") },
+    { key: "warning-bg", property: "background-color", description: "Warning-intent fill.", consumers: at(BANNER, "var(--surface-warning-subtle, transparent)") },
+    { key: "warning-text-color", property: "color", description: "Warning-intent text colour.", consumers: at(BANNER, "var(--text-warning, currentColor)") },
+    { key: "warning-border-color", property: "border-color", description: "Warning-intent rule colour.", consumers: at(BANNER, "var(--border-warning, currentColor)") },
+    { key: "error-bg", property: "background-color", description: "Error-intent fill.", consumers: at(BANNER, "var(--surface-error-subtle, transparent)") },
+    { key: "error-text-color", property: "color", description: "Error-intent text colour.", consumers: at(BANNER, "var(--text-error, currentColor)") },
+    { key: "error-border-color", property: "border-color", description: "Error-intent rule colour.", consumers: at(BANNER, "var(--border-error, currentColor)") },
+    { key: "success-bg", property: "background-color", description: "Success-intent fill.", consumers: at(BANNER, "var(--surface-success-subtle, transparent)") },
+    { key: "success-text-color", property: "color", description: "Success-intent text colour.", consumers: at(BANNER, "var(--text-success, currentColor)") },
+    { key: "success-border-color", property: "border-color", description: "Success-intent rule colour.", consumers: at(BANNER, "var(--border-success, currentColor)") }
+  ]
+};
+var sidebarFamily = {
+  family: "sidebar",
+  prefix: "sidebar",
+  description: "Sidebar chrome and nav-item treatment. The palette roles (`bg`, `text`, `border`, `accent-*`) already ship defaults from visor-core's `visor-semantic` layer and are read bare; the structural roles below are new in VI-625.",
+  tokens: [
+    { key: "bg", property: "background-color", description: "Sidebar rail fill. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "text", property: "color", description: "Sidebar text colour. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "text-muted", property: "color", description: "Sidebar group-label colour. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "border", property: "background-color / box-shadow", description: "Sidebar separator + rail colour. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "accent-bg", property: "background-color", description: "Active / hover nav-item fill. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "accent-text", property: "color", description: "Active / hover nav-item text. Defaulted by visor-core.", consumers: at(SIDEBAR, null) },
+    { key: "header-padding", property: "padding", description: "Sidebar header inset.", consumers: at(SIDEBAR, "var(--spacing-2, 0.5rem)") },
+    { key: "footer-padding", property: "padding", description: "Sidebar footer inset.", consumers: at(SIDEBAR, "var(--spacing-2, 0.5rem)") },
+    { key: "content-padding", property: "padding", description: "Scrollable nav-area inset.", consumers: at(SIDEBAR, "var(--spacing-1, 0.25rem)") },
+    { key: "menu-gap", property: "gap", description: "Gap between nav items.", consumers: at(SIDEBAR, "var(--spacing-1, 0.25rem)") },
+    { key: "group-label-height", property: "height", description: "Nav group-label height.", consumers: at(SIDEBAR, "2rem") },
+    { key: "group-label-font-size", property: "font-size", description: "Nav group-label type size.", consumers: at(SIDEBAR, "var(--font-size-xs, 0.75rem)") },
+    { key: "group-label-font-weight", property: "font-weight", description: "Nav group-label weight.", consumers: at(SIDEBAR, "var(--font-weight-medium, 500)") },
+    { key: "group-label-letter-spacing", property: "letter-spacing", description: "Nav group-label tracking.", consumers: at(SIDEBAR, "inherit") },
+    { key: "group-label-text-transform", property: "text-transform", description: "Nav group-label casing.", consumers: at(SIDEBAR, "inherit") },
+    { key: "item-radius", property: "border-radius", description: "Nav-item corner rounding.", consumers: at(SIDEBAR, "var(--radius-md, 0.375rem)") },
+    { key: "item-gap", property: "gap", description: "Nav-item icon gap.", consumers: at(SIDEBAR, "var(--spacing-2, 0.5rem)") },
+    { key: "item-font-size", property: "font-size", description: "Nav-item type size.", consumers: at(SIDEBAR, "var(--font-size-sm, 0.875rem)") },
+    { key: "item-font-weight", property: "font-weight", description: "Nav-item resting weight.", consumers: at(SIDEBAR, "inherit") },
+    { key: "item-letter-spacing", property: "letter-spacing", description: "Nav-item tracking.", consumers: at(SIDEBAR, "inherit") },
+    { key: "item-text-transform", property: "text-transform", description: "Nav-item casing.", consumers: at(SIDEBAR, "inherit") },
+    { key: "item-height", property: "height", description: "Default nav-item height.", consumers: at(SIDEBAR, "2.25rem") },
+    { key: "item-padding", property: "padding", description: "Default nav-item inset.", consumers: at(SIDEBAR, "0 var(--spacing-3, 0.75rem)") },
+    { key: "item-active-font-weight", property: "font-weight", description: "Active nav-item weight.", consumers: at(SIDEBAR, "var(--font-weight-medium, 500)") }
+  ]
+};
+var tabsFamily = {
+  family: "tabs",
+  prefix: "tabs",
+  description: "Tab rail and trigger treatment, for both the segmented (`default`) and underlined (`line`) variants.",
+  tokens: [
+    { key: "list-radius", property: "border-radius", description: "Tab-rail corner rounding.", consumers: at(TABS, "var(--radius-full, 9999px)") },
+    { key: "list-height", property: "height", description: "Tab-rail height.", consumers: at(TABS, "2.25rem") },
+    { key: "list-padding", property: "padding", description: "Tab-rail inset.", consumers: at(TABS, "calc(var(--spacing-1, 0.25rem) * 0.75)") },
+    { key: "list-color", property: "color", description: "Tab-rail base text colour.", consumers: at(TABS, "var(--text-secondary, #6b7280)") },
+    { key: "list-bg", property: "background-color", description: "Segmented-variant rail fill.", consumers: at(TABS, "var(--surface-muted, #f3f4f6)") },
+    { key: "line-border-bottom", property: "border-bottom", description: "Underlined-variant rail rule.", consumers: at(TABS, "1px solid var(--hairline, var(--border-default, #e5e7eb))") },
+    { key: "trigger-radius", property: "border-radius", description: "Trigger corner rounding.", consumers: at(TABS, "var(--radius-md, 0.375rem)") },
+    { key: "trigger-padding", property: "padding", description: "Trigger inset.", consumers: at(TABS, "var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem)") },
+    { key: "trigger-font-size", property: "font-size", description: "Trigger type size.", consumers: at(TABS, "var(--font-size-sm, 0.875rem)") },
+    { key: "trigger-font-weight", property: "font-weight", description: "Trigger weight.", consumers: at(TABS, "var(--font-weight-medium, 500)") },
+    { key: "trigger-letter-spacing", property: "letter-spacing", description: "Trigger tracking.", consumers: at(TABS, "inherit") },
+    { key: "trigger-text-transform", property: "text-transform", description: "Trigger casing.", consumers: at(TABS, "inherit") },
+    { key: "trigger-color", property: "color", description: "Resting trigger colour.", consumers: at(TABS, "var(--text-secondary, #6b7280)") },
+    { key: "trigger-active-bg", property: "background-color", description: "Active trigger fill.", consumers: at(TABS, "var(--surface-page, #ffffff)") },
+    { key: "trigger-active-color", property: "color", description: "Active trigger colour.", consumers: at(TABS, "var(--text-primary, #111827)") },
+    { key: "trigger-active-shadow", property: "box-shadow", description: "Active trigger elevation.", consumers: at(TABS, "var(--shadow-sm)") },
+    { key: "indicator-height", property: "height", description: "Underline indicator thickness.", consumers: at(TABS, "2px") },
+    { key: "indicator-color", property: "background-color", description: "Underline indicator colour.", consumers: at(TABS, "var(--text-primary, #111827)") }
+  ]
+};
+var skeletonFamily = {
+  family: "skeleton",
+  prefix: "skeleton",
+  description: "Loading-placeholder shimmer and the content-shape geometry the admin list/table/detail skeletons use.",
+  tokens: [
+    { key: "from", property: "background (gradient stop)", description: "Shimmer gradient start.", consumers: at(SKELETON, "#f3f4f6") },
+    { key: "to", property: "background (gradient stop)", description: "Shimmer gradient peak.", consumers: at(SKELETON, "#e5e7eb") },
+    { key: "radius", property: "border-radius", description: "Default placeholder rounding.", consumers: at(SKELETON, "var(--radius-md, 0.375rem)") },
+    { key: "duration", property: "animation-duration", description: "Shimmer cycle length.", consumers: at(SKELETON, "1.5s") },
+    { key: "logo-width", property: "width", description: "Logo-plate placeholder width.", consumers: at(SKELETON, "104px") },
+    { key: "logo-height", property: "height", description: "Logo-plate placeholder height.", consumers: at(SKELETON, "24px") },
+    { key: "pill-width", property: "width", description: "Badge-pill placeholder width.", consumers: at(SKELETON, "64px") },
+    { key: "pill-height", property: "height", description: "Badge-pill placeholder height.", consumers: at(SKELETON, "18px") },
+    { key: "line-h1-height", property: "height", description: "Display-line placeholder height.", consumers: at(SKELETON, "24px") },
+    { key: "line-heading-height", property: "height", description: "Heading-line placeholder height.", consumers: at(SKELETON, "18px") },
+    { key: "line-body-height", property: "height", description: "Body-line placeholder height.", consumers: at(SKELETON, "14px") },
+    { key: "avatar-size", property: "width / height", description: "Avatar placeholder diameter.", consumers: at(SKELETON, "40px") },
+    { key: "avatar-lg-size", property: "width / height", description: "Large avatar placeholder diameter.", consumers: at(SKELETON, "64px") },
+    { key: "badge-width", property: "width", description: "Row-badge placeholder width.", consumers: at(SKELETON, "72px") },
+    { key: "badge-height", property: "height", description: "Row-badge placeholder height.", consumers: at(SKELETON, "22px") },
+    { key: "row-gap", property: "gap", description: "Skeleton row gap.", consumers: at(SKELETON, "var(--spacing-3, 0.75rem)") },
+    { key: "row-padding", property: "padding", description: "Skeleton row inset.", consumers: at(SKELETON, "var(--spacing-3, 0.75rem) 0") },
+    { key: "row-border-bottom", property: "border-bottom", description: "Skeleton row separator.", consumers: at(SKELETON, "1px solid var(--border-default, #e5e7eb)") }
+  ]
+};
+var spinnerFamily = {
+  family: "spinner",
+  prefix: "spinner",
+  description: "Inline loading ring \u2014 track, leading edge, per-size geometry and cycle length.",
+  tokens: [
+    { key: "track-color", property: "border-color", description: "Ring track colour.", consumers: at(SPINNER, "var(--border-default, #e5e7eb)") },
+    { key: "edge-color", property: "border-top-color", description: "Leading-edge colour (default tone).", consumers: at(SPINNER, "var(--text-tertiary, #6b7280)") },
+    { key: "primary-edge-color", property: "border-top-color", description: "Leading-edge colour (primary tone).", consumers: at(SPINNER, "var(--primary, #111827)") },
+    { key: "radius", property: "border-radius", description: "Ring rounding.", consumers: at(SPINNER, "var(--radius-full, 9999px)") },
+    { key: "duration", property: "animation-duration", description: "Rotation cycle length.", consumers: at(SPINNER, "var(--motion-duration-1500, 1500ms)") },
+    { key: "xs-size", property: "width / height", description: "Extra-small ring diameter.", consumers: at(SPINNER, "12px") },
+    { key: "xs-border-width", property: "border-width", description: "Extra-small ring stroke.", consumers: at(SPINNER, "var(--stroke-width-thin, 1px)") },
+    { key: "sm-size", property: "width / height", description: "Small ring diameter.", consumers: at(SPINNER, "16px") },
+    { key: "sm-border-width", property: "border-width", description: "Small ring stroke.", consumers: at(SPINNER, "var(--stroke-width-regular, 1.5px)") },
+    { key: "md-size", property: "width / height", description: "Default ring diameter.", consumers: at(SPINNER, "24px") },
+    { key: "md-border-width", property: "border-width", description: "Default ring stroke.", consumers: at(SPINNER, "var(--stroke-width-medium, 2px)") }
+  ]
+};
+var checkboxFamily = {
+  family: "checkbox",
+  prefix: "checkbox",
+  description: "Control sizing \u2014 the D3 Tier-2 `--checkbox-size` / `-radius` / `-bg` / `-border` set, promoted from the admin-ui audit to a bindable contract.",
+  tokens: [
+    { key: "size", property: "width / height", description: "Checkbox box size.", consumers: at(CHECKBOX, "1rem") },
+    { key: "radius", property: "border-radius", description: "Checkbox corner rounding \u2014 square it for the editorial admin look.", consumers: at(CHECKBOX, "var(--radius-sm, 0.25rem)") },
+    { key: "bg", property: "background-color", description: "Unchecked fill.", consumers: at(CHECKBOX, "transparent") },
+    { key: "border", property: "border", description: "Unchecked outline.", consumers: at(CHECKBOX, "1px solid var(--border-default, #e5e7eb)") },
+    { key: "bg-checked", property: "background-color", description: "Checked fill.", consumers: at(CHECKBOX, "var(--interactive-primary-bg, var(--primary, #111827))") },
+    { key: "border-checked", property: "border-color", description: "Checked outline colour.", consumers: at(CHECKBOX, "var(--interactive-primary-bg, var(--primary, #111827))") }
+  ]
+};
+var adminUiFamily = {
+  family: "admin-ui",
+  prefix: "admin-ui",
+  description: "Structural roles the admin-ui pattern owns. `marquee-family` is the display face for KPI hero figures and marquee page titles \u2014 the role the admin-ui portability audit named as the one piece of ENTR brand coupling a new theme must rebind.",
+  tokens: [
+    {
+      key: "marquee-family",
+      property: "font-family",
+      description: "Marquee / hero-figure display family.",
+      consumers: at(PAGE_HEADER, "var(--font-display, var(--font-family-heading, inherit))")
+    }
+  ]
+};
+var COMPONENT_TOKEN_FAMILIES = [
+  tableFamily,
+  dataTableFamily,
+  chipFamily,
+  badgeFamily,
+  statusBadgeFamily,
+  filterBarFamily,
+  pageHeaderFamily,
+  emptyStateFamily,
+  bannerFamily,
+  sidebarFamily,
+  tabsFamily,
+  skeletonFamily,
+  spinnerFamily,
+  checkboxFamily,
+  adminUiFamily
+];
+var COMPONENT_TOKEN_FAMILY_BY_NAME = new Map(
+  COMPONENT_TOKEN_FAMILIES.map((f) => [f.family, f])
+);
+function allComponentTokenNames() {
+  const names = [];
+  for (const family of COMPONENT_TOKEN_FAMILIES) {
+    for (const token of family.tokens) {
+      names.push(componentTokenName(family, token.key));
+    }
+  }
+  return names;
+}
+function resolveComponentBindings(bindings) {
+  const resolved = { light: {}, dark: {} };
+  if (!bindings) return resolved;
+  for (const [familyName, familyBindings] of Object.entries(bindings)) {
+    const family = COMPONENT_TOKEN_FAMILY_BY_NAME.get(familyName);
+    if (!family || !familyBindings || typeof familyBindings !== "object") continue;
+    const knownKeys = new Set(family.tokens.map((t) => t.key));
+    for (const [key, value] of Object.entries(familyBindings)) {
+      if (!knownKeys.has(key)) continue;
+      const name = componentTokenName(family, key);
+      if (typeof value === "string") {
+        resolved.light[name] = value;
+        resolved.dark[name] = value;
+      } else if (value && typeof value === "object") {
+        if (typeof value.light === "string") resolved.light[name] = value.light;
+        if (typeof value.dark === "string") resolved.dark[name] = value.dark;
+      }
+    }
+  }
+  return resolved;
+}
+function hasComponentBindings(bindings) {
+  const resolved = resolveComponentBindings(bindings);
+  return Object.keys(resolved.light).length > 0 || Object.keys(resolved.dark).length > 0;
+}
+function validateComponentBindings(bindings) {
+  const errors = [];
+  if (bindings === void 0) return errors;
+  if (typeof bindings !== "object" || bindings === null || Array.isArray(bindings)) {
+    errors.push("'components' must be an object");
+    return errors;
+  }
+  const knownFamilies = COMPONENT_TOKEN_FAMILIES.map((f) => f.family).join(", ");
+  for (const [familyName, familyBindings] of Object.entries(bindings)) {
+    const family = COMPONENT_TOKEN_FAMILY_BY_NAME.get(familyName);
+    if (!family) {
+      errors.push(`Unknown key 'components.${familyName}'. Valid keys: ${knownFamilies}`);
+      continue;
+    }
+    if (typeof familyBindings !== "object" || familyBindings === null || Array.isArray(familyBindings)) {
+      errors.push(`'components.${familyName}' must be an object`);
+      continue;
+    }
+    const knownKeys = family.tokens.map((t) => t.key);
+    for (const [key, value] of Object.entries(familyBindings)) {
+      if (!knownKeys.includes(key)) {
+        errors.push(
+          `Unknown key 'components.${familyName}.${key}'. Valid keys: ${knownKeys.join(", ")}`
+        );
+        continue;
+      }
+      if (typeof value === "string") continue;
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        for (const [mode, modeValue] of Object.entries(value)) {
+          if (mode !== "light" && mode !== "dark") {
+            errors.push(
+              `Unknown key 'components.${familyName}.${key}.${mode}'. Valid keys: light, dark`
+            );
+          } else if (typeof modeValue !== "string") {
+            errors.push(`'components.${familyName}.${key}.${mode}' must be a string`);
+          }
+        }
+        continue;
+      }
+      errors.push(
+        `'components.${familyName}.${key}' must be a string or an object with 'light' / 'dark' keys`
+      );
+    }
+  }
+  return errors;
+}
+
 // src/shades.ts
 var FULL_SHADE_STEPS = [
   50,
@@ -1967,6 +2450,13 @@ export {
   compositeOverBackground,
   serializeColor,
   MATERIAL_TEXT_SLOTS,
+  componentTokenName,
+  COMPONENT_TOKEN_FAMILIES,
+  COMPONENT_TOKEN_FAMILY_BY_NAME,
+  allComponentTokenNames,
+  resolveComponentBindings,
+  hasComponentBindings,
+  validateComponentBindings,
   FULL_SHADE_STEPS,
   SELECTIVE_SHADE_STEPS,
   TAILWIND_GRAY,