admin-ui-starter-kit 0.6.8 → 0.7.0

package/dist/showcase/assets/css-variables-BxE5DqUm.js

@@ -0,0 +1,1223 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-DLqBJGPH.js";import{r as s,t as c}from"./example-DDhaO2UY.js";import{t as l}from"./database-KGU1LGqB.js";import{t as u}from"./layers-1IEBbvoc.js";import{t as d}from"./save-B_ze9MC9.js";import{t as f}from"./settings-2-DnZeyxSR.js";import{t as p}from"./sparkles-a2TsduRv.js";import{a as m,d as ee,i as h,l as g,n as _}from"./index-DSBghWdd.js";import{t as te}from"./icon-badge-CrSkFExw.js";import{t as v}from"./smart-card-BA097ZGN.js";import{c as ne,i as y,n as b,o as x,r as S,t as C,u as w}from"./item-D5xwkRvf.js";import{t as T}from"./input-Bq9vs-9_.js";import{t as E}from"./metadata-list-BHIfOKD6.js";var D=g(`rows-3`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M21 9H3`,key:`1338ky`}],[`path`,{d:`M21 15H3`,key:`9uk58r`}]]),O=g(`type`,[[`path`,{d:`M12 4v16`,key:`1654pz`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`,key:`e0r10z`}],[`path`,{d:`M9 20h6`,key:`s66wpe`}]]),k=t(n(),1),A=ee(),re=`/*
+ * Foundation tokens.
+ *
+ * Fonts, type scale, global scale multipliers, and the spacing scale. These
+ * are package-owned primitives, not part of the swappable shadcn theme.
+ */
+@theme inline {
+	/* Fonts */
+	--font-heading: var(--font-heading);
+	--font-sans: var(--font-sans);
+	--font-serif: var(--font-serif);
+	--font-mono: var(--font-mono);
+
+	/* Typography */
+	--text-xxs: calc(0.75rem * var(--text-scale));
+	--text-xxs--line-height: calc(1rem * var(--text-scale));
+	--text-xs: calc(0.75rem * var(--text-scale));
+	--text-xs--line-height: calc(1rem * var(--text-scale));
+	--text-pxs: calc(0.8125rem * var(--text-scale));
+	--text-pxs--line-height: calc(1.125rem * var(--text-scale));
+	--text-sm: calc(0.875rem * var(--text-scale));
+	--text-sm--line-height: calc(1.25rem * var(--text-scale));
+	--text-base: calc(1rem * var(--text-scale));
+	--text-base--line-height: calc(1.375rem * var(--text-scale));
+	--text-lg: calc(1.125rem * var(--text-scale));
+	--text-lg--line-height: calc(1.75rem * var(--text-scale));
+	--text-xl: calc(1.25rem * var(--text-scale));
+	--text-xl--line-height: calc(1.75rem * var(--text-scale));
+	--text-2xl: calc(1.5rem * var(--text-scale));
+	--text-2xl--line-height: calc(2rem * var(--text-scale));
+	--text-3xl: calc(1.875rem * var(--text-scale));
+	--text-3xl--line-height: calc(2.25rem * var(--text-scale));
+	--text-4xl: calc(2.25rem * var(--text-scale));
+	--text-4xl--line-height: calc(2.5rem * var(--text-scale));
+	--text-5xl: calc(3rem * var(--text-scale));
+	--text-5xl--line-height: 1;
+
+	/* Spacing scale */
+	--spacing-space-2xs: var(--space-2xs);
+	--spacing-space-xs: var(--space-xs);
+	--spacing-space-sm: var(--space-sm);
+	--spacing-space-md: var(--space-md);
+	--spacing-space-lg: var(--space-lg);
+	--spacing-space-xl: var(--space-xl);
+	--spacing-space-2xl: var(--space-2xl);
+}
+
+:root {
+	/* Fonts */
+	--font-heading: var(--font-sans);
+	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--font-serif: Merriweather, ui-serif, serif;
+	--font-mono: JetBrains Mono, ui-monospace, monospace;
+
+	/* Multipliers */
+	--text-scale: 1;
+	--space-scale: 1;
+	--density-scale: 1;
+
+	/* Spacing scale */
+	--space-2xs: calc(0.125rem * var(--space-scale));
+	--space-xs: calc(0.25rem * var(--space-scale));
+	--space-sm: calc(0.375rem * var(--space-scale));
+	--space-md: calc(0.5rem * var(--space-scale));
+	--space-lg: calc(0.75rem * var(--space-scale));
+	--space-xl: calc(1rem * var(--space-scale));
+	--space-2xl: calc(1.5rem * var(--space-scale));
+}
+
+.dark {
+	--font-heading: var(--font-sans);
+	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+	--font-serif: Merriweather, ui-serif, serif;
+	--font-mono: JetBrains Mono, ui-monospace, monospace;
+}
+
+[data-density="compact"] {
+	--space-scale: 0.875;
+	--density-scale: 0.875;
+}
+
+[data-density="comfortable"] {
+	--space-scale: 1.075;
+	--density-scale: 1.075;
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	html {
+		font-family: var(--font-sans);
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family: var(--font-mono);
+	}
+}
+`,ie=`/*
+ * Package primitives.
+ *
+ * Radius, action/control heights, control spacing, and media sizes are
+ * package-owned aliases. They can be scoped independently of the shadcn theme.
+ */
+@theme inline {
+	--radius-radius-sm: var(--rounded-radius-sm);
+	--radius-radius: var(--rounded-radius);
+	--radius-radius-lg: var(--rounded-radius-lg);
+
+	--spacing-action-xs: var(--height-action-xs);
+	--spacing-action-sm: var(--height-action-sm);
+	--spacing-action: var(--height-action);
+	--spacing-action-lg: var(--height-action-lg);
+	--spacing-control-gap-small: var(--control-gap-small);
+	--spacing-control-gap: var(--control-gap);
+	--spacing-control-px: var(--control-x);
+	--spacing-control-y-offset: var(--control-y-offset);
+	--spacing-control-icon-sm: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+	--spacing-control-icon: calc(var(--control-x) + var(--icon) + var(--space-md));
+	--spacing-control-addon-sm: calc(var(--control-x-sm) + 1.25rem);
+	--spacing-control-addon: calc(var(--control-x) + 1.5rem);
+	--spacing-control-count-sm: calc(var(--control-x-sm) + 2.25rem);
+	--spacing-control-count: calc(var(--control-x) + 2.5rem);
+	--spacing-control-actions-sm: calc(var(--control-x-sm) + 2rem);
+	--spacing-control-actions: calc(var(--control-x) + 2.25rem);
+	--spacing-control-clear: calc(1.375rem * var(--density-scale));
+	--spacing-control-clear-icon: var(--icon-sm);
+	--spacing-control-file: 1.75rem;
+	--spacing-textarea-sm: calc(4rem * var(--density-scale));
+	--spacing-textarea: calc(5rem * var(--density-scale));
+
+	--spacing-icon-sm: var(--icon-sm);
+	--spacing-icon: var(--icon);
+	--spacing-icon-lg: var(--icon-lg);
+	--spacing-avatar-sm: var(--avatar-sm);
+	--spacing-avatar: var(--avatar);
+	--spacing-avatar-lg: var(--avatar-lg);
+	--spacing-upload-avatar-small: var(--upload-avatar-small);
+	--spacing-upload-avatar: var(--upload-avatar);
+	--spacing-upload-avatar-large: var(--upload-avatar-large);
+}
+
+:root {
+	--rounded-radius-sm: calc(var(--radius) * 0.6);
+	--rounded-radius: var(--radius);
+	--rounded-radius-lg: calc(var(--radius) * 1.4);
+
+	--height-action-xs: calc(1.75rem * var(--density-scale));
+	--height-action-sm: calc(2rem * var(--density-scale));
+	--height-action: calc(2.25rem * var(--density-scale));
+	--height-action-lg: calc(2.5rem * var(--density-scale));
+	--height-control-sm: calc(2rem * var(--density-scale));
+	--height-control: calc(2.05rem * var(--density-scale));
+	--height-control-lg: calc(2.5rem * var(--density-scale));
+
+	/* Existing control aliases stay stable while new primitives roll out. */
+	--control-height-sm: var(--height-control-sm);
+	--control-height: var(--height-control);
+	--control-height-lg: var(--height-control-lg);
+	--control-x-sm: calc(0.625rem * var(--space-scale));
+	--control-x: calc(0.75rem * var(--space-scale));
+	--control-gap-small: var(--space-sm);
+	--control-gap: var(--space-md);
+	--control-y-offset: var(--space-xs);
+
+	/* Media */
+	--icon-sm: calc(0.75rem * var(--space-scale));
+	--icon: calc(1rem * var(--space-scale));
+	--icon-lg: calc(1.25rem * var(--space-scale));
+	--avatar-sm: calc(1.5rem * var(--space-scale));
+	--avatar: calc(2rem * var(--space-scale));
+	--avatar-lg: calc(2.5rem * var(--space-scale));
+	--upload-avatar-small: calc(4rem * var(--space-scale));
+	--upload-avatar: calc(5rem * var(--space-scale));
+	--upload-avatar-large: calc(6rem * var(--space-scale));
+}
+
+@utility h-control-sm {
+	height: var(--height-control-sm);
+}
+
+@utility h-control {
+	height: var(--height-control);
+}
+
+@utility h-control-lg {
+	height: var(--height-control-lg);
+}
+
+@utility h-action-xs {
+	height: var(--height-action-xs);
+}
+
+@utility h-action-sm {
+	height: var(--height-action-sm);
+}
+
+@utility h-action {
+	height: var(--height-action);
+}
+
+@utility h-action-lg {
+	height: var(--height-action-lg);
+}
+
+@utility min-h-control-sm {
+	min-height: var(--height-control-sm);
+}
+
+@utility min-h-control {
+	min-height: var(--height-control);
+}
+
+@utility min-h-control-lg {
+	min-height: var(--height-control-lg);
+}
+
+@utility w-control-small {
+	width: var(--height-control-sm);
+}
+
+@utility w-control-sm {
+	width: var(--height-control-sm);
+}
+
+@utility w-control {
+	width: var(--height-control);
+}
+
+@utility w-control-lg {
+	width: var(--height-control-lg);
+}
+
+@utility size-control-sm {
+	width: var(--height-control-sm);
+	height: var(--height-control-sm);
+}
+
+@utility size-control {
+	width: var(--height-control);
+	height: var(--height-control);
+}
+
+@utility size-control-lg {
+	width: var(--height-control-lg);
+	height: var(--height-control-lg);
+}
+
+@utility size-action-xs {
+	width: var(--height-action-xs);
+	height: var(--height-action-xs);
+}
+
+@utility size-action-sm {
+	width: var(--height-action-sm);
+	height: var(--height-action-sm);
+}
+
+@utility size-action {
+	width: var(--height-action);
+	height: var(--height-action);
+}
+
+@utility size-action-lg {
+	width: var(--height-action-lg);
+	height: var(--height-action-lg);
+}
+
+@utility px-control-sm {
+	padding-inline: var(--control-x-sm);
+}
+
+@utility px-control {
+	padding-inline: var(--control-x);
+}
+
+@utility ps-control-sm {
+	padding-inline-start: var(--control-x-sm);
+}
+
+@utility ps-control {
+	padding-inline-start: var(--control-x);
+}
+
+@utility pe-control-sm {
+	padding-inline-end: var(--control-x-sm);
+}
+
+@utility pe-control {
+	padding-inline-end: var(--control-x);
+}
+
+@utility ps-control-icon-sm {
+	padding-inline-start: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+}
+
+@utility ps-control-icon {
+	padding-inline-start: calc(var(--control-x) + var(--icon) + var(--space-md));
+}
+
+@utility pe-control-icon-sm {
+	padding-inline-end: calc(var(--control-x-sm) + var(--icon-sm) + var(--space-sm));
+}
+
+@utility pe-control-icon {
+	padding-inline-end: calc(var(--control-x) + var(--icon) + var(--space-md));
+}
+
+@utility ps-control-addon-sm {
+	padding-inline-start: calc(var(--control-x-sm) + 1.25rem);
+}
+
+@utility ps-control-addon {
+	padding-inline-start: calc(var(--control-x) + 1.5rem);
+}
+
+@utility pe-control-addon-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 1.25rem);
+}
+
+@utility pe-control-addon {
+	padding-inline-end: calc(var(--control-x) + 1.5rem);
+}
+
+@utility pe-control-count-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 2.25rem);
+}
+
+@utility pe-control-count {
+	padding-inline-end: calc(var(--control-x) + 2.5rem);
+}
+
+@utility pe-control-actions-sm {
+	padding-inline-end: calc(var(--control-x-sm) + 2rem);
+}
+
+@utility pe-control-actions {
+	padding-inline-end: calc(var(--control-x) + 2.25rem);
+}
+
+@utility size-control-clear {
+	width: calc(1.375rem * var(--density-scale));
+	height: calc(1.375rem * var(--density-scale));
+}
+
+@utility size-control-clear-icon {
+	width: var(--icon-sm);
+	height: var(--icon-sm);
+}
+
+@utility h-control-file {
+	height: 1.75rem;
+}
+
+@utility min-h-textarea-sm {
+	min-height: calc(4rem * var(--density-scale));
+}
+
+@utility min-h-textarea {
+	min-height: calc(5rem * var(--density-scale));
+}
+`,ae=`/*
+ * Layout tokens.
+ *
+ * Shell and application-frame dimensions belong here, not in the swappable
+ * shadcn theme.
+ */
+@theme inline {
+	--spacing-shell-header: var(--shell-header-height);
+	--spacing-shell-header-control: var(--shell-header-control-size);
+	--spacing-shell-sidebar: var(--shell-sidebar-width);
+}
+
+:root {
+	--shell-header-height: 4.5rem;
+	--shell-header-control-size: var(--height-action);
+	--shell-sidebar-width: 16rem;
+	--shell-sidebar-width-expanded: var(--shell-sidebar-width);
+	--shell-sidebar-width-icon: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-offcanvas-width: min(20rem, calc(100vw - 2rem));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-expanded);
+}
+
+@utility shell-sidebar-vars {
+	--shell-sidebar-width-expanded: var(--shell-sidebar-width);
+	--shell-sidebar-width-icon: calc(3.75rem * var(--density-scale));
+	--shell-sidebar-offcanvas-width: min(20rem, calc(100vw - 2rem));
+	--shell-sidebar-width-current: var(--shell-sidebar-width-expanded);
+}
+
+@utility shell-sidebar-icon-current {
+	--shell-sidebar-width-current: var(--shell-sidebar-width-icon);
+}
+
+@utility shell-sidebar-offcanvas-current {
+	--shell-sidebar-width-current: var(--shell-sidebar-offcanvas-width);
+}
+
+@utility shell-grid-left {
+	grid-template-columns: minmax(0, var(--shell-sidebar-width-current)) minmax(0, 1fr);
+}
+
+@utility shell-grid-right {
+	grid-template-columns: minmax(0, 1fr) minmax(0, var(--shell-sidebar-width-current));
+}
+`,j=`/*
+ * Component-level token knobs.
+ *
+ * Use this layer for package-owned row, surface, and component adjustments
+ * that are intentionally broader than one component but not part of shadcn.
+ */
+@theme inline {
+	--spacing-row-x: var(--row-x);
+	--spacing-row-y-sm: var(--row-y-sm);
+	--spacing-row-y: var(--row-y);
+	--spacing-row-y-lg: var(--row-y-lg);
+	--spacing-surface-sm: var(--surface-x-sm);
+	--spacing-surface: var(--surface-x);
+	--spacing-surface-lg: var(--surface-x-lg);
+}
+
+:root {
+	/* Rows */
+	--row-x: calc(0.8rem * var(--space-scale));
+	--row-y-sm: calc(0.375rem * var(--density-scale));
+	--row-y: calc(0.8rem * var(--density-scale));
+	--row-y-lg: calc(0.625rem * var(--density-scale));
+
+	/* Surfaces */
+	--surface-x-sm: calc(0.75rem * var(--space-scale));
+	--surface-x: calc(1rem * var(--space-scale));
+	--surface-x-lg: calc(var(--surface-x) + var(--space-xs));
+	--surface-y-sm: calc(0.75rem * var(--space-scale));
+	--surface-y: calc(1rem * var(--space-scale));
+	--surface-y-lg: calc(var(--surface-y) + var(--space-xs));
+
+	/* Narrow component knobs */
+	--popover-content-pad: 0.25rem;
+}
+
+@utility px-surface-sm {
+	padding-inline: var(--surface-x-sm);
+}
+
+@utility px-surface {
+	padding-inline: var(--surface-x);
+}
+
+@utility px-surface-lg {
+	padding-inline: var(--surface-x-lg);
+}
+
+@utility py-surface-sm {
+	padding-block: var(--surface-y-sm);
+}
+
+@utility py-surface {
+	padding-block: var(--surface-y);
+}
+
+@utility py-surface-lg {
+	padding-block: var(--surface-y-lg);
+}
+
+@utility p-surface-sm {
+	padding: var(--surface-y-sm) var(--surface-x-sm);
+}
+
+@utility p-surface {
+	padding: var(--surface-y) var(--surface-x);
+}
+
+@utility p-surface-lg {
+	padding: var(--surface-y-lg) var(--surface-x-lg);
+}
+`,M=e({RuntimeOverrideDemo:()=>R,ScalePreview:()=>L,VariableExplorer:()=>z,VariableReference:()=>B}),N={"Scale knobs":{icon:h,description:`Inherited multipliers that tighten or relax whole subtrees.`},Fonts:{icon:O,description:`Font stacks shared by typography and code surfaces.`},Typography:{icon:O,description:`Text sizes consumed by Text, Heading, Label, and text utilities.`},Spacing:{icon:u,description:`Neutral spacing scale for gaps, margins, and padding.`},Shape:{icon:u,description:`Package radius aliases that can be scoped separately from shadcn radius.`},Actions:{icon:d,description:`Clickable action heights for buttons, icon buttons, and command triggers.`},Controls:{icon:d,description:`Shared button, input, select, combobox, date picker, and trigger measurements.`},Rows:{icon:D,description:`List, command, menu, filter, activity, global-search, and table row rhythm.`},Surfaces:{icon:u,description:`Card, form section, empty state, and feature surface padding.`},Media:{icon:p,description:`Icon and avatar sizing shared across rows, badges, metadata, and controls.`},Shell:{icon:l,description:`Top-level app shell height and sidebar width.`},Other:{icon:f,description:`Supporting structural variables outside the public contract.`}},P=[`Scale knobs`,`Fonts`,`Typography`,`Spacing`,`Shape`,`Actions`,`Controls`,`Rows`,`Surfaces`,`Media`,`Shell`,`Other`],F={"--text-scale":`0.98`,"--space-scale":`0.9`,"--density-scale":`0.88`},I={"--space-scale":`1.08`,"--density-scale":`1.05`};function L(){return(0,A.jsxs)(`div`,{className:`grid gap-3 lg:grid-cols-3`,children:[(0,A.jsx)(H,{label:`Default`,note:`Root tokens without a density override.`}),(0,A.jsx)(H,{label:`Compact`,note:`Uses data-density='compact' on the wrapper.`,density:`compact`}),(0,A.jsx)(H,{label:`Comfortable`,note:`Uses data-density='comfortable' on the wrapper.`,density:`comfortable`})]})}function R(){return(0,A.jsxs)(`div`,{className:`grid gap-3 lg:grid-cols-2`,children:[(0,A.jsx)(v,{title:`Inherited defaults`,description:`Components omit size props and resolve through UIProvider defaults plus the CSS variables.`,headerEnd:(0,A.jsx)(i,{variant:`success`,children:`Ready`}),children:(0,A.jsx)(U,{})}),(0,A.jsx)(`div`,{style:F,children:(0,A.jsx)(v,{title:`Scoped override`,description:`A consuming app can override scale variables at :root or any wrapping element.`,headerEnd:(0,A.jsx)(i,{variant:`info`,children:`Scoped`}),children:(0,A.jsx)(U,{})})})]})}function z(){let e=(0,k.useMemo)(()=>K([{source:`tokens/foundation.css`,css:re},{source:`tokens/primitives.css`,css:ie},{source:`tokens/layout.css`,css:ae},{source:`tokens/components.css`,css:j}]),[]),t=(0,k.useMemo)(()=>e.filter(pe),[e]),[n,r]=(0,k.useState)(``),[o,c]=(0,k.useState)(`All`),l=(0,k.useMemo)(()=>ce(t),[t]),u=P.filter(e=>l[e]?.length),d=t.filter(e=>{let t=o===`All`||e.group===o,r=`${e.name} ${e.scope} ${e.purpose} ${e.value} ${e.utility}`.toLowerCase();return t&&r.includes(n.toLowerCase().trim())}),f=o!==`All`||n.trim().length>0;return(0,A.jsxs)(`div`,{className:`grid max-h-[44rem] gap-4 overflow-auto p-4 lg:max-h-none lg:grid-cols-[18rem_minmax(0,1fr)] lg:overflow-visible`,children:[(0,A.jsxs)(`aside`,{className:`rounded-md border border-border bg-background p-3`,children:[(0,A.jsxs)(`div`,{className:`mb-3`,children:[(0,A.jsx)(a,{weight:`semibold`,children:`Families`}),(0,A.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Public structural tokens only. Theme colors remain in themes/shadcn.default.css.`})]}),(0,A.jsxs)(`div`,{className:`space-y-1`,children:[(0,A.jsx)(V,{active:o===`All`,count:t.length,icon:h,label:`Public tokens`,onClick:()=>c(`All`)}),u.map(e=>{let t=N[e].icon;return(0,A.jsx)(V,{active:o===e,count:l[e].length,icon:t,label:e,onClick:()=>c(e),tone:`info`},e)})]})]}),(0,A.jsxs)(`div`,{className:`min-w-0 space-y-3`,children:[(0,A.jsxs)(`div`,{className:`flex flex-col gap-3 rounded-md border border-border bg-card px-3 py-3 md:flex-row md:items-center md:justify-between`,children:[(0,A.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center`,children:[(0,A.jsx)(T,{startIcon:m,value:n,onChange:e=>r(e.target.value),placeholder:`Search variables, utilities, or purpose`,className:`w-full sm:max-w-sm`}),o!==`All`&&(0,A.jsx)(i,{variant:`secondary`,className:`w-fit`,children:o})]}),(0,A.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2`,children:[(0,A.jsxs)(a,{size:`xs`,type:`secondary`,children:[d.length,` of `,t.length]}),!!f&&(0,A.jsx)(s,{type:`button`,size:`small`,variant:`secondary`,buttonStyle:`ghost`,onClick:()=>{r(``),c(`All`)},children:`Clear`})]})]}),(0,A.jsx)(`div`,{className:`overflow-hidden rounded-md border border-border bg-background`,children:(0,A.jsxs)(`div`,{className:`max-h-[42rem] overflow-auto`,children:[(0,A.jsxs)(`table`,{className:`w-full min-w-312 border-collapse text-sm`,children:[(0,A.jsx)(`thead`,{className:`sticky top-0 z-10 bg-muted/95 text-left backdrop-blur`,children:(0,A.jsxs)(`tr`,{className:`border-b border-border`,children:[(0,A.jsx)(W,{className:`w-48`,children:`Source`}),(0,A.jsx)(W,{className:`w-72`,children:`Variable`}),(0,A.jsx)(W,{className:`w-80`,children:`Default`}),(0,A.jsx)(W,{className:`w-68`,children:`Tailwind utility`}),(0,A.jsx)(W,{children:`What it controls`})]})}),(0,A.jsx)(`tbody`,{children:d.map(e=>(0,A.jsxs)(`tr`,{className:`border-b border-border/70 transition-colors hover:bg-muted/25 last:border-b-0`,children:[(0,A.jsx)(G,{children:(0,A.jsxs)(`div`,{className:`space-y-1`,children:[(0,A.jsx)(a,{size:`inherit`,type:`secondary`,children:e.source}),(0,A.jsx)(i,{variant:`secondary`,children:e.scope})]})}),(0,A.jsx)(G,{children:(0,A.jsx)(`code`,{className:`rounded-sm bg-muted/70 px-1.5 py-0.5 font-mono text-sm text-foreground`,children:e.name})}),(0,A.jsx)(G,{children:(0,A.jsx)(`code`,{className:`font-mono text-sm text-muted-foreground`,children:e.value})}),(0,A.jsx)(G,{children:(0,A.jsx)(a,{size:`inherit`,type:e.utility===`Runtime variable`?`secondary`:void 0,children:e.utility})}),(0,A.jsx)(G,{children:(0,A.jsx)(a,{size:`inherit`,type:`secondary`,children:e.purpose})})]},e.id))})]}),d.length===0&&(0,A.jsx)(`div`,{className:`px-4 py-8 text-center`,children:(0,A.jsx)(a,{type:`secondary`,children:`No variables match the current filters.`})})]})})]})]})}var B=z;function V({active:e,count:t,icon:n,label:r,onClick:i,tone:a=`muted`}){return(0,A.jsxs)(s,{type:`button`,variant:`secondary`,buttonStyle:`ghost`,"aria-pressed":e,onClick:i,className:_(`h-auto min-h-0 w-full justify-start rounded-md px-2 py-1.5 text-left shadow-none`,e?`bg-muted text-foreground`:`text-muted-foreground hover:bg-muted/70 hover:text-foreground`),children:[(0,A.jsx)(te,{icon:n,size:`small`,tone:a}),(0,A.jsx)(`span`,{className:`min-w-0 flex-1`,children:(0,A.jsx)(`span`,{className:`block truncate text-sm font-medium leading-5`,children:r})}),(0,A.jsx)(`span`,{className:`text-xs tabular-nums text-muted-foreground`,children:t})]})}function H({label:e,note:t,density:n}){return(0,A.jsxs)(`div`,{"data-density":n,className:`rounded-md border border-border bg-background px-surface-sm py-surface-sm`,children:[(0,A.jsxs)(`div`,{className:`mb-3 flex items-center justify-between gap-space-md`,children:[(0,A.jsxs)(`div`,{children:[(0,A.jsx)(a,{weight:`semibold`,children:e}),(0,A.jsx)(a,{size:`xs`,type:`secondary`,children:t})]}),(0,A.jsx)(i,{variant:n===`compact`?`warning`:n===`comfortable`?`info`:`secondary`,children:n??`root`})]}),(0,A.jsx)(U,{})]})}function U(){return(0,A.jsxs)(`div`,{className:`space-y-space-lg`,children:[(0,A.jsxs)(`div`,{className:`flex flex-wrap items-center gap-space-md`,children:[(0,A.jsx)(s,{icon:d,children:`Save`}),(0,A.jsx)(s,{variant:`secondary`,buttonStyle:`outline`,children:`Preview`}),(0,A.jsx)(i,{variant:`success`,dot:!0,children:`Live`})]}),(0,A.jsx)(T,{startIcon:m,placeholder:`Search customers`}),(0,A.jsx)(x,{children:(0,A.jsxs)(C,{children:[(0,A.jsx)(ne,{variant:`icon`,children:(0,A.jsx)(l,{})}),(0,A.jsxs)(S,{children:[(0,A.jsx)(w,{children:`Customer profile`}),(0,A.jsx)(y,{children:`Rows, media, metadata, and actions share the display and row scales.`})]}),(0,A.jsx)(b,{children:(0,A.jsx)(i,{variant:`info`,children:`Synced`})})]})}),(0,A.jsx)(`div`,{style:I,className:`rounded-md border border-dashed border-border px-3 py-2`,children:(0,A.jsx)(E,{layout:`horizontal`,items:[{label:`Scale`,value:`local`},{label:`Rows`,value:`loose`},{label:`Display`,value:`1.04x`}]})})]})}function W({children:e,className:t}){return(0,A.jsx)(`th`,{className:_(`px-surface py-row-y text-xs font-semibold uppercase tracking-wide text-muted-foreground`,t),children:e})}function G({children:e}){return(0,A.jsx)(`td`,{className:`whitespace-normal break-words px-surface py-row-y-lg align-top`,children:e})}function K(e){return e.flatMap(({source:e,css:t})=>oe(e,t))}function oe(e,t){let n=[],r=[],i=null,a=null;return t.split(`
+`).forEach((t,o)=>{let s=t.trim();if(a){a.push(J(s)),s.includes(`*/`)&&(i=Y(a.join(` `)),a=null);return}if(s.startsWith(`/*`)){s.includes(`*/`)?i=Y(J(s)):a=[J(s)];return}let c=q(s);c&&(r.push(c),i=null);let l=s.match(/^(--[a-zA-Z0-9-]+):\s*(.+);$/);if(l){let[,t,a]=l,s=se(r);n.push({id:`${e}-${o}-${s}-${t}`,source:e,name:t,value:a,purpose:i??me(t),scope:s,group:le(t,s),utility:ue(t,s)}),i=null}else s&&!s.startsWith(`*`)&&!s.endsWith(`{`)&&s!==`}`&&(i=null);s===`}`&&r.pop()}),n}function q(e){let t=e.match(/^@utility\s+([a-zA-Z0-9-]+)\s*\{/);if(t)return`@utility ${t[1]}`;if(e.startsWith(`@theme inline`))return`@theme inline`;if(e.startsWith(`:root`))return`:root`;let n=e.match(/^\[data-density=['"]([^'"]+)['"]\]\s*\{/);return n?`[data-density='${n[1]}']`:e.startsWith(`@layer `)?e.replace(/\s*\{$/,``):null}function se(e){return[...e].reverse().find(e=>!e.startsWith(`@layer`))??`global`}function J(e){return e.replace(/^\/\*/,``).replace(/\*\/$/,``).replace(/^\s*\*\s?/,``).trim()}function Y(e){return e.replace(/\s+/g,` `).trim()}function ce(e){return P.reduce((t,n)=>(t[n]=e.filter(e=>e.group===n),t),{})}function le(e,t){return e.includes(`scale`)?`Scale knobs`:e.startsWith(`--font-`)?`Fonts`:e.startsWith(`--text-`)?`Typography`:e.startsWith(`--space-`)?`Spacing`:e.startsWith(`--rounded-`)?`Shape`:e.startsWith(`--height-action`)?`Actions`:e.startsWith(`--height-control`)||e.startsWith(`--control-`)?`Controls`:e.startsWith(`--row-`)?`Rows`:e.startsWith(`--surface-`)?`Surfaces`:e.startsWith(`--icon-`)||e.startsWith(`--avatar-`)?`Media`:e.startsWith(`--shell-`)?`Shell`:t===`@theme inline`&&e.startsWith(`--spacing-space-`)?`Spacing`:t===`@theme inline`&&e.startsWith(`--radius-radius`)?`Shape`:t===`@theme inline`&&e.startsWith(`--spacing-action-`)?`Actions`:t===`@theme inline`&&e.startsWith(`--spacing-control-`)?`Controls`:t===`@theme inline`&&e.startsWith(`--spacing-row-`)?`Rows`:t===`@theme inline`&&e.startsWith(`--spacing-surface-`)?`Surfaces`:t===`@theme inline`&&(e.startsWith(`--spacing-icon-`)||e.startsWith(`--spacing-avatar-`))?`Media`:t===`@theme inline`&&e.startsWith(`--spacing-shell-`)?`Shell`:`Other`}function ue(e,t){return e.startsWith(`--font-`)?e.replace(`--font-`,`font-`):e.startsWith(`--text-`)&&!e.includes(`--line-height`)?e.replace(`--text-`,`text-`):e.startsWith(`--text-`)&&e.includes(`--line-height`)?`Paired line-height`:e.startsWith(`--spacing-`)?`spacing key: ${e.replace(`--spacing-`,``)}`:e.startsWith(`--radius-`)?e.replace(`--radius-`,`rounded-`):e.startsWith(`--color-`)?`color key: ${e.replace(`--color-`,``)}`:t.startsWith(`@utility`)?t:`Runtime variable`}var de=new Set(`--text-scale.--space-scale.--density-scale.--rounded-radius-sm.--rounded-radius.--rounded-radius-lg.--height-action-xs.--height-action-sm.--height-action.--height-action-lg.--height-control-sm.--height-control.--height-control-lg.--space-2xs.--space-xs.--space-sm.--space-md.--space-lg.--space-xl.--space-2xl.--control-height-sm.--control-height.--control-height-lg.--control-x-sm.--control-x.--control-gap-small.--control-gap.--control-y-offset.--row-x.--row-y-sm.--row-y.--row-y-lg.--surface-x-sm.--surface-x.--surface-y-sm.--surface-y.--icon-sm.--icon.--icon-lg.--avatar-sm.--avatar.--avatar-lg.--upload-avatar-small.--upload-avatar.--upload-avatar-large.--shell-header-height.--shell-header-control-size.--shell-sidebar-width.--shell-sidebar-width-expanded.--shell-sidebar-width-current.--popover-content-pad`.split(`.`)),fe=new Set(`--font-heading.--font-sans.--font-serif.--font-mono.--text-xxs.--text-xs.--text-pxs.--text-sm.--text-base.--text-lg.--text-xl.--text-2xl.--text-3xl.--text-4xl.--text-5xl.--spacing-space-2xs.--spacing-space-xs.--spacing-space-sm.--spacing-space-md.--spacing-space-lg.--spacing-space-xl.--spacing-space-2xl.--radius-radius-sm.--radius-radius.--radius-radius-lg.--spacing-action-xs.--spacing-action-sm.--spacing-action.--spacing-action-lg.--spacing-row-x.--spacing-row-y-sm.--spacing-row-y.--spacing-row-y-lg.--spacing-surface-sm.--spacing-surface.--spacing-shell-header.--spacing-shell-header-control.--spacing-shell-sidebar`.split(`.`)),X=new Set([`tokens/foundation.css`,`tokens/primitives.css`,`tokens/layout.css`,`tokens/components.css`]);function pe(e){return X.has(e.source)?e.scope===`:root`?de.has(e.name):e.scope===`@theme inline`?fe.has(e.name):!1:!1}function me(e){return e.startsWith(`--color-`)?`Tailwind color alias for ${e.replace(`--color-`,``).replace(/-/g,` `)}.`:e.startsWith(`--shadow-`)?`Shadow elevation token ${e.replace(`--shadow-`,``)}.`:e===`--radius`?`Central shadcn radius token that derived radius utilities alias.`:e.startsWith(`--radius-`)?`Derived radius token for rounded-${e.replace(`--radius-`,``)}.`:e.startsWith(`--sidebar-`)?`Sidebar theme token for ${e.replace(`--sidebar-`,``).replace(/-/g,` `)}.`:e.startsWith(`--chart-`)?`Chart palette token for multi-series charts, not semantic status color.`:e.startsWith(`--inverse-`)?`Inverse-surface token for dark or artwork-backed surfaces.`:e.endsWith(`-foreground`)?`Readable foreground token paired with ${e.replace(/^--/,``).replace(/-foreground$/,``).replace(/-/g,` `)}.`:he(e)?`Shadcn theme color token for ${e.replace(/^--/,``).replace(/-/g,` `)}.`:`Controls ${e.replace(/^--/,``).replace(/-/g,` `)}.`}function he(e){return`--background.--foreground.--card.--card-foreground.--popover.--popover-foreground.--primary.--primary-foreground.--secondary.--secondary-foreground.--muted.--muted-foreground.--accent.--accent-foreground.--destructive.--destructive-foreground.--success.--success-foreground.--info.--info-foreground.--warning.--warning-foreground.--error.--error-foreground.--main.--main-foreground.--border.--input.--ring`.split(`.`).includes(e)||e.startsWith(`--inverse-`)||e.startsWith(`--sidebar-`)||e.startsWith(`--chart-`)}var Z=`import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
+import { Database, Layers3, Rows3, Save, Search, Settings2, SlidersHorizontal, Sparkles, Type } from 'lucide-react';
+
+import foundationCss from '@/css/tokens/foundation.css?raw';
+import primitivesCss from '@/css/tokens/primitives.css?raw';
+import layoutCss from '@/css/tokens/layout.css?raw';
+import componentsCss from '@/css/tokens/components.css?raw';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { IconBadge } from '@/components/base/display/icon-badge';
+import { MetadataList } from '@/components/composed/data-display/metadata';
+import { Input } from '@/components/base/forms/fields';
+import {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemGroup,
+	ItemMedia,
+	ItemTitle,
+} from '@/components/base/item';
+import { Text } from '@/components/typography';
+import { cn } from '@/lib/utils';
+
+type TokenGroup =
+	| 'Scale knobs'
+	| 'Fonts'
+	| 'Typography'
+	| 'Spacing'
+	| 'Shape'
+	| 'Actions'
+	| 'Controls'
+	| 'Rows'
+	| 'Surfaces'
+	| 'Media'
+	| 'Shell'
+	| 'Other';
+
+type CssVariableRecord = {
+	id: string;
+	source: string;
+	name: string;
+	value: string;
+	purpose: string;
+	scope: string;
+	group: TokenGroup;
+	utility: string;
+};
+
+const GROUP_META: Record<TokenGroup, { icon: typeof Type; description: string }> = {
+	'Scale knobs': {
+		icon: SlidersHorizontal,
+		description: 'Inherited multipliers that tighten or relax whole subtrees.',
+	},
+	Fonts: {
+		icon: Type,
+		description: 'Font stacks shared by typography and code surfaces.',
+	},
+	Typography: {
+		icon: Type,
+		description: 'Text sizes consumed by Text, Heading, Label, and text utilities.',
+	},
+	Spacing: {
+		icon: Layers3,
+		description: 'Neutral spacing scale for gaps, margins, and padding.',
+	},
+	Shape: {
+		icon: Layers3,
+		description: 'Package radius aliases that can be scoped separately from shadcn radius.',
+	},
+	Actions: {
+		icon: Save,
+		description: 'Clickable action heights for buttons, icon buttons, and command triggers.',
+	},
+	Controls: {
+		icon: Save,
+		description: 'Shared button, input, select, combobox, date picker, and trigger measurements.',
+	},
+	Rows: {
+		icon: Rows3,
+		description: 'List, command, menu, filter, activity, global-search, and table row rhythm.',
+	},
+	Surfaces: {
+		icon: Layers3,
+		description: 'Card, form section, empty state, and feature surface padding.',
+	},
+	Media: {
+		icon: Sparkles,
+		description: 'Icon and avatar sizing shared across rows, badges, metadata, and controls.',
+	},
+	Shell: {
+		icon: Database,
+		description: 'Top-level app shell height and sidebar width.',
+	},
+	Other: {
+		icon: Settings2,
+		description: 'Supporting structural variables outside the public contract.',
+	},
+};
+
+const GROUP_ORDER: TokenGroup[] = [
+	'Scale knobs',
+	'Fonts',
+	'Typography',
+	'Spacing',
+	'Shape',
+	'Actions',
+	'Controls',
+	'Rows',
+	'Surfaces',
+	'Media',
+	'Shell',
+	'Other',
+];
+
+const customScopeStyle = {
+	'--text-scale': '0.98',
+	'--space-scale': '0.9',
+	'--density-scale': '0.88',
+} as CSSProperties;
+
+const relaxedScopeStyle = {
+	'--space-scale': '1.08',
+	'--density-scale': '1.05',
+} as CSSProperties;
+
+export function ScalePreview() {
+	return (
+		<div className="grid gap-3 lg:grid-cols-3">
+			<ScaleSurface label="Default" note="Root tokens without a density override." />
+			<ScaleSurface label="Compact" note="Uses data-density='compact' on the wrapper." density="compact" />
+			<ScaleSurface label="Comfortable" note="Uses data-density='comfortable' on the wrapper." density="comfortable" />
+		</div>
+	);
+}
+
+export function RuntimeOverrideDemo() {
+	return (
+		<div className="grid gap-3 lg:grid-cols-2">
+			<SmartCard
+				title="Inherited defaults"
+				description="Components omit size props and resolve through UIProvider defaults plus the CSS variables."
+				headerEnd={<Badge variant="success">Ready</Badge>}
+			>
+				<ComponentStack />
+			</SmartCard>
+			<div style={customScopeStyle}>
+				<SmartCard
+					title="Scoped override"
+					description="A consuming app can override scale variables at :root or any wrapping element."
+					headerEnd={<Badge variant="info">Scoped</Badge>}
+				>
+					<ComponentStack />
+				</SmartCard>
+			</div>
+		</div>
+	);
+}
+
+export function VariableExplorer() {
+	const allRecords = useMemo(
+		() => parseCssVariables([
+			{ source: 'tokens/foundation.css', css: foundationCss },
+			{ source: 'tokens/primitives.css', css: primitivesCss },
+			{ source: 'tokens/layout.css', css: layoutCss },
+			{ source: 'tokens/components.css', css: componentsCss },
+		]),
+		[],
+	);
+	const records = useMemo(
+		() => allRecords.filter(isPublicStructuralVariable),
+		[allRecords],
+	);
+	const [query, setQuery] = useState('');
+	const [group, setGroup] = useState<TokenGroup | 'All'>('All');
+	const groups = useMemo(() => groupRecords(records), [records]);
+	const availableGroups = GROUP_ORDER.filter((name) => groups[name]?.length);
+	const filteredRecords = records.filter((record) => {
+		const matchesGroup = group === 'All' || record.group === group;
+		const haystack = \`\${record.name} \${record.scope} \${record.purpose} \${record.value} \${record.utility}\`.toLowerCase();
+		return matchesGroup && haystack.includes(query.toLowerCase().trim());
+	});
+	const hasFilter = group !== 'All' || query.trim().length > 0;
+	const resetFilters = () => {
+		setQuery('');
+		setGroup('All');
+	};
+
+	return (
+		<div className="grid max-h-[44rem] gap-4 overflow-auto p-4 lg:max-h-none lg:grid-cols-[18rem_minmax(0,1fr)] lg:overflow-visible">
+			<aside className="rounded-md border border-border bg-background p-3">
+				<div className="mb-3">
+					<Text weight="semibold">Families</Text>
+					<Text size="xs" type="secondary" className="mt-1">
+						Public structural tokens only. Theme colors remain in themes/shadcn.default.css.
+					</Text>
+				</div>
+				<div className="space-y-1">
+					<VariableGroupButton
+						active={group === 'All'}
+						count={records.length}
+						icon={SlidersHorizontal}
+						label="Public tokens"
+						onClick={() => setGroup('All')}
+					/>
+					{availableGroups.map((name) => {
+						const Icon = GROUP_META[name].icon;
+						return (
+							<VariableGroupButton
+								key={name}
+								active={group === name}
+								count={groups[name].length}
+								icon={Icon}
+								label={name}
+								onClick={() => setGroup(name)}
+								tone="info"
+							/>
+						);
+					})}
+				</div>
+			</aside>
+
+			<div className="min-w-0 space-y-3">
+				<div className="flex flex-col gap-3 rounded-md border border-border bg-card px-3 py-3 md:flex-row md:items-center md:justify-between">
+					<div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
+						<Input
+							startIcon={Search}
+							value={query}
+							onChange={(event) => setQuery(event.target.value)}
+							placeholder="Search variables, utilities, or purpose"
+							className="w-full sm:max-w-sm"
+						/>
+						{group !== 'All' && (
+							<Badge variant="secondary" className="w-fit">
+								{group}
+							</Badge>
+						)}
+					</div>
+					<div className="flex shrink-0 items-center gap-2">
+						<Text size="xs" type="secondary">
+							{filteredRecords.length} of {records.length}
+						</Text>
+						{!!hasFilter && (
+							<Button
+								type="button"
+								size="small"
+								variant="secondary"
+								buttonStyle="ghost"
+								onClick={resetFilters}
+							>
+								Clear
+							</Button>
+						)}
+					</div>
+				</div>
+
+				<div className="overflow-hidden rounded-md border border-border bg-background">
+					<div className="max-h-[42rem] overflow-auto">
+						<table className="w-full min-w-312 border-collapse text-sm">
+							<thead className="sticky top-0 z-10 bg-muted/95 text-left backdrop-blur">
+							<tr className="border-b border-border">
+								<HeaderCell className="w-48">Source</HeaderCell>
+								<HeaderCell className="w-72">Variable</HeaderCell>
+								<HeaderCell className="w-80">Default</HeaderCell>
+								<HeaderCell className="w-68">Tailwind utility</HeaderCell>
+								<HeaderCell>What it controls</HeaderCell>
+							</tr>
+						</thead>
+							<tbody>
+								{filteredRecords.map((record) => (
+									<tr key={record.id} className="border-b border-border/70 transition-colors hover:bg-muted/25 last:border-b-0">
+										<BodyCell>
+											<div className="space-y-1">
+												<Text size="inherit" type="secondary">{record.source}</Text>
+												<Badge variant="secondary">{record.scope}</Badge>
+											</div>
+										</BodyCell>
+										<BodyCell>
+											<code className="rounded-sm bg-muted/70 px-1.5 py-0.5 font-mono text-sm text-foreground">{record.name}</code>
+										</BodyCell>
+										<BodyCell>
+											<code className="font-mono text-sm text-muted-foreground">{record.value}</code>
+										</BodyCell>
+										<BodyCell>
+											<Text size="inherit" type={record.utility === 'Runtime variable' ? 'secondary' : undefined}>
+												{record.utility}
+											</Text>
+										</BodyCell>
+										<BodyCell>
+											<Text size="inherit" type="secondary">{record.purpose}</Text>
+										</BodyCell>
+									</tr>
+								))}
+							</tbody>
+						</table>
+						{filteredRecords.length === 0 && (
+							<div className="px-4 py-8 text-center">
+								<Text type="secondary">No variables match the current filters.</Text>
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export const VariableReference = VariableExplorer;
+
+function VariableGroupButton({
+	active,
+	count,
+	icon: Icon,
+	label,
+	onClick,
+	tone = 'muted',
+}: {
+	active: boolean;
+	count: number;
+	icon: typeof Type;
+	label: string;
+	onClick: () => void;
+	tone?: 'info' | 'muted';
+}) {
+	return (
+		<Button
+			type="button"
+			variant="secondary"
+			buttonStyle="ghost"
+			aria-pressed={active}
+			onClick={onClick}
+			className={cn(
+				'h-auto min-h-0 w-full justify-start rounded-md px-2 py-1.5 text-left shadow-none',
+				active ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground',
+			)}
+		>
+			<IconBadge icon={Icon} size="small" tone={tone} />
+			<span className="min-w-0 flex-1">
+				<span className="block truncate text-sm font-medium leading-5">{label}</span>
+			</span>
+			<span className="text-xs tabular-nums text-muted-foreground">{count}</span>
+		</Button>
+	);
+}
+
+function ScaleSurface({
+	label,
+	note,
+	density,
+}: {
+	label: string;
+	note: string;
+	density?: 'compact' | 'comfortable';
+}) {
+	return (
+		<div
+			data-density={density}
+			className="rounded-md border border-border bg-background px-surface-sm py-surface-sm"
+		>
+			<div className="mb-3 flex items-center justify-between gap-space-md">
+				<div>
+					<Text weight="semibold">{label}</Text>
+					<Text size="xs" type="secondary">{note}</Text>
+				</div>
+				<Badge variant={density === 'compact' ? 'warning' : density === 'comfortable' ? 'info' : 'secondary'}>
+					{density ?? 'root'}
+				</Badge>
+			</div>
+			<ComponentStack />
+		</div>
+	);
+}
+
+function ComponentStack() {
+	return (
+		<div className="space-y-space-lg">
+			<div className="flex flex-wrap items-center gap-space-md">
+				<Button icon={Save}>Save</Button>
+				<Button variant="secondary" buttonStyle="outline">Preview</Button>
+				<Badge variant="success" dot>Live</Badge>
+			</div>
+			<Input startIcon={Search} placeholder="Search customers" />
+			<ItemGroup>
+				<Item>
+					<ItemMedia variant="icon">
+						<Database />
+					</ItemMedia>
+					<ItemContent>
+						<ItemTitle>Customer profile</ItemTitle>
+						<ItemDescription>Rows, media, metadata, and actions share the display and row scales.</ItemDescription>
+					</ItemContent>
+					<ItemActions>
+						<Badge variant="info">Synced</Badge>
+					</ItemActions>
+				</Item>
+			</ItemGroup>
+			<div style={relaxedScopeStyle} className="rounded-md border border-dashed border-border px-3 py-2">
+				<MetadataList
+					layout="horizontal"
+					items={[
+						{ label: 'Scale', value: 'local' },
+						{ label: 'Rows', value: 'loose' },
+						{ label: 'Display', value: '1.04x' },
+					]}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function HeaderCell({ children, className }: { children: string; className?: string }) {
+	return (
+		<th className={cn('px-surface py-row-y text-xs font-semibold uppercase tracking-wide text-muted-foreground', className)}>
+			{children}
+		</th>
+	);
+}
+
+function BodyCell({ children }: { children: ReactNode }) {
+	return <td className="whitespace-normal break-words px-surface py-row-y-lg align-top">{children}</td>;
+}
+
+function parseCssVariables(sources: { source: string; css: string }[]): CssVariableRecord[] {
+	return sources.flatMap(({ source, css }) => parseCssSource(source, css));
+}
+
+function parseCssSource(source: string, css: string): CssVariableRecord[] {
+	const records: CssVariableRecord[] = [];
+	const contextStack: string[] = [];
+	let activeComment: string | null = null;
+	let pendingComment: string[] | null = null;
+
+	css.split('\\n').forEach((line, lineIndex) => {
+		const trimmed = line.trim();
+
+		if (pendingComment) {
+			pendingComment.push(cleanCommentLine(trimmed));
+			if (trimmed.includes('*/')) {
+				activeComment = normalizeComment(pendingComment.join(' '));
+				pendingComment = null;
+			}
+			return;
+		}
+
+		if (trimmed.startsWith('/*')) {
+			if (trimmed.includes('*/')) {
+				activeComment = normalizeComment(cleanCommentLine(trimmed));
+			} else {
+				pendingComment = [cleanCommentLine(trimmed)];
+			}
+			return;
+		}
+
+		const openContext = getOpenContext(trimmed);
+		if (openContext) {
+			contextStack.push(openContext);
+			activeComment = null;
+		}
+
+		const variable = trimmed.match(/^(--[a-zA-Z0-9-]+):\\s*(.+);$/);
+		if (variable) {
+			const [, name, value] = variable;
+			const scope = resolveScope(contextStack);
+			records.push({
+				id: \`\${source}-\${lineIndex}-\${scope}-\${name}\`,
+				source,
+				name,
+				value,
+				purpose: activeComment ?? inferPurpose(name),
+				scope,
+				group: inferGroup(name, scope),
+				utility: inferUtility(name, scope),
+			});
+			activeComment = null;
+		} else if (trimmed && !trimmed.startsWith('*') && !trimmed.endsWith('{') && trimmed !== '}') {
+			activeComment = null;
+		}
+
+		if (trimmed === '}') {
+			contextStack.pop();
+		}
+	});
+
+	return records;
+}
+
+function getOpenContext(line: string): string | null {
+	const utility = line.match(/^@utility\\s+([a-zA-Z0-9-]+)\\s*\\{/);
+	if (utility) return \`@utility \${utility[1]}\`;
+	if (line.startsWith('@theme inline')) return '@theme inline';
+	if (line.startsWith(':root')) return ':root';
+	const density = line.match(/^\\[data-density=['"]([^'"]+)['"]\\]\\s*\\{/);
+	if (density) return \`[data-density='\${density[1]}']\`;
+	if (line.startsWith('@layer ')) return line.replace(/\\s*\\{$/, '');
+	return null;
+}
+
+function resolveScope(stack: string[]): string {
+	const meaningful = [...stack].reverse().find((item) => !item.startsWith('@layer'));
+	return meaningful ?? 'global';
+}
+
+function cleanCommentLine(line: string): string {
+	return line
+		.replace(/^\\/\\*/, '')
+		.replace(/\\*\\/$/, '')
+		.replace(/^\\s*\\*\\s?/, '')
+		.trim();
+}
+
+function normalizeComment(comment: string): string {
+	return comment.replace(/\\s+/g, ' ').trim();
+}
+
+function groupRecords(records: CssVariableRecord[]): Record<TokenGroup, CssVariableRecord[]> {
+	return GROUP_ORDER.reduce((acc, group) => {
+		acc[group] = records.filter((record) => record.group === group);
+		return acc;
+	}, {} as Record<TokenGroup, CssVariableRecord[]>);
+}
+
+function inferGroup(name: string, scope: string): TokenGroup {
+	if (name.includes('scale')) return 'Scale knobs';
+	if (name.startsWith('--font-')) return 'Fonts';
+	if (name.startsWith('--text-')) return 'Typography';
+	if (name.startsWith('--space-')) return 'Spacing';
+	if (name.startsWith('--rounded-')) return 'Shape';
+	if (name.startsWith('--height-action')) return 'Actions';
+	if (name.startsWith('--height-control')) return 'Controls';
+	if (name.startsWith('--control-')) return 'Controls';
+	if (name.startsWith('--row-')) return 'Rows';
+	if (name.startsWith('--surface-')) return 'Surfaces';
+	if (name.startsWith('--icon-') || name.startsWith('--avatar-')) return 'Media';
+	if (name.startsWith('--shell-')) return 'Shell';
+	if (scope === '@theme inline' && name.startsWith('--spacing-space-')) return 'Spacing';
+	if (scope === '@theme inline' && name.startsWith('--radius-radius')) return 'Shape';
+	if (scope === '@theme inline' && name.startsWith('--spacing-action-')) return 'Actions';
+	if (scope === '@theme inline' && name.startsWith('--spacing-control-')) return 'Controls';
+	if (scope === '@theme inline' && name.startsWith('--spacing-row-')) return 'Rows';
+	if (scope === '@theme inline' && name.startsWith('--spacing-surface-')) return 'Surfaces';
+	if (scope === '@theme inline' && (name.startsWith('--spacing-icon-') || name.startsWith('--spacing-avatar-'))) return 'Media';
+	if (scope === '@theme inline' && name.startsWith('--spacing-shell-')) return 'Shell';
+	return 'Other';
+}
+
+function inferUtility(name: string, scope: string): string {
+	if (name.startsWith('--font-')) return name.replace('--font-', 'font-');
+	if (name.startsWith('--text-') && !name.includes('--line-height')) return name.replace('--text-', 'text-');
+	if (name.startsWith('--text-') && name.includes('--line-height')) return 'Paired line-height';
+	if (name.startsWith('--spacing-')) return \`spacing key: \${name.replace('--spacing-', '')}\`;
+	if (name.startsWith('--radius-')) return name.replace('--radius-', 'rounded-');
+	if (name.startsWith('--color-')) return \`color key: \${name.replace('--color-', '')}\`;
+	if (scope.startsWith('@utility')) return scope;
+	return 'Runtime variable';
+}
+
+const PUBLIC_ROOT_VARIABLES = new Set([
+	'--text-scale',
+	'--space-scale',
+	'--density-scale',
+	'--rounded-radius-sm',
+	'--rounded-radius',
+	'--rounded-radius-lg',
+	'--height-action-xs',
+	'--height-action-sm',
+	'--height-action',
+	'--height-action-lg',
+	'--height-control-sm',
+	'--height-control',
+	'--height-control-lg',
+	'--space-2xs',
+	'--space-xs',
+	'--space-sm',
+	'--space-md',
+	'--space-lg',
+	'--space-xl',
+	'--space-2xl',
+	'--control-height-sm',
+	'--control-height',
+	'--control-height-lg',
+	'--control-x-sm',
+	'--control-x',
+	'--control-gap-small',
+	'--control-gap',
+	'--control-y-offset',
+	'--row-x',
+	'--row-y-sm',
+	'--row-y',
+	'--row-y-lg',
+	'--surface-x-sm',
+	'--surface-x',
+	'--surface-y-sm',
+	'--surface-y',
+	'--icon-sm',
+	'--icon',
+	'--icon-lg',
+	'--avatar-sm',
+	'--avatar',
+	'--avatar-lg',
+	'--upload-avatar-small',
+	'--upload-avatar',
+	'--upload-avatar-large',
+	'--shell-header-height',
+	'--shell-header-control-size',
+	'--shell-sidebar-width',
+	'--shell-sidebar-width-expanded',
+	'--shell-sidebar-width-current',
+	'--popover-content-pad',
+]);
+
+const PUBLIC_THEME_VARIABLES = new Set([
+	'--font-heading',
+	'--font-sans',
+	'--font-serif',
+	'--font-mono',
+	'--text-xxs',
+	'--text-xs',
+	'--text-pxs',
+	'--text-sm',
+	'--text-base',
+	'--text-lg',
+	'--text-xl',
+	'--text-2xl',
+	'--text-3xl',
+	'--text-4xl',
+	'--text-5xl',
+	'--spacing-space-2xs',
+	'--spacing-space-xs',
+	'--spacing-space-sm',
+	'--spacing-space-md',
+	'--spacing-space-lg',
+	'--spacing-space-xl',
+	'--spacing-space-2xl',
+	'--radius-radius-sm',
+	'--radius-radius',
+	'--radius-radius-lg',
+	'--spacing-action-xs',
+	'--spacing-action-sm',
+	'--spacing-action',
+	'--spacing-action-lg',
+	'--spacing-row-x',
+	'--spacing-row-y-sm',
+	'--spacing-row-y',
+	'--spacing-row-y-lg',
+	'--spacing-surface-sm',
+	'--spacing-surface',
+	'--spacing-shell-header',
+	'--spacing-shell-header-control',
+	'--spacing-shell-sidebar',
+]);
+
+const PUBLIC_TOKEN_SOURCES = new Set([
+	'tokens/foundation.css',
+	'tokens/primitives.css',
+	'tokens/layout.css',
+	'tokens/components.css',
+]);
+
+function isPublicStructuralVariable(record: CssVariableRecord): boolean {
+	if (!PUBLIC_TOKEN_SOURCES.has(record.source)) return false;
+	if (record.scope === ':root') return PUBLIC_ROOT_VARIABLES.has(record.name);
+	if (record.scope === '@theme inline') return PUBLIC_THEME_VARIABLES.has(record.name);
+	return false;
+}
+
+function inferPurpose(name: string): string {
+	if (name.startsWith('--color-')) return \`Tailwind color alias for \${name.replace('--color-', '').replace(/-/g, ' ')}.\`;
+	if (name.startsWith('--shadow-')) return \`Shadow elevation token \${name.replace('--shadow-', '')}.\`;
+	if (name === '--radius') return 'Central shadcn radius token that derived radius utilities alias.';
+	if (name.startsWith('--radius-')) return \`Derived radius token for rounded-\${name.replace('--radius-', '')}.\`;
+	if (name.startsWith('--sidebar-')) return \`Sidebar theme token for \${name.replace('--sidebar-', '').replace(/-/g, ' ')}.\`;
+	if (name.startsWith('--chart-')) return \`Chart palette token for multi-series charts, not semantic status color.\`;
+	if (name.startsWith('--inverse-')) return \`Inverse-surface token for dark or artwork-backed surfaces.\`;
+	if (name.endsWith('-foreground')) return \`Readable foreground token paired with \${name.replace(/^--/, '').replace(/-foreground$/, '').replace(/-/g, ' ')}.\`;
+	if (isThemePaletteVariable(name)) return \`Shadcn theme color token for \${name.replace(/^--/, '').replace(/-/g, ' ')}.\`;
+	return \`Controls \${name.replace(/^--/, '').replace(/-/g, ' ')}.\`;
+}
+
+function isThemePaletteVariable(name: string): boolean {
+	return [
+		'--background',
+		'--foreground',
+		'--card',
+		'--card-foreground',
+		'--popover',
+		'--popover-foreground',
+		'--primary',
+		'--primary-foreground',
+		'--secondary',
+		'--secondary-foreground',
+		'--muted',
+		'--muted-foreground',
+		'--accent',
+		'--accent-foreground',
+		'--destructive',
+		'--destructive-foreground',
+		'--success',
+		'--success-foreground',
+		'--info',
+		'--info-foreground',
+		'--warning',
+		'--warning-foreground',
+		'--error',
+		'--error-foreground',
+		'--main',
+		'--main-foreground',
+		'--border',
+		'--input',
+		'--ring',
+	].includes(name) || name.startsWith('--inverse-') || name.startsWith('--sidebar-') || name.startsWith('--chart-');
+}
+`;function Q(e){let t={code:`code`,li:`li`,p:`p`,ul:`ul`,...e.components};return M||$(`Examples`,!1),R||$(`Examples.RuntimeOverrideDemo`,!0),L||$(`Examples.ScalePreview`,!0),z||$(`Examples.VariableExplorer`,!0),(0,A.jsxs)(r,{title:`CSS Variables`,description:`Token reference for the compact structural contract that controls typography, spacing, density, controls, rows, surfaces, media, and shell dimensions.`,layer:`base`,status:`ready`,sourcePath:`src/css/themes/shadcn.default.css + src/css/tokens/*`,children:[(0,A.jsxs)(o,{title:`Overview`,id:`overview`,children:[(0,A.jsxs)(t.p,{children:[`The package uses shadcn theme variables in `,(0,A.jsx)(t.code,{children:`src/css/themes/shadcn.default.css`}),`
+for color, radius, shadow, charts, sidebar, and base surfaces. Library-specific
+scale lives in `,(0,A.jsx)(t.code,{children:`src/css/tokens/*`}),`: text scale, spacing scale, density, shared
+action/control height, row rhythm, surface padding, media sizing, shell sizing,
+and Tailwind utility aliases that route classes like `,(0,A.jsx)(t.code,{children:`h-control`}),`,
+`,(0,A.jsx)(t.code,{children:`h-action`}),`, `,(0,A.jsx)(t.code,{children:`gap-space-md`}),`, `,(0,A.jsx)(t.code,{children:`py-row-y`}),`, `,(0,A.jsx)(t.code,{children:`px-surface`}),`, and `,(0,A.jsx)(t.code,{children:`size-avatar`}),`
+through CSS variables.`]}),(0,A.jsxs)(t.p,{children:[`Normal examples omit redundant `,(0,A.jsx)(t.code,{children:`size`}),` props. Consumers should tune scale from
+`,(0,A.jsx)(t.code,{children:`:root`}),`, a theme stylesheet, a density wrapper such as
+`,(0,A.jsx)(t.code,{children:`[data-density='compact']`}),`, or `,(0,A.jsx)(t.code,{children:`<UIProvider>`}),` defaults. Component `,(0,A.jsx)(t.code,{children:`size`}),` props
+are intentionally narrow where they exist (`,(0,A.jsx)(t.code,{children:`default`}),` / `,(0,A.jsx)(t.code,{children:`small`}),` for controls,
+forms, tables, badges, items, and cards). Prefer the structural variables for
+product-wide changes.`]})]}),(0,A.jsxs)(o,{title:`Scale behavior`,id:`scale-behavior`,children:[(0,A.jsx)(c,{name:`ScalePreview`,source:Z,children:(0,A.jsx)(L,{})}),(0,A.jsx)(c,{name:`RuntimeOverrideDemo`,source:Z,children:(0,A.jsx)(R,{})})]}),(0,A.jsxs)(o,{title:`Reference`,id:`reference`,children:[(0,A.jsx)(t.p,{children:`The explorer parses the standalone token files and lists the public structural
+contract by default. Component-family compatibility aliases are intentionally
+absent; new code must use the compact structural contract.`}),(0,A.jsx)(c,{name:`VariableExplorer`,source:Z,layout:`flush`,children:(0,A.jsx)(z,{})})]}),(0,A.jsx)(o,{title:`Usage notes`,id:`usage-notes`,children:(0,A.jsxs)(t.ul,{children:[`
+`,(0,A.jsxs)(t.li,{children:[`Use root scale knobs first: `,(0,A.jsx)(t.code,{children:`--text-scale`}),`, `,(0,A.jsx)(t.code,{children:`--space-scale`}),`, and
+`,(0,A.jsx)(t.code,{children:`--density-scale`}),`.`]}),`
+`,(0,A.jsxs)(t.li,{children:[`Use structural variables when a product needs more precision, such as
+`,(0,A.jsx)(t.code,{children:`--height-action`}),`, `,(0,A.jsx)(t.code,{children:`--height-control`}),`, `,(0,A.jsx)(t.code,{children:`--rounded-radius`}),`, `,(0,A.jsx)(t.code,{children:`--control-x`}),`,
+`,(0,A.jsx)(t.code,{children:`--row-y`}),`, `,(0,A.jsx)(t.code,{children:`--surface-x`}),`, `,(0,A.jsx)(t.code,{children:`--icon`}),`, `,(0,A.jsx)(t.code,{children:`--avatar`}),`, or
+`,(0,A.jsx)(t.code,{children:`--shell-sidebar-width`}),`.`]}),`
+`,(0,A.jsxs)(t.li,{children:[`Use Tailwind aliases inside package components and app CSS instead of
+arbitrary `,(0,A.jsx)(t.code,{children:`var(...)`}),` utilities: `,(0,A.jsx)(t.code,{children:`h-control`}),`, `,(0,A.jsx)(t.code,{children:`text-sm`}),`,
+`,(0,A.jsx)(t.code,{children:`gap-space-md`}),`, `,(0,A.jsx)(t.code,{children:`py-row-y`}),`, `,(0,A.jsx)(t.code,{children:`px-surface`}),`, `,(0,A.jsx)(t.code,{children:`size-icon`}),`, `,(0,A.jsx)(t.code,{children:`bg-card`}),`.`]}),`
+`,(0,A.jsxs)(t.li,{children:[`Keep shadcn color, radius, and shadow variables in
+`,(0,A.jsx)(t.code,{children:`src/css/themes/shadcn.default.css`}),`. Sizing, density, states, layout, and
+component knobs belong in `,(0,A.jsx)(t.code,{children:`src/css/tokens/*`}),`.`]}),`
+`]})})]})}function ge(e={}){let{wrapper:t}=e.components||{};return t?(0,A.jsx)(t,{...e,children:(0,A.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ge as default};