admin-ui-starter-kit 0.6.9 → 0.7.1

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

@@ -1,1205 +0,0 @@
-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-DuBNJP4P.js";import{r as s,t as c}from"./example-6bZGEb3-.js";import{t as l}from"./database-TbVXEw7v.js";import{t as u}from"./layers-Lyr6p-Nt.js";import{t as d}from"./save-fKrt-yFG.js";import{t as f}from"./settings-2-BWjMVlyS.js";import{t as p}from"./sparkles-CIB5irID.js";import{a as m,d as ee,i as h,l as g,n as _}from"./index-BjjNfnhP.js";import{t as te}from"./icon-badge-CePIZqWR.js";import{t as v}from"./smart-card-OExZHSsj.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-LinnMxvu.js";import{t as T}from"./input-C8OfUHCK.js";import{t as E}from"./metadata-list-DyjhZi6d.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-sm: calc(0.8125rem * var(--text-scale));
-	--text-sm--line-height: calc(1.125rem * 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);
-}
-
-:root {
-	/* Rows */
-	--row-x: calc(0.75rem * var(--space-scale));
-	--row-y-sm: calc(0.375rem * var(--density-scale));
-	--row-y: calc(0.5rem * 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-y-sm: calc(0.75rem * var(--space-scale));
-	--surface-y: calc(1rem * var(--space-scale));
-
-	/* 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 py-surface-sm {
-	padding-block: var(--surface-y-sm);
-}
-
-@utility py-surface {
-	padding-block: var(--surface-y);
-}
-
-@utility p-surface-sm {
-	padding: var(--surface-y-sm) var(--surface-x-sm);
-}
-
-@utility p-surface {
-	padding: var(--surface-y) var(--surface-x);
-}
-`,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-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-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};