@mkbabb/glass-ui 0.3.0 → 2.0.0

package/README.md

@@ -4,14 +4,15 @@ Glassmorphic design system for Vue 3.5. Shared components, design tokens, and co
 
 ## Features
 
-- 32 shadcn-vue components (Button, Card, Dialog, Select, Tabs, Popover, Slider, etc.)
-- Four-tier glassmorphism: `.glass-subtle`, `.glass-default`, `.glass-medium`, `.glass-elevated`
-- Convenience shorthands: `.glass-card`, `.glass-pill`, `.glass-btn`, `.floating-panel`
-- GlassDock: collapsible glass action bar with dual-layer grid and ref-counted state
-- Golden-ratio typography scale (√φ ≈ 1.272, 11 stops from micro to display-3)
-- Design tokens: duration, easing, z-index, radius (primitive + semantic), shadows, glass tiers, paper textures
-- Vue `<Transition>` class sets, shared `@keyframes`, SVG noise textures
-- Composables: dock state, hover popover, touch gate, keyboard shortcuts, clipboard, dark mode
+- 43 shadcn-vue / reka-ui base components plus 30 custom composites (Button—incl. `primary-audacious`—Card, Dialog, Select, Tabs, Popover, Slider, NumberField, Section, ScrollPane, CartoonCard, MetricBadge, MetricPill, etc.)
+- Five-tier glassmorphism: `.glass-wash`, `.glass-quiet`, `.glass-resting`, `.glass-floating`, `.glass-overlay` (the v0.8.0 ladder; replaces the prior subtle/default/medium/elevated naming)
+- Convenience shorthands: `.glass-card`, `.glass-pill`, `.glass-btn`, `.floating-panel`, `.glass-cartoon`, `@utility btn-audacious`
+- `GlassDock`: collapsible glass action bar with horizontal + vertical orientations, `containerName` prop, layered `DockLayerGroup`/`DockLayer` panes, density rail, ref-counted keep-open state
+- Golden-ratio typography scale (√φ ≈ 1.272, 11+ stops from micro to display-5)
+- Design tokens: duration, easing, z-index (incl. `--z-behind`), radius (primitive + semantic), shadows, glass tiers, paper textures, surface-tint 9-rung family with `quiet | floating | modal` aliases
+- Vue `<Transition>` class sets, shared `@keyframes` (`sparkle-sweep`, `dock-in`, `dialog-in`, etc.), SVG noise textures
+- Public composables across 8 sub-trees (L.W2 restructure): `motion/` (spring, RAF, animated-number, animated-number-map, stagger, stagger reveal, intersection pause, dark-mode sync, scroll progress), `glass/` (renderer + WebGL/WebGPU shader assets), `sortable/`, `sidebar/` (tree/follow/scroll/state), `dom/` (resize observer, touch gate, token color), `reactive/` (timer/interval), `dark/` (global dark—flat `/dark` subpath), `keyboard/` (shortcuts registry—flat `/keyboard` subpath)
+- Bundle-budget gate (`npm run profile:budget`) re-landed K W4 Lane B; CI workflow at `.github/workflows/lint.yml`
 
 ## Install
 
@@ -22,8 +23,32 @@ npm install @mkbabb/glass-ui
 ## Usage
 
 ```ts
-import { Button, Card, Dialog, GlassDock, DarkModeToggle } from "@mkbabb/glass-ui";
-import { useDockState, useKeyboardShortcuts, copyToClipboard } from "@mkbabb/glass-ui";
+// v1.0—vueuse-FREE root barrel
+import { Button, Card, Dialog } from "@mkbabb/glass-ui";
+
+// v1.0—vueuse-bearing flat subpaths
+import { useGlobalDark } from "@mkbabb/glass-ui/dark";
+import { useKeyboardShortcuts, registerShortcut } from "@mkbabb/glass-ui/keyboard";
+import { useCarousel } from "@mkbabb/glass-ui/carousel";
+import { Input, Textarea, Combobox } from "@mkbabb/glass-ui/forms";
+
+// Per-package subpaths
+import { GlassDock, DockLayerGroup, DockLayer } from "@mkbabb/glass-ui/dock";
+import { DarkModeToggle } from "@mkbabb/glass-ui/controls";
+import { Configurator, useConfiguratorState } from "@mkbabb/glass-ui/configurator";
+import { HoverPopover } from "@mkbabb/glass-ui/hover-popover";
+
+// v1.0—canonical public types + constants
+import type { AuroraConfig, ButtonVariants, CardTier } from "@mkbabb/glass-ui/api";
+import { DEFAULT_AURORA_CONFIG, MAX_NUCLEI } from "@mkbabb/glass-ui/api";
+```
+
+```vue
+<HoverPopover :hover-open-delay="120" content="Quicker reveal for chassis dock labels">
+    <DockIconButton :icon="Settings" />
+</HoverPopover>
+
+<Button variant="primary-audacious" size="lg">Run audit</Button>
 ```
 
 ```css
@@ -34,80 +59,152 @@ import { useDockState, useKeyboardShortcuts, copyToClipboard } from "@mkbabb/gla
 
 /* override tokens locally for your project */
 :root {
-    --glass-opacity-subtle: 0.82;
-    --glass-blur-default: blur(12px);
+    --glass-opacity-resting: 0.82;
+    --glass-blur-resting: blur(12px);
 }
 ```
 
 ## Build
 
 ```bash
-npm run build        # library → dist/glass-ui.js + glass-ui.css + index.d.ts
-npm run typecheck    # vue-tsc --noEmit
+npm run dev             # storybook demo (multi-page, dock + carousel navigation)
+npm run build           # library → dist/glass-ui.js + glass-ui.css + index.d.ts
+npm run typecheck       # vue-tsc --noEmit
+npm run profile:budget  # bundle-budget gate (--enforce in CI)
 ```
 
+## Storybook
+
+`npm run dev` launches a Vue 3 storybook under `demo/` covering every primitive, container, navigation element, data component, feedback pattern, motion demo, composable, and composition. Vertical `GlassDock` rail for category navigation; horizontal `Carousel` pager for stories within a category. Keyboard: `[`/`]` prev/next story, `{`/`}` prev/next category, `,` configurator, `?` keyboard help. A dismissible right-side `Sheet` lets you live-edit font/scale/hue/grain/radius/density/cartoon-shadow/dark tokens against `:root`. See `DESIGN.md#storybook-demo` for the full category index.
+
 ## Structure
 
 ```
 src/
-├── index.ts                    # barrel: components + composables + utils
+├── index.ts                    # core primitives, core composables, utilities (vueuse-FREE root barrel)
 ├── components/
-│   ├── ui/                     # 32 shadcn-vue components (reka-ui primitives)
-│   │   ├── button/             # Primitive + CVA (8 variants, 5 sizes)
-│   │   ├── card/               # Card, CardHeader, CardTitle, CardContent, etc.
-│   │   ├── dialog/             # Dialog, DialogContent, DialogHeader, etc.
-│   │   ├── select/             # Select, SelectTrigger, SelectContent, etc.
-│   │   ├── tabs/               # Tabs, TabsList, TabsTrigger, TabsContent
-│   │   ├── popover/            # Popover, PopoverTrigger, PopoverContent
-│   │   ├── dropdown-menu/      # DropdownMenu + 14 subcomponents
-│   │   ├── tooltip/            # Tooltip, TooltipTrigger, TooltipContent
-│   │   ├── slider/             # reka-ui Slider with glass track
-│   │   ├── input/              # Glass-styled input
-│   │   └── ...                 # + 22 more (toggle, switch, checkbox, badge, etc.)
-│   └── custom/
-│       ├── dock/               # GlassDock, DockPopover, DockLayerGroup
-│       ├── aurora/             # Aurora WebGL background
-│       └── controls/           # DarkModeToggle
-├── composables/
-│   ├── dock/                   # useDockState, useDockTransition, useLayerTransition, usePopupMutex, useDockActionBar
-│   ├── interaction/            # useHeightTransition, useHoverPopover, useHoverToggle, useTouchGate, useLeaveTimer
-│   ├── useClipboard.ts         # copyToClipboard (navigator.clipboard + textarea fallback)
-│   ├── useGlobalDark.ts        # createGlobalState(useDark) + Safari FOUC fix
-│   ├── useKeyboardShortcuts.ts # singleton registry, Mod key aliasing, grouped display
-│   ├── useWatercolorBlob.ts    # seeded PRNG blob animation (Mulberry32)
-│   └── prng.ts                 # mulberry32, hashString, seededRandom
+│   ├── ui/                     # 43 shadcn-vue components (reka-ui primitives) + _shared (44 dirs total)
+│   │   ├── _shared/            # ModalOverlay (V.W3), menuItemVariants CVA (V.W3)
+│   │   ├── button/             # Primitive + CVA (11 variants incl. primary-audacious; 5 sizes)
+│   │   ├── card/               # Card + CartoonCard + ScrollPane sibling primitives
+│   │   ├── section/            # Section sectioning landmark
+│   │   ├── slider/             # reka-ui Slider with glass track + keepDockOpen contract
+│   │   ├── skeleton/           # Compositor-friendly transform-only shimmer
+│   │   ├── notification/       # Consumes success/warning/info-foreground tokens
+│   │   ├── metric-pill/        # Stacked-pill primitive composing MetricBadge
+│   │   └── ...                 # accordion, alert, avatar, badge, carousel, checkbox, collapsible,
+│   │                           # combobox, command, context-menu, data-table, dialog, drawer,
+│   │                           # dropdown-menu, hover-card, input, label, multi-select,
+│   │                           # number-field, popover, progress, radio-group, select,
+│   │                           # separator, sheet, switch, table, tabs, tags-input, textarea,
+│   │                           # toast, toggle, toggle-group, tooltip
+│   └── custom/                 # 30 custom composites
+│       ├── aurora/             # Aurora WebGL background + useAurora composable
+│       ├── configurator/       # Configurator + Layer + Row + useConfiguratorState
+│       ├── dock/               # GlassDock, DockLayer, DockLayerGroup, DockIconButton,
+│       │                       # DockTabButton, DockSelectTrigger, DockDropdownTrigger
+│       ├── dock-group/         # DockGroup chassis-strip wrapper
+│       ├── hover-popover/      # HoverPopover (hoverOpenDelay prop—K W1 rename)
+│       ├── instrument-chassis/ # InstrumentChassis + RegionDivider
+│       ├── glyph-face/         # GlyphFace 3-layer wrapper
+│       ├── disco-glyph/        # DiscoGlyph 3-layer SVG glyph primitive
+│       ├── labeled-field/      # LabeledField parent + 4 wrappers
+│       ├── metric-badge/       # MetricBadge primitive
+│       ├── pulse/              # Dots / ring loading indicator
+│       ├── scrolling-text/     # Overflow-marquee primitive (lifted from speedtest—v0.9.1)
+│       ├── tabs/               # BouncyTabs, UnderlineTabs, BouncyToggle
+│       ├── timeline/           # GlassTimeline
+│       ├── typewriter/         # TypewriterText
+│       └── ...                 # confirm-dialog, controls, expandable-container, glass-carousel,
+│                               # glass-panel, icon-tooltip, infinite-scroll, paper-backdrop,
+│                               # search, sidebar, sortable-list, stacked-icons, status-dot,
+│                               # toggle-chip
+├── composables/                # public composables across 8 coherent sub-trees (L.W2 Lane A restructure)
+│   ├── dark/                   # useGlobalDark (flat `/dark` subpath; vueuse-bearing)
+│   ├── keyboard/               # useKeyboardShortcuts + registerShortcut + useRegisteredShortcuts
+│   │                           # + formatCombo + formatComboParts + isMac (flat `/keyboard` subpath)
+│   ├── reactive/               # useInterval, useTimer
+│   ├── dom/                    # useResizeObserver, useTouchGate, useTokenColor
+│   ├── motion/                 # useSpringOrchestrator, useStaggerReveal, useScrollProgress,
+│   │                           # useAnimatedNumber, useAnimatedNumberMap, useStagger,
+│   │                           # useDarkModeSync, useRAFLoop, useIntersectionPause
+│   ├── glass/                  # useGlassRenderer, createGlassFilter, destroyGlassFilter (WebGL/WebGPU)
+│   ├── sortable/               # useSortable
+│   └── sidebar/                # useSidebarState, useSidebarFollow, useScrollTracker, useTreeIndex
 ├── styles/
 │   ├── index.css               # imports all below in order
-│   ├── tokens.css              # design tokens (duration, easing, z-index, radius, shadows, glass, paper)
+│   ├── tokens.css              # design tokens (duration, easing, z-index, radius, shadows, glass, paper, surface-tint)
 │   ├── theme.css               # @theme block (Tailwind color/font/radius aliases)
 │   ├── typography.css          # golden-ratio type scale + semantic classes
-│   ├── glass.css               # .glass-{subtle,default,medium,elevated}, .glass-card, .glass-pill, .glass-btn
-│   ├── dock.css                # .dock-icon-btn, .dock-select-trigger, .dock-layer-grid, etc.
-│   ├── cards.css               # .cartoon-card, .elevated-card, .paper-texture
+│   ├── glass.css               # 5-rung glass ladder + .glass-card / .glass-pill / .glass-btn / .glass-cartoon
+│   ├── dock.css                # density rail + dock-layer-grid + separators (button styling lives in dock components)
+│   ├── dock-group.css          # DockGroup chassis-strip rules
+│   ├── disco-glyph.css         # DiscoGlyph layered fills + facet gradient
+│   ├── glyph-face.css          # GlyphFace cap + backplate cascade
+│   ├── hover-popover.css       # popover-animation grammar
+│   ├── instrument-chassis.css  # bezel + groove dividers + region rules
+│   ├── cards.css               # .cartoon-card, .elevated-card
+│   ├── paper.css               # paper-underpaint + paper-grain-overlay utilities
 │   ├── floating-panel.css      # .floating-panel, .floating-panel-item
 │   ├── transitions.css         # Vue <Transition> classes: fade, fade-slide, pop, dialog-scale, dropdown
-│   ├── animations.css          # @keyframes: dialog-in/out, floating-panel-in, collapsible, tooltip, shimmer
-│   └── utilities.css           # scrollbar-hidden, focus-ring, btn-press, rainbow-text, touch-gate, etc.
+│   ├── animations.css          # @keyframes: dialog-in/out, floating-panel-in, collapsible, tooltip, shimmer, sparkle-sweep
+│   └── utilities.css           # focus-ring, btn-press, btn-audacious, rainbow-text, touch-gate, etc.
 └── utils/
-    └── cn.ts                   # clsx + tailwind-merge
+    └── cn.ts                   # clsx + hand-rolled deduplicator (v0.9.2—replaces tailwind-merge)
 ```
 
-## Glass Token System
+## Subpath imports
 
-Four tiers with 1:1 alignment across opacity, blur, background, border, and shadow:
+Beyond the root barrel, the library ships **37 flat JS subpaths** (32 component packages + `/api` + `/forms` + `/dark` + `/keyboard` + `/carousel`) plus the `/styles` CSS bundle (38 entries total in `package.json` exports). v1.0 (L.W1) adds three vueuse-bearing surfaces as flat top-level subpaths (`/dark`, `/keyboard`, `/carousel`) and a pure-types-and-constants `/api` discovery layer.
+
+```ts
+// v1.0 vueuse-bearing subpaths (closed the SCC trap; root barrel no longer
+// re-exports these symbols)
+import { useGlobalDark } from "@mkbabb/glass-ui/dark";
+import { useKeyboardShortcuts, registerShortcut } from "@mkbabb/glass-ui/keyboard";
+import { useCarousel } from "@mkbabb/glass-ui/carousel";
+import { Input, Textarea, Combobox } from "@mkbabb/glass-ui/forms";
+
+// v1.0 discovery layer—pure types + constants
+import type {
+    AuroraConfig,
+    ButtonVariants,
+    CardTier,
+    ConfiguratorState,
+} from "@mkbabb/glass-ui/api";
+
+// Per-package subpaths—substrate isolation
+import { GlassDock, DockLayerGroup, DockLayer } from "@mkbabb/glass-ui/dock";
+import { DarkModeToggle } from "@mkbabb/glass-ui/controls";
+import { Aurora, useAurora } from "@mkbabb/glass-ui/aurora";
+import { Configurator, useConfiguratorState } from "@mkbabb/glass-ui/configurator";
+import { HoverPopover } from "@mkbabb/glass-ui/hover-popover";
+import { InstrumentChassis, RegionDivider } from "@mkbabb/glass-ui/instrument-chassis";
+import { Sidebar } from "@mkbabb/glass-ui/sidebar";
+import { GlassCarousel } from "@mkbabb/glass-ui/glass-carousel";
+import { ScrollingText } from "@mkbabb/glass-ui/scrolling-text";
+```
+
+See `package.json` `exports` for the full subpath map (37 flat JS subpaths plus `/styles`). Resolution is verified at every release by `scripts/release.sh`'s synthetic-consumer probe (L.W0 Lane III).
+
+v1.0 retired the nested v0.9.x subpaths `@mkbabb/glass-ui/composables/dark` + `@mkbabb/glass-ui/composables/keyboard` (flattened to `/dark` + `/keyboard`) and the demo-only `@mkbabb/glass-ui/pagination` + `@mkbabb/glass-ui/virtual` subpaths (zero production consumers; L.W3 wire-or-retire). See `MIGRATION.md` for the consumer-facing migration path.
+
+## Glass Token System
 
-| Tier | Opacity | Blur | Use |
-|------|---------|------|-----|
-| `subtle` | 0.30 | 4px | Dock backgrounds, input fills, hover overlays |
-| `default` | 0.50 | 8px | Cards, content containers, select triggers |
-| `medium` | 0.65 | 12px | Popovers, dropdowns, floating panels |
-| `elevated` | 0.80 | 16px | Dialogs, command palette, modal overlays |
+Five tiers with 1:1 alignment across opacity, blur, background, border, and shadow:
 
-Each tier defines `--glass-{opacity,blur,bg,border,shadow}-{tier}`. Consumers override the primitives (`--glass-opacity-subtle`, `--glass-blur-default`, etc.) in their own `:root` to tune intensity.
+| Tier | Class | Light opacity | Dark opacity | Blur | Use |
+|------|-------|---------------|--------------|------|-----|
+| Wash | `.glass-wash` | 30% | 38% | `blur(1px) saturate(1.05)` | Dock backgrounds, input fills, hover overlays |
+| Quiet | `.glass-quiet` | 50% | 58% | `blur(3px)` | Inline workspace chrome |
+| Resting | `.glass-resting` | 65% | 72% | `blur(12px) saturate(1.05)` | Cards, content containers |
+| Floating | `.glass-floating` | 80% | 88% | `blur(16px) saturate(1.4)` | Popovers, tooltips, dropdowns |
+| Overlay | `.glass-overlay` | 95% | 96% | `blur(24px) saturate(1.5)` | Dialogs, command palette, modals |
 
-Convenience classes bundle a tier with a shape:
-- `.glass-card` = default tier + `var(--radius-card)`
-- `.glass-pill` = default tier + `var(--radius-pill)`
+Each tier defines `--glass-{opacity,blur,bg,border,shadow}-{tier}`. Consumers override the primitives at `:root` to tune intensity. Convenience classes bundle a tier with a shape:
+- `.glass-card` = resting tier + `var(--radius-card)` + offset card shadow
+- `.glass-pill` = resting tier + pill radius + press feedback
+- `.glass-cartoon` = cartoon-tier shadow + 2px border + hover-lift (carried by `<CartoonCard>`)
 
 ## Design Tokens
 
@@ -115,16 +212,16 @@ Convenience classes bundle a tier with a shape:
 
 | Category | Tokens | Notes |
 |----------|--------|-------|
-| Duration | `--duration-fast` through `--duration-linger` | 6 stops, 0.1s–2.5s |
-| Easing | `--ease-spring`, `--ease-dock`, `--ease-standard`, etc. | 12 curves (core + apple + extended) |
-| Z-index | `--z-background` through `--z-debug` | 14-level scale, 0–99999 |
+| Duration | `--duration-instant` through `--duration-linger` | 8 stops, 0.1s–2.5s; `--duration-shimmer{,-fast,-slow}` for shimmer cadence |
+| Easing | `--spring-{smooth,snappy,bouncy,gentle}`, `--ease-standard`, `--ease-apple-spring` etc. | Spring linear() + cubic-bezier fallbacks |
+| Z-index | `--z-behind` (-10) through `--z-debug` (99999) | 14-level scale plus background tier |
 | Radius | `--radius` base + `sm`/`md`/`lg`/`xl`/`2xl`/`pill` | Primitive scale from 0.5rem base |
-| Radius (semantic) | `--radius-card`, `--radius-panel`, `--radius-dialog`, `--radius-input`, `--radius-button`, `--radius-badge`, `--radius-dock` | Aliases into the primitive scale |
-| Shadows | `--shadow-xs` through `--shadow-2xl` | Elevation scale, hsl-based |
-| Shadows (cartoon) | `--shadow-cartoon-sm`/`md`/`lg`, `--shadow-card` | Offset hard shadows |
-| Glass | `--glass-{opacity,blur,bg,border,shadow}-{subtle,default,medium,elevated}` | 4 tiers, all aligned |
-| Paper | `--paper-clean-texture`, `--paper-aged-texture` | SVG feTurbulence noise |
-| Colors | Full shadcn HSL-channel palette | Override locally per project |
+| Radius (semantic) | `--radius-{card,panel,dialog,input,button,badge,dock,tooltip}` | Aliases into the primitive scale |
+| Shadows | `--shadow-xs` through `--shadow-2xl` + cartoon + dock + glass-tier | Elevation scale, hsl-based |
+| Glass | `--glass-{opacity,blur,bg,border,shadow}-{wash,quiet,resting,floating,overlay}` | 5 tiers, all aligned |
+| Surface tint | `--surface-tint-{4,6,8,10,12,15,18,22,25}` + `{quiet,floating,modal}` aliases | 9-rung family with tier aliases |
+| Paper | `paper-underpaint` + `paper-grain-overlay` utilities | SVG feTurbulence noise |
+| Colors | Full shadcn HSL-channel palette + viz-basis + section-N + status (success/warning/info) tinted families | Override locally per project |
 
 ## Typography
 
@@ -155,7 +252,7 @@ The `@theme` block in `theme.css` maps these to Tailwind's `--font-size-*` token
 - shadcn-vue component pattern: reka-ui `Primitive` / `useForwardPropsEmits`, CVA for variants, `cn()` for class composition
 - All shadows normalized to `hsl(var(--shadow-color) / alpha)` format
 - Color palette as HSL channels in `:root` (e.g., `--primary: 222.2 47.4% 11.2%`), consumed as `hsl(var(--primary))` in `@theme`
-- Button four-state guarantee: standard, hover, active (`scale-[0.97]`), disabled (`opacity-50`)
+- Button four-state guarantee: standard, hover, active (`scale-[var(--scale-press-btn)]`), disabled (`opacity-disabled`)
 
 ## Dependencies
 
@@ -168,5 +265,8 @@ All runtime deps are peer:
 | `@vueuse/core` ^14.0 | Composable utilities (useDark, createGlobalState, useEventListener) |
 | `tailwindcss` ^4.0 | Utility CSS framework |
 | `class-variance-authority` ^0.7 | Component variant definitions |
-| `clsx` ^2.0 | Conditional class joining |
-| `tailwind-merge` ^3.0 | Tailwind class conflict resolution |
+| `clsx` ^2.0 | Conditional class joining (cn() ships its own deduplicator as of v0.9.2; replaces tailwind-merge) |
+| `embla-carousel-vue` ^8.0 | Carousel substrate |
+| `lucide-vue-next` ^0.525 | Icon set |
+| `vaul-vue` ^0.2 | Drawer primitives |
+| `@mkbabb/keyframes.js` ^2.0 | Spring/keyframe runtime |

package/dist/CardFooter-Yi0xtLLd.js

@@ -0,0 +1,129 @@
+import { t as e } from "./cn-DJXf4yaB.js";
+import { t } from "./_plugin-vue_export-helper-n-_DRHWS.js";
+import { createBlock as n, createElementBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { Primitive as u } from "reka-ui";
+var d = /* @__PURE__ */ i({
+	__name: "Card",
+	props: {
+		tier: { default: "resting" },
+		surface: { default: "glass" },
+		shadow: {
+			type: Boolean,
+			default: !0
+		},
+		grain: {
+			type: Boolean,
+			default: !0
+		},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		asChild: { type: Boolean },
+		as: { default: "div" }
+	},
+	setup(t) {
+		let r = t;
+		return (i, d) => (o(), n(c(u), {
+			"data-slot": "card",
+			"data-tier": t.tier,
+			"data-surface": t.surface,
+			"data-grain": t.grain,
+			as: t.as,
+			"as-child": t.asChild,
+			class: a(c(e)("rounded-card text-card-foreground scrollbar-hidden", `glass-${t.tier}`, t.surface === "cartoon" && "cartoon-surface", t.shadow && t.surface === "glass" && "shadow-[var(--shadow-card)]", !t.grain && "[&::after]:hidden", r.class))
+		}, {
+			default: l(() => [s(i.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"data-tier",
+			"data-surface",
+			"data-grain",
+			"as",
+			"as-child",
+			"class"
+		]));
+	}
+}), f = /* @__PURE__ */ t(/* @__PURE__ */ i({
+	__name: "CardHeader",
+	props: {
+		shrink: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t;
+		return (i, l) => (o(), r("div", {
+			"data-slot": "card-header",
+			class: a(c(e)("flex flex-col gap-y-1.5 p-6", t.shrink && "card-header--shrink", n.class))
+		}, [s(i.$slots, "default", {}, void 0, !0)], 2));
+	}
+}), [["__scopeId", "data-v-522d190a"]]), p = /* @__PURE__ */ i({
+	__name: "CardTitle",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, i) => (o(), r("h3", {
+			"data-slot": "card-title",
+			class: a(c(e)("text-heading leading-none tracking-tight", n.class))
+		}, [s(t.$slots, "default")], 2));
+	}
+}), m = /* @__PURE__ */ i({
+	__name: "CardDescription",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, i) => (o(), r("p", {
+			"data-slot": "card-description",
+			class: a(c(e)("text-sm text-[var(--muted-foreground-strong)]", n.class))
+		}, [s(t.$slots, "default")], 2));
+	}
+}), h = /* @__PURE__ */ i({
+	__name: "CardContent",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, i) => (o(), r("div", { class: a(c(e)("p-6", n.class)) }, [s(t.$slots, "default")], 2));
+	}
+}), g = /* @__PURE__ */ i({
+	__name: "CardFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, i) => (o(), r("div", { class: a(c(e)("flex items-center p-6 pt-0", n.class)) }, [s(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { f as a, p as i, h as n, d as o, m as r, g as t };

package/dist/CollapsibleContent-DHRuXE3P.js

@@ -0,0 +1,52 @@
+import { createBlock as e, defineComponent as t, guardReactiveProps as n, mergeProps as r, normalizeProps as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { CollapsibleContent as l, CollapsibleRoot as u, CollapsibleTrigger as d, useForwardPropsEmits as f } from "reka-ui";
+//#endregion
+//#region src/components/ui/collapsible/Collapsible.vue
+var p = /* @__PURE__ */ t({
+	__name: "Collapsible",
+	props: {
+		defaultOpen: { type: Boolean },
+		open: { type: Boolean },
+		disabled: { type: Boolean },
+		unmountOnHide: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: ["update:open"],
+	setup(t, { emit: r }) {
+		let l = f(t, r);
+		return (t, r) => (a(), e(s(u), i(n(s(l))), {
+			default: c(({ open: e }) => [o(t.$slots, "default", { open: e })]),
+			_: 3
+		}, 16));
+	}
+}), m = /* @__PURE__ */ t({
+	__name: "CollapsibleTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let r = t;
+		return (t, l) => (a(), e(s(d), i(n(r)), {
+			default: c(() => [o(t.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), h = /* @__PURE__ */ t({
+	__name: "CollapsibleContent",
+	props: {
+		forceMount: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(t) {
+		let n = t;
+		return (t, i) => (a(), e(s(l), r(n, { class: "overflow-hidden transition-[height,opacity] data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down" }), {
+			default: c(() => [o(t.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { m as n, p as r, h as t };