@mkbabb/glass-ui 0.2.0

package/README.md

@@ -0,0 +1,172 @@
+# glass-ui
+
+Glassmorphic design system for Vue 3.5. Shared components, design tokens, and composables built on reka-ui and Tailwind CSS v4, with a golden-ratio typography scale.
+
+## 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
+
+## Install
+
+```bash
+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";
+```
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@mkbabb/glass-ui/styles";
+@variant dark (&:where(.dark, .dark *));
+
+/* override tokens locally for your project */
+:root {
+    --glass-opacity-subtle: 0.82;
+    --glass-blur-default: blur(12px);
+}
+```
+
+## Build
+
+```bash
+npm run build        # library → dist/glass-ui.js + glass-ui.css + index.d.ts
+npm run typecheck    # vue-tsc --noEmit
+```
+
+## Structure
+
+```
+src/
+├── index.ts                    # barrel: components + composables + utils
+├── 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
+├── styles/
+│   ├── index.css               # imports all below in order
+│   ├── tokens.css              # design tokens (duration, easing, z-index, radius, shadows, glass, paper)
+│   ├── 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
+│   ├── 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.
+└── utils/
+    └── cn.ts                   # clsx + tailwind-merge
+```
+
+## Glass Token System
+
+Four tiers with 1:1 alignment across opacity, blur, background, border, and shadow:
+
+| 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 |
+
+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.
+
+Convenience classes bundle a tier with a shape:
+- `.glass-card` = default tier + `var(--radius-card)`
+- `.glass-pill` = default tier + `var(--radius-pill)`
+
+## Design Tokens
+
+`tokens.css` defines the shared `:root` properties consumed by all style modules and components:
+
+| 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 |
+| 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 |
+
+## Typography
+
+Type scale based on √φ ≈ 1.272 (modulated golden ratio). Each step is φ^(n/2) of the base.
+
+| Token | Size | ~px | Class |
+|-------|------|-----|-------|
+| `--type-micro` | 0.6875rem | 11 | `.text-micro` |
+| `--type-caption` | 0.75rem | 12 | `.text-caption` |
+| `--type-small` | 0.875rem | 14 | `.text-small` |
+| `--type-body` | 1rem | 16 | `.text-body` |
+| `--type-prose` | 1.125rem | 18 | `.text-prose` |
+| `--type-subheading` | 1.272rem | 20 | `.text-subheading` |
+| `--type-heading` | 1.618rem | 26 | `.text-heading` |
+| `--type-title` | 2.058rem | 33 | `.text-title` |
+| `--type-display-1` | 2.618rem | 42 | `.text-display` |
+| `--type-display-2` | 3.33rem | 53 | `.text-display-2` |
+| `--type-display-3` | 4.236rem | 68 | `.text-display-3` |
+
+The `@theme` block in `theme.css` maps these to Tailwind's `--font-size-*` tokens, so `text-sm`, `text-lg`, etc. adopt the golden-ratio scale.
+
+## Conventions
+
+- TypeScript `strict:true`, `verbatimModuleSyntax:true`
+- `moduleResolution:bundler`, `target:ES2022`, `lib:ES2023`
+- `import type` for all type-only imports
+- Named exports only, no defaults
+- 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`)
+
+## Dependencies
+
+All runtime deps are peer:
+
+| Package | Role |
+|---------|------|
+| `vue` ^3.5 | Framework |
+| `reka-ui` ^2.0 | Headless UI primitives |
+| `@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 |

package/dist/glass-ui.css

@@ -0,0 +1 @@
+.dropdown-menu-content[data-v-2106840e],.dropdown-sub-content[data-v-27fd1248]{font-family:var(--dropdown-menu-font, inherit)}.notification-enter-active[data-v-06387036],.notification-leave-active[data-v-06387036]{transition:all .3s ease}.notification-enter-from[data-v-06387036],.notification-leave-to[data-v-06387036]{transform:translate(100%);opacity:0}.notification-move[data-v-06387036]{transition:transform .3s ease}.pane-header[data-v-aa943c4f]{animation:pane-header-shrink-aa943c4f linear both;animation-timeline:--pane-scroll;animation-range:0px 120px}.pane-header-title[data-v-aa943c4f]{animation:pane-title-shrink-aa943c4f linear both;animation-timeline:--pane-scroll;animation-range:0px 120px}.pane-header-desc-wrap[data-v-aa943c4f]{display:grid;grid-template-rows:1fr;overflow:hidden;margin-top:.125rem;animation:pane-desc-shrink-aa943c4f linear both;animation-timeline:--pane-scroll;animation-range:0px 80px}.pane-header-desc-wrap>p[data-v-aa943c4f]{min-height:0}@keyframes pane-header-shrink-aa943c4f{0%{padding-top:1rem;padding-bottom:.5rem}to{padding-top:.5rem;padding-bottom:.25rem}}@keyframes pane-title-shrink-aa943c4f{0%{font-size:var(--type-display-2, 3.33rem)}to{font-size:var(--type-subheading, 1.272rem)}}@keyframes pane-desc-shrink-aa943c4f{0%{grid-template-rows:1fr;opacity:1;margin-top:.125rem}to{grid-template-rows:0fr;opacity:0;margin-top:0}}.confirm-panel-enter-active[data-v-c3955245]{transition:opacity var(--duration-normal) var(--ease-out),transform var(--duration-normal) var(--ease-out)}.confirm-panel-leave-active[data-v-c3955245]{transition:opacity var(--duration-fast) var(--ease-in),transform var(--duration-fast) var(--ease-in)}.confirm-panel-enter-from[data-v-c3955245],.confirm-panel-leave-to[data-v-c3955245]{opacity:0;transform:scale(.95)}.dark-mode-toggle-button[data-v-eccc2243]{cursor:pointer;border:0;padding:0;border-radius:var(--radius-pill);position:relative;isolation:isolate;background:none;opacity:.8;transition:opacity var(--duration-normal) var(--ease-standard),background var(--duration-normal) var(--ease-standard);z-index:var(--z-popover)}.dark-mode-toggle-button svg[data-v-eccc2243]{fill:var(--foreground);width:100%;height:100%}.dark-mode-toggle-button[data-v-eccc2243]:hover,.dark-mode-toggle-button[data-v-eccc2243]:focus{outline:none;opacity:1;background:#80808026}.toggle-sun[data-v-eccc2243]{transform-origin:center center;transition:transform .75s var(--spring-bouncy)}.toggle-circle[data-v-eccc2243]{transform:translate(0);transition:transform .5s var(--ease-out)}:where(.dark) .dark-mode-toggle-button .toggle-sun[data-v-eccc2243]{transform:rotate(.5turn)}:where(.dark) .dark-mode-toggle-button .toggle-circle[data-v-eccc2243]{transform:translate(-15%)}.glass-dock[data-v-4a5d029d]{display:inline-flex;align-items:center;border-radius:var(--radius-dock);white-space:nowrap;overflow:hidden;padding:.375rem .5rem;background:var(--glass-bg-medium);backdrop-filter:var(--glass-blur-subtle);-webkit-backdrop-filter:var(--glass-blur-subtle);border:1.5px solid var(--glass-border-medium);box-shadow:var(--shadow-dock);transition:width var(--duration-normal) var(--spring-snappy),padding var(--duration-normal) var(--spring-snappy),box-shadow var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--spring-snappy),background var(--duration-normal) var(--ease-standard),border-color var(--duration-normal) var(--ease-standard)}.glass-dock.collapsed[data-v-4a5d029d]{cursor:pointer;padding:.375rem;justify-content:center;background:var(--glass-bg-subtle);border-color:var(--glass-border-elevated);box-shadow:var(--shadow-dock-collapsed)}.glass-dock.collapsed .dock-layer--summary[data-v-4a5d029d]{min-width:2.5rem;justify-content:center}.glass-dock.collapsed[data-v-4a5d029d]:hover{background:var(--glass-bg-subtle);border-color:var(--glass-border-elevated);box-shadow:var(--shadow-dock);transform:scale(1.03)}.glass-dock[data-v-4a5d029d]:where(.fixed){z-index:var(--z-dock)}.dock-inline[data-v-4a5d029d]{margin:0 auto}.dock-sticky[data-v-4a5d029d]{position:sticky;top:0;z-index:var(--z-dock);margin:0 auto}.dock-layers[data-v-4a5d029d]{display:grid;transition:opacity var(--duration-instant) var(--ease-standard)}.dock-layers.dock-transitioning[data-v-4a5d029d]{opacity:0;pointer-events:none}.dock-layer[data-v-4a5d029d]{display:flex;align-items:center;white-space:nowrap;grid-area:1 / 1;gap:.375rem;height:2.5rem}.dock-layer.layer-active[data-v-4a5d029d]{pointer-events:auto}.dock-layer[data-v-4a5d029d]:not(.layer-active){pointer-events:none;position:absolute;visibility:hidden}.glass-dock.expanded[data-v-4a5d029d]{overflow:visible}.glass-dock.expanded:not(.fit-content) .dock-layers[data-v-4a5d029d]{width:100%}.glass-dock.expanded:not(.fit-content) .dock-layer--full[data-v-4a5d029d]{width:100%}.glass-dock.no-transition[data-v-4a5d029d]{transition:none!important}.glass-dock.always-expanded[data-v-4a5d029d]{cursor:default;overflow:visible}.glass-dock.dock-wrap[data-v-4a5d029d]{white-space:normal;border-radius:var(--radius-2xl);max-width:calc(100vw - 1rem);padding:.375rem .625rem}.glass-dock.dock-wrap .dock-layer--full[data-v-4a5d029d]{flex-wrap:wrap;justify-content:center;height:auto;min-height:2rem;gap:.25rem .375rem}.glass-dock.dock-wrap .dock-layer--summary[data-v-4a5d029d]{height:auto;min-height:2rem}.glass-dock.dock-wrap[data-v-4a5d029d] .dock-separator{display:none}.glass-dock.dock-wrap.collapsed[data-v-4a5d029d]{border-radius:var(--radius-pill);white-space:nowrap;max-width:none}@media(min-width:640px){.glass-dock.dock-wrap[data-v-4a5d029d]{white-space:nowrap;border-radius:var(--radius-pill);max-width:none;padding:.375rem .75rem}.glass-dock.dock-wrap .dock-layer--full[data-v-4a5d029d]{flex-wrap:nowrap;height:2.5rem;gap:.25rem}.glass-dock.dock-wrap .dock-layer--summary[data-v-4a5d029d]{height:2.5rem}.glass-dock.dock-wrap[data-v-4a5d029d] .dock-separator{display:block}}.dock-popover[data-v-a1190369]{position:relative;display:flex;align-items:center;flex-shrink:0}.popover-trigger[data-v-a1190369]{z-index:2;position:relative}.popover-panel[data-v-a1190369]{position:absolute;display:flex;flex-direction:column;align-items:stretch;pointer-events:auto;overflow:hidden;gap:.125rem;padding:.25rem;z-index:var(--z-modal);background:var(--glass-bg-elevated);backdrop-filter:var(--glass-blur-elevated);-webkit-backdrop-filter:var(--glass-blur-elevated);border:1px solid var(--glass-border-elevated);border-radius:var(--radius-panel);box-shadow:var(--glass-shadow-elevated)}.pop-up-enter-active[data-v-a1190369],.pop-down-enter-active[data-v-a1190369]{transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-slow) var(--spring-snappy)}.pop-up-leave-active[data-v-a1190369],.pop-down-leave-active[data-v-a1190369]{transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}.pop-up-enter-from[data-v-a1190369]{opacity:0;transform:scale(.85) translateY(8px)}.pop-up-leave-to[data-v-a1190369]{opacity:0;transform:scale(.95) translateY(4px)}.pop-down-enter-from[data-v-a1190369]{opacity:0;transform:scale(.85) translateY(-8px)}.pop-down-leave-to[data-v-a1190369]{opacity:0;transform:scale(.95) translateY(-4px)}.fuzzy-search[data-v-100fd6e4]{position:relative}.fuzzy-search-input-wrap[data-v-100fd6e4]{display:flex;align-items:center;gap:.375rem;border:1.5px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--muted) 30%,transparent);padding:.35rem .625rem;transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.fuzzy-search-input-wrap[data-v-100fd6e4]:focus-within{border-color:color-mix(in srgb,var(--ring) 40%,transparent);background:var(--background);box-shadow:var(--focus-ring-shadow)}.fuzzy-search-icon[data-v-100fd6e4]{width:.8rem;height:.8rem;flex-shrink:0;color:color-mix(in srgb,var(--muted-foreground) 50%,transparent)}.fuzzy-search-input[data-v-100fd6e4]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:.78rem;color:var(--foreground);font-family:inherit}.fuzzy-search-input[data-v-100fd6e4]::placeholder{color:color-mix(in srgb,var(--muted-foreground) 45%,transparent)}.fuzzy-search-action-btn[data-v-100fd6e4]{display:flex;align-items:center;justify-content:center;padding:.15rem;border:none;background:none;color:color-mix(in srgb,var(--muted-foreground) 45%,transparent);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--duration-fast),background var(--duration-fast)}.fuzzy-search-action-btn[data-v-100fd6e4]:hover{color:var(--foreground);background:color-mix(in srgb,var(--muted) 50%,transparent)}.fuzzy-search-results[data-v-100fd6e4]{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:var(--z-popover);max-height:50vh;overflow-y:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--background) 97%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:.25rem}.fuzzy-search-result[data-v-100fd6e4]{display:flex;align-items:baseline;gap:.375rem;width:100%;padding:.35rem .5rem;border:none;background:none;cursor:pointer;text-align:left;border-radius:var(--radius-sm);transition:background var(--duration-instant) var(--ease-standard)}.fuzzy-search-result[data-v-100fd6e4]:hover,.fuzzy-search-result.is-selected[data-v-100fd6e4]{background:color-mix(in srgb,var(--muted) 50%,transparent)}.fuzzy-search-badge[data-v-100fd6e4]{flex-shrink:0;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .3rem;border-radius:var(--radius-sm);background:var(--muted);color:color-mix(in srgb,var(--muted-foreground) 70%,transparent);line-height:1}.fuzzy-search-label[data-v-100fd6e4]{flex:1;min-width:0;font-size:.875rem;color:color-mix(in srgb,var(--foreground) 85%,transparent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}.fuzzy-search-label[data-v-100fd6e4] mark{background:#ffdd3359;color:inherit;border-radius:var(--radius-sm);padding:0 1px}.fuzzy-search-backdrop[data-v-100fd6e4]{position:fixed;inset:0;z-index:calc(var(--z-popover) - 5)}.fuzzy-search--sidebar[data-v-100fd6e4]{margin-bottom:.5rem}.fuzzy-search--floating .fuzzy-search-input-wrap[data-v-100fd6e4]{border:none;border-radius:0;background:transparent;padding:0}.fuzzy-search--floating .fuzzy-search-input[data-v-100fd6e4]{font-size:1rem}.fuzzy-search--floating .fuzzy-search-results[data-v-100fd6e4]{border-radius:0;border-left:none;border-right:none;top:100%;max-height:60vh}.fuzzy-search-dropdown-enter-active[data-v-100fd6e4],.fuzzy-search-dropdown-leave-active[data-v-100fd6e4]{transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-out-expo)}.fuzzy-search-dropdown-enter-from[data-v-100fd6e4],.fuzzy-search-dropdown-leave-to[data-v-100fd6e4]{opacity:0;transform:translateY(-4px)}.fuzzy-search-modal-overlay[data-v-100fd6e4]{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding-top:min(12vh,6rem);background:color-mix(in srgb,var(--background) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.fuzzy-search-modal[data-v-100fd6e4]{width:min(36rem,calc(100vw - 2rem));max-height:70vh;display:flex;flex-direction:column;border-radius:var(--radius-xl);border:1.5px solid var(--border);background:var(--background);box-shadow:var(--shadow-xl);overflow:hidden}.fuzzy-search-modal-header[data-v-100fd6e4]{display:flex;align-items:center;gap:.5rem;padding:.75rem .875rem;border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent)}.fuzzy-search-modal-icon[data-v-100fd6e4]{width:1rem;height:1rem;flex-shrink:0;color:color-mix(in srgb,var(--muted-foreground) 50%,transparent)}.fuzzy-search-modal-input[data-v-100fd6e4]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:1rem;color:var(--foreground);font-family:inherit}.fuzzy-search-modal-input[data-v-100fd6e4]::placeholder{color:color-mix(in srgb,var(--muted-foreground) 40%,transparent)}.fuzzy-search-modal-results[data-v-100fd6e4]{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.375rem}.fuzzy-search-modal-result[data-v-100fd6e4]{padding:.5rem .625rem}.fuzzy-search-modal-result .fuzzy-search-badge[data-v-100fd6e4]{font-size:.65rem;padding:.125rem .375rem}.fuzzy-search-modal-result .fuzzy-search-label[data-v-100fd6e4]{font-size:1rem}.fuzzy-search-modal-empty[data-v-100fd6e4]{padding:2rem 1rem;text-align:center;color:color-mix(in srgb,var(--muted-foreground) 50%,transparent);font-size:1rem}.fuzzy-search-modal-footer[data-v-100fd6e4]{display:flex;align-items:center;gap:1rem;padding:.5rem .875rem;border-top:1px solid color-mix(in srgb,var(--border) 50%,transparent)}.fuzzy-search-modal-hint[data-v-100fd6e4]{font-size:.875rem;font-family:var(--font-mono, monospace);color:color-mix(in srgb,var(--muted-foreground) 45%,transparent);display:flex;align-items:center;gap:.25rem}.fuzzy-search-modal-hint kbd[data-v-100fd6e4]{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.125rem;padding:0 .25rem;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:color-mix(in srgb,var(--muted) 40%,transparent);font-size:.6rem;line-height:1}.fuzzy-search-modal-enter-active[data-v-100fd6e4]{transition:opacity .2s var(--ease-standard)}.fuzzy-search-modal-enter-active .fuzzy-search-modal[data-v-100fd6e4]{transition:opacity .2s var(--ease-standard),transform .25s var(--ease-out-expo)}.fuzzy-search-modal-leave-active[data-v-100fd6e4]{transition:opacity var(--duration-fast) var(--ease-standard)}.fuzzy-search-modal-leave-active .fuzzy-search-modal[data-v-100fd6e4]{transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-in)}.fuzzy-search-modal-enter-from[data-v-100fd6e4]{opacity:0}.fuzzy-search-modal-enter-from .fuzzy-search-modal[data-v-100fd6e4]{opacity:0;transform:scale(.96) translateY(-8px)}.fuzzy-search-modal-leave-to[data-v-100fd6e4]{opacity:0}.fuzzy-search-modal-leave-to .fuzzy-search-modal[data-v-100fd6e4]{opacity:0;transform:scale(.97) translateY(-4px)}.progressive-sidebar[data-v-76909199]{--sidebar-top-inset: 1rem;--sidebar-bottom-inset: 1.5rem}.progressive-sidebar--sticky[data-v-76909199]{display:none}@media(min-width:1024px){.progressive-sidebar--sticky[data-v-76909199]{display:block;position:sticky;top:var(--sidebar-top-inset);align-self:start;min-height:0;max-height:calc(100dvh - var(--sidebar-top-inset) - var(--sidebar-bottom-inset))}}.sidebar-nav[data-v-76909199]{overflow-y:auto;overscroll-behavior:contain;border-radius:var(--radius-xl);background:var(--card);max-height:calc(100dvh - var(--sidebar-top-inset) - var(--sidebar-bottom-inset));scrollbar-gutter:stable;scroll-padding-bottom:var(--sidebar-bottom-inset);touch-action:pan-y;padding:.625rem .625rem var(--sidebar-bottom-inset);border:2px solid color-mix(in srgb,var(--foreground) 15%,transparent)}.sidebar-header[data-v-76909199]{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .625rem}.sidebar-label[data-v-76909199]{font-size:var(--type-small);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:.08em;color:color-mix(in srgb,var(--muted-foreground) 60%,transparent)}.sidebar-top-btn[data-v-76909199]{flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;width:1.25rem;height:1.25rem;border-radius:var(--radius-sm);border:1px solid color-mix(in srgb,var(--border) 40%,transparent);background:none;color:color-mix(in srgb,var(--muted-foreground) 45%,transparent);transition:all var(--duration-fast) var(--ease-standard)}.sidebar-top-btn[data-v-76909199]:hover{color:var(--foreground);border-color:var(--border);background:color-mix(in srgb,var(--muted) 50%,transparent)}.sidebar-list[data-v-76909199]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1px}.sidebar-link[data-v-76909199]{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-weight:500;font-size:1rem;line-height:1.35;padding:.28rem .625rem;border-radius:var(--radius-md);color:var(--muted-foreground);transition:color var(--duration-normal) var(--ease-out-expo),background-color var(--duration-normal) var(--ease-out-expo),font-weight var(--duration-fast) var(--ease-standard)}.sidebar-link[data-v-76909199]:hover{color:var(--foreground);background:color-mix(in srgb,var(--muted) 50%,transparent)}.sidebar-link.is-active[data-v-76909199]{background:none;font-weight:600;color:var(--primary)}.sidebar-link.is-active-sub[data-v-76909199]{font-weight:600;background:color-mix(in srgb,var(--muted) 40%,transparent);color:var(--primary)}.sidebar-sublist-wrapper[data-v-76909199]{display:grid;opacity:0;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out-expo),opacity .3s var(--ease-out-expo)}.sidebar-sublist-wrapper.is-expanded[data-v-76909199]{opacity:1;grid-template-rows:1fr}.sidebar-sublist-wrapper>.sidebar-sublist[data-v-76909199]{overflow:hidden}.sidebar-sublist[data-v-76909199]{list-style:none;padding:0 0 0 .625rem;margin:.0625rem 0 .125rem}.sidebar-sublink[data-v-76909199]{font-size:.78rem;padding:.2rem .45rem}.sidebar-subsublist[data-v-76909199]{list-style:none;padding:0 0 0 .5rem;margin:.03125rem 0 .0625rem}.sidebar-subsublink[data-v-76909199]{font-size:.72rem;padding:.15rem .32rem}.progressive-sidebar--drawer .sidebar-nav[data-v-76909199]{max-height:100%;border:none;border-radius:0;background:transparent}.underline-tabs[data-v-899e87db]{position:relative;display:flex;gap:.25rem}.underline-indicator[data-v-899e87db]{position:absolute;bottom:0;left:0;height:2px;background:var(--foreground);border-radius:var(--radius-sm);transition:transform .25s cubic-bezier(.34,1.56,.64,1),width .25s cubic-bezier(.34,1.56,.64,1)}.underline-tab[data-v-899e87db]{position:relative;border:none;background:none;font-weight:500;cursor:pointer;white-space:nowrap;padding:.375rem .75rem;font:inherit;color:var(--muted-foreground);transition:color var(--duration-normal) var(--ease-standard);border-radius:.25rem}.underline-tab[data-v-899e87db]:hover{color:color-mix(in srgb,var(--foreground) 70%,transparent)}.underline-tab.is-active[data-v-899e87db]{color:var(--foreground)}.bouncy-toggle[data-v-3205a359]{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:.1875rem;border-radius:.4375rem;background:color-mix(in srgb,var(--muted) 50%,transparent)}@media(min-width:640px){.bouncy-toggle[data-v-3205a359]{padding:.25rem;border-radius:.5rem}}.bouncy-slider[data-v-3205a359]{position:absolute;background:var(--background);z-index:0;inset-block:.1875rem;border-radius:.3125rem;box-shadow:0 1px 3px #00000014,0 0 0 1px color-mix(in srgb,var(--border) 30%,transparent);transition:transform var(--duration-normal) var(--spring-snappy),width var(--duration-normal) var(--spring-snappy),opacity var(--duration-fast) ease}@media(min-width:640px){.bouncy-slider[data-v-3205a359]{inset-block:.25rem;border-radius:.375rem}}.bouncy-btn[data-v-3205a359]{position:relative;z-index:10;border:none;background:none;font-weight:500;cursor:pointer;white-space:nowrap;padding:.25rem .625rem;border-radius:.3125rem;font:inherit;font-size:.8125rem;color:var(--muted-foreground);transition:color var(--duration-fast) ease}@media(min-width:640px){.bouncy-btn[data-v-3205a359]{padding:.3125rem .75rem;font-size:.875rem}}.bouncy-btn.is-active[data-v-3205a359]{color:var(--foreground)}.bouncy-btn.is-disabled[data-v-3205a359]{opacity:.4;cursor:not-allowed;pointer-events:none;filter:blur(.5px)}.bouncy-toggle--pill[data-v-3205a359]{border-radius:var(--radius-pill);background:color-mix(in srgb,var(--foreground) 5%,transparent);padding:.125rem;gap:.125rem}.bouncy-slider--pill[data-v-3205a359]{border-radius:var(--radius-pill);background:var(--foreground);box-shadow:none;inset-block:.125rem}.bouncy-btn--pill[data-v-3205a359]{border-radius:var(--radius-pill);padding:.125rem .625rem;font-size:.75rem;font-weight:500}@media(min-width:640px){.bouncy-btn--pill[data-v-3205a359]{padding:.125rem .625rem;font-size:.75rem}}.bouncy-btn--pill.is-active[data-v-3205a359]{color:var(--background)}.timeline-row[data-v-c2e9e244]{flex:1 1 0;min-width:0;padding:0 .25rem;position:relative;display:flex;align-items:center}.timeline-caret[data-v-c2e9e244]{position:absolute;bottom:calc(100% + 6px);transform:translate(-50%);pointer-events:none;opacity:0;transition:opacity var(--duration-fast) var(--ease-standard);z-index:var(--z-popover);user-select:none;-webkit-user-select:none}.timeline-row:hover .timeline-caret[data-v-c2e9e244],.timeline-row:has(.glass-track:active) .timeline-caret[data-v-c2e9e244]{opacity:1}.caret-value[data-v-c2e9e244]{display:block;padding:.125rem .375rem;font-size:var(--type-small);font-weight:500;color:var(--popover-foreground);background:var(--popover);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);white-space:nowrap}.glass-track[data-v-c2e9e244]{position:relative;width:100%;height:24px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--foreground) 5%,transparent);backdrop-filter:var(--glass-blur-subtle);-webkit-backdrop-filter:var(--glass-blur-subtle);cursor:pointer;touch-action:none;overflow:hidden;transition:background var(--duration-fast) var(--ease-standard);outline:none}.glass-track[data-v-c2e9e244]:hover,.glass-track[data-v-c2e9e244]:focus-visible{background:color-mix(in srgb,var(--foreground) 8%,transparent)}.glass-track[data-v-c2e9e244]:focus-visible{box-shadow:var(--focus-ring-shadow)}.glass-fill[data-v-c2e9e244]{position:absolute;top:0;left:0;bottom:0;background:color-mix(in srgb,var(--foreground) 7%,transparent);border-radius:var(--radius-pill);pointer-events:none}.glass-thumb[data-v-c2e9e244]{position:absolute;top:50%;transform:translate(calc(-50% - 3px),-50%);width:6px;height:16px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--foreground) 25%,transparent);opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-standard),width var(--duration-fast) var(--ease-standard),height var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.glass-track:hover .glass-thumb[data-v-c2e9e244]{opacity:1;width:8px;height:18px;background:color-mix(in srgb,var(--foreground) 40%,transparent)}.tw-root[data-v-b71400e5]{display:inline}.tw-tail[data-v-b71400e5]{white-space:nowrap}.tw-char[data-v-b71400e5]{display:inline}.tw-char--interactive[data-v-b71400e5]{cursor:pointer;border-radius:var(--radius-sm);padding:0 1px;margin:0 -1px;transition:background-color var(--duration-fast) var(--ease-standard)}.tw-char--interactive[data-v-b71400e5]:hover{background-color:#80808026}.tw-cursor[data-v-b71400e5]{display:inline-block;font-weight:100}.tw-cursor--blink[data-v-b71400e5]{animation:tw-cursor-blink-b71400e5 1.06s step-end infinite}@keyframes tw-cursor-blink-b71400e5{0%,50%{opacity:1}51%,to{opacity:0}}.glass-panel[data-v-0f243be8]{position:relative}.glass-panel--svg[data-v-0f243be8]{background:color-mix(in srgb,var(--card) 15%,transparent)}.glass-panel--fallback[data-v-0f243be8]{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--border) 35%,transparent)}