# uipkge

> Open-source UI registry for Vue 3 / Nuxt and React / Next.js. shadcn(-vue) compatible. Components copy into your project -- you own the source. No npm packages, no semver, no lock-in.

## Install (Vue / Nuxt -- canonical target)

Bootstrap (Tailwind v4 OKLCH tokens, cn() helper, useTheme composable):

```
npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json
```

Add any component:

```
npx shadcn-vue@latest add https://uipkge.dev/r/vue/<name>.json
```

Or register `"@uipkge": "https://uipkge.dev/r/vue/{name}.json"` in components.json, then `npx shadcn-vue@latest add @uipkge/<name>`.

## Install (React / Next.js)

```
npx shadcn@latest add https://uipkge.dev/r/react/<name>.json
```

## Components

- [accordion](https://uipkge.dev/vue/components/accordion) -- Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on reka-ui with smooth animation and full keyboard support.
- [advance-select](https://uipkge.dev/vue/components/advance-select) -- Searchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `<select>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.
- [alert](https://uipkge.dev/vue/components/alert) -- Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.
- [alert-modal](https://uipkge.dev/vue/components/alert-modal) -- Props-driven shortcut for confirm and destructive prompts — pass `title`, `description`, `actionLabel`, and a `tone` and you get a fully styled modal with a leading icon ring, action button, and optional async loading state. Skip it and use Dialog when you need a free-form modal instead.
- [anchor](https://uipkge.dev/vue/components/anchor) -- In-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.
- [area-chart](https://uipkge.dev/vue/components/area-chart) -- Filled-area line chart wrapper around Apache ECharts. Multi-series, stacked, gradient, and stepped variants. Theme-aware via registry tokens (--chart-1..5, --muted-foreground, --border).
- [aspect-ratio](https://uipkge.dev/vue/components/aspect-ratio) -- Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.
- [avatar](https://uipkge.dev/vue/components/avatar) -- Round or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.
- [back-top](https://uipkge.dev/vue/components/back-top) -- Scroll-to-top floating button. Appears after the target container scrolls past a threshold and smooth-scrolls back on click. Supports custom target container, visibility threshold, scroll behavior, custom icon slot, four edge anchors, size variants, and edge offset.
- [badge](https://uipkge.dev/vue/components/badge) -- Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.
- [bar-chart](https://uipkge.dev/vue/components/bar-chart) -- Bar chart wrapper around Apache ECharts. Vertical, horizontal, grouped, stacked, and negative-value variants. Theme-aware via registry tokens.
- [block-ui](https://uipkge.dev/vue/components/block-ui) -- Overlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. v-model toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon/message slots. Composes the spinner primitive.
- [board](https://uipkge.dev/vue/components/board) -- Six small composable components for any board / kanban / sortable-list surface — opinionated about drop targeting and animation, agnostic about layout, data, and chrome. Drop `<Board>` around a grid of `<BoardLane>` columns; slot `<BoardLaneHeader>`, `<BoardLaneBody>`, `<BoardLaneEmpty>`, and `<BoardCard>` items inside each lane. State lives in the sibling `useBoard()` hook (insertion-index drop math, keyboard a11y, accept predicate). Animation comes from the `motion-list` motion preset by default — enter / leave / move all share one settle curve so a card travelling between two lanes reads as one continuous motion. Mirrors the Timeline / Card sub-component pattern (three-level context injection: board → lane → card). The current monolithic `@uipkge/kanban-board` block can be rebuilt on top of this primitive — Board is the layer underneath, kanban-board is one opinionated assembly.
- [bottom-navigation](https://uipkge.dev/vue/components/bottom-navigation) -- Mobile bottom tab bar with icon + label items. Supports v-model for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for vue-router integration.
- [boxplot-chart](https://uipkge.dev/vue/components/boxplot-chart) -- Box-and-whisker plot wrapper around Apache ECharts. Five-number summary (min, Q1, median, Q3, max) per category. Vertical or horizontal.
- [breadcrumb](https://uipkge.dev/vue/components/breadcrumb) -- Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.
- [button](https://uipkge.dev/vue/components/button) -- The primary clickable primitive — six variants (default, destructive, outline, secondary, ghost, link), seven sizes (default, sm, lg, xs, icon, icon-sm, icon-lg), and an as-child mode that lets you render a router-link or anchor with full button styling.
- [calendar](https://uipkge.dev/vue/components/calendar) -- Single-month calendar grid for date selection, built on reka-ui’s Calendar primitive. Pair it with a Popover or use it inline. Supports min/max bounds, disabled dates, and locale formatting.
- [calendar-heatmap](https://uipkge.dev/vue/components/calendar-heatmap) -- Year / quarter calendar heatmap wrapper around Apache ECharts. GitHub-style contribution grid with palette overrides. Theme-aware via registry tokens.
- [candlestick-chart](https://uipkge.dev/vue/components/candlestick-chart) -- OHLC candlestick wrapper around Apache ECharts. Bullish/bearish coloring from registry tokens, optional data-zoom slider, axis-cross pointer.
- [card](https://uipkge.dev/vue/components/card) -- Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
- [carousel](https://uipkge.dev/vue/components/carousel) -- Horizontal or vertical scroller with previous/next controls. Hand-rolled `useCarousel` composable backed by native CSS scroll-snap — no external carousel library, just the browser. Drop in images, cards, or any custom slide content.
- [cascade-select](https://uipkge.dev/vue/components/cascade-select) -- Hierarchical cascading select where each level selection determines the next level options. Displays the selected path as labels. Supports search, clearable, disabled, and loading states.
- [charts](https://uipkge.dev/vue/components/charts) -- Meta-bundle that installs every chart wrapper at once -- 23 charts spanning cartesian (area / bar / line / scatter / candlestick / theme-river), circular (pie / radar / gauge / segmented-gauge), hierarchy (treemap / funnel / smooth-funnel / sunburst / tree), flow (sankey / graph / parallel), distribution (boxplot), specialty (heatmap / calendar-heatmap / sparkline), and the raw escape hatch. Each is also installable on its own.
- [checkbox](https://uipkge.dev/vue/components/checkbox) -- Standalone or in-form binary toggle, built on reka-ui. Supports indeterminate state for tri-state lists, sizes, and proper keyboard / screen-reader behavior. Pair with Label for clickable text.
- [chip](https://uipkge.dev/vue/components/chip) -- Compact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.
- [circular-progress](https://uipkge.dev/vue/components/circular-progress) -- Radial/circular progress indicator. Supports value (0-100), size presets or custom pixel size, stroke thickness, custom arc and track colors, indeterminate spinning mode, a label slot for center content, and a show-value prop that renders the percentage in the center.
- [clipboard](https://uipkge.dev/vue/components/clipboard) -- Copy-to-clipboard button with success/error feedback. Swaps the icon to a check on success, shows a tooltip with configurable feedback text, supports a visible label, disabled state, a custom timeout for feedback reset, and copy/success/error events. Includes a legacy execCommand fallback for non-secure contexts. Composes the tooltip primitive.
- [code-block](https://uipkge.dev/vue/components/code-block) -- Read-only code preview with a header, optional filename, copy button, and `<pre>`-rendered content. Use for installation snippets, API examples, and snippets you want users to copy verbatim.
- [collapsible](https://uipkge.dev/vue/components/collapsible) -- Headless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.
- [color-picker](https://uipkge.dev/vue/components/color-picker) -- Hex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.
- [command](https://uipkge.dev/vue/components/command) -- Searchable command palette à la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and fuzzy filtering. Use as a global launcher (mounted in a Dialog) or inline as a typeahead select.
- [context-menu](https://uipkge.dev/vue/components/context-menu) -- Right-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy/paste menus to.
- [countdown](https://uipkge.dev/vue/components/countdown) -- Countdown timer that shows time remaining to a target date. Supports DD:HH:MM:SS, HH:MM:SS, MM:SS, and SS formats plus custom token formats, named slots for days/hours/minutes/seconds, a label, leading-zero padding, a custom separator, paused state, and on-finish/tick events.
- [data-list](https://uipkge.dev/vue/components/data-list) -- Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.
- [data-table](https://uipkge.dev/vue/components/data-table) -- Full-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header/toolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.
- [date-picker](https://uipkge.dev/vue/components/date-picker) -- Date input that opens a Calendar in a Popover. Handles parsing, formatting, min/max bounds, and disabled dates. Use the Range Calendar version for from/to selections.
- [dialog](https://uipkge.dev/vue/components/dialog) -- Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.
- [dock](https://uipkge.dev/vue/components/dock) -- macOS-style dock menu with magnification on hover. Items expand as the cursor approaches using a cosine bell curve. Supports an items array (icon + label + handler), magnification scale, base size, tooltips on hover, click handlers, and an active state indicator.
- [dropdown-menu](https://uipkge.dev/vue/components/dropdown-menu) -- Floating menu launched from a trigger button — for account switchers, row actions, editor menus, and any short list of commands. Supports labels, icons, separators, keyboard shortcuts, checkbox/radio items, and nested submenus. Built on reka-ui; ARIA + keyboard navigation handled.
- [empty-state](https://uipkge.dev/vue/components/empty-state) -- Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.
- [fab](https://uipkge.dev/vue/components/fab) -- Floating action button — a fixed or absolute positioned circular button for the primary screen action. Supports an icon (default), an extended label variant, mini/large sizes, four color variants, six anchor positions, and a disabled state.
- [file-upload](https://uipkge.dev/vue/components/file-upload) -- Drag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `<input type="file">` with proper a11y.
- [float-label](https://uipkge.dev/vue/components/float-label) -- Floating label wrapper for any input element. The label floats up when the input is focused or has a value. Wrap it around any input, select, or textarea. Supports required indicator and disabled state.
- [form](https://uipkge.dev/vue/components/form) -- Zod-first form block built on TanStack Vue Form. Wires field labels, descriptions, error messages, and validation together; bind a field once and the rest is automatic.
- [funnel-chart](https://uipkge.dev/vue/components/funnel-chart) -- Funnel chart wrapper around Apache ECharts. Conversion-stage visualization with inverted and percentage-label variants. Theme-aware via registry tokens.
- [gauge-chart](https://uipkge.dev/vue/components/gauge-chart) -- Gauge / speedometer wrapper around Apache ECharts. Threshold-banded stoplight (teal/amber/red), progress-ring, and multi-needle variants. Theme-aware via registry tokens.
- [gradient-text](https://uipkge.dev/vue/components/gradient-text) -- Applies a CSS gradient as text color via background-clip: text. Supports preset gradients (sunset, ocean, forest, fire, candy, aurora, rainbow, gold, neon, grape), custom from/to colors with a direction, a fully custom CSS gradient string, and an animated mode that shifts the gradient.
- [graph-chart](https://uipkge.dev/vue/components/graph-chart) -- Network / graph chart wrapper around Apache ECharts. Force-directed, circular, or manual layouts; directed or undirected edges; optional category coloring. Useful for service maps, social graphs, knowledge bases.
- [grid](https://uipkge.dev/vue/components/grid) -- Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.
- [heatmap](https://uipkge.dev/vue/components/heatmap) -- Grid heatmap wrapper around Apache ECharts with visualMap color ramp. Theme-aware via registry tokens.
- [highlight](https://uipkge.dev/vue/components/highlight) -- Highlights matching substrings in text for search results. Supports string or regex queries, case-sensitive and whole-word matching, custom highlight tag, and a max-highlight cap.
- [hover-card](https://uipkge.dev/vue/components/hover-card) -- Rich popover triggered by hover/focus instead of click. Use for inline previews — user cards on @mentions, link previews, KPI explanations. Built on reka-ui with a configurable open/close delay.
- [icon-box](https://uipkge.dev/vue/components/icon-box) -- Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.
- [icon-transition](https://uipkge.dev/vue/components/icon-transition) -- Animated icon swap for click acknowledgements — copy → check, bookmark → bookmark-filled, follow → follower. Pass two icon components and an async `action`; clicking runs the action then springs the active icon in. Auto-reverts after `resetAfter` ms (default 1500), or pass `0` to keep the active icon and call the exposed `reset()` method to flip it back. Renders as a `<button>` by default; use `as="span"` plus the `:active` prop when you want an externally controlled, non-interactive icon swap inside another control. Honors `prefers-reduced-motion`.
- [icons](https://uipkge.dev/vue/components/icons) -- Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and copy-paste imports.
- [image-compare](https://uipkge.dev/vue/components/image-compare) -- Before/after image comparison slider with a draggable divider. Two images overlaid via clip-path, pointer-driven (mouse + touch), horizontal or vertical orientation, custom handle slot, labels, and disabled state.
- [infinite-scroll](https://uipkge.dev/vue/components/infinite-scroll) -- Load-more-on-scroll sentinel. Emits a `load` event when the user scrolls near the bottom (or top, in reverse mode). Supports a window or element scroll target, distance threshold, loading/hasMore/disabled gating, and slots for custom loading and end-of-list states.
- [input](https://uipkge.dev/vue/components/input) -- Text input — single-line. Same sizing and ring treatment as the rest of the form primitives. Pair with Label, attach an icon via the `start` / `end` slots, or compose into a search input.
- [json-tree-view](https://uipkge.dev/vue/components/json-tree-view) -- Collapsible JSON tree viewer with color-coded value types, click-to-copy, live search/filter, hover path display, and expand/collapse-all controls. Renders objects, arrays, and primitives with configurable default depth and max depth.
- [kbd](https://uipkge.dev/vue/components/kbd) -- Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.
- [knob](https://uipkge.dev/vue/components/knob) -- Circular dial input. Drag to rotate, keyboard accessible, SVG-rendered. Useful for compact numeric controls (volume, brightness, gauges).
- [kpi-grid](https://uipkge.dev/vue/components/kpi-grid) -- Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.
- [label](https://uipkge.dev/vue/components/label) -- Accessible label primitive — wraps text and binds to its child input via `for`. Disabled-state styling, optional required-asterisk, and proper screen-reader behavior.
- [labeled-value](https://uipkge.dev/vue/components/labeled-value) -- Read-only label/value pair for surface details — "Email: jane@…" or "Status: Active". Compose them in a Data List, a Stat Card, or a Section Card detail row.
- [lazy-image](https://uipkge.dev/vue/components/lazy-image) -- Lazy-loaded image with aspect-ratio reservation, skeleton placeholder, fade-in transition, and error fallback. Composes loading="lazy" with IntersectionObserver for off-viewport hold and pairs with the skeleton primitive for the placeholder state.
- [line-chart](https://uipkge.dev/vue/components/line-chart) -- Line chart wrapper around Apache ECharts. Smooth/stepped/dashed lines, multi-series, point markers. Theme-aware via registry tokens.
- [link](https://uipkge.dev/vue/components/link) -- Styled anchor with router integration. Renders an <a> for href, a router-link for to, and handles external links with target/rel. Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon slots, size variants, and asChild composition.
- [list](https://uipkge.dev/vue/components/list) -- Plain content list with `<ul>` / `<li>` semantics and a few preset gap and divider modes. Use for menu items, navigation lists, or any vertical sequence of small rows.
- [loading-bar](https://uipkge.dev/vue/components/loading-bar) -- Top-of-viewport NProgress-style progress bar. Drive it imperatively via the useLoadingBar composable (start/finish/error/inc) or with v-model. Supports indeterminate mode, custom color and height, top/bottom anchoring, and an optional trailing spinner.
- [map](https://uipkge.dev/vue/components/map) -- A thin, theme-aware Mapbox GL JS wrapper (built on @studiometa/vue-mapbox-gl). Pass an access token and drop MapMarker / MapPopup / MapLayer into the slot to build any map — fleet boards, journey maps, store locators. The base style follows light/dark automatically, an opt-in `muted` prop desaturates the basemap so overlaid data is the only colour, and `@created` hands you the raw map instance for custom layers and fitBounds.
- [marquee](https://uipkge.dev/vue/components/marquee) -- Continuously auto-scrolling content. Scrolls horizontally or vertically in any direction, with configurable speed, gap, repeat count for a seamless loop, pause-on-hover, and a hard pause prop. Respects prefers-reduced-motion.
- [masked-input](https://uipkge.dev/vue/components/masked-input) -- Input with a fixed format mask — phone numbers, credit cards, dates, postal codes. Pass a mask string (e.g. `(###) ###-####`) and the input enforces it as the user types. Customizable placeholder character and replacement marker.
- [mentions](https://uipkge.dev/vue/components/mentions) -- Textarea with trigger-character autocomplete. Type a configured trigger (default @) to open a filtered popover; pick to insert. Static or async options.
- [menubar](https://uipkge.dev/vue/components/menubar) -- Top-level menu bar — File / Edit / View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left/right arrows).
- [navigation-menu](https://uipkge.dev/vue/components/navigation-menu) -- Top-of-page horizontal navigation with hover/click triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.
- [number-field](https://uipkge.dev/vue/components/number-field) -- Numeric input with stepper buttons, min/max bounds, step size, and decimal precision. Use for quantities, prices, and any field that should be a number rather than free text.
- [organization-chart](https://uipkge.dev/vue/components/organization-chart) -- Organization hierarchy visualization with a tree of nodes (name, title, avatar). Expand/collapse branches, top-down or left-right direction, connector lines, optional zoom/pan controls, node click events, and a customizable node slot.
- [overlay-scroll](https://uipkge.dev/vue/components/overlay-scroll) -- Slack-style overlay scrollbar. Hides the native scrollbar so the scrolled content uses the full container width (no gutter reservation), then draws a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll via Pointer Events covers mouse, touch, and pen. Vertical only. The component does not enforce a height — give it a bounded height via the parent (`flex-1 min-h-0` in a flex column, or a fixed `h-*` / `max-h-*`).
- [page](https://uipkge.dev/vue/components/page) -- Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes/*.vue` pages so every screen looks consistent.
- [pagination](https://uipkge.dev/vue/components/pagination) -- Page-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.
- [parallel-chart](https://uipkge.dev/vue/components/parallel-chart) -- Parallel coordinates wrapper around Apache ECharts. Plots high-dimensional rows as polylines across N axes — useful for spotting correlations and outlier clusters.
- [password-input](https://uipkge.dev/vue/components/password-input) -- Password input with show/hide toggle (Eye/EyeOff) and optional strength meter (weak/fair/good/strong with colored bar). Supports min length display, disabled, placeholder, and size variants.
- [payment-card](https://uipkge.dev/vue/components/payment-card) -- Animated 3D credit-card visual. Auto-detects brand (Visa, Mastercard, Amex, Discover) from the card number, flips between front and back, and supports opt-in mouse-parallax tilt and a shimmering gradient sweep. Pure presentational — pass typed values in via props.
- [pie-chart](https://uipkge.dev/vue/components/pie-chart) -- Pie chart wrapper around Apache ECharts. Full pie, donut, rose (Nightingale), and labeled variants. Theme-aware via registry tokens.
- [pin-input](https://uipkge.dev/vue/components/pin-input) -- One-time-code input — N separate boxes that auto-advance and accept paste. Use for SMS verification, 2FA, and short numeric codes. Length, masking, and per-slot status all configurable.
- [popover](https://uipkge.dev/vue/components/popover) -- Click-triggered floating panel anchored to a trigger element. Supports optional localStorage persistence and configurable dismissal (click-outside, escape, manual). Built on reka-ui with collision detection.
- [progress](https://uipkge.dev/vue/components/progress) -- Linear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.
- [progress-item](https://uipkge.dev/vue/components/progress-item) -- Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.
- [progress-linear](https://uipkge.dev/vue/components/progress-linear) -- Top-of-screen page-loading bar (à la NProgress / nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.
- [qr-code](https://uipkge.dev/vue/components/qr-code) -- Static QR code renderer — pass `value` and a size, get an SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. No dependencies on a heavy QR library.
- [radar-chart](https://uipkge.dev/vue/components/radar-chart) -- Radar (spider) chart wrapper around Apache ECharts. Multi-series with optional fill. Theme-aware via registry tokens.
- [radio-group](https://uipkge.dev/vue/components/radio-group) -- Single-selection group of radio inputs. Vertical or horizontal layout, optional descriptions per item, and full keyboard navigation. Pair with Form for validation messages.
- [range-calendar](https://uipkge.dev/vue/components/range-calendar) -- Calendar variant for from/to date selection — click two dates and the range fills in between. Same min/max and disabled-date support as the single-date Calendar.
- [range-slider](https://uipkge.dev/vue/components/range-slider) -- Two-thumb range slider for "between X and Y" inputs — price filters, age ranges, time windows. Built on reka-ui with proper keyboard handling and aria-valuetext.
- [rating](https://uipkge.dev/vue/components/rating) -- Star (or custom icon) rating control — pick a value from 1 to N. Read-only mode for displaying review averages, with half-step support.
- [raw-chart](https://uipkge.dev/vue/components/raw-chart) -- Escape-hatch wrapper that takes a full ECharts option object. Lets you build any ECharts type (sankey, sunburst, candlestick, graph, boxplot, parallel, themeRiver, custom) with full customization. Theme-aware exports available via useChartTheme.
- [resizable](https://uipkge.dev/vue/components/resizable) -- Drag-to-resize panel layout — horizontal or vertical splits with persistent sizes. Use for IDE-style sidebars, split views, and any layout the user should be able to reshape.
- [rich-text-editor](https://uipkge.dev/vue/components/rich-text-editor) -- WYSIWYG editor wrapped around TipTap — bold/italic/links/lists/headings/blockquote/code, plus a configurable toolbar. Drop into forms where Markdown is too low-level.
- [sankey-chart](https://uipkge.dev/vue/components/sankey-chart) -- Sankey flow diagram wrapper around Apache ECharts. Visualizes value flows between named nodes (channels, stages, sources). Gradient links + theme-aware tokens.
- [scatter-chart](https://uipkge.dev/vue/components/scatter-chart) -- Scatter / bubble chart wrapper around Apache ECharts. Optional point sizing and categorical coloring. Theme-aware via registry tokens.
- [scroll-area](https://uipkge.dev/vue/components/scroll-area) -- Custom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.
- [section-card](https://uipkge.dev/vue/components/section-card) -- Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.
- [segmented-gauge](https://uipkge.dev/vue/components/segmented-gauge) -- Semicircular SVG gauge split into colored segments by relative value. Pure SVG (no ECharts). Rounded line caps + an angular gap between segments produce the pill-shaped look; a center slot lets consumers drop a KPI value + label into the dish.
- [select](https://uipkge.dev/vue/components/select) -- Dropdown select primitive — single-select, with optional groups, descriptions per item, and a search input via the AdvanceSelect variant. Built on reka-ui.
- [separator](https://uipkge.dev/vue/components/separator) -- Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.
- [sheet](https://uipkge.dev/vue/components/sheet) -- Side-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.
- [sidebar](https://uipkge.dev/vue/components/sidebar) -- Full-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.
- [signature-pad](https://uipkge.dev/vue/components/signature-pad) -- Canvas-based digital signature capture with pointer events (mouse + touch). v-model emits a PNG data URL, with pen color/thickness, background, clear method, disabled/readonly states, and a live point count.
- [skeleton](https://uipkge.dev/vue/components/skeleton) -- Animated placeholder rectangles for loading states — drop one in shape of the content that’s about to render. Variants for text lines, avatars, rounded rectangles, and circles.
- [slider](https://uipkge.dev/vue/components/slider) -- Single-thumb slider — pick a value within a range. Optional tick marks, step size, and inline value display.
- [smooth-funnel](https://uipkge.dev/vue/components/smooth-funnel) -- Smoothly tapering SVG funnel with cubic-bezier transitions between stages. Pure SVG (no ECharts). Each stage is colored independently and shows its own percent pill; a minHeight floor keeps tail stages visible at tiny percents.
- [sonner](https://uipkge.dev/vue/components/sonner) -- Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `vue-sonner` library with the registry’s tokens applied.
- [sparkline](https://uipkge.dev/vue/components/sparkline) -- Inline micro-chart for KPI tiles. Line, area, bar, and win/loss variants. Theme-aware via registry tokens.
- [speed-dial](https://uipkge.dev/vue/components/speed-dial) -- Expanding floating action button that reveals a list of secondary action buttons. Supports click or hover triggers, four expansion directions (up/down/left/right), staggered entrance animation, a configurable main FAB icon, and close-on-action. Built on the fab and popover primitives.
- [spinner](https://uipkge.dev/vue/components/spinner) -- Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.
- [stepper](https://uipkge.dev/vue/components/stepper) -- Multi-step indicator — horizontal or vertical, with completed / current / upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.
- [sunburst-chart](https://uipkge.dev/vue/components/sunburst-chart) -- Sunburst wrapper around Apache ECharts. Concentric-ring hierarchical share visualization — pairs naturally with treemap for comparison.
- [switch](https://uipkge.dev/vue/components/switch) -- On/off toggle — visual analog of a hardware switch. Use for binary settings where the change takes effect immediately, not for form fields that submit later (use Checkbox there).
- [table](https://uipkge.dev/vue/components/table) -- Plain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.
- [tabs](https://uipkge.dev/vue/components/tabs) -- Horizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on reka-ui with full keyboard navigation.
- [tags-input](https://uipkge.dev/vue/components/tags-input) -- Multi-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.
- [terminal](https://uipkge.dev/vue/components/terminal) -- Terminal/command-line display with a macOS-style title bar, command history, prompt character, dark/light themes, auto-scroll, optional typing animation, and a line slot for custom formatting.
- [textarea](https://uipkge.dev/vue/components/textarea) -- Multi-line text input. Auto-resize variant, character counter, and the same ring/border treatment as the rest of the form primitives.
- [theme-river](https://uipkge.dev/vue/components/theme-river) -- Theme-river (streamgraph) wrapper around Apache ECharts. Stacked areas centred on a baseline along a time axis — good for topic-volume drift over time.
- [theme-switch](https://uipkge.dev/vue/components/theme-switch) -- Light / dark / system theme toggle — drop in the header. Seven visual variants: `cards`, `icons`, `icon-only`, `dropdown`, `pill`, `pill-4`, and `switch`. Persists choice to `localStorage` and respects `prefers-color-scheme` for `system`.
- [time-picker](https://uipkge.dev/vue/components/time-picker) -- Standalone time input — hours, minutes, optional seconds, and 12h/24h modes. Pairs with Date Picker for full datetime entry.
- [timeline](https://uipkge.dev/vue/components/timeline) -- Vertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.
- [toggle](https://uipkge.dev/vue/components/toggle) -- On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for "press to enable" buttons like bold / italic.
- [toggle-group](https://uipkge.dev/vue/components/toggle-group) -- Group of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid/list), text-format toolbars, and any "pick one of N" button bar.
- [tooltip](https://uipkge.dev/vue/components/tooltip) -- Small popover triggered by hover/focus, used for short labels — icon-button names, abbreviation expansions, keyboard shortcuts. Auto-positions and respects `prefers-reduced-motion`.
- [tour](https://uipkge.dev/vue/components/tour) -- Multi-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.
- [transfer](https://uipkge.dev/vue/components/transfer) -- Dual-list move-between control. Two columns plus a center pair of move buttons. Optional search, pagination, and one-way mode.
- [tree-chart](https://uipkge.dev/vue/components/tree-chart) -- Hierarchical tree wrapper around Apache ECharts. Orthogonal (LR/TB/RL/BT) or radial layout, optional roam, focus-on-hover for descendants.
- [tree-select](https://uipkge.dev/vue/components/tree-select) -- Select from tree-structured data with expand/collapse nodes, single or multi-select with checkboxes, and search filtering. Dropdown shows a nested tree; parent selection cascades to leaf descendants.
- [tree-table](https://uipkge.dev/vue/components/tree-table) -- Hierarchical data table with expandable parent/child rows. Supports tree-structured data, column configuration, expand/collapse with per-level indent, row selection checkboxes, a loading overlay, and an empty state. Built on the existing table primitives.
- [tree-view](https://uipkge.dev/vue/components/tree-view) -- Indented tree of expandable nodes — file browsers, taxonomy editors, nested settings. Discord-style elbow connectors, lazy-load branches, and full keyboard navigation.
- [treemap-chart](https://uipkge.dev/vue/components/treemap-chart) -- Treemap wrapper around Apache ECharts. Hierarchical area-by-value visualization with nested and color-by-value variants. Theme-aware via registry tokens.
- [vertical-tabs](https://uipkge.dev/vue/components/vertical-tabs) -- Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.
- [video](https://uipkge.dev/vue/components/video) -- Video player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, a progress bar, play/pause, skip, and volume control.
- [virtual-list](https://uipkge.dev/vue/components/virtual-list) -- Generic windowed scroller. Renders only visible items plus a small overscan, with fixed or dynamic item sizes. Use for long lists where most rows are off-screen.
- [watermark](https://uipkge.dev/vue/components/watermark) -- Overlay watermark that repeats text or an image across the content area at a configurable angle. Supports rotate angle, gap between repeats, opacity, font size/color/weight, z-index, and pointer-event control. Wrap any content via the default slot.

## Blocks

- [ai-llm-chat](https://uipkge.dev/vue/blocks/ai-llm-chat) -- ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
- [analytics-overview](https://uipkge.dev/vue/blocks/analytics-overview) -- Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
- [auth-mfa](https://uipkge.dev/vue/blocks/auth-mfa) -- Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.
- [auth-password-reset](https://uipkge.dev/vue/blocks/auth-password-reset) -- Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.
- [auth-sign-in](https://uipkge.dev/vue/blocks/auth-sign-in) -- Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.
- [auth-sign-up](https://uipkge.dev/vue/blocks/auth-sign-up) -- Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.
- [bento-01](https://uipkge.dev/vue/blocks/bento-01) -- Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.
- [chat-thread](https://uipkge.dev/vue/blocks/chat-thread) -- Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
- [chat-two-pane](https://uipkge.dev/vue/blocks/chat-two-pane) -- Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
- [checkout-flow](https://uipkge.dev/vue/blocks/checkout-flow) -- Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
- [command-palette](https://uipkge.dev/vue/blocks/command-palette) -- Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and emits `select`. `show-trigger=false` hides the inline button so the consumer can fire it from elsewhere via the exposed `show()` / `toggle()` methods.
- [contact-01](https://uipkge.dev/vue/blocks/contact-01) -- Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits "submit" with the form payload.
- [contact-us](https://uipkge.dev/vue/blocks/contact-us) -- Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
- [conversion-funnel](https://uipkge.dev/vue/blocks/conversion-funnel) -- Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
- [cost-breakdown](https://uipkge.dev/vue/blocks/cost-breakdown) -- Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
- [cta-01](https://uipkge.dev/vue/blocks/cta-01) -- Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.
- [dashboard-layout](https://uipkge.dev/vue/blocks/dashboard-layout) -- Full dashboard shell — collapsible sidebar (sidebar-02) + sticky topbar (sidebar trigger, breadcrumb, command palette, theme switch, notifications, profile menu) + main content slot. Drop it in a Nuxt layout: `<DashboardLayout><slot /></DashboardLayout>`. Auto-pulls every transitive piece (sidebar-02, command-palette, notifications-popover, profile-menu, theme-switch).
- [event-calendar](https://uipkge.dev/vue/blocks/event-calendar) -- Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. v-model:events binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless composable.
- [event-list](https://uipkge.dev/vue/blocks/event-list) -- List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.
- [faq-01](https://uipkge.dev/vue/blocks/faq-01) -- Single-column FAQ section. Eyebrow + headline + email-CTA lede, then six accordion items (trial / migration / security / pricing / support / cancel). Uses Accordion in single-collapsible mode so only one answer expands at a time. Questions are spelled out inline so consumers can rewrite them directly.
- [features-01](https://uipkge.dev/vue/blocks/features-01) -- Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.
- [footer-01](https://uipkge.dev/vue/blocks/footer-01) -- Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
- [header-01](https://uipkge.dev/vue/blocks/header-01) -- Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
- [hero-01](https://uipkge.dev/vue/blocks/hero-01) -- Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
- [inbox](https://uipkge.dev/vue/blocks/inbox) -- Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
- [kanban-board](https://uipkge.dev/vue/blocks/kanban-board) -- Full kanban surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 15 Vue files (KanbanBoard + 6 kanban-* views + 7 small badges/lists + link-injection key). Bind with v-model:columns; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Pass linkComponent (NuxtLink / RouterLink) for SPA routing; defaults to a plain <a> so it works in any Vue setup. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).
- [login-01](https://uipkge.dev/vue/blocks/login-01) -- Centered login card. Email + password fields with a "Forgot password?" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.
- [login-02](https://uipkge.dev/vue/blocks/login-02) -- Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.
- [logos-01](https://uipkge.dev/vue/blocks/logos-01) -- Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.
- [logos-02](https://uipkge.dev/vue/blocks/logos-02) -- Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.
- [logos-03](https://uipkge.dev/vue/blocks/logos-03) -- Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.
- [metrics-grid](https://uipkge.dev/vue/blocks/metrics-grid) -- Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
- [notifications-popover](https://uipkge.dev/vue/blocks/notifications-popover) -- Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
- [payment-form](https://uipkge.dev/vue/blocks/payment-form) -- Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons emit a `wallet` event so the consumer wires the actual SDK; the card form emits `success` / `error` after the consumer-provided `onSubmit` settles.
- [pricing-01](https://uipkge.dev/vue/blocks/pricing-01) -- Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + "Most popular" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.
- [profile-menu](https://uipkge.dev/vue/blocks/profile-menu) -- Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
- [progress-breakdown](https://uipkge.dev/vue/blocks/progress-breakdown) -- Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.
- [quick-actions](https://uipkge.dev/vue/blocks/quick-actions) -- Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.
- [register-01](https://uipkge.dev/vue/blocks/register-01) -- Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.
- [saved-cards-list](https://uipkge.dev/vue/blocks/saved-cards-list) -- List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
- [sidebar-01](https://uipkge.dev/vue/blocks/sidebar-01) -- Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.vue to change routes and NavUser.vue to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
- [sidebar-02](https://uipkge.dev/vue/blocks/sidebar-02) -- Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.
- [sidebar-03](https://uipkge.dev/vue/blocks/sidebar-03) -- Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.
- [sidebar-04](https://uipkge.dev/vue/blocks/sidebar-04) -- Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
- [sidebar-05](https://uipkge.dev/vue/blocks/sidebar-05) -- Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible="icon": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: :style="{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }". Modeled on the GR8R HRMS admin shell.
- [sidebar-06](https://uipkge.dev/vue/blocks/sidebar-06) -- Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.
- [sidebar-07](https://uipkge.dev/vue/blocks/sidebar-07) -- App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.
- [testimonials-01](https://uipkge.dev/vue/blocks/testimonials-01) -- Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.
- [theme-customize](https://uipkge.dev/vue/blocks/theme-customize) -- Compact theme customization popover. Light/Dark/System mode (via the useTheme cookie), six curated color presets that overwrite `--primary` / `--primary-foreground` / `--ring`, and a radius slider bound to `--radius`. Persists to localStorage and exposes a one-click Copy CSS for the active token set.
- [toggle-setting-list](https://uipkge.dev/vue/blocks/toggle-setting-list) -- List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.

## Bootstrap

- init -- One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the useTheme composable in a single command. Run this first when starting a new app.
- kanban-data -- Seed columns for the kanban-board block. Five HR-themed columns (Backlog / To Do / In Progress / In Review / Done) with ~26 tasks across them, complete with assignees, tags, due dates, subtasks, comments, and files. Swap with your own fetcher when wiring to a real backend -- the consumer page just imports `createInitialColumns()` and binds the returned array to `<KanbanBoard v-model:columns>`.
- motion-list -- Drop-in TransitionGroup styles for sortable lists, kanban columns, and reorderable cards. Pairs with `<TransitionGroup name="motion-list" tag="div" class="relative">` — siblings reflow smoothly while items fade-and-scale on enter/leave. Leaving items are taken out of layout flow (position: absolute) so the parent collapses immediately instead of waiting for the leave fade. All four timings and the settle curve are CSS variables (`--motion-list-curve`, `--motion-list-duration-{enter,leave,move}`, `--motion-list-leave-width`) so consumers tune per-context with one line. Consumed by `@uipkge/board` by default; usable standalone for any reorderable list. Tiny — one .css file, zero JS.
- tailwind -- Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Ships the full canonical tailwind.css as the `files` content so a re-pull with `--overwrite` lands a working setup. The cssVars block stays as a safety net for first-install scenarios where the CLI merges tokens into a consumer's pre-existing tailwind.css. The `css` (@layer base) field is intentionally omitted to avoid duplicating the @layer base block already present in the shipped file when the CLI merges.
- use-board -- State + handlers for the `@uipkge/board` compositional primitive. Returns a reactive `state` (draggingId / dragOverLaneId / justMovedId), `handlers` to bind on lanes and cards (onDragStart / onLaneDragOver / onLaneDragLeave / onLaneDrop / onDragEnd), and an imperative `moveItem(itemId, toLaneId, toIndex?)` — used by keyboard navigation, undo, or server-pushed updates. Drop math computes the insertion index from pointer Y vs each card's bounding-box midpoint. An `accepts` predicate gives consumers a per-lane veto. The composable doesn't mutate your lanes data directly — it emits `onChange({ itemId, from, to, index })` so you stay in control of the canonical store (Pinia, Drizzle, server). Imports the Board's shared types from `@/components/ui/board/context` so `npx shadcn-vue add @uipkge/board` and `npx shadcn-vue add @uipkge/use-board` produce a typed, drop-in pairing.
- use-kanban -- Types (KanbanTask, KanbanColumn, CommentItem, FileItem), configs (priorityConfig with icons, assignee colour palette, tagPresets, fileIconMap), and helpers (getInitials, getDueStatus, formatDueDate, findTaskById, getTaskColumn). Shipped as a sibling to the kanban-board block so all the kanban Vue files import the same types and assignee/tag presets.
- use-month-grid -- Headless month-grid + drag/shift range-select composable. Returns the 42-cell grid, today/cursor refs, range state, and mouse handlers. Domain-agnostic -- pair with EventCalendar or any month-shaped UI by reading the returned refs. Also exports isoDate / dateFromKey / dayDiff helpers.
- use-theme -- Framework-agnostic useTheme composable (cookie-backed ref, works in plain Vue / Vite / Nuxt) + an optional Nuxt Nitro plugin that inlines the dark-class assignment in <head> for zero-flash SSR. The composable reads/writes the uipkge-theme cookie directly via document.cookie; the plugin is only needed under Nuxt for SSR no-flash.
- utils -- Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.

## Full content

- [https://uipkge.dev/llms-full.txt](https://uipkge.dev/llms-full.txt) -- every manifest with raw file source inline (Vue + React)

## Pages

- [Home](https://uipkge.dev/) -- framework picker + quickstart
- [Components (Vue)](https://uipkge.dev/vue/components) -- searchable browser; React: https://uipkge.dev/react/components
- [Blocks (Vue)](https://uipkge.dev/vue/blocks) -- composed sections; React: https://uipkge.dev/react/blocks
- [Charts (Vue)](https://uipkge.dev/vue/charts) -- ECharts wrappers; React: https://uipkge.dev/react/charts
- [Templates](https://uipkge.dev/vue/templates) -- full reference apps (HRMS, HMS, and shipment tracking live)
- [Setup](https://uipkge.dev/vue/setup) -- consumer walkthrough

## Source

- Repo: https://github.com/uday-a/uipkge
- License: MIT

---

# Vue manifests

Each entry is the registry manifest plus the raw source of every file -- exactly what an installer copies into a consumer project.

## accordion

- type: `registry:ui`
- description: Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on reka-ui with smooth animation and full keyboard support.
- npm deps: `@vueuse/core`, `class-variance-authority`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/accordion/Accordion.vue`

```vue
<script setup lang="ts">
import { computed, provide } from 'vue'
import type { AccordionRootEmits } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import { accordionVariants } from './accordion.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// `NonNullable<AccordionVariants['variant']>` or reka-ui's
// `AccordionRootProps`. Inline only the surface we expose.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    variant?: 'default' | 'separated' | 'ghost'
    type?: 'single' | 'multiple'
    modelValue?: string | string[]
    defaultValue?: string | string[]
    collapsible?: boolean
    disabled?: boolean
    dir?: 'ltr' | 'rtl'
    orientation?: 'horizontal' | 'vertical'
    asChild?: boolean
    as?: string | object
  }>(),
  {
    variant: 'default',
  },
)

const emits = defineEmits<AccordionRootEmits>()

const delegated = reactiveOmit(props, 'class', 'variant')
const forwarded = useForwardPropsEmits(delegated, emits)

provide(
  Symbol.for('accordionVariant'),
  computed(() => props.variant),
)
</script>

<template>
  <AccordionRoot
    data-uipkge
    data-slot="accordion"
    :data-variant="variant"
    v-bind="forwarded"
    :class="cn(accordionVariants({ variant }), props.class)"
  >
    <slot />
  </AccordionRoot>
</template>

```

### `packages/registry-vue/components/accordion/AccordionContent.vue`

```vue
<script setup lang="ts">
import type { AccordionContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { AccordionContent as RkAccordionContent } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')
</script>

<template>
  <RkAccordionContent
    data-uipkge
    data-slot="accordion-content"
    v-bind="delegated"
    :class="
      cn(
        'text-muted-foreground overflow-hidden text-sm',
        'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
        props.class,
      )
    "
  >
    <div class="pt-0 pb-4">
      <slot />
    </div>
  </RkAccordionContent>
</template>

```

### `packages/registry-vue/components/accordion/AccordionHeader.vue`

```vue
<script setup lang="ts">
import type { AccordionHeaderProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { AccordionHeader as RkAccordionHeader } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<AccordionHeaderProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')
</script>

<template>
  <RkAccordionHeader data-uipkge data-slot="accordion-header" v-bind="delegated" :class="cn('flex', props.class)">
    <slot />
  </RkAccordionHeader>
</template>

```

### `packages/registry-vue/components/accordion/AccordionItem.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { AccordionItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { AccordionItem as RkAccordionItem } from 'reka-ui'
import { cn } from '@/lib/utils'
import { accordionItemVariants } from './accordion.variants'

const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')

const variantRef = inject<{ value: 'default' | 'separated' | 'ghost' } | undefined>(
  Symbol.for('accordionVariant'),
  undefined,
)
const variant = computed(() => variantRef?.value ?? 'default')
</script>

<template>
  <RkAccordionItem
    data-uipkge
    data-slot="accordion-item"
    v-bind="delegated"
    :class="cn(accordionItemVariants({ variant }), props.class)"
  >
    <slot />
  </RkAccordionItem>
</template>

```

### `packages/registry-vue/components/accordion/AccordionTrigger.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { AccordionTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { AccordionTrigger as RkAccordionTrigger } from 'reka-ui'
import { ChevronDown } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { accordionTriggerVariants } from './accordion.variants'

const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')

const variantRef = inject<{ value: 'default' | 'separated' | 'ghost' } | undefined>(
  Symbol.for('accordionVariant'),
  undefined,
)
const variant = computed(() => variantRef?.value ?? 'default')
</script>

<template>
  <RkAccordionTrigger
    data-uipkge
    data-slot="accordion-trigger"
    v-bind="delegated"
    :class="cn(accordionTriggerVariants({ variant }), props.class)"
  >
    <slot />
    <ChevronDown
      class="text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180"
      aria-hidden="true"
    />
  </RkAccordionTrigger>
</template>

```

### `packages/registry-vue/components/accordion/accordion.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const accordionVariants = cva('w-full', {
  variants: {
    variant: {
      // Bottom-border between items (the classic shadcn look).
      default: '',
      // Each item is its own bordered card with a small gap between them.
      separated: 'space-y-2',
      // Borderless. Use when the parent container already provides framing.
      ghost: '',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

export const accordionItemVariants = cva('', {
  variants: {
    variant: {
      default: 'border-b border-border last:border-b-0',
      separated: 'rounded-md border border-border bg-card overflow-hidden',
      ghost: '',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

export const accordionTriggerVariants = cva(
  'group/accordion-trigger flex w-full items-center justify-between gap-3 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 hover:text-primary disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'py-4',
        separated: 'px-4 py-3 hover:bg-muted/50',
        ghost: 'py-3',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type AccordionVariants = VariantProps<typeof accordionVariants>

export type AccordionItemVariants = VariantProps<typeof accordionItemVariants>

export type AccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>

```

### `packages/registry-vue/components/accordion/index.ts`

```ts
export { default as Accordion } from './Accordion.vue'
export { default as AccordionContent } from './AccordionContent.vue'
export { default as AccordionHeader } from './AccordionHeader.vue'
export { default as AccordionItem } from './AccordionItem.vue'
export { default as AccordionTrigger } from './AccordionTrigger.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export {
  accordionVariants,
  accordionItemVariants,
  accordionTriggerVariants,
  type AccordionVariants,
  type AccordionItemVariants,
  type AccordionTriggerVariants,
} from './accordion.variants'

```

## advance-select

- type: `registry:ui`
- description: Searchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `<select>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `popover`, `command`, `badge`, `select`

### `packages/registry-vue/components/advance-select/AdvanceSelect.vue`

```vue
<script setup lang="ts" generic="T extends Record<string, unknown> | string | number">
import type { HTMLAttributes } from 'vue'
import { computed, defineComponent, ref, watch } from 'vue'
import { Check, ChevronDown, Loader2, Search, X } from 'lucide-vue-next'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
import CommandSearchSync from './CommandSearchSync.vue'
import { Badge } from '@/components/ui/badge'
import { type SelectOption, readKey } from '@/components/ui/select'
import { cn } from '@/lib/utils'
import type { AdvanceSelectFieldNames } from './types'

interface Props {
  modelValue?: unknown | unknown[]
  options: T[]

  // Mode
  mode?: 'single' | 'multiple' | 'tags'

  // Field mapping
  fieldNames?: AdvanceSelectFieldNames

  // Appearance
  size?: 'sm' | 'default' | 'lg'
  variant?: 'outlined' | 'filled' | 'borderless'
  status?: 'default' | 'error' | 'warning'
  placeholder?: string

  // Search
  showSearch?: boolean
  searchValue?: string
  autoClearSearchValue?: boolean
  filterOption?: boolean | ((input: string, option: T) => boolean)
  optionFilterProp?: string | string[]
  filterSort?: (optionA: T, optionB: T, info: { searchValue: string }) => number

  // Multiple/Tags
  maxCount?: number
  maxTagCount?: number
  maxTagTextLength?: number
  maxTagPlaceholder?: string | ((omittedValues: T[]) => string)
  tokenSeparators?: string[]
  hideSelected?: boolean
  allowCreate?: boolean

  // State
  disabled?: boolean
  loading?: boolean
  allowClear?: boolean
  open?: boolean
  defaultOpen?: boolean
  defaultActiveFirstOption?: boolean

  // Customization
  notFoundContent?: string
  loadingText?: string
  listHeight?: number
  virtual?: boolean

  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'single',
  fieldNames: () => ({}),
  size: 'default',
  variant: 'outlined',
  status: 'default',
  placeholder: 'Select...',
  showSearch: false,
  autoClearSearchValue: true,
  filterOption: true,
  optionFilterProp: 'label',
  maxTagCount: undefined,
  maxTagTextLength: undefined,
  tokenSeparators: () => [],
  hideSelected: false,
  allowCreate: false,
  disabled: false,
  loading: false,
  allowClear: true,
  defaultOpen: false,
  defaultActiveFirstOption: true,
  notFoundContent: 'No results.',
  loadingText: 'Loading...',
  listHeight: 300,
  virtual: true,
})

const emits = defineEmits<{
  'update:modelValue': [value: unknown | unknown[]]
  'update:open': [open: boolean]
  'update:searchValue': [value: string]
  change: [value: unknown | unknown[], option: T | T[]]
  select: [value: unknown, option: T]
  deselect: [value: unknown, option: T]
  search: [value: string]
  clear: []
  openChange: [open: boolean]
  focus: [event: FocusEvent]
  blur: [event: FocusEvent]
  popupScroll: [event: Event]
  inputKeyDown: [event: KeyboardEvent]
}>()

const isOpen = ref(props.defaultOpen)

watch(
  () => props.open,
  (v) => {
    if (v !== undefined) isOpen.value = v
  },
)

watch(isOpen, (v) => {
  emits('update:open', v)
  emits('openChange', v)
})

const internalQuery = ref('')
const query = computed({
  get: () => props.searchValue ?? internalQuery.value,
  set: (v) => {
    internalQuery.value = v
    emits('update:searchValue', v)
    emits('search', v)
  },
})

const inputRef = ref<HTMLInputElement>()

const valueKey = computed(() => props.fieldNames.value ?? 'value')
const labelKey = computed(() => props.fieldNames.label ?? 'label')
const groupKey = computed(() => props.fieldNames.group ?? 'group')
const disabledKey = computed(() => props.fieldNames.disabled ?? 'disabled')

function getValue(o: T): unknown {
  return readKey(o, valueKey.value, o)
}
function getLabel(o: T): string {
  return String(readKey(o, labelKey.value, ''))
}
function getGroup(o: T): string | undefined {
  const g = readKey(o, groupKey.value)
  return g == null ? undefined : String(g)
}
function isDisabled(o: T): boolean {
  return Boolean(readKey(o, disabledKey.value, false))
}

const isMultiple = computed(() => props.mode === 'multiple' || props.mode === 'tags')

const selectedValues = computed(() => {
  if (props.modelValue == null) return []
  if (isMultiple.value) {
    return Array.isArray(props.modelValue) ? props.modelValue : []
  }
  return [props.modelValue]
})

const selectedSet = computed(() => new Set(selectedValues.value))

const selectedOptions = computed(() => {
  return selectedValues.value.map((v) => {
    const found = props.options.find((o) => getValue(o) === v)
    if (found) return found
    // For created tags not in options, create a minimal option object
    return { [labelKey.value]: String(v), [valueKey.value]: v } as T
  })
})

function getOptionByValue(v: unknown): T | undefined {
  return props.options.find((o) => getValue(o) === v)
}

function matchesFilter(o: T, q: string): boolean {
  if (typeof props.filterOption === 'function') {
    return props.filterOption(q, o)
  }
  if (props.filterOption === false) return true
  const label = getLabel(o).toLowerCase()
  const search = q.toLowerCase()
  const propsToSearch = Array.isArray(props.optionFilterProp) ? props.optionFilterProp : [props.optionFilterProp]
  for (const prop of propsToSearch) {
    if (prop === 'label' && label.includes(search)) return true
    const val = String(readKey(o, prop, '')).toLowerCase()
    if (val.includes(search)) return true
  }
  return false
}

const filteredOptions = computed(() => {
  let result = props.options
  const q = query.value.trim()

  if (q) {
    result = result.filter((o) => matchesFilter(o, q))
  }

  if (props.hideSelected && isMultiple.value) {
    result = result.filter((o) => !selectedSet.value.has(getValue(o)))
  }

  if (q && props.filterSort) {
    result = [...result].sort((a, b) => props.filterSort!(a, b, { searchValue: q }))
  }

  return result
})

const grouped = computed(() => {
  const groups = new Map<string, T[]>()
  for (const opt of filteredOptions.value) {
    const key = getGroup(opt) ?? ''
    if (!groups.has(key)) groups.set(key, [])
    groups.get(key)!.push(opt)
  }
  return Array.from(groups, ([heading, items]) => ({ heading, items }))
})

const atMax = computed(() => {
  if (typeof props.maxCount !== 'number') return false
  const count = Array.isArray(props.modelValue) ? props.modelValue.length : props.modelValue ? 1 : 0
  return count >= props.maxCount
})

const visibleTags = computed(() => {
  if (!isMultiple.value) return []
  const opts = selectedOptions.value
  if (typeof props.maxTagCount === 'number') {
    return opts.slice(0, props.maxTagCount)
  }
  return opts
})

const hiddenTagCount = computed(() => {
  if (!isMultiple.value) return 0
  const opts = selectedOptions.value
  if (typeof props.maxTagCount === 'number') {
    return Math.max(0, opts.length - props.maxTagCount)
  }
  return 0
})

function displayLabel(o: T): string {
  let label = getLabel(o)
  if (props.maxTagTextLength && label.length > props.maxTagTextLength) {
    label = label.slice(0, props.maxTagTextLength) + '...'
  }
  return label
}

function selectOption(option: T) {
  if (isDisabled(option)) return
  const v = getValue(option)

  if (!isMultiple.value) {
    emits('update:modelValue', v)
    emits('change', v, option)
    emits('select', v, option)
    isOpen.value = false
    if (props.autoClearSearchValue) {
      query.value = ''
    }
    return
  }

  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
  if (selectedSet.value.has(v)) {
    const next = current.filter((x) => x !== v)
    emits('update:modelValue', next)
    emits('change', next, option)
    emits('deselect', v, option)
  } else {
    if (atMax.value) return
    const next = [...current, v]
    emits('update:modelValue', next)
    emits('change', next, option)
    emits('select', v, option)
  }

  if (props.autoClearSearchValue) {
    query.value = ''
  }
}

function removeTag(value: unknown, event: Event) {
  event.stopPropagation()
  if (props.disabled) return
  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
  const next = current.filter((x) => x !== value)
  const option = getOptionByValue(value)
  emits('update:modelValue', next)
  emits('change', next, option as T)
  if (option) emits('deselect', value, option)
}

function clearAll(event?: Event) {
  event?.stopPropagation()
  if (props.disabled) return
  emits('clear')
  if (isMultiple.value) {
    emits('update:modelValue', [])
    emits('change', [], [])
  } else {
    emits('update:modelValue', null)
    emits('change', null, undefined as unknown as T)
  }
  query.value = ''
}

function createTag() {
  if (!props.allowCreate && props.mode !== 'tags') return
  const q = query.value.trim()
  if (!q) return
  // Check if already exists
  const exists = props.options.some((o) => getLabel(o) === q || String(getValue(o)) === q)
  if (exists) return

  if (!isMultiple.value) {
    emits('update:modelValue', q)
    emits('change', q, { [labelKey.value]: q, [valueKey.value]: q } as T)
    emits('select', q, { [labelKey.value]: q, [valueKey.value]: q } as T)
    isOpen.value = false
    query.value = ''
    return
  }

  if (atMax.value) return
  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
  const next = [...current, q]
  const newOption = { [labelKey.value]: q, [valueKey.value]: q } as T
  emits('update:modelValue', next)
  emits('change', next, newOption)
  emits('select', q, newOption)
  query.value = ''
}

function handleInputKeydown(event: KeyboardEvent) {
  emits('inputKeyDown', event)
  if (event.key === 'Enter' && query.value.trim() && props.mode === 'tags') {
    event.preventDefault()
    createTag()
  }
  if (props.tokenSeparators.length && props.mode === 'tags') {
    if (props.tokenSeparators.includes(event.key)) {
      event.preventDefault()
      createTag()
    }
  }
}

function handleFocus(event: FocusEvent) {
  emits('focus', event)
}

function handleBlur(event: FocusEvent) {
  emits('blur', event)
}

function handlePopupScroll(event: Event) {
  emits('popupScroll', event)
}

// Watch modelValue to clear query when closed
watch(
  () => props.modelValue,
  () => {
    if (!isOpen.value && props.autoClearSearchValue) {
      query.value = ''
    }
  },
)

watch(
  () => isOpen.value,
  (open) => {
    if (!open && props.autoClearSearchValue) {
      query.value = ''
    }
  },
)

const sizeClasses = {
  sm: 'h-8 text-xs px-2.5 py-1',
  default: 'h-9 text-sm px-3 py-1.5',
  lg: 'h-11 text-base px-4 py-2',
}

const variantClasses = {
  outlined:
    'border-input bg-transparent shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  filled:
    'border-transparent bg-muted/50 shadow-none focus-visible:bg-muted focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  borderless:
    'border-transparent bg-transparent shadow-none focus-visible:bg-muted/30 focus-visible:ring-ring/50 focus-visible:ring-[3px]',
}

const statusClasses = {
  default: '',
  error:
    'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 aria-invalid:border-destructive',
  warning: 'border-[var(--warning)] focus-visible:border-[var(--warning)] focus-visible:ring-[var(--warning)]/20',
}

const triggerBaseClasses = computed(() =>
  cn(
    'flex w-full items-center justify-between gap-2 rounded-md border text-sm transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
    sizeClasses[props.size],
    variantClasses[props.variant],
    statusClasses[props.status],
    props.class,
  ),
)

const isEmpty = computed(() => {
  if (isMultiple.value) {
    return !Array.isArray(props.modelValue) || props.modelValue.length === 0
  }
  return props.modelValue == null || props.modelValue === ''
})

const showClear = computed(() => {
  return props.allowClear && !isEmpty.value && !props.disabled && !props.loading
})

const showSearchInput = computed(() => {
  return props.showSearch || props.mode === 'tags'
})
</script>

<template>
  <Popover v-model:open="isOpen">
    <PopoverTrigger as-child>
      <button
        type="button"
        role="combobox"
        :aria-expanded="isOpen"
        :disabled="disabled || loading"
        data-uipkge
        data-slot="advance-select"
        :class="triggerBaseClasses"
        @focus="handleFocus"
        @blur="handleBlur"
      >
        <!-- Prefix slot -->
        <span v-if="$slots.prefix" class="shrink-0">
          <slot name="prefix" />
        </span>

        <!-- Multiple mode tags -->
        <div
          v-if="isMultiple"
          class="flex flex-1 flex-nowrap items-center gap-1 overflow-x-auto"
          style="scrollbar-width: none; -ms-overflow-style: none"
        >
          <template v-if="selectedOptions.length">
            <slot
              name="tag"
              v-for="opt in visibleTags"
              :key="String(getValue(opt))"
              :value="getValue(opt)"
              :label="displayLabel(opt)"
              :closable="!disabled"
              :on-close="(e: Event) => removeTag(getValue(opt), e)"
            >
              <Badge variant="secondary" class="bg-muted text-foreground h-6 gap-1 pr-1 pl-2 text-xs font-normal">
                <span class="truncate">{{ displayLabel(opt) }}</span>
                <button
                  v-if="!disabled"
                  type="button"
                  class="hover:bg-muted-foreground/20 rounded-full p-0.5 transition-colors"
                  :aria-label="`Remove ${getLabel(opt)}`"
                  @click="removeTag(getValue(opt), $event)"
                >
                  <X class="size-3" />
                </button>
              </Badge>
            </slot>
            <Badge
              v-if="hiddenTagCount > 0"
              variant="secondary"
              class="bg-muted text-foreground h-6 text-xs font-normal"
            >
              <template v-if="typeof maxTagPlaceholder === 'function'">
                {{ maxTagPlaceholder(selectedOptions.slice(maxTagCount ?? 0)) }}
              </template>
              <template v-else-if="maxTagPlaceholder">
                {{ maxTagPlaceholder }}
              </template>
              <template v-else> +{{ hiddenTagCount }} </template>
            </Badge>
          </template>
          <span v-else class="text-muted-foreground truncate">{{ placeholder }}</span>
        </div>

        <!-- Single mode display -->
        <template v-else>
          <slot name="label" :value="props.modelValue" :label="selectedOptions[0] ? getLabel(selectedOptions[0]) : ''">
            <span
              :class="[
                'flex-1 truncate text-left',
                selectedOptions.length ? 'text-foreground' : 'text-muted-foreground',
              ]"
            >
              {{ selectedOptions[0] ? getLabel(selectedOptions[0]) : placeholder }}
            </span>
          </slot>
        </template>

        <!-- Suffix area -->
        <span class="flex shrink-0 items-center gap-1">
          <slot name="suffix" />

          <Loader2 v-if="loading" class="text-muted-foreground size-4 animate-spin" />

          <button
            v-else-if="showClear"
            type="button"
            class="text-muted-foreground hover:text-foreground rounded transition-colors"
            aria-label="Clear selection"
            @click="clearAll"
          >
            <slot name="clearIcon">
              <X class="size-4" aria-hidden="true" />
            </slot>
          </button>

          <slot v-else name="suffixIcon">
            <ChevronDown class="text-muted-foreground size-4 opacity-50" />
          </slot>
        </span>
      </button>
    </PopoverTrigger>

    <PopoverContent
      class="p-0"
      align="start"
      :side-offset="4"
      :style="{ width: 'var(--reka-popover-trigger-width)', maxHeight: `${listHeight}px` }"
      @scroll="handlePopupScroll"
    >
      <Command :should-filter="false" class="flex flex-col overflow-hidden">
        <CommandSearchSync @update:search="query = $event" />
        <CommandInput v-if="showSearchInput" v-model="query" :placeholder="placeholder" @keydown="handleInputKeydown" />

        <CommandList class="flex-1 overflow-y-auto">
          <CommandEmpty v-if="!loading && filteredOptions.length === 0">
            <slot name="empty">
              {{ notFoundContent }}
            </slot>
          </CommandEmpty>

          <div v-if="loading && filteredOptions.length === 0" class="py-6 text-center text-sm">
            {{ loadingText }}
          </div>

          <template v-for="(group, gi) in grouped" :key="group.heading || gi">
            <CommandSeparator v-if="gi > 0" />
            <CommandGroup :heading="group.heading || undefined">
              <CommandItem
                v-for="(opt, idx) in group.items"
                :key="String(getValue(opt))"
                :value="String(getValue(opt))"
                :disabled="isDisabled(opt) || (atMax && !selectedSet.has(getValue(opt)))"
                :data-active="gi === 0 && idx === 0 && defaultActiveFirstOption ? 'true' : undefined"
                :style="virtual && props.options.length > 100 ? { contentVisibility: 'auto' } : undefined"
                @select="selectOption(opt)"
              >
                <Check
                  :class="cn('mr-2 size-4 shrink-0', selectedSet.has(getValue(opt)) ? 'opacity-100' : 'opacity-0')"
                />
                <slot name="option" :option="opt" :index="idx">
                  {{ getLabel(opt) }}
                </slot>
              </CommandItem>
            </CommandGroup>
          </template>

          <!-- Create new option in tags mode -->
          <CommandItem
            v-if="query.trim() && allowCreate && !props.options.some((o) => getLabel(o) === query.trim())"
            :value="`create:${query}`"
            @select="createTag"
          >
            <Check class="mr-2 size-4 opacity-0" />
            Create "{{ query.trim() }}"
          </CommandItem>
        </CommandList>

        <!-- Footer for multiple mode -->
        <div
          v-if="isMultiple && selectedOptions.length"
          class="flex items-center justify-between border-t px-2 py-1.5 text-xs"
        >
          <span class="text-muted-foreground">{{ selectedOptions.length }} selected</span>
          <button type="button" class="text-muted-foreground hover:text-foreground" @click="clearAll">Clear all</button>
        </div>
      </Command>
    </PopoverContent>
  </Popover>
</template>

<style scoped>
[data-slot='advance-select'] .overflow-x-auto::-webkit-scrollbar {
  display: none;
}
</style>

```

### `packages/registry-vue/components/advance-select/CommandSearchSync.vue`

```vue
<script setup lang="ts">
import { watch } from 'vue'
import { useCommand } from '@/components/ui/command'

const emits = defineEmits<{
  'update:search': [value: string]
}>()

const { filterState } = useCommand()

watch(
  () => filterState.search,
  (v) => {
    emits('update:search', v)
  },
)
</script>

<template>
  <slot />
</template>

```

### `packages/registry-vue/components/advance-select/types.ts`

```ts
export type { SelectOption } from '@/components/ui/select'

export interface AdvanceSelectFieldNames {
  label?: string
  value?: string
  group?: string
  disabled?: string
}

```

### `packages/registry-vue/components/advance-select/index.ts`

```ts
export { default as AdvanceSelect } from './AdvanceSelect.vue'
export type { AdvanceSelectFieldNames, SelectOption } from './types'

```

## ai-llm-chat

- type: `registry:block`
- description: ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `button`, `input`, `textarea`

### `packages/registry-vue/blocks/ai-llm-chat/AiLlmChat.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import {
  ArrowUp,
  Check,
  ChevronDown,
  Copy,
  MessageSquarePlus,
  MoreHorizontal,
  Paperclip,
  PanelLeftClose,
  RefreshCw,
  Search,
  Sparkles,
  Square,
  ThumbsDown,
  ThumbsUp,
  Code,
  Lightbulb,
  PenLine,
  BookOpen,
} from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

type Role = 'user' | 'assistant'

interface Turn {
  id: string
  role: Role
  body: string
  code?: { lang: string; content: string }
  createdAt: Date
}

interface Thread {
  id: string
  title: string
  updatedAt: Date
  turns: Turn[]
}

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
const sevenDays = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)

const suggestions = [
  { icon: Code, label: 'Explain this code', body: 'Walk me through what `useRegistry()` does line by line.' },
  {
    icon: PenLine,
    label: 'Draft a release note',
    body: 'Write a release note for shipping the new inbox + chat blocks.',
  },
  {
    icon: Lightbulb,
    label: 'Brainstorm',
    body: 'Give me five ideas for verticals to build on top of the uipkge registry.',
  },
  {
    icon: BookOpen,
    label: 'Summarise',
    body: 'Summarise the CLAUDE.md "Primitive vs Block" boundary in three bullets.',
  },
]

const models = [
  { id: 'opus-4-7', label: 'Opus 4.7', hint: 'Most capable' },
  { id: 'sonnet-4-6', label: 'Sonnet 4.6', hint: 'Balanced' },
  { id: 'haiku-4-5', label: 'Haiku 4.5', hint: 'Fastest' },
]

const threads = ref<Thread[]>([
  {
    id: 't1',
    title: 'Designing the registry block boundary',
    updatedAt: new Date(now.getTime() - 12 * 60 * 1000),
    turns: [
      {
        id: 'u1',
        role: 'user',
        body: 'When should I extract a repeating tile pattern across blocks into a primitive?',
        createdAt: new Date(now.getTime() - 22 * 60 * 1000),
      },
      {
        id: 'a1',
        role: 'assistant',
        body: 'Short answer: almost never until you have 5+ distinct blocks calling for the *exact same* shape, and the extraction is slot-only with no layout opinion.\n\nThe trap is that StatCard-style primitives — ones that bake an "icon top-right, value below title, trend pill bottom-right" layout — look reusable but lock every block that consumes them. The user installing the block can\'t swap one tile into a chart-led tile without un-abstracting the primitive first.\n\nThe heuristic the CLAUDE.md spells out:',
        createdAt: new Date(now.getTime() - 21 * 60 * 1000),
      },
      {
        id: 'a1b',
        role: 'assistant',
        body: 'Here is the minimal check you can run on any candidate primitive:',
        code: {
          lang: 'ts',
          content:
            '// If the prop changes BEHAVIOR -> primitive (variant, disabled, multiple)\n// If the prop changes LAYOUT or WHICH FIELDS RENDER -> block territory\n//\n// Red flag: a primitive that accepts an `items` array of structured records\n// and renders them with a fixed shape. That is layout opinion in a prop.\ninterface KpiItem { title: string; value: string; icon: any; trend: number }\n//                ^ if you see this on a `registry:ui` item, stop.',
        },
        createdAt: new Date(now.getTime() - 20 * 60 * 1000),
      },
      {
        id: 'u2',
        role: 'user',
        body: 'And if the same 3 tiles repeat inside one block file?',
        createdAt: new Date(now.getTime() - 14 * 60 * 1000),
      },
      {
        id: 'a2',
        role: 'assistant',
        body: 'Leave them inline. The registry rule is "three similar lines is better than a premature abstraction." Blocks are supposed to read top-to-bottom at the call site — that is the whole reason a user installs a block instead of a primitive. The cost of writing the tile out three times is small; the cost of pre-abstracting and getting the shape slightly wrong is high (every consumer downstream pays for it).',
        createdAt: new Date(now.getTime() - 13 * 60 * 1000),
      },
    ],
  },
  {
    id: 't2',
    title: 'Tailwind v4 OKLCH dark mode tokens',
    updatedAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't3',
    title: 'Zero-downtime migration plan',
    updatedAt: yesterday,
    turns: [],
  },
  {
    id: 't4',
    title: 'Composing kanban + calendar in one view',
    updatedAt: new Date(now.getTime() - 30 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't5',
    title: 'shadcn-vue resolver circular warning',
    updatedAt: new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't6',
    title: 'Cloudflare Pages preview env wiring',
    updatedAt: new Date(now.getTime() - 9 * 24 * 60 * 60 * 1000),
    turns: [],
  },
])

const activeId = ref<string>('t1')
const draft = ref('')
const sidebarOpen = ref(true)
const sidebarSearch = ref('')
const modelOpen = ref(false)
const activeModel = ref(models[0])
const isStreaming = ref(false)
const copiedId = ref<string | null>(null)
const scrollRoot = ref<HTMLElement | null>(null)

const activeThread = computed(() => threads.value.find((t) => t.id === activeId.value)!)
const turns = computed(() => activeThread.value?.turns ?? [])
const isEmpty = computed(() => turns.value.length === 0)

const filteredThreads = computed(() => {
  const q = sidebarSearch.value.trim().toLowerCase()
  return q ? threads.value.filter((t) => t.title.toLowerCase().includes(q)) : threads.value
})

const groupedThreads = computed(() => {
  const today: Thread[] = []
  const ydy: Thread[] = []
  const week: Thread[] = []
  const earlier: Thread[] = []
  for (const t of [...filteredThreads.value].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())) {
    if (t.updatedAt >= todayStart) today.push(t)
    else if (t.updatedAt.toDateString() === yesterday.toDateString()) ydy.push(t)
    else if (t.updatedAt >= sevenDays) week.push(t)
    else earlier.push(t)
  }
  return { today, yesterday: ydy, week, earlier }
})

function selectThread(id: string) {
  activeId.value = id
  nextTick(scrollToBottom)
}

function newChat() {
  const t: Thread = {
    id: `t${Date.now()}`,
    title: 'New chat',
    updatedAt: new Date(),
    turns: [],
  }
  threads.value.unshift(t)
  activeId.value = t.id
  draft.value = ''
}

async function send(prefill?: string) {
  const body = (prefill ?? draft.value).trim()
  if (!body || isStreaming.value) return
  const turn: Turn = {
    id: `u${Date.now()}`,
    role: 'user',
    body,
    createdAt: new Date(),
  }
  activeThread.value.turns.push(turn)
  activeThread.value.updatedAt = new Date()
  if (activeThread.value.title === 'New chat') {
    activeThread.value.title = body.slice(0, 48) + (body.length > 48 ? '…' : '')
  }
  draft.value = ''
  await nextTick()
  scrollToBottom()
  isStreaming.value = true
  window.setTimeout(() => {
    activeThread.value.turns.push({
      id: `a${Date.now()}`,
      role: 'assistant',
      body: 'Here is a placeholder response. Wire `send()` up to your streaming endpoint and push assistant tokens onto the last turn as they arrive.',
      createdAt: new Date(),
    })
    isStreaming.value = false
    nextTick(scrollToBottom)
  }, 1400)
}

function stop() {
  isStreaming.value = false
}

function copyTurn(id: string, body: string) {
  if (typeof navigator !== 'undefined' && navigator.clipboard) {
    navigator.clipboard.writeText(body).catch(() => {})
  }
  copiedId.value = id
  window.setTimeout(() => {
    if (copiedId.value === id) copiedId.value = null
  }, 1500)
}

function onComposerKey(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    send()
  }
}

function scrollToBottom() {
  if (!scrollRoot.value) return
  scrollRoot.value.scrollTop = scrollRoot.value.scrollHeight
}

function formatTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

function selectModel(id: string) {
  const m = models.find((m) => m.id === id)
  if (m) activeModel.value = m
  modelOpen.value = false
}

watch(activeId, () => nextTick(scrollToBottom))
</script>

<template>
  <div
    class="bg-background text-foreground grid h-[680px] w-full overflow-hidden rounded-xl border shadow-sm transition-[grid-template-columns]"
    :style="{ gridTemplateColumns: sidebarOpen ? '260px 1fr' : '0px 1fr' }"
  >
    <aside class="bg-muted/30 flex min-w-0 flex-col overflow-hidden border-r">
      <div class="flex h-14 shrink-0 items-center gap-2 border-b px-3">
        <Button class="h-9 flex-1 justify-start gap-2 rounded-lg" variant="outline" @click="newChat">
          <MessageSquarePlus class="size-4" />
          New chat
        </Button>
        <Button
          variant="ghost"
          size="icon"
          class="size-8 shrink-0"
          aria-label="Collapse sidebar"
          @click="sidebarOpen = false"
        >
          <PanelLeftClose class="size-4" />
        </Button>
      </div>
      <div class="px-3 pt-3 pb-2">
        <div class="relative">
          <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
          <Input v-model="sidebarSearch" placeholder="Search chats" class="h-8 rounded-lg pl-8 text-xs" />
        </div>
      </div>
      <div class="thread-scroll flex-1 overflow-y-auto pb-3">
        <template
          v-for="(group, key) in {
            Today: groupedThreads.today,
            Yesterday: groupedThreads.yesterday,
            'Previous 7 days': groupedThreads.week,
            Earlier: groupedThreads.earlier,
          }"
          :key="key"
        >
          <template v-if="group.length > 0">
            <p class="text-muted-foreground px-3 pt-3 pb-1 text-[10px] font-semibold tracking-widest uppercase">
              {{ key }}
            </p>
            <button
              v-for="t in group"
              :key="t.id"
              :class="[
                'group flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-[13px] transition-colors',
                t.id === activeId
                  ? 'bg-primary/10 text-foreground font-medium'
                  : 'text-foreground/80 hover:bg-muted/60',
              ]"
              @click="selectThread(t.id)"
            >
              <span class="truncate">{{ t.title }}</span>
              <MoreHorizontal
                class="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
              />
            </button>
          </template>
        </template>
      </div>
      <div class="border-t px-3 py-3">
        <div class="flex items-center gap-2">
          <Avatar class="size-8">
            <AvatarFallback class="text-[11px] font-medium">U</AvatarFallback>
          </Avatar>
          <div class="min-w-0 flex-1">
            <p class="truncate text-xs font-medium">You</p>
            <p class="text-muted-foreground truncate text-[10px]">Free plan</p>
          </div>
          <Button variant="ghost" size="icon" class="size-8" aria-label="Account menu">
            <MoreHorizontal class="size-4" />
          </Button>
        </div>
      </div>
    </aside>

    <section class="flex min-w-0 flex-col">
      <header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
        <div class="flex items-center gap-2">
          <Button
            v-if="!sidebarOpen"
            variant="ghost"
            size="icon"
            class="size-8"
            aria-label="Open sidebar"
            @click="sidebarOpen = true"
          >
            <MessageSquarePlus class="size-4" />
          </Button>
          <div class="relative">
            <button
              class="hover:bg-muted/60 flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors"
              @click="modelOpen = !modelOpen"
            >
              <Sparkles class="text-primary size-3.5" />
              {{ activeModel.label }}
              <ChevronDown class="text-muted-foreground size-3.5" />
            </button>
            <div
              v-if="modelOpen"
              class="bg-popover absolute top-full left-0 z-10 mt-1 w-56 overflow-hidden rounded-lg border p-1 shadow-lg"
            >
              <button
                v-for="m in models"
                :key="m.id"
                class="hover:bg-muted/60 flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors"
                @click="selectModel(m.id)"
              >
                <div class="min-w-0">
                  <p class="font-medium">{{ m.label }}</p>
                  <p class="text-muted-foreground text-[10px]">{{ m.hint }}</p>
                </div>
                <Check v-if="m.id === activeModel.id" class="text-primary size-3.5 shrink-0" />
              </button>
            </div>
          </div>
        </div>
        <Button variant="ghost" size="icon" class="size-8" aria-label="More options">
          <MoreHorizontal class="size-4" />
        </Button>
      </header>

      <div ref="scrollRoot" class="thread-scroll flex-1 overflow-y-auto">
        <div v-if="isEmpty" class="mx-auto flex h-full max-w-2xl flex-col items-center justify-center gap-6 px-6">
          <div class="bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full">
            <Sparkles class="size-6" />
          </div>
          <div class="text-center">
            <h2 class="text-xl font-semibold tracking-tight">How can I help today?</h2>
            <p class="text-muted-foreground mt-1 text-sm">Ask anything, or try one of these to get started.</p>
          </div>
          <div class="grid w-full grid-cols-2 gap-2">
            <button
              v-for="s in suggestions"
              :key="s.label"
              class="bg-card hover:bg-muted/60 group flex items-start gap-3 rounded-lg border p-3 text-left transition-colors"
              @click="send(s.body)"
            >
              <div
                class="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex size-8 shrink-0 items-center justify-center rounded-md transition-colors"
              >
                <component :is="s.icon" class="size-4" />
              </div>
              <div class="min-w-0">
                <p class="text-foreground text-xs font-semibold">{{ s.label }}</p>
                <p class="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">{{ s.body }}</p>
              </div>
            </button>
          </div>
        </div>

        <div v-else class="mx-auto max-w-3xl space-y-6 px-6 py-6">
          <div v-for="t in turns" :key="t.id" class="group">
            <template v-if="t.role === 'user'">
              <div class="flex justify-end">
                <div
                  class="bg-primary/10 text-foreground max-w-[80%] rounded-2xl rounded-tr-md px-4 py-2.5 text-sm leading-relaxed"
                >
                  {{ t.body }}
                </div>
              </div>
            </template>
            <template v-else>
              <div class="flex items-start gap-3">
                <div
                  class="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full"
                >
                  <Sparkles class="size-3.5" />
                </div>
                <div class="min-w-0 flex-1 space-y-3">
                  <p class="text-foreground text-sm leading-relaxed whitespace-pre-wrap">{{ t.body }}</p>
                  <div v-if="t.code" class="bg-muted/60 overflow-hidden rounded-lg border">
                    <div
                      class="bg-muted/80 text-muted-foreground flex items-center justify-between px-3 py-1.5 font-mono text-[10px]"
                    >
                      <span>{{ t.code.lang }}</span>
                      <button
                        class="hover:text-foreground inline-flex items-center gap-1 transition-colors"
                        @click="copyTurn(t.id + '-code', t.code!.content)"
                      >
                        <Check v-if="copiedId === t.id + '-code'" class="text-success size-3" />
                        <Copy v-else class="size-3" />
                        {{ copiedId === t.id + '-code' ? 'Copied' : 'Copy' }}
                      </button>
                    </div>
                    <pre
                      class="overflow-x-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed"
                    ><code>{{ t.code.content }}</code></pre>
                  </div>
                  <div class="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                    <button
                      class="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] transition-colors"
                      @click="copyTurn(t.id, t.body)"
                    >
                      <Check v-if="copiedId === t.id" class="text-success size-3" />
                      <Copy v-else class="size-3" />
                      {{ copiedId === t.id ? 'Copied' : 'Copy' }}
                    </button>
                    <button
                      class="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors"
                      aria-label="Regenerate"
                    >
                      <RefreshCw class="size-3" />
                    </button>
                    <button
                      class="text-muted-foreground hover:bg-muted hover:text-success inline-flex size-7 items-center justify-center rounded-md transition-colors"
                      aria-label="Good response"
                    >
                      <ThumbsUp class="size-3" />
                    </button>
                    <button
                      class="text-muted-foreground hover:bg-muted hover:text-destructive inline-flex size-7 items-center justify-center rounded-md transition-colors"
                      aria-label="Bad response"
                    >
                      <ThumbsDown class="size-3" />
                    </button>
                    <span class="text-muted-foreground ml-auto text-[10px] tabular-nums">{{
                      formatTime(t.createdAt)
                    }}</span>
                  </div>
                </div>
              </div>
            </template>
          </div>

          <div v-if="isStreaming" class="flex items-start gap-3">
            <div
              class="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full"
            >
              <Sparkles class="size-3.5" />
            </div>
            <div class="text-muted-foreground flex items-center gap-1.5 pt-1.5">
              <span class="typing-dot" />
              <span class="typing-dot" style="animation-delay: 0.15s" />
              <span class="typing-dot" style="animation-delay: 0.3s" />
            </div>
          </div>
        </div>
      </div>

      <div class="bg-muted/20 border-t px-4 py-3">
        <div class="mx-auto max-w-3xl">
          <div
            class="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4"
          >
            <Textarea
              v-model="draft"
              :placeholder="`Message ${activeModel.label}`"
              rows="1"
              class="placeholder:text-muted-foreground/70 max-h-48 min-h-[48px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
              @keydown="onComposerKey"
            />
            <div class="flex items-center justify-between gap-2 px-2 pb-2">
              <div class="flex items-center gap-0.5">
                <Button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Attach file"
                >
                  <Paperclip class="size-4" />
                </Button>
                <span
                  class="text-muted-foreground bg-muted ml-1 inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium"
                >
                  <Sparkles class="text-primary size-3" />
                  {{ activeModel.label }}
                </span>
              </div>
              <div class="flex items-center gap-2">
                <kbd
                  class="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex"
                >
                  <span>↵</span>
                </kbd>
                <Button
                  v-if="isStreaming"
                  variant="outline"
                  class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                  aria-label="Stop generating"
                  @click="stop"
                >
                  <Square class="size-3 fill-current" />
                  Stop
                </Button>
                <Button
                  v-else
                  class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                  :disabled="!draft.trim()"
                  aria-label="Send"
                  @click="send()"
                >
                  Send
                  <ArrowUp class="size-3.5" />
                </Button>
              </div>
            </div>
          </div>
          <p class="text-muted-foreground/70 mt-2 text-center text-[10px]">
            AI can make mistakes. Verify important info.
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.thread-scroll::-webkit-scrollbar {
  width: 6px;
}
.thread-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.5;
  animation: typing-bounce 1s infinite ease-in-out;
}
@keyframes typing-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}
</style>

```

## alert

- type: `registry:ui`
- description: Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/alert/Alert.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { AlertCircle, CheckCircle, Info, TriangleAlert } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { alertVariants } from './alert.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `AlertVariants['variant']`.
const props = defineProps<{
  class?: HTMLAttributes['class']
  variant?: 'default' | 'destructive'
  icon?: 'info' | 'warning' | 'error' | 'success'
  title?: string
  text?: string
}>()
</script>

<template>
  <div role="alert" data-uipkge data-slot="alert" :class="cn(alertVariants({ variant }), props.class)">
    <div v-if="icon" data-uipkge data-slot="alert-icon" class="absolute top-4 left-4">
      <AlertCircle v-if="icon === 'error'" class="size-4" aria-hidden="true" />
      <CheckCircle v-else-if="icon === 'success'" class="size-4" aria-hidden="true" />
      <TriangleAlert v-else-if="icon === 'warning'" class="size-4" aria-hidden="true" />
      <Info v-else class="size-4" aria-hidden="true" />
    </div>
    <div data-uipkge data-slot="alert-content" class="[&_p]:text-sm [&_p]:leading-relaxed">
      <p v-if="title" class="text-sm font-medium">{{ title }}</p>
      <p v-if="text" class="text-muted-foreground text-sm">{{ text }}</p>
      <slot />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/alert/AlertDescription.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="alert-description"
    :class="cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', props.class)"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/alert/AlertTitle.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <component
    :is="props.as ?? 'h5'"
    data-uipkge
    data-slot="alert-title"
    :class="cn('mb-1 text-sm leading-none font-medium tracking-tight', props.class)"
  >
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/alert/alert.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Alert.vue` can `import { alertVariants } from
 * './alert.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg]:text-foreground [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has([data-slot=alert-icon])]:pl-12 [&:has([data-slot=alert-description])]:pt-7',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground border-border',
        destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type AlertVariants = VariantProps<typeof alertVariants>

```

### `packages/registry-vue/components/alert/index.ts`

```ts
export { default as Alert } from './Alert.vue'
export { default as AlertDescription } from './AlertDescription.vue'
export { default as AlertTitle } from './AlertTitle.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Alert.vue <-> index.ts circular import that broke dev SSR for Card).
export { alertVariants, type AlertVariants } from './alert.variants'

```

## alert-modal

- type: `registry:ui`
- description: Props-driven shortcut for confirm and destructive prompts — pass `title`, `description`, `actionLabel`, and a `tone` and you get a fully styled modal with a leading icon ring, action button, and optional async loading state. Skip it and use Dialog when you need a free-form modal instead.
- npm deps: `lucide-vue-next`, `reka-ui`
- registry deps: `button`

### `packages/registry-vue/components/alert-modal/AlertModal.vue`

```vue
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import type { Component, HTMLAttributes } from 'vue'
import { CircleAlert, CircleCheck, Info, TriangleAlert } from 'lucide-vue-next'
import {
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogRoot,
  AlertDialogTitle,
  AlertDialogTrigger,
} from 'reka-ui'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type AlertIcon = 'info' | 'warning' | 'error' | 'success'

const props = withDefaults(
  defineProps<{
    /** Controlled open state. Pair with v-model:open. */
    open?: boolean
    /** Title rendered in the header. Override with #title slot. */
    title?: string
    /** Description rendered under the title. Override with #description slot. */
    description?: string
    /** Label for the primary action button. */
    actionLabel?: string
    /** Label for the cancel button. Pass null to hide. */
    cancelLabel?: string | null
    /** Visual tone — colors the icon and action button. */
    tone?: 'default' | 'destructive' | 'success' | 'warning'
    /** Quick icon shortcut. Override with #icon slot. */
    icon?: AlertIcon | Component | null
    /** Show a spinner on the action button and disable both buttons. */
    loading?: boolean
    /** Disable the primary action without a spinner. */
    actionDisabled?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    title: '',
    description: '',
    actionLabel: 'Continue',
    cancelLabel: 'Cancel',
    tone: 'default',
    loading: false,
    actionDisabled: false,
  },
)

const emit = defineEmits<{
  'update:open': [value: boolean]
  action: [event: MouseEvent]
  cancel: [event: MouseEvent]
}>()

// Sync internal ref with v-model:open and emit changes back out so the
// component works in both controlled and uncontrolled modes.
const internalOpen = ref(props.open ?? false)

watch(
  () => props.open,
  (v) => {
    if (v !== undefined && v !== internalOpen.value) internalOpen.value = v
  },
)

function setOpen(v: boolean) {
  internalOpen.value = v
  emit('update:open', v)
}

const builtInIcons: Record<AlertIcon, Component> = {
  info: Info,
  success: CircleCheck,
  warning: TriangleAlert,
  error: CircleAlert,
}

const ResolvedIcon = computed<Component | null>(() => {
  if (!props.icon) return null
  if (typeof props.icon === 'string') return builtInIcons[props.icon] ?? null
  return props.icon
})

const iconColorClass = computed(() => {
  switch (props.tone) {
    case 'destructive':
      return 'text-destructive'
    case 'success':
      return 'text-success'
    case 'warning':
      return 'text-warning'
    default:
      return 'text-muted-foreground'
  }
})

const actionToneClass = computed(() => {
  switch (props.tone) {
    case 'destructive':
      return 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
    case 'success':
      return 'bg-success text-success-foreground hover:bg-success/90'
    case 'warning':
      return 'bg-warning text-warning-foreground hover:bg-warning/90'
    default:
      return ''
  }
})

function handleAction(e: MouseEvent) {
  if (props.loading || props.actionDisabled) {
    e.preventDefault()
    return
  }
  emit('action', e)
}

function handleCancel(e: MouseEvent) {
  emit('cancel', e)
}
</script>

<template>
  <AlertDialogRoot :open="internalOpen" @update:open="setOpen">
    <AlertDialogTrigger v-if="$slots.trigger" as-child>
      <slot name="trigger" />
    </AlertDialogTrigger>

    <AlertDialogPortal>
      <AlertDialogOverlay
        class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
      />
      <AlertDialogContent
        :class="
          cn(
            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
            props.class,
          )
        "
      >
        <div class="flex flex-col gap-2 text-center sm:text-left">
          <div
            v-if="$slots.icon || ResolvedIcon"
            :class="cn('bg-muted mb-2 flex size-10 items-center justify-center rounded-full', iconColorClass)"
          >
            <slot name="icon">
              <component :is="ResolvedIcon" v-if="ResolvedIcon" class="size-5" />
            </slot>
          </div>
          <AlertDialogTitle class="text-lg font-semibold">
            <slot name="title">{{ title }}</slot>
          </AlertDialogTitle>
          <AlertDialogDescription v-if="description || $slots.description" class="text-muted-foreground text-sm">
            <slot name="description">{{ description }}</slot>
          </AlertDialogDescription>
        </div>

        <div v-if="$slots.default" class="text-sm">
          <slot />
        </div>

        <div class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
          <slot name="actions">
            <AlertDialogCancel v-if="cancelLabel" as-child>
              <Button variant="outline" :disabled="loading" @click="handleCancel">
                {{ cancelLabel }}
              </Button>
            </AlertDialogCancel>
            <AlertDialogAction as-child>
              <Button
                :disabled="loading || actionDisabled"
                :aria-busy="loading"
                :class="actionToneClass"
                @click="handleAction"
              >
                <span
                  v-if="loading"
                  class="mr-2 inline-block size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent"
                  aria-hidden="true"
                />
                {{ actionLabel }}
              </Button>
            </AlertDialogAction>
          </slot>
        </div>
      </AlertDialogContent>
    </AlertDialogPortal>
  </AlertDialogRoot>
</template>

```

### `packages/registry-vue/components/alert-modal/index.ts`

```ts
export { default as AlertModal } from './AlertModal.vue'

```

## analytics-overview

- type: `registry:block`
- description: Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
- npm deps: `echarts`, `vue-echarts`
- registry deps: `raw-chart`

### `packages/registry-vue/blocks/analytics-overview/AnalyticsOverview.vue`

```vue
<script setup lang="ts">
// Two-pane analytics dashboard: a combo chart (stacked bars with a
// dot overlay on a dual y-axis) sits above an interactive drill-down
// line chart. Click a bar in the top pane to filter the bottom pane
// to that route. The block bakes in a realistic dummy dataset; swap
// `routes`, `partners`, and `drillSeries` with your own to repoint.
//
// Built on `RawChart` rather than `BarChart` because combo charts
// (bar + scatter + dual y-axes) sit outside the opinionated wrapper's
// single-series-type contract -- this is the documented escape hatch.
import { computed, ref } from 'vue'
import { use } from 'echarts/core'
import { BarChart as EBar, ScatterChart as EScatter, LineChart as ELine } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent, MarkLineComponent } from 'echarts/components'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
} from '@/components/ui/charts/useChartTheme'
import { RawChart } from '@/components/ui/charts'

use([EBar, EScatter, ELine, GridComponent, TooltipComponent, LegendComponent, MarkLineComponent])

// Each route declares the per-partner volume (stack segments) + the
// avg overlay value (dot on the right y-axis).
const partners = ['ALPHA', 'BETA', 'GAMMA', 'DELTA', 'EPSILON'] as const
type Partner = (typeof partners)[number]

interface Route {
  id: string
  label: string
  volumes: Record<Partner, number>
  overlay: number
}

const routes: Route[] = [
  {
    id: 'r1',
    label: 'NODE A → NODE B',
    volumes: { ALPHA: 90, BETA: 25, GAMMA: 18, DELTA: 12, EPSILON: 8 },
    overlay: 12,
  },
  {
    id: 'r2',
    label: 'NODE C → NODE D',
    volumes: { ALPHA: 4, BETA: 100, GAMMA: 14, DELTA: 12, EPSILON: 24 },
    overlay: 14.7,
  },
  {
    id: 'r3',
    label: 'NODE E → NODE F',
    volumes: { ALPHA: 14, BETA: 38, GAMMA: 18, DELTA: 32, EPSILON: 28 },
    overlay: 8,
  },
  { id: 'r4', label: 'NODE G → NODE H', volumes: { ALPHA: 130, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 0 }, overlay: 6 },
  { id: 'r5', label: 'NODE I → NODE J', volumes: { ALPHA: 0, BETA: 0, GAMMA: 60, DELTA: 0, EPSILON: 70 }, overlay: 17 },
  { id: 'r6', label: 'NODE K → NODE L', volumes: { ALPHA: 60, BETA: 50, GAMMA: 16, DELTA: 0, EPSILON: 0 }, overlay: 8 },
  { id: 'r7', label: 'NODE M → NODE N', volumes: { ALPHA: 70, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 0 }, overlay: 22 },
  { id: 'r8', label: 'NODE O → NODE P', volumes: { ALPHA: 0, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 110 }, overlay: 29 },
  { id: 'r9', label: 'NODE Q → NODE R', volumes: { ALPHA: 40, BETA: 0, GAMMA: 60, DELTA: 0, EPSILON: 0 }, overlay: 19 },
  {
    id: 'r10',
    label: 'NODE S → NODE T',
    volumes: { ALPHA: 60, BETA: 30, GAMMA: 0, DELTA: 0, EPSILON: 0 },
    overlay: 23,
  },
]

// Drill-down monthly series for a few partners. In a real app you'd
// fetch this per-route on selection; the dummy block shows the same
// shape regardless of which route is active.
const drillMonths = ['Mar 2026', 'Apr 2026', 'May 2026']
const drillSeries: Record<string, number[]> = {
  ALPHA: [22, 25, 20],
  GAMMA: [19, 17, 18],
  EPSILON: [-1, 29, -1], // sparse point — left out of line by NaN-like handling
}

const overviewMetric = ref<'overlay' | 'volume'>('overlay')
const activeRoute = ref<string | null>(null)
const drillView = ref<'Month' | 'Quarter'>('Month')

const overviewOption = computed(() => {
  const x = routes.map((r) => r.label)
  const stacks = partners.map((p, i) => ({
    name: p,
    type: 'bar' as const,
    stack: 'vol',
    barMaxWidth: 36,
    emphasis: { focus: 'series' as const },
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: routes.map((r) => r.volumes[p]),
  }))
  const overlay = {
    name: 'Avg metric',
    type: 'scatter' as const,
    yAxisIndex: 1,
    symbolSize: 12,
    itemStyle: { color: chartColors.value[2], borderColor: 'var(--background)', borderWidth: 2 },
    data: routes.map((r) => r.overlay),
  }

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: {
      top: 8,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { color: chartTextColor.value, fontSize: 11 },
    },
    grid: { left: 56, right: 56, top: 42, bottom: 72, containLabel: false },
    xAxis: {
      type: 'category' as const,
      data: x,
      axisLine: { lineStyle: { color: chartAxisColor.value } },
      axisLabel: {
        interval: 0,
        rotate: 35,
        fontSize: 10,
        color: chartTextColor.value,
        formatter: (val: string) => val.replace(' → ', '\n'),
      },
      axisTick: { show: false },
    },
    yAxis: [
      {
        type: 'value' as const,
        name: 'Volume',
        nameTextStyle: { color: chartTextColor.value, fontSize: 10 },
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 10 },
      },
      {
        type: 'value' as const,
        name: 'Metric',
        nameTextStyle: { color: chartTextColor.value, fontSize: 10 },
        splitLine: { show: false },
        axisLabel: { color: chartTextColor.value, fontSize: 10 },
      },
    ],
    series: [...stacks, overlay],
  }
})

const drillOption = computed(() => {
  const series = Object.entries(drillSeries).map(([name, values], i) => ({
    name,
    type: 'line' as const,
    smooth: true,
    symbolSize: 8,
    connectNulls: false,
    lineStyle: { width: 2, color: chartColors.value[i % chartColors.value.length] },
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: values.map((v) => (v < 0 ? null : v)),
  }))

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'axis',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: {
      top: 8,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { color: chartTextColor.value, fontSize: 11 },
    },
    grid: { left: 48, right: 24, top: 42, bottom: 48, containLabel: false },
    xAxis: {
      type: 'category' as const,
      data: drillMonths,
      boundaryGap: false,
      axisLine: { lineStyle: { color: chartAxisColor.value } },
      axisLabel: { color: chartTextColor.value, fontSize: 11 },
      axisTick: { show: false },
    },
    yAxis: {
      type: 'value' as const,
      splitLine: { lineStyle: { color: chartSplitLineColor.value } },
      axisLabel: { color: chartTextColor.value, fontSize: 11, formatter: (v: number) => `${v}d` },
    },
    series,
  }
})

const activeLabel = computed(() => routes.find((r) => r.id === activeRoute.value)?.label ?? null)

function onOverviewClick(params: any) {
  if (!params?.name) return
  const r = routes.find((rt) => rt.label === params.name)
  if (r) activeRoute.value = r.id
}

function resetDrill() {
  activeRoute.value = null
}
</script>

<template>
  <div class="space-y-6">
    <!-- Overview pane -->
    <section class="bg-card border-border rounded-lg border p-5">
      <div class="mb-3 flex items-start justify-between gap-4">
        <div>
          <h2 class="text-[15px] font-semibold tracking-tight text-[var(--accent-tint)]">Overview</h2>
          <p class="text-muted-foreground mt-1 text-xs">
            <span class="text-foreground font-medium">Metric</span> measures the avg performance signal aggregated per
            route.
          </p>
        </div>
        <div class="text-muted-foreground text-xs">
          <span>Performance Metric:</span>
          <select
            v-model="overviewMetric"
            class="border-border text-foreground ml-2 rounded-md border bg-transparent px-2 py-1 font-medium"
          >
            <option value="overlay">Avg metric</option>
            <option value="volume">Total volume</option>
          </select>
        </div>
      </div>
      <RawChart :option="overviewOption" height="320" @click="onOverviewClick" />
      <p class="text-muted-foreground mt-2 text-[11px]">Click a bar to drill into that route's monthly trend.</p>
    </section>

    <!-- Drill-down pane -->
    <section class="bg-card border-border rounded-lg border p-5">
      <div class="mb-3 flex items-center justify-between gap-4">
        <div class="flex items-center gap-3">
          <h3 class="text-[15px] font-semibold tracking-tight">
            <template v-if="activeLabel">
              <span class="text-muted-foreground font-normal">Drill-down:</span>
              <span class="text-foreground ml-1">{{ activeLabel }}</span>
            </template>
            <span v-else class="text-muted-foreground font-normal">Select a route above to drill in</span>
          </h3>
          <button
            v-if="activeRoute"
            type="button"
            class="border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-1 font-mono text-[11px] transition hover:border-[var(--accent-tint-soft)]"
            @click="resetDrill"
          >
            ← Back to Overview
          </button>
        </div>
        <div class="text-muted-foreground text-xs">
          <span>View By:</span>
          <select
            v-model="drillView"
            class="border-border text-foreground ml-2 rounded-md border bg-transparent px-2 py-1 font-medium"
          >
            <option value="Month">Month</option>
            <option value="Quarter">Quarter</option>
          </select>
        </div>
      </div>
      <RawChart v-if="activeRoute" :option="drillOption" height="280" />
      <div
        v-else
        class="text-muted-foreground border-border grid h-[260px] place-items-center rounded-md border border-dashed text-xs"
      >
        No route selected. Click a bar above.
      </div>
    </section>
  </div>
</template>

```

## anchor

- type: `registry:ui`
- description: In-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.

### `packages/registry-vue/components/anchor/Anchor.vue`

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import type { AnchorItem } from '.'
import { ANCHOR_INJECTION_KEY } from './context'
import AnchorLink from './AnchorLink.vue'

const props = withDefaults(
  defineProps<{
    items?: AnchorItem[]
    offsetTop?: number
    bounds?: number
    scrollContainer?: HTMLElement | string | null
    affix?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    items: () => [],
    offsetTop: 0,
    bounds: 5,
    scrollContainer: null,
    affix: false,
  },
)

const emits = defineEmits<{
  (e: 'change', href: string): void
}>()

const activeHref = ref<string | null>(null)
const registered = ref<Set<string>>(new Set())
const resolvedContainer = ref<HTMLElement | Window>(typeof window !== 'undefined' ? window : (null as any))

function resolveContainer(): HTMLElement | Window {
  if (!props.scrollContainer) return window
  if (typeof props.scrollContainer === 'string') {
    return (document.querySelector(props.scrollContainer) as HTMLElement) ?? window
  }
  return props.scrollContainer
}

let observer: IntersectionObserver | null = null
const observed = new Map<string, Element>()

function rebuildObserver() {
  if (observer) {
    observer.disconnect()
    observed.clear()
  }
  const root = resolvedContainer.value === window ? null : (resolvedContainer.value as HTMLElement)
  observer = new IntersectionObserver(
    (entries) => {
      const intersecting = entries.filter((e) => e.isIntersecting)
      if (intersecting.length === 0) return
      intersecting.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
      const id = '#' + intersecting[0]!.target.id
      if (id !== activeHref.value) {
        activeHref.value = id
        emits('change', id)
      }
    },
    {
      root,
      rootMargin: `-${props.offsetTop}px 0px -60% 0px`,
      threshold: [0, 1],
    },
  )
  for (const href of registered.value) {
    const el = document.querySelector(href)
    if (el) {
      observed.set(href, el)
      observer.observe(el)
    }
  }
}

function setActive(href: string) {
  activeHref.value = href
  emits('change', href)
}

function register(href: string) {
  registered.value.add(href)
  if (!observer) return
  const el = document.querySelector(href)
  if (el && !observed.has(href)) {
    observed.set(href, el)
    observer.observe(el)
  }
}

function unregister(href: string) {
  registered.value.delete(href)
  const el = observed.get(href)
  if (el && observer) observer.unobserve(el)
  observed.delete(href)
}

provide(ANCHOR_INJECTION_KEY, {
  activeHref,
  setActive,
  register,
  unregister,
  scrollContainer: resolvedContainer,
  offsetTop: toRef(props, 'offsetTop'),
})

onMounted(() => {
  resolvedContainer.value = resolveContainer()
  rebuildObserver()
})

onBeforeUnmount(() => {
  observer?.disconnect()
  observer = null
})

watch(
  () => props.scrollContainer,
  () => {
    resolvedContainer.value = resolveContainer()
    rebuildObserver()
  },
)
</script>

<template>
  <nav
    data-uipkge
    data-slot="anchor"
    aria-label="Table of contents"
    :class="cn('border-border flex flex-col gap-1 border-l text-sm', affix && 'sticky', props.class)"
    :style="affix ? { top: `${offsetTop}px` } : undefined"
  >
    <template v-if="items.length">
      <AnchorLink v-for="item in items" :key="item.href" :href="item.href" :title="item.title">
        <AnchorLink v-for="child in item.children ?? []" :key="child.href" :href="child.href" :title="child.title" />
      </AnchorLink>
    </template>
    <slot v-else />
  </nav>
</template>

```

### `packages/registry-vue/components/anchor/AnchorLink.vue`

```vue
<script setup lang="ts">
import { computed, inject, onBeforeUnmount, onMounted, useSlots } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { ANCHOR_INJECTION_KEY } from './context'

const props = defineProps<{
  href: string
  title: string
  class?: HTMLAttributes['class']
}>()

const _maybeCtx = inject(ANCHOR_INJECTION_KEY, null)
if (!_maybeCtx) throw new Error('AnchorLink must be used inside <Anchor>.')
const ctx: NonNullable<typeof _maybeCtx> = _maybeCtx

const isActive = computed(() => ctx.activeHref.value === props.href)
const slots = useSlots()

onMounted(() => ctx.register(props.href))
onBeforeUnmount(() => ctx.unregister(props.href))

function onClick(e: MouseEvent) {
  e.preventDefault()
  const el = document.querySelector(props.href) as HTMLElement | null
  if (!el) return
  const offset = ctx.offsetTop.value
  const container = ctx.scrollContainer.value
  const smooth = !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  const behavior: ScrollBehavior = smooth ? 'smooth' : 'auto'
  if (container === window) {
    const top = el.getBoundingClientRect().top + window.scrollY - offset
    window.scrollTo({ top, behavior })
  } else {
    const c = container as HTMLElement
    const top = el.getBoundingClientRect().top - c.getBoundingClientRect().top + c.scrollTop - offset
    c.scrollTo({ top, behavior })
  }
  history.replaceState(null, '', props.href)
  ctx.setActive(props.href)
}
</script>

<template>
  <div data-uipkge data-slot="anchor-link" class="flex flex-col">
    <a
      :href="href"
      :aria-current="isActive ? 'location' : undefined"
      :class="
        cn(
          'text-muted-foreground -ml-px block border-l-2 border-transparent py-2 pl-3 transition-colors',
          'hover:text-foreground',
          'focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
          isActive && 'border-primary text-foreground font-medium',
          props.class,
        )
      "
      @click="onClick"
    >
      {{ title }}
    </a>
    <div v-if="slots.default" class="ml-3">
      <slot />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/anchor/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'

export interface AnchorContext {
  activeHref: Ref<string | null>
  setActive: (href: string) => void
  register: (href: string) => void
  unregister: (href: string) => void
  scrollContainer: Ref<HTMLElement | Window>
  offsetTop: Ref<number>
}

export const ANCHOR_INJECTION_KEY: InjectionKey<AnchorContext> = Symbol('uipkge-anchor')

```

### `packages/registry-vue/components/anchor/index.ts`

```ts
export interface AnchorItem {
  href: string
  title: string
  children?: AnchorItem[]
}

export { default as Anchor } from './Anchor.vue'
export { default as AnchorLink } from './AnchorLink.vue'

```

## area-chart

- type: `registry:ui`
- description: Filled-area line chart wrapper around Apache ECharts. Multi-series, stacked, gradient, and stepped variants. Theme-aware via registry tokens (--chart-1..5, --muted-foreground, --border).
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/area-chart/AreaChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart as EChartsLineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsLineChart, GridComponent, TooltipComponent, LegendComponent])

interface Props {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  xField: 'x',
  yField: 'y',
  height: 300,
})

const mergedOption = computed(() => {
  const fields = Array.isArray(props.yField) ? props.yField : [props.yField]
  const xData = props.data.map((d) => d[props.xField!])

  const series = fields.map((field, i) => ({
    name: field,
    type: 'line',
    smooth: true,
    symbol: 'none',
    areaStyle: { opacity: 0.15 },
    lineStyle: { width: 2 },
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: props.data.map((d) => d[field]),
  }))

  // Deep-merge `series[i]` from `option` so consumers can pass partial
  // overrides (e.g. `series: [{ stack: 'r' }, ...]`) without clobbering the
  // computed `type`/`data`. Top-level option blocks (xAxis, yAxis, grid,
  // tooltip, legend) go through `mergeOptionBlock` so overrides like
  // `xAxis: { axisLabel: { fontSize: 9 } }` only replace the axisLabel
  // inner fields they touch, not the whole axisLabel (and never the data).
  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    legend: userLegend,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  // Single-series charts hide the legend explicitly so ECharts' default
  // doesn't dump the y-field name (e.g. "y") onto the chart canvas.
  const baseLegend: any =
    fields.length > 1
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : { show: false }

  return {
    color: chartColors.value,
    grid: mergeOptionBlock(
      { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
      userGrid,
    ),
    tooltip: mergeOptionBlock(
      {
        trigger: 'axis',
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend, userLegend),
    xAxis: mergeOptionBlock(
      {
        type: 'category',
        data: xData,
        axisLine: { lineStyle: { color: chartAxisColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisTick: { show: false },
      },
      userXAxis,
    ),
    yAxis: mergeOptionBlock(
      {
        type: 'value',
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      userYAxis,
    ),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/area-chart/index.ts`

```ts
export { default as AreaChart } from './AreaChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## aspect-ratio

- type: `registry:ui`
- description: Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.
- npm deps: `reka-ui`

### `packages/registry-vue/components/aspect-ratio/AspectRatio.vue`

```vue
<script setup lang="ts">
import type { AspectRatioProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { AspectRatio } from 'reka-ui'

// CLAUDE.md mandate: bare `defineProps<RekaUiX>()` can bail under Vue 3.5+
// because reka-ui has no exports.types. The intersection form delegates
// type extraction to TS via the installed typescript package.
const props = defineProps<AspectRatioProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <AspectRatio v-slot="slotProps" data-uipkge data-slot="aspect-ratio" v-bind="props">
    <slot v-bind="slotProps" />
  </AspectRatio>
</template>

```

### `packages/registry-vue/components/aspect-ratio/index.ts`

```ts
export { default as AspectRatio } from './AspectRatio.vue'

```

## auth-mfa

- type: `registry:block`
- description: Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.
- npm deps: `lucide-vue-next`
- registry deps: `card`, `button`, `pin-input`

### `packages/registry-vue/blocks/auth-mfa/AuthMfa.vue`

```vue
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ShieldCheck, RotateCw } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input'

const props = withDefaults(
  defineProps<{
    title?: string
    description?: string
    continueHref?: string
    recoveryHref?: string
    demoCode?: string
  }>(),
  {
    title: 'Two-step verification',
    description: 'Enter the 6-digit code from your authenticator app.',
    continueHref: '/',
    recoveryHref: '#',
    demoCode: '123456',
  },
)

const emit = defineEmits<{
  (e: 'verify', code: string): void
  (e: 'resend'): void
  (e: 'continue'): void
}>()

const code = ref<string[]>([])
const verifying = ref(false)
const verified = ref(false)
const error = ref('')
const resendIn = ref(0)

const joined = computed(() => code.value.join(''))

watch(joined, (val) => {
  if (val.length === 6) {
    error.value = ''
    verifying.value = true
    emit('verify', val)
    setTimeout(() => {
      verifying.value = false
      if (val === props.demoCode) verified.value = true
      else {
        error.value = `Invalid code. Try ${props.demoCode} for the demo.`
        code.value = []
      }
    }, 700)
  }
})

function startResendCooldown() {
  resendIn.value = 30
  emit('resend')
  const t = setInterval(() => {
    resendIn.value -= 1
    if (resendIn.value <= 0) clearInterval(t)
  }, 1000)
}
</script>

<template>
  <div class="bg-background flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <template v-if="!verified">
        <CardHeader class="text-center">
          <div class="bg-primary/10 text-primary mx-auto mb-2 flex size-12 items-center justify-center rounded-full">
            <ShieldCheck class="size-6" />
          </div>
          <CardTitle class="text-2xl">{{ title }}</CardTitle>
          <CardDescription>{{ description }}</CardDescription>
        </CardHeader>
        <CardContent class="space-y-4">
          <div class="flex justify-center">
            <PinInput v-model="code" otp :disabled="verifying">
              <PinInputGroup>
                <PinInputSlot v-for="i in 6" :key="i" :index="i - 1" />
              </PinInputGroup>
            </PinInput>
          </div>
          <p v-if="verifying" class="text-muted-foreground text-center text-sm">Verifying…</p>
          <p v-if="error" class="text-destructive text-center text-sm">{{ error }}</p>
          <div class="text-center">
            <button
              v-if="resendIn === 0"
              type="button"
              class="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs underline-offset-4 hover:underline"
              @click="startResendCooldown"
            >
              <RotateCw class="size-3" />Resend code
            </button>
            <p v-else class="text-muted-foreground text-xs">Resend available in {{ resendIn }}s</p>
          </div>
        </CardContent>
        <CardFooter class="justify-center">
          <p class="text-muted-foreground text-xs">
            Lost your device?
            <a :href="recoveryHref" class="text-foreground underline-offset-4 hover:underline">Use a recovery code</a>
          </p>
        </CardFooter>
      </template>

      <template v-else>
        <CardContent class="space-y-4 pt-6 text-center">
          <div class="bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full">
            <ShieldCheck class="size-6" />
          </div>
          <div class="space-y-1">
            <h3 class="text-lg font-semibold">Verified</h3>
            <p class="text-muted-foreground text-sm">You're all set. Continuing to your dashboard…</p>
          </div>
          <a :href="continueHref" @click="emit('continue')"><Button class="w-full">Continue</Button></a>
        </CardContent>
      </template>
    </Card>
  </div>
</template>

```

## auth-password-reset

- type: `registry:block`
- description: Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.
- npm deps: `lucide-vue-next`
- registry deps: `card`, `input`, `label`, `button`

### `packages/registry-vue/blocks/auth-password-reset/AuthPasswordReset.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ArrowLeft, MailCheck } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

withDefaults(
  defineProps<{
    signInHref?: string
  }>(),
  { signInHref: '/login' },
)

const emit = defineEmits<{
  (e: 'request', email: string): void
  (e: 'reset', password: string): void
}>()

type Stage = 'request' | 'sent' | 'reset' | 'done'
const stage = ref<Stage>('request')

const email = ref('')
const password = ref('')
const confirm = ref('')
const passwordsMatch = computed(() => !confirm.value || password.value === confirm.value)

function submitRequest() {
  if (!email.value) return
  emit('request', email.value)
  stage.value = 'sent'
}

function submitReset() {
  if (!password.value || !passwordsMatch.value) return
  emit('reset', password.value)
  stage.value = 'done'
}
</script>

<template>
  <div class="bg-background flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <template v-if="stage === 'request'">
        <CardHeader class="text-center">
          <CardTitle class="text-2xl">Forgot password?</CardTitle>
          <CardDescription>Enter your email and we'll send you a reset link.</CardDescription>
        </CardHeader>
        <CardContent>
          <form class="space-y-4" @submit.prevent="submitRequest">
            <div class="grid gap-2">
              <Label for="reset-email">Email</Label>
              <Input id="reset-email" v-model="email" type="email" placeholder="you@company.com" required />
            </div>
            <Button type="submit" class="w-full">Send reset link</Button>
          </form>
        </CardContent>
        <CardFooter class="justify-center">
          <a
            :href="signInHref"
            class="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm"
          >
            <ArrowLeft class="size-3" />Back to sign in
          </a>
        </CardFooter>
      </template>

      <template v-else-if="stage === 'sent'">
        <CardContent class="space-y-4 pt-6 text-center">
          <div class="bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full">
            <MailCheck class="size-6" />
          </div>
          <div class="space-y-1">
            <h3 class="text-lg font-semibold">Check your inbox</h3>
            <p class="text-muted-foreground text-sm">
              We've sent a reset link to <span class="text-foreground font-medium">{{ email }}</span
              >.
            </p>
          </div>
          <Button variant="outline" class="w-full" @click="stage = 'reset'">Open reset form (demo)</Button>
          <button
            class="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
            @click="stage = 'request'"
          >
            Wrong email?
          </button>
        </CardContent>
      </template>

      <template v-else-if="stage === 'reset'">
        <CardHeader class="text-center">
          <CardTitle class="text-2xl">Set new password</CardTitle>
          <CardDescription>Pick a strong password you haven't used before.</CardDescription>
        </CardHeader>
        <CardContent>
          <form class="space-y-4" @submit.prevent="submitReset">
            <div class="grid gap-2">
              <Label for="reset-pw">New password</Label>
              <Input id="reset-pw" v-model="password" type="password" autocomplete="new-password" required />
            </div>
            <div class="grid gap-2">
              <Label for="reset-confirm">Confirm password</Label>
              <Input
                id="reset-confirm"
                v-model="confirm"
                type="password"
                autocomplete="new-password"
                :aria-invalid="!passwordsMatch"
                required
              />
              <p v-if="!passwordsMatch" class="text-destructive text-xs">Passwords don't match.</p>
            </div>
            <Button type="submit" class="w-full">Reset password</Button>
          </form>
        </CardContent>
      </template>

      <template v-else>
        <CardContent class="space-y-4 pt-6 text-center">
          <div class="bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full">
            <MailCheck class="size-6" />
          </div>
          <div class="space-y-1">
            <h3 class="text-lg font-semibold">All set</h3>
            <p class="text-muted-foreground text-sm">
              Your password has been updated. You can now sign in with the new password.
            </p>
          </div>
          <a :href="signInHref"><Button class="w-full">Continue to sign in</Button></a>
        </CardContent>
      </template>
    </Card>
  </div>
</template>

```

## auth-sign-in

- type: `registry:block`
- description: Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.
- npm deps: `lucide-vue-next`
- registry deps: `card`, `input`, `label`, `button`, `checkbox`, `separator`

### `packages/registry-vue/blocks/auth-sign-in/AuthSignIn.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Github, Chrome } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

withDefaults(
  defineProps<{
    title?: string
    description?: string
    signUpHref?: string
    forgotPasswordHref?: string
    oauthProviders?: Array<'github' | 'google'>
  }>(),
  {
    title: 'Welcome back',
    description: 'Sign in to your account to continue',
    signUpHref: '/sign-up',
    forgotPasswordHref: '/forgot-password',
    oauthProviders: () => ['github', 'google'],
  },
)

const emit = defineEmits<{
  (e: 'submit', payload: { email: string; password: string; remember: boolean }): void
  (e: 'oauth', provider: 'github' | 'google'): void
}>()

const email = ref('')
const password = ref('')
const remember = ref(false)

function onSubmit() {
  emit('submit', { email: email.value, password: password.value, remember: remember.value })
}
</script>

<template>
  <div class="bg-background flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <CardHeader class="text-center">
        <CardTitle class="text-2xl">{{ title }}</CardTitle>
        <CardDescription>{{ description }}</CardDescription>
      </CardHeader>
      <CardContent>
        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="grid gap-2">
            <Label for="email">Email</Label>
            <Input
              id="email"
              v-model="email"
              type="email"
              placeholder="you@company.com"
              autocomplete="email"
              required
            />
          </div>
          <div class="grid gap-2">
            <div class="flex items-center justify-between">
              <Label for="password">Password</Label>
              <a
                :href="forgotPasswordHref"
                class="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
              >
                Forgot password?
              </a>
            </div>
            <Input id="password" v-model="password" type="password" autocomplete="current-password" required />
          </div>
          <div class="flex items-center gap-2">
            <Checkbox id="remember" v-model="remember" />
            <Label for="remember" class="text-sm font-normal">Remember me for 30 days</Label>
          </div>
          <Button type="submit" class="w-full">Sign in</Button>
        </form>

        <template v-if="oauthProviders.length > 0">
          <div class="my-6 flex items-center gap-3">
            <Separator class="flex-1" />
            <span class="text-muted-foreground text-xs uppercase">or continue with</span>
            <Separator class="flex-1" />
          </div>
          <div class="grid gap-2" :class="oauthProviders.length > 1 ? 'sm:grid-cols-2' : ''">
            <Button
              v-if="oauthProviders.includes('github')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'github')"
            >
              <Github class="mr-2 size-4" />GitHub
            </Button>
            <Button
              v-if="oauthProviders.includes('google')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'google')"
            >
              <Chrome class="mr-2 size-4" />Google
            </Button>
          </div>
        </template>
      </CardContent>
      <CardFooter class="justify-center">
        <p class="text-muted-foreground text-sm">
          Don't have an account?
          <a :href="signUpHref" class="text-foreground font-medium underline-offset-4 hover:underline">Sign up</a>
        </p>
      </CardFooter>
    </Card>
  </div>
</template>

```

## auth-sign-up

- type: `registry:block`
- description: Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.
- npm deps: `lucide-vue-next`
- registry deps: `card`, `input`, `label`, `button`, `checkbox`, `separator`

### `packages/registry-vue/blocks/auth-sign-up/AuthSignUp.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Github, Chrome } from 'lucide-vue-next'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

withDefaults(
  defineProps<{
    title?: string
    description?: string
    signInHref?: string
    termsHref?: string
    privacyHref?: string
    oauthProviders?: Array<'github' | 'google'>
  }>(),
  {
    title: 'Create your account',
    description: 'Start your 14-day free trial. No credit card required.',
    signInHref: '/login',
    termsHref: '#',
    privacyHref: '#',
    oauthProviders: () => ['github', 'google'],
  },
)

const emit = defineEmits<{
  (e: 'submit', payload: { name: string; email: string; password: string }): void
  (e: 'oauth', provider: 'github' | 'google'): void
}>()

const name = ref('')
const email = ref('')
const password = ref('')
const confirm = ref('')
const accept = ref(false)

const passwordsMatch = computed(() => !confirm.value || password.value === confirm.value)
const canSubmit = computed(() => name.value && email.value && password.value && passwordsMatch.value && accept.value)

function onSubmit() {
  if (!canSubmit.value) return
  emit('submit', { name: name.value, email: email.value, password: password.value })
}
</script>

<template>
  <div class="bg-background flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-md">
      <CardHeader class="text-center">
        <CardTitle class="text-2xl">{{ title }}</CardTitle>
        <CardDescription>{{ description }}</CardDescription>
      </CardHeader>
      <CardContent>
        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="grid gap-2">
            <Label for="signup-name">Full name</Label>
            <Input id="signup-name" v-model="name" autocomplete="name" required />
          </div>
          <div class="grid gap-2">
            <Label for="signup-email">Email</Label>
            <Input
              id="signup-email"
              v-model="email"
              type="email"
              placeholder="you@company.com"
              autocomplete="email"
              required
            />
          </div>
          <div class="grid gap-2">
            <Label for="signup-password">Password</Label>
            <Input id="signup-password" v-model="password" type="password" autocomplete="new-password" required />
            <p class="text-muted-foreground text-xs">8+ characters, mix of letters, numbers and symbols.</p>
          </div>
          <div class="grid gap-2">
            <Label for="signup-confirm">Confirm password</Label>
            <Input
              id="signup-confirm"
              v-model="confirm"
              type="password"
              autocomplete="new-password"
              :aria-invalid="!passwordsMatch"
              required
            />
            <p v-if="!passwordsMatch" class="text-destructive text-xs">Passwords don't match.</p>
          </div>
          <div class="flex items-start gap-2">
            <Checkbox id="signup-accept" v-model="accept" />
            <Label for="signup-accept" class="text-sm leading-snug font-normal">
              I agree to the
              <a :href="termsHref" class="text-foreground underline-offset-4 hover:underline">Terms of Service</a>
              and
              <a :href="privacyHref" class="text-foreground underline-offset-4 hover:underline">Privacy Policy</a>.
            </Label>
          </div>
          <Button type="submit" class="w-full" :disabled="!canSubmit">Create account</Button>
        </form>

        <template v-if="oauthProviders.length > 0">
          <div class="my-6 flex items-center gap-3">
            <Separator class="flex-1" />
            <span class="text-muted-foreground text-xs uppercase">or continue with</span>
            <Separator class="flex-1" />
          </div>
          <div class="grid gap-2" :class="oauthProviders.length > 1 ? 'sm:grid-cols-2' : ''">
            <Button
              v-if="oauthProviders.includes('github')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'github')"
            >
              <Github class="mr-2 size-4" />GitHub
            </Button>
            <Button
              v-if="oauthProviders.includes('google')"
              variant="outline"
              type="button"
              @click="emit('oauth', 'google')"
            >
              <Chrome class="mr-2 size-4" />Google
            </Button>
          </div>
        </template>
      </CardContent>
      <CardFooter class="justify-center">
        <p class="text-muted-foreground text-sm">
          Already have an account?
          <a :href="signInHref" class="text-foreground font-medium underline-offset-4 hover:underline">Sign in</a>
        </p>
      </CardFooter>
    </Card>
  </div>
</template>

```

## avatar

- type: `registry:ui`
- description: Round or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/avatar/Avatar.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { avatarVariants } from './avatar.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// `AvatarVariants['size']` etc. indexed-access types.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
    rounded?: 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
    color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'
    variant?: 'default' | 'outlined' | 'soft'
    tile?: boolean
    disabled?: boolean
    loading?: boolean
  }>(),
  {
    tile: false,
    disabled: false,
    loading: false,
  },
)

const emit = defineEmits<{
  click: [event: MouseEvent]
  error: [event: Event]
  load: [event: Event]
}>()

function handleClick(event: MouseEvent) {
  if (!props.disabled) {
    emit('click', event)
  }
}

function handleError(event: Event) {
  emit('error', event)
}

function handleLoad(event: Event) {
  emit('load', event)
}

const rootClasses = computed(() =>
  cn(
    avatarVariants({ size: props.size, rounded: props.rounded, color: props.color, variant: props.variant }),
    props.tile ? 'rounded-none' : '',
    props.disabled ? 'opacity-50 cursor-not-allowed' : '',
    props.loading ? 'animate-pulse' : '',
    props.class,
  ),
)
</script>

<template>
  <span :class="rootClasses" data-uipkge data-slot="avatar" @click="handleClick">
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/avatar/AvatarFallback.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { avatarFallbackVariants } from './avatar.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// indexed-access types.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
    color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'
    text?: string
  }>(),
  {
    size: 'default',
    color: 'default',
  },
)

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

function handleClick(event: MouseEvent) {
  emit('click', event)
}

const rootClasses = computed(() => cn(avatarFallbackVariants({ size: props.size, color: props.color }), props.class))
</script>

<template>
  <span :class="rootClasses" data-uipkge data-slot="avatar-fallback" @click="handleClick">
    <template v-if="text">{{ text }}</template>
    <slot v-else />
  </span>
</template>

```

### `packages/registry-vue/components/avatar/AvatarGroup.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export interface AvatarGroupProps {
  class?: HTMLAttributes['class']
  max?: number
  overlap?: boolean
  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
  total?: number
}

const props = withDefaults(defineProps<AvatarGroupProps>(), {
  overlap: true,
  size: 'default',
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

function handleClick(event: MouseEvent) {
  emit('click', event)
}
</script>

<template>
  <div
    :class="cn('flex items-center', overlap ? '-space-x-2' : 'gap-1', props.class)"
    data-uipkge
    data-slot="avatar-group"
    @click="handleClick"
  >
    <slot :max="max" :size="size" />
    <template v-if="max && ($slots.default?.()?.length || 0) > max">
      <div
        :class="
          cn(
            'bg-muted ring-background relative flex shrink-0 overflow-hidden rounded-full ring-2',
            size === 'xs'
              ? 'size-4 text-[8px]'
              : size === 'sm'
                ? 'size-6 text-xs'
                : size === 'default'
                  ? 'size-8 text-sm'
                  : size === 'lg'
                    ? 'size-12 text-base'
                    : size === 'xl'
                      ? 'size-16 text-lg'
                      : 'size-20 text-xl',
          )
        "
      >
        <slot name="overflow" :count="($slots.default?.()?.length || 0) - max + 1" />
        <span v-if="!$slots['overflow']" class="flex size-full items-center justify-center font-medium">
          +{{ ($slots.default?.()?.length || 0) - max + 1 }}
        </span>
      </div>
    </template>
  </div>
</template>

```

### `packages/registry-vue/components/avatar/AvatarImage.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { ref, watch } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    src?: string
    alt?: string
    fallback?: string
    loading?: 'eager' | 'lazy'
    referrerpolicy?:
      | 'no-referrer'
      | 'no-referrer-when-downgrade'
      | 'origin'
      | 'origin-when-cross-origin'
      | 'same-origin'
      | 'strict-origin'
      | 'strict-origin-when-cross-origin'
      | 'unsafe-url'
      | ''
    crossorigin?: 'anonymous' | 'use-credentials'
    onerror?: (event: Event) => void
    onload?: (event: Event) => void
  }>(),
  {
    loading: 'lazy',
  },
)

const emit = defineEmits<{
  error: [event: Event]
  load: [event: Event]
}>()

// Track <img> failures so a broken URL falls back to the slot
// (consumer renders AvatarFallback there). Without this, an HTTP 404
// leaves the broken-image glyph forever, which contradicts the docs
// promise that AvatarFallback shows when the image fails.
const errored = ref(false)
watch(
  () => props.src,
  () => {
    errored.value = false
  },
)

function handleError(event: Event) {
  errored.value = true
  emit('error', event)
  if (props.onerror) {
    props.onerror(event)
  }
}

function handleLoad(event: Event) {
  emit('load', event)
  if (props.onload) {
    props.onload(event)
  }
}
</script>

<template>
  <img
    v-if="src && !errored"
    :src="src"
    :alt="alt"
    :loading="loading"
    :referrerpolicy="referrerpolicy"
    :crossorigin="crossorigin"
    :class="cn('aspect-square size-full object-cover', props.class)"
    data-uipkge
    data-slot="avatar-image"
    @error="handleError"
    @load="handleLoad"
  />
  <slot v-else />
</template>

```

### `packages/registry-vue/components/avatar/avatar.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts` or inline in the SFC) so `Avatar.vue` / `AvatarFallback.vue`
 * can `import { avatarVariants } from './avatar.variants'` without
 * creating a circular dependency back through the index. The circular
 * form caused intermittent `$setup.avatarVariants is not a function`
 * errors during dev SSR.
 */
export const avatarVariants = cva('relative flex shrink-0 overflow-hidden', {
  variants: {
    size: {
      xs: 'size-4',
      sm: 'size-6',
      default: 'size-8',
      lg: 'size-12',
      xl: 'size-16',
      '2xl': 'size-20',
    },
    rounded: {
      none: 'rounded-none',
      sm: 'rounded-sm',
      default: 'rounded-full',
      md: 'rounded-md',
      lg: 'rounded-lg',
      xl: 'rounded-xl',
      '2xl': 'rounded-2xl',
      '3xl': 'rounded-3xl',
      full: 'rounded-full',
    },
    color: {
      default: '',
      primary: 'bg-primary text-primary-foreground',
      secondary: 'bg-secondary text-secondary-foreground',
      destructive: 'bg-destructive text-destructive-foreground',
      success: 'bg-[var(--success)] text-white dark:text-black',
      warning: 'bg-[var(--warning)] text-black',
      info: 'bg-[var(--info)] text-white dark:text-black',
      error: 'bg-destructive text-white dark:text-black',
      muted: 'bg-muted text-muted-foreground',
    },
    variant: {
      default: '',
      outlined: 'border-2 border-current',
      soft: 'bg-opacity-20',
    },
  },
  compoundVariants: [
    { color: 'primary', variant: 'soft', class: 'bg-primary/20 text-primary' },
    { color: 'secondary', variant: 'soft', class: 'bg-secondary/20 text-secondary-foreground' },
    { color: 'destructive', variant: 'soft', class: 'bg-destructive/20 text-destructive' },
    { color: 'success', variant: 'soft', class: 'bg-[var(--success)]/20 text-[var(--success)]' },
    { color: 'warning', variant: 'soft', class: 'bg-[var(--warning)]/20 text-[var(--warning)]' },
    { color: 'info', variant: 'soft', class: 'bg-[var(--info)]/20 text-[var(--info)]' },
    { color: 'error', variant: 'soft', class: 'bg-destructive/20 text-destructive' },
  ],
  defaultVariants: {
    size: 'default',
    rounded: 'default',
    color: 'default',
  },
})

export type AvatarVariants = VariantProps<typeof avatarVariants>

export const avatarFallbackVariants = cva(
  'flex size-full items-center justify-center rounded-full bg-muted font-medium',
  {
    variants: {
      size: {
        xs: 'text-[8px]',
        sm: 'text-xs',
        default: 'text-sm',
        lg: 'text-base',
        xl: 'text-lg',
        '2xl': 'text-xl',
      },
      color: {
        default: '',
        primary: 'bg-primary text-primary-foreground',
        secondary: 'bg-secondary text-secondary-foreground',
        destructive: 'bg-destructive text-destructive-foreground',
        success: 'bg-[var(--success)] text-white dark:text-black',
        warning: 'bg-[var(--warning)] text-black',
        info: 'bg-[var(--info)] text-white dark:text-black',
        error: 'bg-destructive text-white dark:text-black',
        muted: 'bg-muted text-muted-foreground',
      },
    },
    defaultVariants: {
      size: 'default',
      color: 'default',
    },
  },
)

export type AvatarFallbackVariants = VariantProps<typeof avatarFallbackVariants>

```

### `packages/registry-vue/components/avatar/index.ts`

```ts
export { default as Avatar } from './Avatar.vue'
export { default as AvatarFallback } from './AvatarFallback.vue'
export { default as AvatarImage } from './AvatarImage.vue'
export { default as AvatarGroup } from './AvatarGroup.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Avatar.vue <-> index.ts circular import that broke dev SSR).
export {
  avatarVariants,
  avatarFallbackVariants,
  type AvatarVariants,
  type AvatarFallbackVariants,
} from './avatar.variants'

```

## back-top

- type: `registry:ui`
- description: Scroll-to-top floating button. Appears after the target container scrolls past a threshold and smooth-scrolls back on click. Supports custom target container, visibility threshold, scroll behavior, custom icon slot, four edge anchors, size variants, and edge offset.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/back-top/BackTop.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ArrowUp } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { backTopVariants } from './back-top.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `BackTopVariants['size']` / `BackTopVariants['position']`.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    /** Visibility threshold in pixels. Button appears once scroll passes it. */
    threshold?: number
    /** Target container. Defaults to the window. Pass a CSS selector or an HTMLElement. */
    target?: string | HTMLElement | Window
    /** Scroll behavior: 'smooth' or 'auto' (instant). */
    behavior?: ScrollBehavior
    /** Size variant. */
    size?: 'sm' | 'default' | 'lg'
    /** Edge anchor position. */
    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
    /** Distance from the viewport edge (px). */
    offset?: number
    /** Use absolute positioning (for section-level containers) instead of fixed (viewport). */
    absolute?: boolean
    /** Accessible label. */
    ariaLabel?: string
  }>(),
  {
    threshold: 200,
    target: () => (typeof window !== 'undefined' ? window : undefined),
    behavior: 'smooth',
    size: 'default',
    position: 'bottom-right',
    offset: 24,
    absolute: false,
    ariaLabel: 'Scroll to top',
  },
)

const emit = defineEmits<{
  visible: [value: boolean]
  click: [event: MouseEvent]
}>()

const visible = ref(false)

function resolveTarget(): HTMLElement | Window | null {
  if (typeof window === 'undefined') return null
  if (props.target === undefined || props.target === null) return window
  if (typeof props.target === 'string') {
    const el = document.querySelector<HTMLElement>(props.target)
    return el ?? window
  }
  return props.target
}

function getScrollTop(el: HTMLElement | Window): number {
  if (el === window) {
    return window.scrollY ?? document.documentElement.scrollTop ?? document.body.scrollTop ?? 0
  }
  return (el as HTMLElement).scrollTop
}

function scrollToTop(el: HTMLElement | Window) {
  if (el === window) {
    window.scrollTo({ top: 0, behavior: props.behavior })
  } else {
    ;(el as HTMLElement).scrollTo({ top: 0, behavior: props.behavior })
  }
}

let currentTarget: HTMLElement | Window | null = null

function handleScroll() {
  if (!currentTarget) return
  const scrollTop = getScrollTop(currentTarget)
  const next = scrollTop > props.threshold
  if (next !== visible.value) {
    visible.value = next
    emit('visible', next)
  }
}

function handleClick(e: MouseEvent) {
  emit('click', e)
  if (currentTarget) scrollToTop(currentTarget)
}

const positionStyle = computed(() => {
  const o = `${props.offset}px`
  switch (props.position) {
    case 'bottom-left':
      return { left: o, bottom: o }
    case 'top-right':
      return { right: o, top: o }
    case 'top-left':
      return { left: o, top: o }
    default:
      return { right: o, bottom: o }
  }
})

onMounted(() => {
  currentTarget = resolveTarget()
  if (!currentTarget) return
  const listenEl: HTMLElement | Window = currentTarget
  listenEl.addEventListener('scroll', handleScroll, { passive: true })
  // If target is a container, also listen to window scroll for safety on resize.
  if (currentTarget !== window) {
    window.addEventListener('scroll', handleScroll, { passive: true })
  }
  handleScroll()
})

onBeforeUnmount(() => {
  if (currentTarget) {
    currentTarget.removeEventListener('scroll', handleScroll)
    if (currentTarget !== window) {
      window.removeEventListener('scroll', handleScroll)
    }
  }
})

watch(
  () => props.target,
  () => {
    if (currentTarget) {
      currentTarget.removeEventListener('scroll', handleScroll)
      if (currentTarget !== window) {
        window.removeEventListener('scroll', handleScroll)
      }
    }
    currentTarget = resolveTarget()
    if (currentTarget) {
      currentTarget.addEventListener('scroll', handleScroll, { passive: true })
      if (currentTarget !== window) {
        window.addEventListener('scroll', handleScroll, { passive: true })
      }
    }
    handleScroll()
  },
)
</script>

<template>
  <Transition name="back-top">
    <button
      v-show="visible"
      data-uipkge
      data-slot="back-top"
      :data-state="visible ? 'open' : 'closed'"
      :data-size="size"
      :data-position="position"
      type="button"
      :aria-label="ariaLabel"
      :class="cn(backTopVariants({ size, position }), props.absolute ? 'absolute' : 'fixed', props.class)"
      :style="positionStyle"
      @click="handleClick"
    >
      <slot name="icon">
        <ArrowUp aria-hidden="true" />
      </slot>
    </button>
  </Transition>
</template>

<style scoped>
.back-top-enter-active,
.back-top-leave-active {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.back-top-enter-from,
.back-top-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
</style>

```

### `packages/registry-vue/components/back-top/back-top.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `BackTop.vue` can `import { backTopVariants } from
 * './back-top.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const backTopVariants = cva(
  'inline-flex items-center justify-center rounded-full border bg-background text-foreground shadow-lg transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none cursor-pointer motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 [&_svg:not([class*=size-])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      size: {
        sm: 'size-8 [&_svg:not([class*=size-])]:size-4',
        default: 'size-10',
        lg: 'size-12 [&_svg:not([class*=size-])]:size-6',
      },
      position: {
        'bottom-right': '',
        'bottom-left': '',
        'top-right': '',
        'top-left': '',
      },
    },
    defaultVariants: {
      size: 'default',
      position: 'bottom-right',
    },
  },
)

export type BackTopVariants = VariantProps<typeof backTopVariants>

```

### `packages/registry-vue/components/back-top/index.ts`

```ts
export { default as BackTop } from './BackTop.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// BackTop.vue <-> index.ts circular import that broke dev SSR for Card).
export { backTopVariants, type BackTopVariants } from './back-top.variants'

```

## badge

- type: `registry:ui`
- description: Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.
- npm deps: `@vueuse/core`, `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/badge/Badge.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { badgeVariants } from './badge.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// `BadgeVariants['variant']` or reka-ui's PrimitiveProps.
const props = defineProps<{
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'
  class?: HTMLAttributes['class']
  asChild?: boolean
  as?: string | object
}>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Primitive data-uipkge data-slot="badge" :class="cn(badgeVariants({ variant }), props.class)" v-bind="delegatedProps">
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/badge/badge.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors duration-200 overflow-hidden',
  {
    variants: {
      variant: {
        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        success:
          'border-transparent bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] [a&]:hover:bg-[var(--success)]/20',
        warning:
          'border-transparent bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] [a&]:hover:bg-[var(--warning)]/20',
        info: 'border-transparent bg-[var(--info)]/10 text-[var(--info)] dark:text-[var(--info)] [a&]:hover:bg-[var(--info)]/20',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type BadgeVariants = VariantProps<typeof badgeVariants>

```

### `packages/registry-vue/components/badge/index.ts`

```ts
export { default as Badge } from './Badge.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { badgeVariants, type BadgeVariants } from './badge.variants'

```

## bar-chart

- type: `registry:ui`
- description: Bar chart wrapper around Apache ECharts. Vertical, horizontal, grouped, stacked, and negative-value variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/bar-chart/BarChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart as EChartsBarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsBarChart, GridComponent, TooltipComponent, LegendComponent])

interface Props {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  xField: 'x',
  yField: 'y',
  height: 300,
})

const mergedOption = computed(() => {
  const fields = Array.isArray(props.yField) ? props.yField : [props.yField]
  const xData = props.data.map((d) => d[props.xField!])

  const series = fields.map((field, i) => ({
    name: field,
    type: 'bar',
    barMaxWidth: 32,
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: props.data.map((d) => d[field]),
  }))

  // Per-index series merge + 2-level deep merge for axis/grid/tooltip
  // blocks (see AreaChart for the rule). Lets consumers tweak axisLabel
  // font size without losing the wrapper's `data` / colors.
  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    legend: userLegend,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  // Single-series charts hide the legend explicitly so ECharts' default
  // doesn't dump the y-field name onto the chart canvas.
  const baseLegend: any =
    fields.length > 1
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : { show: false }

  return {
    color: chartColors.value,
    grid: mergeOptionBlock(
      { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
      userGrid,
    ),
    tooltip: mergeOptionBlock(
      {
        trigger: 'axis',
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend, userLegend),
    xAxis: mergeOptionBlock(
      {
        type: 'category',
        data: xData,
        axisLine: { lineStyle: { color: chartAxisColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisTick: { show: false },
      },
      userXAxis,
    ),
    yAxis: mergeOptionBlock(
      {
        type: 'value',
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      userYAxis,
    ),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/bar-chart/index.ts`

```ts
export { default as BarChart } from './BarChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## bento-01

- type: `registry:block`
- description: Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.
- npm deps: `lucide-vue-next`
- registry deps: `badge`, `card`

### `packages/registry-vue/blocks/bento-01/Bento01.vue`

```vue
<script setup lang="ts">
import { Activity, Clock, ShieldCheck, Sparkles } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-24">
      <div class="mb-12 max-w-2xl space-y-3">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">Built for scale</p>
        <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">A workspace your team grows into, not out of.</h2>
        <p class="text-muted-foreground text-lg">
          Four surfaces that work end-to-end. Replace any one without touching the rest.
        </p>
      </div>

      <div class="grid gap-4 lg:grid-cols-4 lg:grid-rows-2">
        <Card class="lg:col-span-2 lg:row-span-2">
          <CardContent class="flex h-full flex-col gap-6 p-8">
            <div class="flex items-center gap-3">
              <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <Sparkles class="size-5" />
              </div>
              <Badge variant="secondary">New</Badge>
            </div>
            <div class="space-y-3">
              <h3 class="text-2xl font-semibold tracking-tight">AI-assisted reviews</h3>
              <p class="text-muted-foreground">
                Draft 360 feedback in seconds. The assistant reads your goals, your 1:1 notes and your peer reviews,
                then writes a first pass you can edit. Every suggestion cites the source so nothing comes out of
                nowhere.
              </p>
            </div>

            <div class="bg-muted/30 mt-auto rounded-lg border p-5">
              <div class="text-muted-foreground flex items-center justify-between text-xs">
                <span>Draft quality</span>
                <span class="font-mono">92 / 100</span>
              </div>
              <div class="bg-muted mt-3 h-2 overflow-hidden rounded-full">
                <div class="bg-primary h-full w-[92%] rounded-full" />
              </div>
              <div class="mt-4 grid grid-cols-3 gap-3 text-center text-xs">
                <div>
                  <p class="text-foreground font-mono text-base">12</p>
                  <p class="text-muted-foreground">Goals</p>
                </div>
                <div>
                  <p class="text-foreground font-mono text-base">34</p>
                  <p class="text-muted-foreground">1:1 notes</p>
                </div>
                <div>
                  <p class="text-foreground font-mono text-base">8</p>
                  <p class="text-muted-foreground">Peers</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card class="lg:col-span-2 lg:row-span-1">
          <CardContent class="flex h-full items-start gap-5 p-6">
            <div class="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg">
              <Activity class="size-5" />
            </div>
            <div class="space-y-2">
              <h3 class="text-lg font-semibold tracking-tight">Real-time activity</h3>
              <p class="text-muted-foreground text-sm">
                Every event — hire, promotion, time-off, payroll run — streams into a single timeline you can filter by
                team, person or module.
              </p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent class="flex h-full flex-col justify-between gap-4 p-6">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Clock class="size-5" />
            </div>
            <div>
              <p class="text-3xl font-semibold tracking-tight">12 min</p>
              <p class="text-muted-foreground mt-1 text-sm">Average setup time</p>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent class="flex h-full flex-col justify-between gap-4 p-6">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <ShieldCheck class="size-5" />
            </div>
            <div>
              <p class="text-sm font-semibold tracking-tight">SOC 2 · ISO 27001 · GDPR</p>
              <p class="text-muted-foreground mt-1 text-sm">Encrypted at rest, audited quarterly.</p>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>

```

## block-ui

- type: `registry:ui`
- description: Overlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. v-model toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon/message slots. Composes the spinner primitive.
- npm deps: `class-variance-authority`
- registry deps: `spinner`

### `packages/registry-vue/components/block-ui/BlockUi.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, useSlots } from 'vue'
import { cn } from '@/lib/utils'
import { blockUiVariants } from './block-ui.variants'
import { Spinner } from '@/components/ui/spinner'

interface Props {
  modelValue?: boolean
  message?: string
  opacity?: number
  overlayColor?: string
  blur?: boolean
  showSpinner?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  message: 'Loading...',
  opacity: 0.6,
  overlayColor: '',
  blur: false,
  showSpinner: true,
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const slots = useSlots()
const hasIconSlot = computed(() => !!slots.icon)

const overlayStyle = computed(() => {
  const style: Record<string, string> = {
    opacity: String(props.opacity),
  }
  if (props.overlayColor) style.backgroundColor = props.overlayColor
  return style
})
</script>

<template>
  <div
    data-uipkge
    data-slot="block-ui"
    :data-blocked="modelValue ? '' : undefined"
    :class="cn(blockUiVariants(), props.class)"
  >
    <!-- Wrapped content -->
    <div :class="cn('block-ui-content', blur && modelValue && 'pointer-events-none blur-[2px] transition-[filter]')">
      <slot />
    </div>

    <!-- Blocking overlay -->
    <Transition name="block-ui-fade">
      <div
        v-if="modelValue"
        class="absolute inset-0 z-50 flex flex-col items-center justify-center gap-3"
        role="status"
        aria-live="polite"
        aria-busy="true"
      >
        <!-- Background layer (opacity only affects this layer) -->
        <div class="absolute inset-0" :style="overlayStyle" :class="!overlayColor && 'bg-background'" />
        <!-- Content layer (spinner + message stay fully opaque) -->
        <slot name="icon">
          <Spinner v-if="showSpinner" size="lg" />
        </slot>
        <p v-if="message || slots.message" class="text-foreground text-sm font-medium">
          <slot name="message">{{ message }}</slot>
        </p>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.block-ui-fade-enter-active,
.block-ui-fade-leave-active {
  transition: opacity 0.2s ease;
}
.block-ui-fade-enter-from,
.block-ui-fade-leave-to {
  opacity: 0;
}
</style>

```

### `packages/registry-vue/components/block-ui/block-ui.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const blockUiVariants = cva('relative inline-block')

export type BlockUiVariants = VariantProps<typeof blockUiVariants>

```

### `packages/registry-vue/components/block-ui/index.ts`

```ts
export { default as BlockUi } from './BlockUi.vue'
export { blockUiVariants, type BlockUiVariants } from './block-ui.variants'

```

## board

- type: `registry:ui`
- description: Six small composable components for any board / kanban / sortable-list surface — opinionated about drop targeting and animation, agnostic about layout, data, and chrome. Drop `<Board>` around a grid of `<BoardLane>` columns; slot `<BoardLaneHeader>`, `<BoardLaneBody>`, `<BoardLaneEmpty>`, and `<BoardCard>` items inside each lane. State lives in the sibling `useBoard()` hook (insertion-index drop math, keyboard a11y, accept predicate). Animation comes from the `motion-list` motion preset by default — enter / leave / move all share one settle curve so a card travelling between two lanes reads as one continuous motion. Mirrors the Timeline / Card sub-component pattern (three-level context injection: board → lane → card). The current monolithic `@uipkge/kanban-board` block can be rebuilt on top of this primitive — Board is the layer underneath, kanban-board is one opinionated assembly.
- npm deps: `class-variance-authority`
- registry deps: `motion-list`

### `packages/registry-vue/components/board/Board.vue`

```vue
<script setup lang="ts">
import { provide, ref, toRef, type Ref } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { BOARD_CONTEXT, type BoardAcceptsFn, type BoardDensity, type BoardOrientation } from './context'

interface Props {
  class?: HTMLAttributes['class']
  orientation?: BoardOrientation
  density?: BoardDensity
  /** TransitionGroup name applied by BoardLaneBody. Defaults to `motion-list`. */
  motion?: string
  /** Predicate run per drop. Defaults to always-accept. */
  accepts?: BoardAcceptsFn
  /** Imperative move from a parent's useBoard composable. */
  moveItem?: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** External state — pass `state.draggingId` etc. from useBoard. */
  draggingId?: string | null
  draggingIds?: readonly string[]
  dragOverLaneId?: string | null
  justMovedId?: string | null
  selectedIds?: ReadonlySet<string>
  /** Optional toggle/clearSelection from useBoard so the primitive can
   *  expose selection mutations through context (consumed by BoardCard
   *  click handler). Both default to no-ops, so Board still works with
   *  consumers that don't wire selection. */
  toggleSelection?: (itemId: string, additive?: boolean) => void
  clearSelection?: () => void
  registerAllowedLanes?: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes?: (cardId: string) => void
  registerLaneDisabled?: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled?: (laneId: string) => void
  isLaneAcceptingFor?: (laneId: string) => boolean
}

const props = withDefaults(defineProps<Props>(), {
  orientation: 'horizontal',
  density: 'default',
  motion: 'motion-list',
  accepts: () => () => true,
  moveItem: () => () => {},
  draggingIds: () => [] as readonly string[],
  selectedIds: () => new Set<string>() as ReadonlySet<string>,
  toggleSelection: () => () => {},
  clearSelection: () => () => {},
  registerAllowedLanes: () => () => {},
  unregisterAllowedLanes: () => () => {},
  registerLaneDisabled: () => () => {},
  unregisterLaneDisabled: () => () => {},
  isLaneAcceptingFor: () => () => true,
})

const draggingIdRef = toRef(props, 'draggingId')
const draggingIdsRef = toRef(props, 'draggingIds')
const dragOverLaneIdRef = toRef(props, 'dragOverLaneId')
const justMovedIdRef = toRef(props, 'justMovedId')
const selectedIdsRef = toRef(props, 'selectedIds')
const laneIds = ref<symbol[]>([])

provide(BOARD_CONTEXT, {
  orientation: toRef(props, 'orientation'),
  density: toRef(props, 'density'),
  motion: toRef(props, 'motion'),
  draggingId: draggingIdRef as unknown as Ref<string | null>,
  draggingIds: draggingIdsRef as unknown as Ref<readonly string[]>,
  dragOverLaneId: dragOverLaneIdRef as unknown as Ref<string | null>,
  justMovedId: justMovedIdRef as unknown as Ref<string | null>,
  selectedIds: selectedIdsRef as unknown as Ref<ReadonlySet<string>>,
  accepts: toRef(props, 'accepts'),
  moveItem: (...args) => props.moveItem!(...args),
  toggleSelection: (...args) => props.toggleSelection!(...args),
  clearSelection: () => props.clearSelection!(),
  registerAllowedLanes: (...args) => props.registerAllowedLanes!(...args),
  unregisterAllowedLanes: (...args) => props.unregisterAllowedLanes!(...args),
  registerLaneDisabled: (...args) => props.registerLaneDisabled!(...args),
  unregisterLaneDisabled: (...args) => props.unregisterLaneDisabled!(...args),
  isLaneAcceptingFor: (laneId) => props.isLaneAcceptingFor!(laneId),
  laneIds,
  registerLane: (id) => {
    if (!laneIds.value.includes(id)) laneIds.value.push(id)
  },
  unregisterLane: (id) => {
    laneIds.value = laneIds.value.filter((i) => i !== id)
  },
})
</script>

<template>
  <div data-uipkge data-slot="board" :data-orientation="orientation" :class="cn('w-full', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/board/BoardLane.vue`

```vue
<script setup lang="ts">
import { computed, inject, onBeforeUnmount, onMounted, provide, toRef, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { BOARD_CONTEXT, BOARD_LANE_CONTEXT } from './context'
import { boardLaneVariants } from './board.variants'

interface Props {
  id: string
  class?: HTMLAttributes['class']
  tone?: 'default' | 'plain'
  /** Disable drops on this lane. Cards inside still render and stay
   *  draggable; only the drop target is inert + visually dimmed. */
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), { tone: 'default', disabled: false })

const board = inject(BOARD_CONTEXT, null)
if (!board) {
  throw new Error('<BoardLane> must be a descendant of <Board>.')
}

const _laneSymbol = Symbol('BoardLane')
onMounted(() => {
  board.registerLane(_laneSymbol)
  board.registerLaneDisabled(props.id, props.disabled)
})
onBeforeUnmount(() => {
  board.unregisterLane(_laneSymbol)
  board.unregisterLaneDisabled(props.id)
})

// Keep the disabled registry in sync when the prop changes mid-flight.
watch(
  () => props.disabled,
  (v) => board.registerLaneDisabled(props.id, v),
)
watch(
  () => props.id,
  (newId, oldId) => {
    board.unregisterLaneDisabled(oldId)
    board.registerLaneDisabled(newId, props.disabled)
  },
)

const isDragOver = computed(() => board.dragOverLaneId.value === props.id)
const isAccepting = computed(() => {
  if (!board.draggingId.value) return false
  if (props.disabled) return false
  return board.isLaneAcceptingFor(props.id)
})

provide(BOARD_LANE_CONTEXT, {
  laneId: toRef(props, 'id'),
  isDragOver,
  isAccepting,
  disabled: toRef(props, 'disabled'),
})

const state = computed<'idle' | 'over' | 'rejecting'>(() => {
  if (!isDragOver.value) return 'idle'
  return isAccepting.value ? 'over' : 'rejecting'
})

const emits = defineEmits<{
  dragover: [e: DragEvent]
  drop: [e: DragEvent]
  dragleave: []
}>()

function onDragOver(e: DragEvent) {
  // Emit unconditionally so the composable can set dragOverLaneId
  // (drives the rejecting-ring visual). The composable's isAllowed
  // checks the disabled-lane registry and refuses preventDefault when
  // it should — the browser's own refuse-to-drop semantics + our
  // rejecting visual cover the rest.
  emits('dragover', e)
}
function onDrop(e: DragEvent) {
  if (props.disabled) {
    e.preventDefault()
    return
  }
  emits('drop', e)
}
function onDragLeave() {
  emits('dragleave')
}
</script>

<template>
  <div
    data-uipkge
    data-slot="board-lane"
    data-board-lane
    :data-lane-id="id"
    :data-state="state"
    :data-disabled="disabled || undefined"
    :aria-disabled="disabled || undefined"
    :class="
      cn(
        boardLaneVariants({ tone, state }),
        // Disabled lane dims only the lane chrome (border, background,
        // header). Cards inside stay legible — the rejection signal is
        // carried by the no-drop cursor + the missing accept-ring.
        disabled && 'opacity-80 [&>[data-slot=board-lane-header]]:opacity-60',
        props.class,
      )
    "
    @dragover="onDragOver"
    @drop="onDrop"
    @dragleave="onDragLeave"
  >
    <slot :is-drag-over="isDragOver" :is-accepting="isAccepting" :disabled="disabled" />
  </div>
</template>

```

### `packages/registry-vue/components/board/BoardLaneHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="board-lane-header" :class="cn('flex items-center justify-between gap-2', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/board/BoardLaneBody.vue`

```vue
<script setup lang="ts">
import { inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { BOARD_CONTEXT } from './context'

interface Props {
  class?: HTMLAttributes['class']
  /** Override the TransitionGroup name. Defaults to the board-level motion preset. */
  motion?: string
}

const props = defineProps<Props>()

const board = inject(BOARD_CONTEXT, null)
const motionName = () => props.motion ?? board?.motion.value ?? 'motion-list'
</script>

<template>
  <!-- Inner padding (py-1 / px-0.5) reserves breathing room for the
       per-card hover-lift (-translate-y-0.5), the focus / drag / moved
       rings (ring-2 + ring-offset-1 ≈ 3px outward), and the hover
       shadow halo. Without it, the first / last cards' hover state
       crops against the overflow-y-auto edge. pr-1 still wins on the
       right so the thin scrollbar has a gutter. -->
  <div
    data-uipkge
    data-slot="board-lane-body"
    :class="
      cn('flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-0.5 py-1 pr-1 [scrollbar-width:thin]', props.class)
    "
  >
    <!-- ClientOnly: Vue 3 TransitionGroup emits Fragment vnodes on the
         server and proper DOM elements on the client, which trips a
         hydration mismatch on every card slot. Render a plain div on
         SSR (same shape, no animations — which the client can't see
         pre-hydration anyway) and swap to TransitionGroup on mount. -->
    <ClientOnly>
      <TransitionGroup :name="motionName()" tag="div" class="relative flex flex-col gap-2">
        <slot />
      </TransitionGroup>
      <template #fallback>
        <div class="relative flex flex-col gap-2">
          <slot />
        </div>
      </template>
    </ClientOnly>
  </div>
</template>

```

### `packages/registry-vue/components/board/BoardLaneEmpty.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  /** Show only when this is true (consumer wires from `lane.length === 0`). */
  when?: boolean
}>()
</script>

<template>
  <div
    v-if="when !== false"
    data-uipkge
    data-slot="board-lane-empty"
    :class="
      cn(
        'text-muted-foreground/70 border-border/60 rounded-lg border border-dashed py-6 text-center text-xs',
        props.class,
      )
    "
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/board/BoardCard.vue`

```vue
<script setup lang="ts">
import { computed, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { BOARD_CARD_CONTEXT, BOARD_CONTEXT, BOARD_LANE_CONTEXT } from './context'
import { boardCardVariants } from './board.variants'

interface Props {
  id: string
  class?: HTMLAttributes['class']
  /** Disable keyboard grab (e.g. for read-only boards). Default: enabled. */
  keyboardDraggable?: boolean
  /** Disable the card entirely — non-draggable, non-clickable, dimmed.
   *  Use for cards locked by a workflow rule or a server policy. */
  disabled?: boolean
  /** Per-card allow-list. When set, the card can only be dropped into
   *  these lane ids; useBoard rejects any other target silently. Omit
   *  to allow every lane the global `accepts` predicate permits. */
  allowedLanes?: readonly string[]
  /** Show the click-to-select chrome (ring + cmd/shift-click multi-select).
   *  Default true. Turn off for read-only or single-tap-to-open boards. */
  selectable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  keyboardDraggable: true,
  disabled: false,
  selectable: true,
})

const board = inject(BOARD_CONTEXT, null)
const lane = inject(BOARD_LANE_CONTEXT, null)
if (!board || !lane) {
  throw new Error('<BoardCard> must be a descendant of <Board> and <BoardLane>.')
}

const emits = defineEmits<{
  dragstart: [e: DragEvent]
  dragend: []
  click: [e: MouseEvent]
}>()

const isKeyboardGrabbed = ref(false)
// Either source of truth wins — `draggingIds` is the multi-select-aware
// list, `draggingId` is the single-anchor (backward-compat for consumers
// that don't pass the multi state through). Keyboard-grabbed adds the
// same visual without touching parent state.
const isDragging = computed(
  () => board.draggingIds.value.includes(props.id) || board.draggingId.value === props.id || isKeyboardGrabbed.value,
)
const isJustMoved = computed(() => board.justMovedId.value === props.id)
const isSelected = computed(() => board.selectedIds.value.has(props.id))

provide(BOARD_CARD_CONTEXT, {
  cardId: toRef(props, 'id'),
  laneId: lane.laneId,
  isDragging,
  isJustMoved,
  isSelected,
  disabled: toRef(props, 'disabled'),
})

// Per-card allowed-lanes registry. Re-run if the id OR the list changes.
onMounted(() => board.registerAllowedLanes(props.id, props.allowedLanes))
onBeforeUnmount(() => board.unregisterAllowedLanes(props.id))
watch(
  () => [props.id, props.allowedLanes] as const,
  ([id, lanes], _prev) => {
    const prevId = _prev?.[0]
    if (prevId && prevId !== id) board.unregisterAllowedLanes(prevId)
    board.registerAllowedLanes(id, lanes)
  },
  { deep: true },
)

const state = computed<'idle' | 'dragging' | 'moved'>(() => {
  if (isDragging.value) return 'dragging'
  if (isJustMoved.value) return 'moved'
  return 'idle'
})

const cardEl = ref<HTMLButtonElement | null>(null)

function onKeydown(e: KeyboardEvent) {
  if (props.disabled) return
  // Enter activates the card (default action) — emits @click for the
  // consumer to open a detail panel / navigate / etc. Native <button>
  // gets this for free; we re-emit because the card root is a
  // <div role="button"> (chosen so consumers can nest <button>/links
  // inside the card without violating "no interactive content in a
  // button" — see commit context). The event still surfaces through
  // the standard @click slot.
  if (e.key === 'Enter') {
    e.preventDefault()
    emits('click', new MouseEvent('click', { bubbles: true, cancelable: true }))
    return
  }
  if (!props.keyboardDraggable) return
  if (e.key === ' ') {
    e.preventDefault()
    isKeyboardGrabbed.value = !isKeyboardGrabbed.value
    return
  }
  if (e.key === 'Escape' && isKeyboardGrabbed.value) {
    e.preventDefault()
    isKeyboardGrabbed.value = false
    return
  }
  if (!isKeyboardGrabbed.value) return
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
    e.preventDefault()
    const allLanes = Array.from(document.querySelectorAll<HTMLElement>('[data-board-lane]')).filter(
      (el) => !el.hasAttribute('data-disabled'),
    )
    const currentIdx = allLanes.findIndex((el) => el.dataset.laneId === lane.laneId.value)
    if (currentIdx === -1 || allLanes.length === 0) return
    const delta = e.key === 'ArrowLeft' ? -1 : 1
    const nextLane = allLanes[(currentIdx + delta + allLanes.length) % allLanes.length]
    if (nextLane?.dataset.laneId) {
      board.moveItem(props.id, nextLane.dataset.laneId)
      requestAnimationFrame(() => {
        const moved = document.querySelector<HTMLElement>(`[data-board-card-id="${props.id}"]`)
        moved?.focus()
      })
    }
    return
  }
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    e.preventDefault()
    const laneEl = cardEl.value?.closest('[data-board-lane]')
    if (!laneEl) return
    const cards = Array.from(laneEl.querySelectorAll<HTMLElement>('[data-board-card]'))
    const currentIdx = cards.findIndex((el) => el.dataset.boardCardId === props.id)
    if (currentIdx === -1) return
    const delta = e.key === 'ArrowUp' ? -1 : 1
    const targetIdx = Math.max(0, Math.min(cards.length - 1, currentIdx + delta))
    if (targetIdx !== currentIdx) board.moveItem(props.id, lane.laneId.value, targetIdx)
  }
}

function onDragStart(e: DragEvent) {
  if (props.disabled) {
    e.preventDefault()
    return
  }
  emits('dragstart', e)
}
function onDragEnd() {
  emits('dragend')
}
function onClick(e: MouseEvent) {
  if (props.disabled) {
    e.preventDefault()
    return
  }
  // Cmd/Ctrl/Shift+click toggles the selection (multi-select for drag);
  // plain click clears any selection and just emits to the consumer
  // (typically opens a detail Sheet).
  if (props.selectable && (e.metaKey || e.ctrlKey || e.shiftKey)) {
    e.preventDefault()
    board.toggleSelection(props.id, true)
    return
  }
  if (board.draggingIds.value.includes(props.id)) return
  if (board.selectedIds.value.size > 0) board.clearSelection()
  emits('click', e)
}
</script>

<template>
  <!-- Root is `<div role="button">` rather than `<button type="button">`
       so consumers can nest interactive content (buttons, links, menus)
       inside cards. The HTML5 spec forbids interactive content inside a
       <button>; browsers silently de-nest the inner element which
       breaks its events. Enter is wired manually in onKeydown to match
       the native button default-action behaviour. -->
  <div
    ref="cardEl"
    role="button"
    data-uipkge
    data-slot="board-card"
    data-board-card
    :data-board-card-id="id"
    :data-state="state"
    :data-selected="isSelected || undefined"
    :data-disabled="disabled || undefined"
    :aria-disabled="disabled || undefined"
    :aria-pressed="selectable ? isSelected : undefined"
    :class="
      cn(
        boardCardVariants({ state }),
        isSelected && 'ring-primary/60 ring-offset-background ring-2 ring-offset-1',
        disabled && 'pointer-events-none cursor-not-allowed opacity-50 shadow-none grayscale hover:translate-y-0',
        props.class,
      )
    "
    :draggable="disabled ? false : true"
    :tabindex="disabled ? -1 : 0"
    :aria-roledescription="keyboardDraggable && !disabled ? 'draggable card' : undefined"
    @click="onClick"
    @keydown="onKeydown"
    @dragstart="onDragStart"
    @dragend="onDragEnd"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/board/board.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file so consuming SFCs avoid the
 * circular-dep trap when importing from `index.ts`. Same pattern as
 * `timeline.variants.ts` / `card.variants.ts`.
 */

export const boardLaneVariants = cva(
  'flex min-h-0 flex-col gap-3 rounded-xl border p-3 motion-safe:transition-[background-color,border-color,box-shadow] motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)]',
  {
    variants: {
      tone: {
        default: 'bg-muted/30',
        plain: 'bg-transparent',
      },
      // Visual weight of `over` and `rejecting` deliberately matches so
      // the eye reads them as the same kind of signal (drop intent),
      // differing only in tone (primary = OK, destructive = NO).
      state: {
        idle: '',
        over: 'border-primary/60 bg-primary/5 ring-2 ring-primary/30 ring-offset-1 ring-offset-background',
        rejecting:
          'border-destructive/40 bg-destructive/5 ring-2 ring-destructive/30 ring-offset-1 ring-offset-background',
      },
    },
    defaultVariants: { tone: 'default', state: 'idle' },
  },
)

export const boardCardVariants = cva(
  'bg-card hover:border-primary/40 group block w-full cursor-grab rounded-md border p-2 text-left outline-none motion-safe:transition-[transform,box-shadow,opacity,border-color] motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-primary/30 active:cursor-grabbing',
  {
    variants: {
      state: {
        idle: 'shadow-sm motion-safe:hover:-translate-y-0.5 hover:shadow-md',
        dragging: 'scale-95 opacity-40 shadow-none',
        moved: 'shadow-sm ring-2 ring-primary/50 ring-offset-1 ring-offset-background',
      },
    },
    defaultVariants: { state: 'idle' },
  },
)

export type BoardLaneVariantsProps = VariantProps<typeof boardLaneVariants>
export type BoardCardVariantsProps = VariantProps<typeof boardCardVariants>

```

### `packages/registry-vue/components/board/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'

export type BoardOrientation = 'horizontal' | 'vertical'
export type BoardDensity = 'compact' | 'default' | 'comfortable'

/** Drop event emitted by useBoard handlers. */
export interface BoardDropEvent {
  /** First (anchor) item moved. For multi-item drops, see `itemIds`. */
  itemId: string
  /** All items moved in this drop, in their final visual order. */
  itemIds: string[]
  from: string
  to: string
  /** Insertion index of the first item in the target lane. */
  index: number
}

/** Predicate consumers pass to control which items each lane accepts. */
export type BoardAcceptsFn = (itemId: string, fromLaneId: string, toLaneId: string) => boolean

export interface BoardContext {
  orientation: Ref<BoardOrientation>
  density: Ref<BoardDensity>
  /** TransitionGroup name. Defaults to `motion-list` (the @uipkge motion preset). */
  motion: Ref<string>
  /** Currently-grabbed primary card id (pointer drag OR keyboard grab). */
  draggingId: Ref<string | null>
  /** All cards being dragged this turn — usually `[draggingId]`, but
   *  expands to the full selection when the user grabs one of a multi-
   *  selected set. Lanes read this to compute drop math (the dragged
   *  cards are excluded from the insertion-index walk). */
  draggingIds: Ref<readonly string[]>
  /** Lane currently under the pointer/keyboard cursor. */
  dragOverLaneId: Ref<string | null>
  /** Card that just landed — used by consumers for a momentary highlight. */
  justMovedId: Ref<string | null>
  /** Multi-select set. Click-and-drag any selected card moves the whole
   *  set; click a non-selected card to drag that one alone. */
  selectedIds: Ref<ReadonlySet<string>>
  /** Predicate run by lanes; defaults to always-accept. */
  accepts: Ref<BoardAcceptsFn>
  /** Imperative move — used by keyboard handlers + external callers. */
  moveItem: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** Toggle one item in the selection set (or replace it if `additive` is false). */
  toggleSelection: (itemId: string, additive?: boolean) => void
  /** Drop the entire selection. */
  clearSelection: () => void
  /** Per-card allow-list registry. BoardCard registers its own `allowedLanes`
   *  on mount; lanes consult this to short-circuit rejected drops without
   *  the consumer having to encode the rule inside `accepts`. */
  registerAllowedLanes: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes: (cardId: string) => void
  /** Whether the lane's drops are accepted for the dragging item, given
   *  the current `accepts` + per-card allowedLanes + lane disabled state. */
  isLaneAcceptingFor: (laneId: string) => boolean
  /** Lane registration (mirrors Timeline pattern). */
  laneIds: Ref<symbol[]>
  registerLane: (id: symbol) => void
  unregisterLane: (id: symbol) => void
  /** Lane disabled registry — lanes call register/unregister; useBoard +
   *  isLaneAcceptingFor read from it. */
  registerLaneDisabled: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled: (laneId: string) => void
}

export const BOARD_CONTEXT: InjectionKey<BoardContext> = Symbol('BoardContext')

export interface BoardLaneContext {
  laneId: Ref<string>
  isDragOver: Ref<boolean>
  isAccepting: Ref<boolean>
  disabled: Ref<boolean>
}

export const BOARD_LANE_CONTEXT: InjectionKey<BoardLaneContext> = Symbol('BoardLaneContext')

export interface BoardCardContext {
  cardId: Ref<string>
  laneId: Ref<string>
  isDragging: Ref<boolean>
  isJustMoved: Ref<boolean>
  isSelected: Ref<boolean>
  disabled: Ref<boolean>
}

export const BOARD_CARD_CONTEXT: InjectionKey<BoardCardContext> = Symbol('BoardCardContext')

```

### `packages/registry-vue/components/board/index.ts`

```ts
export { default as Board } from './Board.vue'
export { default as BoardLane } from './BoardLane.vue'
export { default as BoardLaneHeader } from './BoardLaneHeader.vue'
export { default as BoardLaneBody } from './BoardLaneBody.vue'
export { default as BoardLaneEmpty } from './BoardLaneEmpty.vue'
export { default as BoardCard } from './BoardCard.vue'

export {
  BOARD_CONTEXT,
  BOARD_LANE_CONTEXT,
  BOARD_CARD_CONTEXT,
  type BoardAcceptsFn,
  type BoardContext,
  type BoardCardContext,
  type BoardDensity,
  type BoardDropEvent,
  type BoardLaneContext,
  type BoardOrientation,
} from './context'

export {
  boardCardVariants,
  boardLaneVariants,
  type BoardCardVariantsProps,
  type BoardLaneVariantsProps,
} from './board.variants'

```

## bottom-navigation

- type: `registry:ui`
- description: Mobile bottom tab bar with icon + label items. Supports v-model for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for vue-router integration.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/bottom-navigation/BottomNavigation.vue`

```vue
<script setup lang="ts">
import { computed, type Component, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export interface BottomNavItem {
  /** Unique value identifying this tab. Used with v-model. */
  value: string
  /** Label shown under the icon. */
  label: string
  /** Lucide icon component. */
  icon: Component
  /** Optional badge count or text shown on the icon. */
  badge?: string | number
  /** Router link destination (use with vue-router). */
  to?: string
}

interface Props {
  /** Tab items. */
  items: BottomNavItem[]
  /** Active item value (v-model). */
  modelValue?: string
  /** Active item color — a Tailwind text color class. Default 'text-primary'. */
  activeColor?: string
  /** Fixed positioning at the viewport bottom. Default true. */
  fixed?: boolean
  /** Show an active indicator pill behind the icon. Default true. */
  showIndicator?: boolean
  /** Safe-area padding for notched devices (iOS). Default true. */
  safeArea?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  activeColor: 'text-primary',
  fixed: true,
  showIndicator: true,
  safeArea: true,
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  select: [item: BottomNavItem]
}>()

const active = computed(() => props.modelValue)

function onSelect(item: BottomNavItem) {
  if (item.to) {
    // Router integration — navigate if vue-router is available
    const router = (window as any).__vueRouter
    if (router) router.push(item.to)
  }
  emit('update:modelValue', item.value)
  emit('select', item)
}
</script>

<template>
  <nav
    data-uipkge
    data-slot="bottom-navigation"
    :data-fixed="fixed ? '' : undefined"
    :class="
      cn(
        'border-border bg-background/95 z-50 flex items-stretch justify-around border-t backdrop-blur-sm',
        fixed ? 'fixed inset-x-0 bottom-0' : 'relative',
        safeArea && 'pb-[env(safe-area-inset-bottom)]',
        props.class,
      )
    "
  >
    <button
      v-for="item in items"
      :key="item.value"
      data-slot="bottom-navigation-item"
      :data-active="active === item.value ? '' : undefined"
      :aria-current="active === item.value ? 'page' : undefined"
      type="button"
      class="focus-visible:ring-ring/50 relative flex flex-1 flex-col items-center justify-center gap-0.5 pt-2 pb-1.5 text-xs transition-colors duration-200 outline-none focus-visible:ring-[3px]"
      :class="active === item.value ? activeColor : 'text-muted-foreground hover:text-foreground'"
      @click="onSelect(item)"
    >
      <!-- Active indicator pill -->
      <span
        v-if="showIndicator && active === item.value"
        class="bg-primary/10 absolute top-1 h-8 w-14 rounded-full transition-opacity duration-200"
        aria-hidden="true"
      />
      <span class="relative flex items-center justify-center">
        <component
          :is="item.icon"
          class="size-5 transition-transform duration-200"
          :class="active === item.value ? 'scale-110' : ''"
        />
        <span
          v-if="item.badge !== undefined && item.badge !== ''"
          class="bg-destructive text-destructive-foreground absolute -top-1.5 -right-2 flex min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-4 font-medium"
        >
          {{ item.badge }}
        </span>
      </span>
      <span
        class="max-w-full truncate px-1 transition-opacity duration-200"
        :class="active === item.value ? 'font-medium' : ''"
      >
        {{ item.label }}
      </span>
    </button>
  </nav>
</template>

```

### `packages/registry-vue/components/bottom-navigation/index.ts`

```ts
export { default as BottomNavigation } from './BottomNavigation.vue'
export type { BottomNavItem } from './BottomNavigation.vue'

```

## boxplot-chart

- type: `registry:ui`
- description: Box-and-whisker plot wrapper around Apache ECharts. Five-number summary (min, Q1, median, Q3, max) per category. Vertical or horizontal.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/boxplot-chart/BoxplotChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BoxplotChart as EChartsBoxplotChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsBoxplotChart, GridComponent, TooltipComponent])

interface BoxRow {
  category: string
  /** [min, Q1, median, Q3, max] */
  values: [number, number, number, number, number]
}

interface Props {
  data: BoxRow[]
  /** Render horizontally (categories on y-axis). Default false. */
  horizontal?: boolean
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  horizontal: false,
  height: 320,
})

const mergedOption = computed(() => {
  const cats = props.data.map((d) => d.category)
  const values = props.data.map((d) => d.values)

  const valueAxis = {
    type: 'value' as const,
    scale: true,
    splitLine: { lineStyle: { color: chartSplitLineColor.value } },
    axisLabel: { color: chartTextColor.value, fontSize: 11 },
    axisLine: { lineStyle: { color: chartAxisColor.value } },
    axisTick: { show: false },
  }
  const catAxis = {
    type: 'category' as const,
    data: cats,
    axisLine: { lineStyle: { color: chartAxisColor.value } },
    axisLabel: { color: chartTextColor.value, fontSize: 11 },
    axisTick: { show: false },
  }

  const series = [
    {
      type: 'boxplot',
      data: values,
      itemStyle: { color: chartColors.value[0], borderColor: chartColors.value[1] },
    },
  ]

  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    grid: mergeOptionBlock({ left: 16, right: 16, top: 24, bottom: 24, containLabel: true }, userGrid),
    tooltip: mergeOptionBlock(
      {
        trigger: 'item',
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    xAxis: mergeOptionBlock(props.horizontal ? valueAxis : catAxis, userXAxis),
    yAxis: mergeOptionBlock(props.horizontal ? catAxis : valueAxis, userYAxis),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/boxplot-chart/index.ts`

```ts
export { default as BoxplotChart } from './BoxplotChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## breadcrumb

- type: `registry:ui`
- description: Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.
- npm deps: `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/breadcrumb/Breadcrumb.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <nav aria-label="breadcrumb" data-uipkge data-slot="breadcrumb" :class="props.class">
    <slot />
  </nav>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbEllipsis.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { MoreHorizontal } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="breadcrumb-ellipsis"
    :class="cn('flex size-11 items-center justify-center', props.class)"
  >
    <slot>
      <MoreHorizontal class="size-4" aria-hidden="true" />
    </slot>
    <span class="sr-only">More</span>
  </span>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbItem.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li data-uipkge data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
    <slot />
  </li>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbLink.vue`

```vue
<script lang="ts" setup>
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'a',
})
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="breadcrumb-link"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2',
        props.class,
      )
    "
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbList.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ol
    data-uipkge
    data-slot="breadcrumb-list"
    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
  >
    <slot />
  </ol>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbPage.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="breadcrumb-page"
    aria-current="page"
    :class="cn('text-foreground cursor-default font-normal', props.class)"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/breadcrumb/BreadcrumbSeparator.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-uipkge
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    :class="cn('[&>svg]:size-3.5', props.class)"
  >
    <slot>
      <ChevronRight />
    </slot>
  </li>
</template>

```

### `packages/registry-vue/components/breadcrumb/index.ts`

```ts
export { default as Breadcrumb } from './Breadcrumb.vue'
export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
export { default as BreadcrumbList } from './BreadcrumbList.vue'
export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'

```

## button

- type: `registry:ui`
- description: The primary clickable primitive — six variants (default, destructive, outline, secondary, ghost, link), seven sizes (default, sm, lg, xs, icon, icon-sm, icon-lg), and an as-child mode that lets you render a router-link or anchor with full button styling.
- npm deps: `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/button/Button.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from './button.variants'

// Why inline these unions instead of `ButtonVariants['variant']` /
// `ButtonVariants['size']`:
//
// `ButtonVariants` is `VariantProps<typeof buttonVariants>`. cva's
// type machinery wraps the variant keys in a conditional + indexed
// access (`{ [K in keyof Variants]?: ... }`), which Vue 3.5+'s SFC
// compiler can't resolve. Result: defineProps<> silently drops
// `variant`/`size` from the runtime declarations, every <Button
// variant="ghost"> falls back to `default`, and SidebarTrigger
// renders as a filled primary block.
//
// Inline the unions and Vue extracts them cleanly. The cva runtime
// still validates against the same option set at runtime; we just
// give the SFC compiler a type it can handle.
type Variant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
type Size = 'default' | 'sm' | 'lg' | 'xs' | 'icon' | 'icon-sm' | 'icon-lg'

interface Props {
  as?: string
  asChild?: boolean
  variant?: Variant
  size?: Size
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  as: 'button',
})
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="button"
    :data-variant="variant"
    :data-size="size"
    :as="as"
    :as-child="asChild"
    :class="cn(buttonVariants({ variant, size }), props.class)"
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/button/button.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Button.vue` can `import { buttonVariants } from
 * './button.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const buttonVariants = cva(
  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 active:scale-[0.97] active:duration-100 touch-manipulation disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        xs: 'h-7 rounded-md gap-1 px-2 has-[>svg]:px-1.5 text-xs',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ButtonVariants = VariantProps<typeof buttonVariants>

```

### `packages/registry-vue/components/button/index.ts`

```ts
export { default as Button } from './Button.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Button.vue <-> index.ts circular import that broke dev SSR for Card).
export { buttonVariants, type ButtonVariants } from './button.variants'

```

## calendar

- type: `registry:ui`
- description: Single-month calendar grid for date selection, built on reka-ui’s Calendar primitive. Pair it with a Popover or use it inline. Supports min/max bounds, disabled dates, and locale formatting.
- npm deps: `@internationalized/date`, `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `button`

### `packages/registry-vue/components/calendar/Calendar.vue`

```vue
<script lang="ts" setup>
import type { CalendarRootEmits, CalendarRootProps, DateValue } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import type { LayoutTypes } from '.'
import { getLocalTimeZone, today } from '@internationalized/date'
import { createReusableTemplate, reactiveOmit } from '@vueuse/core'
import { CalendarRoot, useDateFormatter, useForwardPropsEmits } from 'reka-ui'
import { createYear, toDate } from 'reka-ui/date'
import { computed, ref, toRaw } from 'vue'
import { cn } from '@/lib/utils'
import {
  CalendarCell,
  CalendarCellTrigger,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHead,
  CalendarGridRow,
  CalendarHeadCell,
  CalendarHeader,
  CalendarHeading,
  CalendarNextButton,
  CalendarPrevButton,
  NativeSelect,
  NativeSelectOption,
} from '.'

const props = withDefaults(
  defineProps<CalendarRootProps & { class?: HTMLAttributes['class']; layout?: LayoutTypes; yearRange?: DateValue[] }>(),
  {
    modelValue: undefined,
    layout: undefined,
  },
)
const emits = defineEmits<CalendarRootEmits>()

// Fix: Don't pass defaultValue or defaultPlaceholder to reka-ui to avoid .copy() errors
// Only pass the props that reka-ui needs
const delegatedProps = reactiveOmit(props, [
  'class',
  'layout',
  'placeholder',
  'modelValue',
  'defaultValue',
  'defaultPlaceholder',
])

const forwarded = useForwardPropsEmits(delegatedProps, emits)

const formatter = useDateFormatter(props.locale ?? 'en')

const yearRange = computed(() => {
  if (props.yearRange) return props.yearRange
  const base = toRaw(props.placeholder) ?? today(getLocalTimeZone())
  const start = props?.minValue ?? base.add({ years: -100 })
  const end = props?.maxValue ?? base.add({ years: 10 })
  const years: DateValue[] = []
  let current = start
  while (current.compare(end) <= 0) {
    years.push(current)
    current = current.add({ years: 1 })
  }
  return years
})

const [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()
const [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()

// Fix: Use simple ref for placeholder, not useVModel, to avoid .copy() error in reka-ui
const internalPlaceholder = ref(props.placeholder ?? today(getLocalTimeZone()))

function setMonth(e: Event) {
  const v = Number((e?.target as HTMLSelectElement | null)?.value)
  internalPlaceholder.value = (internalPlaceholder.value as DateValue).set({ month: v })
}
function setYear(e: Event) {
  const v = Number((e?.target as HTMLSelectElement | null)?.value)
  internalPlaceholder.value = (internalPlaceholder.value as DateValue).set({ year: v })
}
</script>

<template>
  <DefineMonthTemplate v-slot="{ date }">
    <div class="**:data-[slot=native-select-icon]:right-1">
      <div class="relative">
        <div class="pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm">
          {{ formatter.custom(toDate(date), { month: 'short' }) }}
        </div>
        <NativeSelect class="relative h-8 pr-6 pl-2 text-xs text-transparent" @change="setMonth">
          <NativeSelectOption
            v-for="month in createYear({ dateObj: date })"
            :key="month.toString()"
            :value="month.month"
            :selected="date.month === month.month"
          >
            {{ formatter.custom(toDate(month), { month: 'short' }) }}
          </NativeSelectOption>
        </NativeSelect>
      </div>
    </div>
  </DefineMonthTemplate>

  <DefineYearTemplate v-slot="{ date }">
    <div class="**:data-[slot=native-select-icon]:right-1">
      <div class="relative">
        <div class="pointer-events-none absolute inset-0 flex h-full items-center pl-2 text-sm">
          {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
        </div>
        <NativeSelect class="relative h-8 pr-6 pl-2 text-xs text-transparent" @change="setYear">
          <NativeSelectOption
            v-for="year in yearRange"
            :key="year.toString()"
            :value="year.year"
            :selected="date.year === year.year"
          >
            {{ formatter.custom(toDate(year), { year: 'numeric' }) }}
          </NativeSelectOption>
        </NativeSelect>
      </div>
    </div>
  </DefineYearTemplate>

  <CalendarRoot
    v-slot="{ grid, weekDays, date }"
    v-bind="forwarded"
    :placeholder="internalPlaceholder as DateValue"
    data-uipkge
    data-slot="calendar"
    :class="cn('p-3', props.class)"
    @update:placeholder="
      (val) => {
        internalPlaceholder = val
      }
    "
  >
    <CalendarHeader class="pt-0">
      <nav class="absolute inset-x-0 top-0 flex items-center justify-between gap-1">
        <CalendarPrevButton>
          <slot name="calendar-prev-icon" />
        </CalendarPrevButton>
        <CalendarNextButton>
          <slot name="calendar-next-icon" />
        </CalendarNextButton>
      </nav>

      <slot name="calendar-heading" :date="date" :month="ReuseMonthTemplate" :year="ReuseYearTemplate">
        <template v-if="layout === 'month-and-year'">
          <div class="flex items-center justify-center gap-1">
            <ReuseMonthTemplate :date="date" />
            <ReuseYearTemplate :date="date" />
          </div>
        </template>
        <template v-else-if="layout === 'month-only'">
          <div class="flex items-center justify-center gap-1">
            <ReuseMonthTemplate :date="date" />
            {{ formatter.custom(toDate(date), { year: 'numeric' }) }}
          </div>
        </template>
        <template v-else-if="layout === 'year-only'">
          <div class="flex items-center justify-center gap-1">
            {{ formatter.custom(toDate(date), { month: 'short' }) }}
            <ReuseYearTemplate :date="date" />
          </div>
        </template>
        <template v-else>
          <CalendarHeading />
        </template>
      </slot>
    </CalendarHeader>

    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
        <CalendarGridHead>
          <CalendarGridRow>
            <CalendarHeadCell v-for="day in weekDays" :key="day">
              {{ day }}
            </CalendarHeadCell>
          </CalendarGridRow>
        </CalendarGridHead>
        <CalendarGridBody>
          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
              <CalendarCellTrigger :day="weekDate" :month="month.value">
                <slot name="cell" :day="weekDate" :month="month.value">
                  {{ weekDate.day }}
                </slot>
              </CalendarCellTrigger>
            </CalendarCell>
          </CalendarGridRow>
        </CalendarGridBody>
      </CalendarGrid>
    </div>
  </CalendarRoot>
</template>

```

### `packages/registry-vue/components/calendar/CalendarCell.vue`

```vue
<script lang="ts" setup>
import type { CalendarCellProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarCell, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarCell
    data-uipkge
    data-slot="calendar-cell"
    :class="
      cn(
        '[&:has([data-selected])]:bg-accent relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarCell>
</template>

```

### `packages/registry-vue/components/calendar/CalendarCellTrigger.vue`

```vue
<script lang="ts" setup>
import type { CalendarCellTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarCellTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'button',
})

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarCellTrigger
    data-uipkge
    data-slot="calendar-cell-trigger"
    :class="
      cn(
        buttonVariants({ variant: 'ghost' }),
        'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',
        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
        // Selected
        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100',
        // Disabled
        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
        // Unavailable
        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
        // Outside months
        'data-[outside-view]:text-muted-foreground',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarCellTrigger>
</template>

```

### `packages/registry-vue/components/calendar/CalendarGrid.vue`

```vue
<script lang="ts" setup>
import type { CalendarGridProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarGrid, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarGrid
    data-uipkge
    data-slot="calendar-grid"
    :class="cn('w-full border-collapse space-x-1', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarGrid>
</template>

```

### `packages/registry-vue/components/calendar/CalendarGridBody.vue`

```vue
<script lang="ts" setup>
import type { CalendarGridBodyProps } from 'reka-ui'
import { CalendarGridBody } from 'reka-ui'

const props = defineProps<CalendarGridBodyProps>()
</script>

<template>
  <CalendarGridBody data-uipkge data-slot="calendar-grid-body" v-bind="props">
    <slot />
  </CalendarGridBody>
</template>

```

### `packages/registry-vue/components/calendar/CalendarGridHead.vue`

```vue
<script lang="ts" setup>
import type { CalendarGridHeadProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CalendarGridHead } from 'reka-ui'

const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <CalendarGridHead data-uipkge data-slot="calendar-grid-head" v-bind="props">
    <slot />
  </CalendarGridHead>
</template>

```

### `packages/registry-vue/components/calendar/CalendarGridRow.vue`

```vue
<script lang="ts" setup>
import type { CalendarGridRowProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarGridRow, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarGridRow data-uipkge data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
    <slot />
  </CalendarGridRow>
</template>

```

### `packages/registry-vue/components/calendar/CalendarHeadCell.vue`

```vue
<script lang="ts" setup>
import type { CalendarHeadCellProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarHeadCell, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarHeadCell
    data-uipkge
    data-slot="calendar-head-cell"
    :class="cn('text-muted-foreground flex-1 rounded-md text-xs font-normal', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarHeadCell>
</template>

```

### `packages/registry-vue/components/calendar/CalendarHeader.vue`

```vue
<script lang="ts" setup>
import type { CalendarHeaderProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarHeader, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarHeader
    data-uipkge
    data-slot="calendar-header"
    :class="cn('relative flex w-full items-center justify-center px-8 pt-1', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </CalendarHeader>
</template>

```

### `packages/registry-vue/components/calendar/CalendarHeading.vue`

```vue
<script lang="ts" setup>
import type { CalendarHeadingProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CalendarHeading, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()

defineSlots<{
  default: (props: { headingValue: string }) => any
}>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarHeading
    v-slot="{ headingValue }"
    data-uipkge
    data-slot="calendar-heading"
    :class="cn('text-sm font-medium', props.class)"
    v-bind="forwardedProps"
  >
    <slot :heading-value>
      {{ headingValue }}
    </slot>
  </CalendarHeading>
</template>

```

### `packages/registry-vue/components/calendar/CalendarNextButton.vue`

```vue
<script lang="ts" setup>
import type { CalendarNextProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import { CalendarNext, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarNext
    data-uipkge
    data-slot="calendar-next-button"
    :class="
      cn(
        buttonVariants({ variant: 'outline' }),
        'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot>
      <ChevronRight class="size-4" aria-hidden="true" />
    </slot>
  </CalendarNext>
</template>

```

### `packages/registry-vue/components/calendar/CalendarPrevButton.vue`

```vue
<script lang="ts" setup>
import type { CalendarPrevProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronLeft } from 'lucide-vue-next'
import { CalendarPrev, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <CalendarPrev
    data-uipkge
    data-slot="calendar-prev-button"
    :class="
      cn(
        buttonVariants({ variant: 'outline' }),
        'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot>
      <ChevronLeft class="size-4" aria-hidden="true" />
    </slot>
  </CalendarPrev>
</template>

```

### `packages/registry-vue/components/calendar/NativeSelect.vue`

```vue
<script setup lang="ts">
import type { AcceptableValue } from 'reka-ui'
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronDownIcon } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

interface Props {
  modelValue?: AcceptableValue | AcceptableValue[]
  class?: HTMLAttributes['class']
  label?: string
  placeholder?: string
  disabled?: boolean
  readonly?: boolean
  error?: boolean
  errorMessages?: string | string[]
  successMessages?: string | string[]
  hint?: string
  variant?: 'outlined' | 'filled' | 'solo' | 'underlined'
  density?: 'compact' | 'default' | 'comfortable'
  color?: 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info'
  hideDetails?: boolean
  bgColor?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: undefined,
  label: '',
  placeholder: '',
  disabled: false,
  readonly: false,
  error: false,
  errorMessages: () => [],
  successMessages: () => [],
  hint: '',
  variant: 'outlined',
  density: 'default',
  color: 'primary',
  hideDetails: false,
})

const emit = defineEmits<{
  'update:modelValue': AcceptableValue
}>()

const modelValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})

const delegatedProps = reactiveOmit(
  props,
  'class',
  'label',
  'placeholder',
  'disabled',
  'readonly',
  'error',
  'errorMessages',
  'successMessages',
  'hint',
  'variant',
  'density',
  'color',
  'hideDetails',
  'bgColor',
  'modelValue',
)

const hasError = computed(
  () => props.error || (Array.isArray(props.errorMessages) ? props.errorMessages.length > 0 : !!props.errorMessages),
)
const hasSuccess = computed(
  () =>
    !hasError.value &&
    (Array.isArray(props.successMessages) ? props.successMessages.length > 0 : !!props.successMessages),
)

const densityClasses = {
  compact: 'h-8 text-xs',
  default: 'h-9 text-sm',
  comfortable: 'h-10 text-base',
}

const variantClasses = {
  outlined: 'border bg-transparent',
  filled: 'border-b-2 bg-muted/30 border-transparent',
  solo: 'border bg-card shadow-md',
  underlined: 'border-b bg-transparent rounded-none border-x-0 border-t-0',
}

const stateClasses = computed(() => {
  if (hasError.value) return 'border-destructive focus-visible:ring-destructive/20'
  if (hasSuccess.value) return 'border-[var(--success)] focus-visible:border-[var(--success)]'
  return 'border-input focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-[3px]'
})
</script>

<template>
  <div class="relative w-full" :class="densityClasses[density]">
    <!-- Label -->
    <label v-if="label" class="mb-1 block text-sm font-medium" :class="{ 'text-destructive': hasError }">
      {{ label }}
    </label>

    <!-- Select Wrapper -->
    <div class="group/native-select relative w-full" :class="props.class">
      <select
        v-bind="{ ...$attrs, ...delegatedProps }"
        v-model="modelValue"
        data-uipkge
        data-slot="native-select"
        :disabled="disabled"
        :readonly="readonly"
        :class="
          cn(
            'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50',
            variantClasses[variant],
            stateClasses,
            densityClasses[density],
            'w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 pr-9 shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
            bgColor,
          )
        "
      >
        <slot />
      </select>
      <ChevronDownIcon
        class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
        :class="{
          'top-1/2': density === 'default' || density === 'compact' || density === 'comfortable',
        }"
        aria-hidden="true"
        data-uipkge
        data-slot="native-select-icon"
      />
    </div>

    <!-- Details: hint, error, success -->
    <div
      v-if="!hideDetails"
      class="mt-1 text-xs"
      :class="{
        'text-destructive': hasError,
        'text-[var(--success)]': hasSuccess,
        'text-muted-foreground': !hasError && !hasSuccess,
      }"
    >
      <template v-if="hasError">
        <span v-if="typeof errorMessages === 'string'">{{ errorMessages }}</span>
        <span v-else>{{ errorMessages[0] }}</span>
      </template>
      <template v-else-if="hasSuccess">
        <span v-if="typeof successMessages === 'string'">{{ successMessages }}</span>
        <span v-else>{{ successMessages[0] }}</span>
      </template>
      <template v-else>{{ hint }}</template>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/calendar/NativeSelectOption.vue`

```vue
<!-- @fallthroughAttributes true -->
<!-- @strictTemplates true -->

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
const dataAttrs = { 'data-slot': 'native-select-option' }
</script>

<template>
  <option v-bind="dataAttrs" :class="cn('bg-popover text-popover-foreground', props.class)">
    <slot />
  </option>
</template>

```

### `packages/registry-vue/components/calendar/index.ts`

```ts
export { default as Calendar } from './Calendar.vue'
export { default as CalendarCell } from './CalendarCell.vue'
export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
export { default as CalendarGrid } from './CalendarGrid.vue'
export { default as CalendarGridBody } from './CalendarGridBody.vue'
export { default as CalendarGridHead } from './CalendarGridHead.vue'
export { default as CalendarGridRow } from './CalendarGridRow.vue'
export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
export { default as CalendarHeader } from './CalendarHeader.vue'
export { default as CalendarHeading } from './CalendarHeading.vue'
export { default as CalendarNextButton } from './CalendarNextButton.vue'
export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
export { default as NativeSelect } from './NativeSelect.vue'
export { default as NativeSelectOption } from './NativeSelectOption.vue'

export type LayoutTypes = 'month-and-year' | 'month-only' | 'year-only' | undefined

```

## calendar-heatmap

- type: `registry:ui`
- description: Year / quarter calendar heatmap wrapper around Apache ECharts. GitHub-style contribution grid with palette overrides. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/calendar-heatmap/CalendarHeatmap.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts'
import { CalendarComponent, TooltipComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
} from '../useChartTheme'

interface Props {
  /** [date string YYYY-MM-DD, value] tuples. */
  data: [string, number][]
  range: string | [string, string]
  height?: number | string
  /** Cell colour ramp [from, to] - default: chart-1 from light to saturated. */
  colorRange?: [string, string]
  option?: any
  class?: string
}

use([CanvasRenderer, EChartsHeatmapChart, CalendarComponent, TooltipComponent, VisualMapComponent])

const props = withDefaults(defineProps<Props>(), {
  height: 200,
  colorRange: () => ['#fef3c7', '#d97706'],
})

const maxValue = computed(() => props.data.reduce((m, [, v]) => Math.max(m, v), 0) || 1)

const mergedOption = computed(() => ({
  color: chartColors.value,
  tooltip: {
    position: 'top',
    formatter: (p: any) => `<strong>${p.value[0]}</strong><br>${p.value[1]} contributions`,
    backgroundColor: chartTooltipBg.value,
    borderColor: chartTooltipBorder.value,
    textStyle: { color: chartTooltipText.value, fontSize: 12 },
  },
  visualMap: {
    show: false,
    min: 0,
    max: maxValue.value,
    inRange: { color: props.colorRange },
  },
  calendar: {
    top: 24,
    left: 36,
    right: 12,
    cellSize: ['auto', 14],
    range: props.range,
    itemStyle: { color: chartSplitLineColor.value, borderWidth: 0 },
    splitLine: { show: false },
    dayLabel: { color: chartTextColor.value, fontSize: 10, firstDay: 1, nameMap: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] },
    monthLabel: { color: chartTextColor.value, fontSize: 10, fontWeight: 600 },
    yearLabel: { show: false },
  },
  series: (() => {
    const series = [{ type: 'heatmap', coordinateSystem: 'calendar', data: props.data }]
    const userSeries = (props.option as any)?.series
    return Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series
  })(),
  // Strip `series` from the rest spread so the merge above isn't clobbered.
  ...(() => {
    const { series: _, ...rest } = (props.option as any) ?? {}
    return rest
  })(),
}))
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/calendar-heatmap/index.ts`

```ts
export { default as CalendarHeatmap } from './CalendarHeatmap.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## candlestick-chart

- type: `registry:ui`
- description: OHLC candlestick wrapper around Apache ECharts. Bullish/bearish coloring from registry tokens, optional data-zoom slider, axis-cross pointer.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/candlestick-chart/CandlestickChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { CandlestickChart as EChartsCandlestickChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, DataZoomComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsCandlestickChart, GridComponent, TooltipComponent, DataZoomComponent])

interface Candle {
  date: string
  open: number
  close: number
  low: number
  high: number
}

interface Props {
  data: Candle[]
  height?: number | string
  /** Show the bottom data-zoom slider. Default false. */
  zoom?: boolean
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 320,
  zoom: false,
})

const mergedOption = computed(() => {
  // ECharts candle data shape: [open, close, low, high].
  const candleData = props.data.map((c) => [c.open, c.close, c.low, c.high])
  const dates = props.data.map((c) => c.date)

  const series = [
    {
      type: 'candlestick',
      data: candleData,
      itemStyle: {
        // Bullish (close >= open) -> teal (chart-2). Bearish -> orange (chart-4).
        color: chartColors.value[1],
        color0: chartColors.value[3],
        borderColor: chartColors.value[1],
        borderColor0: chartColors.value[3],
      },
    },
  ]

  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    grid: mergeOptionBlock(
      { left: 16, right: 16, top: 24, bottom: props.zoom ? 60 : 24, containLabel: true },
      userGrid,
    ),
    tooltip: mergeOptionBlock(
      {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    xAxis: mergeOptionBlock(
      {
        type: 'category',
        data: dates,
        axisLine: { lineStyle: { color: chartAxisColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisTick: { show: false },
      },
      userXAxis,
    ),
    yAxis: mergeOptionBlock(
      {
        type: 'value',
        scale: true,
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      userYAxis,
    ),
    dataZoom: props.zoom ? [{ type: 'slider', bottom: 8, height: 18 }, { type: 'inside' }] : undefined,
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/candlestick-chart/index.ts`

```ts
export { default as CandlestickChart } from './CandlestickChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## card

- type: `registry:ui`
- description: Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/card/Card.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { cardVariants } from './card.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `CardVariants['variant']`.
const props = defineProps<{
  variant?: 'default' | 'elevated' | 'outline' | 'ghost'
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="card" :class="cn(cardVariants({ variant }), 'overflow-hidden', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/card/CardAction.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="card-action"
    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/card/CardContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="card-content" :class="cn('p-6 pt-0', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/card/CardDescription.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <p data-uipkge data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
    <slot />
  </p>
</template>

```

### `packages/registry-vue/components/card/CardFooter.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="card-footer" :class="cn('flex items-center p-6 pt-0', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/card/CardHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="card-header" :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/card/CardTitle.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <component
    :is="props.as ?? 'h3'"
    data-uipkge
    data-slot="card-title"
    :class="cn('leading-none font-semibold tracking-tight', props.class)"
  >
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/card/card.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'`
 * without creating a circular dependency back through the index. The circular
 * form caused intermittent `$setup.cardVariants is not a function` errors
 * during dev SSR when several `<Card>` instances rendered in a v-for before
 * the module graph had fully resolved.
 */
export const cardVariants = cva(
  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',
  {
    variants: {
      variant: {
        default: 'border-border',
        elevated: 'border-transparent shadow-md hover:shadow-md',
        outline: 'border-2',
        ghost: 'border-transparent shadow-none hover:bg-muted/50',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type CardVariants = VariantProps<typeof cardVariants>

```

### `packages/registry-vue/components/card/index.ts`

```ts
export { default as Card } from './Card.vue'
export { default as CardAction } from './CardAction.vue'
export { default as CardContent } from './CardContent.vue'
export { default as CardDescription } from './CardDescription.vue'
export { default as CardFooter } from './CardFooter.vue'
export { default as CardHeader } from './CardHeader.vue'
export { default as CardTitle } from './CardTitle.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Card.vue <-> index.ts circular import that broke dev SSR).
export { cardVariants, type CardVariants } from './card.variants'

```

## carousel

- type: `registry:ui`
- description: Horizontal or vertical scroller with previous/next controls. Hand-rolled `useCarousel` composable backed by native CSS scroll-snap — no external carousel library, just the browser. Drop in images, cards, or any custom slide content.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/carousel/Carousel.vue`

```vue
<!--
  Carousel Component
  
  A flexible carousel/slider for cycling through content.
  
  @example - Basic carousel with images
  <Carousel>
    <CarouselContent>
      <CarouselItem v-for="img in images" :key="img.id">
        <img :src="img.src" :alt="img.alt" class="w-full h-full object-cover" />
      </CarouselItem>
    </CarouselContent>
  </Carousel>
  
  @example - Carousel with navigation controls
  <Carousel v-model:active-index="activeIndex" :loop="true">
    <CarouselContent>
      <CarouselItem v-for="slide in slides" :key="slide.id">
        <SlideContent :content="slide" />
      </CarouselItem>
    </CarouselContent>
    <template #footer>
      <CarouselPrevious />
      <CarouselIndicators />
      <CarouselNext />
    </template>
  </Carousel>
  
  @example - Vertical carousel
  <Carousel orientation="vertical" :loop="false">
    <CarouselContent>
      <CarouselItem v-for="item in items" :key="item.id">
        {{ item }}
      </CarouselItem>
    </CarouselContent>
  </Carousel>
-->
<script setup lang="ts">
import { provide, computed, watch, onMounted, onUnmounted, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useCarousel } from './useCarousel'
import { carouselVariants } from './carousel.variants'

export interface CarouselProps {
  modelValue?: number
  orientation?: 'horizontal' | 'vertical'
  loop?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<CarouselProps>(), {
  modelValue: 0,
  orientation: 'horizontal',
  loop: false,
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const carousel = useCarousel({
  loop: props.loop,
  orientation: props.orientation,
})

// Sync modelValue → scroll when controlled externally
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== carousel.activeIndex.value) {
      carousel.scrollTo(newVal, false)
    }
  },
)

// Emit scroll position changes back to parent
function onScroll() {
  const newIndex = carousel.activeIndex.value
  if (newIndex !== props.modelValue) {
    emit('update:modelValue', newIndex)
  }
}

onMounted(() => {
  if (carousel.rootRef.value) {
    carousel.rootRef.value.addEventListener('scroll', onScroll, { passive: true })
  }
})

onUnmounted(() => {
  if (carousel.rootRef.value) {
    carousel.rootRef.value.removeEventListener('scroll', onScroll)
  }
})

// Provide to children
provide('carousel', {
  ...carousel,
  orientation: computed(() => props.orientation),
  loop: computed(() => props.loop),
})
</script>

<template>
  <div
    data-uipkge
    data-slot="carousel"
    :class="cn(carouselVariants({ orientation: props.orientation }), props.class)"
    role="region"
    aria-label="Carousel"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselContent.vue`

```vue
<!--
  CarouselContent
  
  The scrollable container for carousel items.
  Uses CSS scroll-snap for smooth sliding behavior.
  
  @example
  <CarouselContent>
    <CarouselItem v-for="slide in slides" :key="slide.id">
      <img :src="slide.src" :alt="slide.alt" />
    </CarouselItem>
  </CarouselContent>
-->
<script setup lang="ts">
import { inject, computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

const carousel = inject<{
  rootRef: { value: HTMLElement | null }
  orientation: { value: 'horizontal' | 'vertical' }
} | null>('carousel', null)

const isHorizontal = computed(() => carousel?.orientation?.value !== 'vertical')

const scrollClass = computed(() => {
  return isHorizontal.value
    ? 'flex overflow-x-auto scroll-smooth snap-x snap-mandatory'
    : 'flex flex-col overflow-y-auto snap-y snap-mandatory'
})
</script>

<template>
  <div
    :ref="
      (el) => {
        if (carousel) carousel.rootRef.value = el as HTMLElement
      }
    "
    data-uipkge
    data-slot="carousel-content"
    :class="
      cn(
        scrollClass,
        'relative h-full w-full',
        '[-ms-overflow-style:none] [scrollbar-width:none]',
        '[&::-webkit-scrollbar]:hidden',
        props.class,
      )
    "
    :aria-orientation="carousel?.orientation?.value"
    role="group"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselFooter.vue`

```vue
<!--
  CarouselFooter
  
  Wrapper for carousel footer content (pagination, indicators).
  
  @example
  <CarouselFooter>
    <CarouselIndicators />
  </CarouselFooter>
-->
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <div data-uipkge data-slot="carousel-footer" :class="cn('flex items-center justify-between px-1 pt-2', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselHeader.vue`

```vue
<!--
  CarouselHeader
  
  Wrapper for carousel header content (title, controls).
  
  @example
  <CarouselHeader>
    <h3>Featured Products</h3>
  </CarouselHeader>
-->
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <div data-uipkge data-slot="carousel-header" :class="cn('flex items-center justify-between px-1 pb-2', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselIndicators.vue`

```vue
<!--
  CarouselIndicators
  
  Pagination dots showing current slide position.
  Clicking a dot navigates to that slide.
  
  @example
  <CarouselIndicators />
-->
<script setup lang="ts">
import { inject, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

defineProps<Props>()

const carousel = inject<{
  activeIndex: { value: number }
  scrollSnaps: { value: number[] }
  scrollTo: (index: number, smooth?: boolean) => void
} | null>('carousel', null)
</script>

<template>
  <div
    v-if="carousel"
    data-uipkge
    data-slot="carousel-indicators"
    class="flex items-center justify-center gap-1.5 py-2"
    role="tablist"
    aria-label="Carousel navigation"
  >
    <button
      v-for="(_, index) in carousel.scrollSnaps.value"
      :key="index"
      type="button"
      role="tab"
      :aria-label="`Go to slide ${index + 1}`"
      :aria-selected="index === carousel.activeIndex.value"
      :class="
        cn(
          'h-2 w-2 rounded-full transition-all duration-200',
          index === carousel.activeIndex.value
            ? 'bg-primary w-6'
            : 'bg-muted-foreground/30 hover:bg-muted-foreground/50',
        )
      "
      @click="carousel.scrollTo(index, true)"
    />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselItem.vue`

```vue
<!--
  CarouselItem
  
  Individual slide within the carousel.
  Each item snaps into view when scrolled.
  
  @example
  <CarouselItem>
    <img src="/img1.jpg" alt="Slide 1" />
  </CarouselItem>
-->
<script setup lang="ts">
import { inject, computed, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { carouselItemVariants } from './index'

interface Props {
  class?: HTMLAttributes['class']
  active?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  active: false,
})

const carousel = inject<{
  orientation: { value: 'horizontal' | 'vertical' }
} | null>('carousel', null)

const itemClass = computed(() => {
  const orientation = carousel?.orientation?.value ?? 'horizontal'
  return carouselItemVariants({ orientation })
})
</script>

<template>
  <div
    data-uipkge
    data-slot="carousel-item"
    :class="cn(itemClass, 'shrink-0 grow-0 basis-full', 'snap-start', 'relative', props.class)"
    :aria-hidden="!props.active"
    role="group"
    :aria-roledescription="'slide'"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/carousel/CarouselNext.vue`

```vue
<!--
  CarouselNext
  
  Navigation button to go to the next slide.
  
  @example
  <CarouselNext label="Next slide" />
-->
<script setup lang="ts">
import { inject, computed, type HTMLAttributes } from 'vue'
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

interface Props {
  class?: HTMLAttributes['class']
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Next slide',
})

const carousel = inject<{
  canScrollNext: { value: boolean }
  scrollToNext: (smooth?: boolean) => void
  orientation: { value: 'horizontal' | 'vertical' }
} | null>('carousel', null)

const isHorizontal = computed(() => carousel?.orientation?.value !== 'vertical')
</script>

<template>
  <Button
    type="button"
    variant="outline"
    size="icon"
    :class="
      cn(
        'absolute z-10 size-8 shrink-0 rounded-full',
        'bg-background/80 border shadow-md backdrop-blur-sm',
        'hover:bg-accent hover:text-accent-foreground',
        'disabled:pointer-events-none disabled:opacity-50',
        isHorizontal ? 'top-1/2 -right-3 -translate-y-1/2' : '-bottom-3 left-1/2 -translate-x-1/2 rotate-90',
        props.class,
      )
    "
    :disabled="!carousel?.canScrollNext?.value"
    :aria-label="props.label"
    @click="carousel?.scrollToNext(true)"
  >
    <slot>
      <ChevronRight class="size-4" aria-hidden="true" />
    </slot>
  </Button>
</template>

```

### `packages/registry-vue/components/carousel/CarouselPrevious.vue`

```vue
<!--
  CarouselPrevious
  
  Navigation button to go to the previous slide.
  
  @example
  <CarouselPrevious label="Previous slide" />
-->
<script setup lang="ts">
import { inject, computed, type HTMLAttributes } from 'vue'
import { ChevronLeft } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

interface Props {
  class?: HTMLAttributes['class']
  label?: string
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Previous slide',
})

const carousel = inject<{
  canScrollPrev: { value: boolean }
  scrollToPrev: (smooth?: boolean) => void
  orientation: { value: 'horizontal' | 'vertical' }
} | null>('carousel', null)

const isHorizontal = computed(() => carousel?.orientation?.value !== 'vertical')
</script>

<template>
  <Button
    type="button"
    variant="outline"
    size="icon"
    :class="
      cn(
        'absolute z-10 size-8 shrink-0 rounded-full',
        'bg-background/80 border shadow-md backdrop-blur-sm',
        'hover:bg-accent hover:text-accent-foreground',
        'disabled:pointer-events-none disabled:opacity-50',
        isHorizontal ? 'top-1/2 -left-3 -translate-y-1/2' : '-top-3 left-1/2 -translate-x-1/2 rotate-90',
        props.class,
      )
    "
    :disabled="!carousel?.canScrollPrev?.value"
    :aria-label="props.label"
    @click="carousel?.scrollToPrev(true)"
  >
    <slot>
      <ChevronLeft class="size-4" aria-hidden="true" />
    </slot>
  </Button>
</template>

```

### `packages/registry-vue/components/carousel/carousel.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts` or inline in the SFC) so `Carousel.vue` / `CarouselItem.vue`
 * can import them without creating a circular dependency back through
 * the index. The circular form caused intermittent
 * `$setup.carouselVariants is not a function` errors during dev SSR.
 */
export const carouselVariants = cva('relative overflow-hidden', {
  variants: {
    orientation: {
      horizontal: 'w-full',
      vertical: 'h-full flex-col',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
})

export const carouselItemVariants = cva('flex shrink-0 grow-0 basis-full flex-col', {
  variants: {
    orientation: {
      horizontal: 'w-full',
      vertical: 'h-full',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
})

export type CarouselVariants = VariantProps<typeof carouselVariants>
export type CarouselItemVariants = VariantProps<typeof carouselItemVariants>

```

### `packages/registry-vue/components/carousel/useCarousel.ts`

```ts
/**
 * useCarousel
 *
 * Lightweight carousel composable using native CSS scroll-snap.
 * No external dependencies required.
 */
import { ref, computed, onMounted, onUnmounted, type Ref } from 'vue'

export interface CarouselOptions {
  loop?: boolean
  orientation?: 'horizontal' | 'vertical'
}

export interface UseCarouselReturn {
  activeIndex: Ref<number>
  scrollSnaps: Ref<number[]>
  canScrollPrev: Ref<boolean>
  canScrollNext: Ref<boolean>
  scrollTo: (index: number, smooth?: boolean) => void
  scrollToPrev: (smooth?: boolean) => void
  scrollToNext: (smooth?: boolean) => void
  rootRef: Ref<HTMLElement | null>
  orientation: Ref<'horizontal' | 'vertical'>
}

export function useCarousel(options: CarouselOptions = {}): UseCarouselReturn {
  const { loop = false, orientation = 'horizontal' } = options

  const rootRef = ref<HTMLElement | null>(null)
  const activeIndex = ref(0)
  const scrollSnaps = ref<number[]>([])
  const canScrollPrev = ref(false)
  const canScrollNext = ref(false)

  const isHorizontal = computed(() => orientation === 'horizontal')

  function getScrollPosition(): number {
    if (!rootRef.value) return 0
    return isHorizontal.value ? rootRef.value.scrollLeft : rootRef.value.scrollTop
  }

  function getItemSize(): number {
    if (!rootRef.value) return 0
    return isHorizontal.value ? rootRef.value.offsetWidth : rootRef.value.offsetHeight
  }

  function updateScrollState() {
    if (!rootRef.value) return

    const el = rootRef.value
    const itemSize = getItemSize()
    if (itemSize === 0) return

    const scrollPos = getScrollPosition()
    const scrollWidth = isHorizontal.value ? el.scrollWidth : el.scrollHeight
    const viewportSize = isHorizontal.value ? el.offsetWidth : el.offsetHeight

    // Calculate active index
    activeIndex.value = Math.round(scrollPos / itemSize)

    // Update scroll snaps
    const newSnaps: number[] = []
    const itemCount = Math.ceil(scrollWidth / itemSize)
    for (let i = 0; i < itemCount; i++) {
      newSnaps.push(i * itemSize)
    }
    scrollSnaps.value = newSnaps

    // Update navigation state
    canScrollPrev.value = loop || scrollPos > 0
    canScrollNext.value = loop || scrollPos < scrollWidth - viewportSize - 1
  }

  function scrollTo(index: number, smooth = true) {
    if (!rootRef.value || index < 0) return

    const el = rootRef.value
    const itemSize = getItemSize()
    if (itemSize === 0) return

    const targetScroll = index * itemSize
    el.scrollTo({
      left: isHorizontal.value ? targetScroll : 0,
      top: isHorizontal.value ? 0 : targetScroll,
      behavior: smooth ? 'smooth' : 'auto',
    })
  }

  function scrollToPrev(smooth = true) {
    const nextIndex = Math.max(0, activeIndex.value - 1)
    scrollTo(nextIndex, smooth)
  }

  function scrollToNext(smooth = true) {
    const maxIndex = scrollSnaps.value.length - 1
    const nextIndex = loop ? (activeIndex.value + 1) % (maxIndex + 1) : Math.min(maxIndex, activeIndex.value + 1)
    scrollTo(nextIndex, smooth)
  }

  let scrollHandler: (() => void) | null = null
  let resizeHandler: (() => void) | null = null

  onMounted(() => {
    if (rootRef.value) {
      updateScrollState()

      scrollHandler = () => updateScrollState()
      rootRef.value.addEventListener('scroll', scrollHandler, { passive: true })

      resizeHandler = () => updateScrollState()
      window.addEventListener('resize', resizeHandler, { passive: true })
    }
  })

  onUnmounted(() => {
    if (rootRef.value && scrollHandler) {
      rootRef.value.removeEventListener('scroll', scrollHandler)
    }
    if (resizeHandler) {
      window.removeEventListener('resize', resizeHandler)
    }
  })

  return {
    activeIndex,
    scrollSnaps,
    canScrollPrev,
    canScrollNext,
    scrollTo,
    scrollToPrev,
    scrollToNext,
    rootRef,
    orientation: ref(orientation),
  }
}

```

### `packages/registry-vue/components/carousel/index.ts`

```ts
export { default as Carousel } from './Carousel.vue'
export { default as CarouselContent } from './CarouselContent.vue'
export { default as CarouselItem } from './CarouselItem.vue'
export { default as CarouselPrevious } from './CarouselPrevious.vue'
export { default as CarouselNext } from './CarouselNext.vue'
export { default as CarouselIndicators } from './CarouselIndicators.vue'
export { default as CarouselHeader } from './CarouselHeader.vue'
export { default as CarouselFooter } from './CarouselFooter.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Carousel.vue <-> index.ts circular import that broke dev SSR).
export {
  carouselVariants,
  carouselItemVariants,
  type CarouselVariants,
  type CarouselItemVariants,
} from './carousel.variants'

```

## cascade-select

- type: `registry:ui`
- description: Hierarchical cascading select where each level selection determines the next level options. Displays the selected path as labels. Supports search, clearable, disabled, and loading states.
- npm deps: `lucide-vue-next`, `reka-ui`
- registry deps: `popover`

### `packages/registry-vue/components/cascade-select/CascadeSelect.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { Check, ChevronDown, ChevronRight, Loader2, Search, X } from 'lucide-vue-next'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'
import type { CascadeOption } from './types'

interface Props {
  modelValue?: string[] | null
  options: CascadeOption[]
  placeholder?: string
  searchable?: boolean
  clearable?: boolean
  disabled?: boolean
  loading?: boolean
  size?: 'sm' | 'default' | 'lg'
  separator?: string
  searchPlaceholder?: string
  emptyText?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: 'Select...',
  searchable: true,
  clearable: true,
  disabled: false,
  loading: false,
  size: 'default',
  separator: ' / ',
  searchPlaceholder: 'Search...',
  emptyText: 'No options.',
})

const emits = defineEmits<{
  'update:modelValue': [value: string[] | null]
  change: [value: string[] | null, path: CascadeOption[]]
  clear: []
}>()

const isOpen = ref(false)
const activePath = ref<number[]>([])
const search = ref('')

// Sync active path with modelValue when opened
watch(isOpen, (open) => {
  if (open && props.modelValue?.length) {
    activePath.value = findPathIndices(props.options, props.modelValue)
  } else if (open) {
    activePath.value = []
  }
  if (!open) search.value = ''
})

function findPathIndices(options: CascadeOption[], values: string[]): number[] {
  const indices: number[] = []
  let current = options
  for (const val of values) {
    const idx = current.findIndex((o) => o.value === val)
    if (idx === -1) return indices
    indices.push(idx)
    const next = current[idx].children
    if (!next?.length) break
    current = next
  }
  return indices
}

function getOptionsAtLevel(level: number): CascadeOption[] {
  let current = props.options
  for (let i = 0; i < level; i++) {
    const idx = activePath.value[i]
    if (idx == null || !current[idx]?.children?.length) return []
    current = current[idx].children!
  }
  return current
}

function selectAtLevel(level: number, index: number) {
  const option = getOptionsAtLevel(level)[index]
  if (option?.disabled) return
  const next = [...activePath.value]
  next[level] = index
  next.splice(level + 1)
  activePath.value = next

  // If leaf node, emit the value
  if (!option?.children?.length) {
    const path = buildPathFromIndices(next)
    const values = path.map((p) => p.value)
    emits('update:modelValue', values)
    emits('change', values, path)
    isOpen.value = false
  }
}

function buildPathFromIndices(indices: number[]): CascadeOption[] {
  const path: CascadeOption[] = []
  let current = props.options
  for (const idx of indices) {
    if (idx == null || !current[idx]) break
    const opt = current[idx]
    path.push(opt)
    if (!opt.children?.length) break
    current = opt.children
  }
  return path
}

const selectedPath = computed<CascadeOption[]>(() => {
  if (!props.modelValue?.length) return []
  return buildPathFromIndices(findPathIndices(props.options, props.modelValue))
})

const displayLabel = computed(() => {
  if (selectedPath.value.length === 0) return props.placeholder
  return selectedPath.value.map((p) => p.label).join(props.separator)
})

const hasValue = computed(() => selectedPath.value.length > 0)

function clearAll(event?: Event) {
  event?.stopPropagation()
  if (props.disabled) return
  emits('clear')
  emits('update:modelValue', null)
  emits('change', null, [])
  activePath.value = []
}

// Search: flatten the tree and match
const searchResults = computed(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return null
  const results: { path: CascadeOption[]; values: string[] }[] = []
  const walk = (options: CascadeOption[], path: CascadeOption[], values: string[]) => {
    for (const opt of options) {
      const newPath = [...path, opt]
      const newValues = [...values, opt.value]
      if (opt.label.toLowerCase().includes(q) && !opt.children?.length) {
        results.push({ path: newPath, values: newValues })
      }
      if (opt.children?.length) {
        walk(opt.children, newPath, newValues)
      }
    }
  }
  walk(props.options, [], [])
  return results
})

function selectSearchResult(result: { path: CascadeOption[]; values: string[] }) {
  emits('update:modelValue', result.values)
  emits('change', result.values, result.path)
  isOpen.value = false
  search.value = ''
}

const sizeClasses = {
  sm: 'h-8 text-xs px-2.5',
  default: 'h-9 text-sm px-3',
  lg: 'h-11 text-base px-4',
}

const triggerClasses = computed(() =>
  cn(
    'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none',
    'hover:border-ring/50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
    'disabled:cursor-not-allowed disabled:opacity-50',
    sizeClasses[props.size],
    props.class,
  ),
)

const levels = computed(() => {
  const result: { options: CascadeOption[]; level: number }[] = [{ options: props.options, level: 0 }]
  for (let i = 0; i < activePath.value.length; i++) {
    const idx = activePath.value[i]
    const current = result[i].options
    if (idx == null || !current[idx]?.children?.length) break
    result.push({ options: current[idx].children!, level: i + 1 })
  }
  return result
})
</script>

<template>
  <Popover v-model:open="isOpen">
    <PopoverTrigger as-child>
      <button
        type="button"
        role="combobox"
        :aria-expanded="isOpen"
        :disabled="disabled || loading"
        data-uipkge
        data-slot="cascade-select"
        :class="triggerClasses"
      >
        <span :class="['flex-1 truncate text-left', hasValue ? 'text-foreground' : 'text-muted-foreground']">
          {{ displayLabel }}
        </span>
        <span class="flex shrink-0 items-center gap-1">
          <Loader2 v-if="loading" class="text-muted-foreground size-4 animate-spin" />
          <span
            v-else-if="clearable && hasValue && !disabled"
            role="button"
            tabindex="0"
            aria-label="Clear"
            class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex size-4 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
            @click.stop="clearAll"
            @keydown.enter.prevent="clearAll"
            @keydown.space.prevent="clearAll"
          >
            <X class="size-4" />
          </span>
          <ChevronDown
            v-else
            class="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
            :class="isOpen ? 'rotate-180' : ''"
          />
        </span>
      </button>
    </PopoverTrigger>

    <PopoverContent class="p-0" align="start" :side-offset="4" :style="{ width: 'var(--reka-popover-trigger-width)' }">
      <div class="flex max-h-80 flex-col">
        <div v-if="searchable" class="border-b p-2">
          <div class="relative">
            <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
            <input
              v-model="search"
              :placeholder="searchPlaceholder"
              aria-label="Search options"
              class="border-input focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent pl-8 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
            />
          </div>
        </div>

        <div v-if="loading" class="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
          <Loader2 class="size-4 animate-spin" />
          Loading...
        </div>

        <!-- Search results -->
        <div v-else-if="searchResults" class="flex-1 overflow-y-auto p-1">
          <div v-if="searchResults.length === 0" class="text-muted-foreground py-6 text-center text-sm">
            {{ emptyText }}
          </div>
          <button
            v-for="(result, i) in searchResults"
            :key="i"
            type="button"
            class="hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:outline-none"
            @click="selectSearchResult(result)"
          >
            <span class="flex-1 truncate">{{ result.path.map((p) => p.label).join(separator) }}</span>
          </button>
        </div>

        <!-- Cascading panels — horizontal scroll -->
        <div v-else class="flex flex-1 overflow-x-auto overflow-y-hidden">
          <div
            v-for="lvl in levels"
            :key="lvl.level"
            class="max-w-56 min-w-44 shrink-0 overflow-y-auto border-r p-1 last:border-r-0"
          >
            <button
              v-for="(opt, idx) in lvl.options"
              :key="opt.value"
              type="button"
              :disabled="opt.disabled"
              :class="
                cn(
                  'flex w-full items-center justify-between gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none',
                  'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
                  'disabled:cursor-not-allowed disabled:opacity-50',
                  activePath[lvl.level] === idx && 'bg-accent text-accent-foreground font-medium',
                )
              "
              @click="selectAtLevel(lvl.level, idx)"
            >
              <span class="flex-1 truncate">{{ opt.label }}</span>
              <Check v-if="activePath[lvl.level] === idx && !opt.children?.length" class="size-4 shrink-0" />
              <ChevronRight v-else-if="opt.children?.length" class="text-muted-foreground size-3.5 shrink-0" />
            </button>
          </div>
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/cascade-select/types.ts`

```ts
export interface CascadeOption {
  value: string
  label: string
  disabled?: boolean
  children?: CascadeOption[]
  [key: string]: unknown
}

```

### `packages/registry-vue/components/cascade-select/index.ts`

```ts
export { default as CascadeSelect } from './CascadeSelect.vue'
export type { CascadeOption } from './types'

```

## charts

- type: `registry:ui`
- description: Meta-bundle that installs every chart wrapper at once -- 23 charts spanning cartesian (area / bar / line / scatter / candlestick / theme-river), circular (pie / radar / gauge / segmented-gauge), hierarchy (treemap / funnel / smooth-funnel / sunburst / tree), flow (sankey / graph / parallel), distribution (boxplot), specialty (heatmap / calendar-heatmap / sparkline), and the raw escape hatch. Each is also installable on its own.
- registry deps: `area-chart`, `bar-chart`, `boxplot-chart`, `calendar-heatmap`, `candlestick-chart`, `funnel-chart`, `gauge-chart`, `graph-chart`, `heatmap`, `line-chart`, `parallel-chart`, `pie-chart`, `radar-chart`, `raw-chart`, `sankey-chart`, `scatter-chart`, `segmented-gauge`, `smooth-funnel`, `sparkline`, `sunburst-chart`, `theme-river`, `tree-chart`, `treemap-chart`

## chat-thread

- type: `registry:block`
- description: Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `button`, `textarea`

### `packages/registry-vue/blocks/chat-thread/ChatThread.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { ArrowRight, AtSign, Paperclip, Phone, Smile, Video, MoreVertical, Check, CheckCheck } from 'lucide-vue-next'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'

type MessageStatus = 'sent' | 'delivered' | 'read'

interface Message {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: MessageStatus
}

const now = new Date()
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const peer = {
  name: 'Marcus Rivera',
  handle: '@marcus',
  avatarUrl: '',
  initials: 'MR',
  online: true,
  lastSeen: 'Active now',
}

const messages = ref<Message[]>([
  {
    id: 'm1',
    author: 'them',
    body: 'Hey — did you get a chance to look at the onboarding doc?',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 14 * 60 * 1000),
  },
  {
    id: 'm2',
    author: 'me',
    body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 21 * 60 * 1000),
    status: 'read',
  },
  {
    id: 'm3',
    author: 'them',
    body: 'Perfect. Drop them in the doc and I will action this afternoon.',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 23 * 60 * 1000),
  },
  {
    id: 'm4',
    author: 'me',
    body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',
    sentAt: new Date(now.getTime() - 42 * 60 * 1000),
    status: 'read',
  },
  {
    id: 'm5',
    author: 'them',
    body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',
    sentAt: new Date(now.getTime() - 8 * 60 * 1000),
  },
])

const draft = ref('')
const scrollRoot = ref<HTMLElement | null>(null)
const peerTyping = ref(false)

const groupedMessages = computed(() => {
  const groups: Array<{ label: string; items: Message[] }> = []
  for (const m of messages.value) {
    const label = dayLabel(m.sentAt)
    const last = groups[groups.length - 1]
    if (last && last.label === label) last.items.push(m)
    else groups.push({ label, items: [m] })
  }
  return groups
})

function dayLabel(d: Date): string {
  const sameDay = d.toDateString() === now.toDateString()
  if (sameDay) return 'Today'
  const sameYesterday = d.toDateString() === yesterday.toDateString()
  if (sameYesterday) return 'Yesterday'
  return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

async function send() {
  const body = draft.value.trim()
  if (!body) return
  messages.value.push({
    id: `m${Date.now()}`,
    author: 'me',
    body,
    sentAt: new Date(),
    status: 'sent',
  })
  draft.value = ''
  await nextTick()
  scrollToBottom()
  peerTyping.value = true
  window.setTimeout(() => {
    peerTyping.value = false
  }, 1800)
}

function onComposerKey(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    send()
  }
}

function scrollToBottom() {
  if (!scrollRoot.value) return
  scrollRoot.value.scrollTop = scrollRoot.value.scrollHeight
}

watch(messages, () => nextTick(scrollToBottom), { deep: true })

onMounted(() => nextTick(scrollToBottom))
</script>

<template>
  <div class="bg-card text-card-foreground flex h-[680px] w-full flex-col overflow-hidden rounded-xl border shadow-sm">
    <header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
      <div class="flex min-w-0 items-center gap-3">
        <div class="relative">
          <Avatar class="size-9">
            <AvatarImage v-if="peer.avatarUrl" :src="peer.avatarUrl" :alt="peer.name" />
            <AvatarFallback class="text-xs font-medium">{{ peer.initials }}</AvatarFallback>
          </Avatar>
          <span
            v-if="peer.online"
            class="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
          />
        </div>
        <div class="min-w-0">
          <p class="truncate text-sm font-semibold tracking-tight">{{ peer.name }}</p>
          <p class="text-muted-foreground truncate text-xs">{{ peer.lastSeen }}</p>
        </div>
      </div>
      <div class="flex items-center gap-1">
        <Button variant="ghost" size="icon" class="size-8" aria-label="Voice call">
          <Phone class="size-4" />
        </Button>
        <Button variant="ghost" size="icon" class="size-8" aria-label="Video call">
          <Video class="size-4" />
        </Button>
        <Button variant="ghost" size="icon" class="size-8" aria-label="More options">
          <MoreVertical class="size-4" />
        </Button>
      </div>
    </header>

    <div ref="scrollRoot" class="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
      <div v-for="group in groupedMessages" :key="group.label" class="space-y-3">
        <div class="flex items-center justify-center">
          <span
            class="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-[10px] font-medium tracking-wide uppercase"
          >
            {{ group.label }}
          </span>
        </div>
        <div
          v-for="m in group.items"
          :key="m.id"
          :class="['flex items-end gap-2', m.author === 'me' ? 'justify-end' : 'justify-start']"
        >
          <Avatar v-if="m.author === 'them'" class="size-7">
            <AvatarFallback class="text-[10px]">{{ peer.initials }}</AvatarFallback>
          </Avatar>
          <div :class="['flex max-w-[78%] flex-col gap-1', m.author === 'me' ? 'items-end' : 'items-start']">
            <div
              :class="[
                'rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm',
                m.author === 'me'
                  ? 'bg-primary text-primary-foreground rounded-br-md'
                  : 'bg-muted text-foreground rounded-bl-md',
              ]"
            >
              {{ m.body }}
            </div>
            <div class="text-muted-foreground flex items-center gap-1 px-1 text-[10px] tabular-nums">
              <span>{{ formatTime(m.sentAt) }}</span>
              <CheckCheck v-if="m.author === 'me' && m.status === 'read'" class="text-info size-3" />
              <CheckCheck v-else-if="m.author === 'me' && m.status === 'delivered'" class="size-3" />
              <Check v-else-if="m.author === 'me' && m.status === 'sent'" class="size-3" />
            </div>
          </div>
        </div>
      </div>

      <div v-if="peerTyping" class="flex items-end gap-2">
        <Avatar class="size-7">
          <AvatarFallback class="text-[10px]">{{ peer.initials }}</AvatarFallback>
        </Avatar>
        <div class="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
          <span class="typing-dot" />
          <span class="typing-dot" style="animation-delay: 0.15s" />
          <span class="typing-dot" style="animation-delay: 0.3s" />
        </div>
      </div>
    </div>

    <div class="bg-muted/20 border-t px-4 py-3">
      <div
        class="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4"
      >
        <Textarea
          v-model="draft"
          :placeholder="`Message ${peer.name.split(' ')[0]}`"
          rows="1"
          variant="plain"
          class="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
          @keydown="onComposerKey"
        />
        <div class="flex items-center justify-between gap-2 px-2 pb-2">
          <div class="flex items-center gap-0.5">
            <Button
              variant="ghost"
              size="icon"
              class="text-muted-foreground hover:text-foreground size-8"
              aria-label="Attach file"
            >
              <Paperclip class="size-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              class="text-muted-foreground hover:text-foreground size-8"
              aria-label="Emoji"
            >
              <Smile class="size-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              class="text-muted-foreground hover:text-foreground size-8"
              aria-label="Mention"
            >
              <AtSign class="size-4" />
            </Button>
          </div>
          <div class="flex items-center gap-2">
            <kbd
              class="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex"
            >
              <span>↵</span>
            </kbd>
            <Button
              class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
              :disabled="!draft.trim()"
              aria-label="Send"
              @click="send"
            >
              Send
              <ArrowRight class="size-3.5" />
            </Button>
          </div>
        </div>
      </div>
      <p class="text-muted-foreground/70 mt-2 text-center text-[10px]">
        <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">Enter</kbd>
        to send
        <span class="mx-1.5 opacity-50">·</span>
        <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">Shift</kbd>
        +
        <kbd class="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">↵</kbd>
        for newline
      </p>
    </div>
  </div>
</template>

<style scoped>
.chat-scroll::-webkit-scrollbar {
  width: 6px;
}
.chat-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.5;
  animation: typing-bounce 1s infinite ease-in-out;
}
@keyframes typing-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}
</style>

```

## chat-two-pane

- type: `registry:block`
- description: Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `button`, `input`, `textarea`

### `packages/registry-vue/blocks/chat-two-pane/ChatTwoPane.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import {
  ArrowRight,
  AtSign,
  Paperclip,
  Phone,
  Smile,
  Video,
  MoreVertical,
  Search,
  Pin,
  CheckCheck,
  SquarePen,
  Filter,
} from 'lucide-vue-next'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

interface Conversation {
  id: string
  name: string
  initials: string
  avatarUrl?: string
  lastMessage: string
  lastAt: Date
  unread: number
  online: boolean
  pinned?: boolean
  muted?: boolean
}

interface Message {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: 'sent' | 'delivered' | 'read'
}

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const conversations = ref<Conversation[]>([
  {
    id: 'c1',
    name: 'Marcus Rivera',
    initials: 'MR',
    lastMessage: 'Yes! I will bring the kanban deck. Want to push it to 10:30?',
    lastAt: new Date(now.getTime() - 8 * 60 * 1000),
    unread: 2,
    online: true,
    pinned: true,
  },
  {
    id: 'c2',
    name: 'Sarah Connor',
    initials: 'SC',
    lastMessage: 'Approved — feel free to take Mar 15-18 off.',
    lastAt: new Date(now.getTime() - 52 * 60 * 1000),
    unread: 0,
    online: true,
  },
  {
    id: 'c3',
    name: 'Design Team',
    initials: 'DT',
    lastMessage: 'Priya: pushed the new color tokens to staging.',
    lastAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    unread: 5,
    online: false,
    pinned: true,
  },
  {
    id: 'c4',
    name: 'Alice Johnson',
    initials: 'AJ',
    lastMessage: 'Thanks! Will follow up after lunch.',
    lastAt: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    unread: 0,
    online: false,
  },
  {
    id: 'c5',
    name: 'Engineering',
    initials: 'EN',
    lastMessage: 'Devon: deploy is green, going home.',
    lastAt: yesterday,
    unread: 0,
    online: false,
    muted: true,
  },
  {
    id: 'c6',
    name: 'Priya Shah',
    initials: 'PS',
    lastMessage: 'Sent the spec — let me know what you think.',
    lastAt: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    unread: 0,
    online: false,
  },
  {
    id: 'c7',
    name: 'Devon Patel',
    initials: 'DP',
    lastMessage: 'You: pushed the fix, should be live in 10.',
    lastAt: new Date(now.getTime() - 50 * 60 * 60 * 1000),
    unread: 0,
    online: true,
  },
])

const messagesByConvo: Record<string, Message[]> = {
  c1: [
    {
      id: 'm1',
      author: 'them',
      body: 'Hey — did you get a chance to look at the onboarding doc?',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000),
    },
    {
      id: 'm2',
      author: 'me',
      body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 7 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm3',
      author: 'them',
      body: 'Perfect. Drop them in the doc and I will action this afternoon.',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 9 * 60 * 1000),
    },
    {
      id: 'm4',
      author: 'me',
      body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',
      sentAt: new Date(now.getTime() - 42 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm5',
      author: 'them',
      body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',
      sentAt: new Date(now.getTime() - 8 * 60 * 1000),
    },
  ],
  c2: [
    {
      id: 'm1',
      author: 'me',
      body: 'Hey Sarah — submitting time-off for Mar 15-18.',
      sentAt: new Date(now.getTime() - 95 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm2',
      author: 'them',
      body: 'Approved — feel free to take Mar 15-18 off.',
      sentAt: new Date(now.getTime() - 52 * 60 * 1000),
    },
  ],
  c3: [
    {
      id: 'm1',
      author: 'them',
      body: 'Priya: pushed the new color tokens to staging. Reviews welcome.',
      sentAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    },
  ],
  c4: [
    {
      id: 'm1',
      author: 'them',
      body: 'Thanks! Will follow up after lunch.',
      sentAt: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    },
  ],
  c5: [{ id: 'm1', author: 'them', body: 'Devon: deploy is green, going home.', sentAt: yesterday }],
  c6: [
    {
      id: 'm1',
      author: 'them',
      body: 'Sent the spec — let me know what you think.',
      sentAt: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    },
  ],
  c7: [
    {
      id: 'm1',
      author: 'me',
      body: 'pushed the fix, should be live in 10.',
      sentAt: new Date(now.getTime() - 50 * 60 * 60 * 1000),
      status: 'read',
    },
  ],
}

const search = ref('')
const activeId = ref<string>('c1')
const draft = ref('')
const scrollRoot = ref<HTMLElement | null>(null)
const peerTyping = ref(false)

const activeConvo = computed(() => conversations.value.find((c) => c.id === activeId.value)!)
const activeMessages = computed<Message[]>(() => messagesByConvo[activeId.value] ?? [])

const filteredConvos = computed(() => {
  const q = search.value.trim().toLowerCase()
  const list = q
    ? conversations.value.filter((c) => c.name.toLowerCase().includes(q) || c.lastMessage.toLowerCase().includes(q))
    : conversations.value
  return [...list].sort((a, b) => {
    if (a.pinned !== b.pinned) return a.pinned ? -1 : 1
    return b.lastAt.getTime() - a.lastAt.getTime()
  })
})

const groupedMessages = computed(() => {
  const groups: Array<{ label: string; items: Message[] }> = []
  for (const m of activeMessages.value) {
    const label = dayLabel(m.sentAt)
    const last = groups[groups.length - 1]
    if (last && last.label === label) last.items.push(m)
    else groups.push({ label, items: [m] })
  }
  return groups
})

function dayLabel(d: Date): string {
  if (d.toDateString() === now.toDateString()) return 'Today'
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

function formatConvoTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000))
  if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' })
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

function selectConvo(id: string) {
  activeId.value = id
  const c = conversations.value.find((c) => c.id === id)
  if (c) c.unread = 0
  nextTick(scrollToBottom)
}

async function send() {
  const body = draft.value.trim()
  if (!body) return
  const list = messagesByConvo[activeId.value] ?? []
  list.push({ id: `m${Date.now()}`, author: 'me', body, sentAt: new Date(), status: 'sent' })
  messagesByConvo[activeId.value] = list
  draft.value = ''
  activeConvo.value.lastMessage = `You: ${body}`
  activeConvo.value.lastAt = new Date()
  await nextTick()
  scrollToBottom()
  peerTyping.value = true
  window.setTimeout(() => (peerTyping.value = false), 1600)
}

function onComposerKey(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    send()
  }
}

function scrollToBottom() {
  if (!scrollRoot.value) return
  scrollRoot.value.scrollTop = scrollRoot.value.scrollHeight
}

watch(activeId, () => nextTick(scrollToBottom))
</script>

<template>
  <div
    class="bg-card text-card-foreground grid h-[680px] w-full grid-cols-[280px_1fr] overflow-hidden rounded-xl border shadow-sm"
  >
    <aside class="bg-muted/30 flex min-w-0 flex-col border-r">
      <div class="flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
        <h2 class="text-sm font-semibold tracking-tight">Messages</h2>
        <div class="flex items-center gap-1">
          <Button variant="ghost" size="icon" class="size-8" aria-label="Filter">
            <Filter class="size-4" />
          </Button>
          <Button variant="ghost" size="icon" class="size-8" aria-label="New conversation">
            <SquarePen class="size-4" />
          </Button>
        </div>
      </div>
      <div class="px-3 pt-3 pb-2">
        <div class="relative">
          <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
          <Input v-model="search" placeholder="Search" class="h-8 rounded-lg pl-8 text-xs" />
        </div>
      </div>
      <div class="convo-scroll flex-1 overflow-y-auto pb-3">
        <button
          v-for="c in filteredConvos"
          :key="c.id"
          :class="[
            'flex w-full items-start gap-3 px-3 py-2.5 text-left transition-colors',
            c.id === activeId ? 'bg-primary/10' : 'hover:bg-muted/60',
          ]"
          @click="selectConvo(c.id)"
        >
          <div class="relative shrink-0">
            <Avatar class="size-9">
              <AvatarImage v-if="c.avatarUrl" :src="c.avatarUrl" :alt="c.name" />
              <AvatarFallback class="text-[11px]">{{ c.initials }}</AvatarFallback>
            </Avatar>
            <span
              v-if="c.online"
              class="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
            />
          </div>
          <div class="min-w-0 flex-1">
            <div class="flex items-center justify-between gap-1.5">
              <p :class="['truncate text-[13px]', c.unread > 0 ? 'font-semibold' : 'font-medium']">
                {{ c.name }}
              </p>
              <span class="text-muted-foreground shrink-0 text-[10px] tabular-nums">
                {{ formatConvoTime(c.lastAt) }}
              </span>
            </div>
            <div class="mt-0.5 flex items-center justify-between gap-1.5">
              <p :class="['truncate text-xs', c.unread > 0 ? 'text-foreground/80' : 'text-muted-foreground']">
                {{ c.lastMessage }}
              </p>
              <div class="flex shrink-0 items-center gap-1">
                <Pin v-if="c.pinned" class="text-muted-foreground size-3" />
                <span
                  v-if="c.unread > 0"
                  class="bg-primary text-primary-foreground inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold tabular-nums"
                >
                  {{ c.unread }}
                </span>
              </div>
            </div>
          </div>
        </button>
      </div>
    </aside>

    <section class="flex min-w-0 flex-col">
      <header class="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
        <div class="flex min-w-0 items-center gap-3">
          <div class="relative">
            <Avatar class="size-9">
              <AvatarFallback class="text-xs font-medium">{{ activeConvo.initials }}</AvatarFallback>
            </Avatar>
            <span
              v-if="activeConvo.online"
              class="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
            />
          </div>
          <div class="min-w-0">
            <p class="truncate text-sm font-semibold tracking-tight">{{ activeConvo.name }}</p>
            <p class="text-muted-foreground truncate text-xs">
              {{ activeConvo.online ? 'Active now' : 'Active 2h ago' }}
            </p>
          </div>
        </div>
        <div class="flex items-center gap-1">
          <Button variant="ghost" size="icon" class="size-8" aria-label="Voice call">
            <Phone class="size-4" />
          </Button>
          <Button variant="ghost" size="icon" class="size-8" aria-label="Video call">
            <Video class="size-4" />
          </Button>
          <Button variant="ghost" size="icon" class="size-8" aria-label="More options">
            <MoreVertical class="size-4" />
          </Button>
        </div>
      </header>

      <div ref="scrollRoot" class="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
        <div v-for="group in groupedMessages" :key="group.label" class="space-y-3">
          <div class="flex items-center justify-center">
            <span
              class="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-[10px] font-medium tracking-wide uppercase"
            >
              {{ group.label }}
            </span>
          </div>
          <div
            v-for="m in group.items"
            :key="m.id"
            :class="['flex items-end gap-2', m.author === 'me' ? 'justify-end' : 'justify-start']"
          >
            <Avatar v-if="m.author === 'them'" class="size-7">
              <AvatarFallback class="text-[10px]">{{ activeConvo.initials }}</AvatarFallback>
            </Avatar>
            <div :class="['flex max-w-[78%] flex-col gap-1', m.author === 'me' ? 'items-end' : 'items-start']">
              <div
                :class="[
                  'rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm',
                  m.author === 'me'
                    ? 'bg-primary text-primary-foreground rounded-br-md'
                    : 'bg-muted text-foreground rounded-bl-md',
                ]"
              >
                {{ m.body }}
              </div>
              <div class="text-muted-foreground flex items-center gap-1 px-1 text-[10px] tabular-nums">
                <span>{{ formatTime(m.sentAt) }}</span>
                <CheckCheck v-if="m.author === 'me' && m.status === 'read'" class="text-info size-3" />
              </div>
            </div>
          </div>
        </div>

        <div v-if="peerTyping" class="flex items-end gap-2">
          <Avatar class="size-7">
            <AvatarFallback class="text-[10px]">{{ activeConvo.initials }}</AvatarFallback>
          </Avatar>
          <div class="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
            <span class="typing-dot" />
            <span class="typing-dot" style="animation-delay: 0.15s" />
            <span class="typing-dot" style="animation-delay: 0.3s" />
          </div>
        </div>
      </div>

      <div class="bg-muted/20 border-t px-4 py-3">
        <div
          class="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4"
        >
          <Textarea
            v-model="draft"
            :placeholder="`Message ${activeConvo.name.split(' ')[0]}`"
            rows="1"
            class="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
            @keydown="onComposerKey"
          />
          <div class="flex items-center justify-between gap-2 px-2 pb-2">
            <div class="flex items-center gap-0.5">
              <Button
                variant="ghost"
                size="icon"
                class="text-muted-foreground hover:text-foreground size-8"
                aria-label="Attach file"
              >
                <Paperclip class="size-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                class="text-muted-foreground hover:text-foreground size-8"
                aria-label="Emoji"
              >
                <Smile class="size-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                class="text-muted-foreground hover:text-foreground size-8"
                aria-label="Mention"
              >
                <AtSign class="size-4" />
              </Button>
            </div>
            <div class="flex items-center gap-2">
              <kbd
                class="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex"
              >
                <span>↵</span>
              </kbd>
              <Button
                class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                :disabled="!draft.trim()"
                aria-label="Send"
                @click="send"
              >
                Send
                <ArrowRight class="size-3.5" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.chat-scroll::-webkit-scrollbar,
.convo-scroll::-webkit-scrollbar {
  width: 6px;
}
.chat-scroll::-webkit-scrollbar-thumb,
.convo-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.5;
  animation: typing-bounce 1s infinite ease-in-out;
}
@keyframes typing-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}
</style>

```

## checkbox

- type: `registry:ui`
- description: Standalone or in-form binary toggle, built on reka-ui. Supports indeterminate state for tri-state lists, sizes, and proper keyboard / screen-reader behavior. Pair with Label for clickable text.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/checkbox/Checkbox.vue`

```vue
<script setup lang="ts">
import type { CheckboxRootProps } from 'reka-ui'
import type { ComputedRef, HTMLAttributes } from 'vue'
import { computed, getCurrentInstance, inject } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Check, Minus, Loader2 } from 'lucide-vue-next'
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

// CLAUDE.md mandate: `interface Props extends ReakUiX` bails in Vue 3.5+
// because reka-ui's package.json lacks an `exports.types` condition. The
// `defineProps<External & Extra>()` intersection delegates type extraction
// back to the installed TypeScript and is the documented workaround.
export type CheckboxProps = Omit<CheckboxRootProps<boolean | string>, 'defaultValue' | 'modelValue'> & {
  class?: HTMLAttributes['class']
  /** The controlled checked state of the checkbox. Can be binded with v-model. */
  modelValue?: boolean | 'indeterminate' | null
  /** The value given as data when submitted with a name. */
  value?: string
  /** Id of the element */
  id?: string
  /** The value used when the checkbox is checked. Defaults to `true`. */
  trueValue?: boolean | string
  /** The value used when the checkbox is unchecked. Defaults to `false`. */
  falseValue?: boolean | string
  /** Size of the checkbox */
  size?: 'sm' | 'md' | 'lg'
  /** Custom color for the checked state - matches Vuetify color system */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Label text displayed next to the checkbox */
  label?: string
  /** Hint text shown below the checkbox */
  hint?: string
  /** Error message to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** When `true`, prevents the user from interacting with the checkbox */
  disabled?: boolean
  /** When `true`, the checkbox is in readonly state */
  readonly?: boolean
  /** When `true`, shows an indeterminate state */
  indeterminate?: boolean
  /** Density of the checkbox - affects spacing */
  density?: 'compact' | 'default' | 'comfortable'
  /** When `true`, the icon is hidden */
  hideIcon?: boolean
  /** Loading state - shows a spinner */
  loading?: boolean
  /** Ripple effect on click */
  ripple?: boolean
  /** Custom icon to show when checked */
  checkedIcon?: any
  /** Custom icon to show when indeterminate */
  indeterminateIcon?: any
  /** Label position - before or after the checkbox */
  labelPosition?: 'before' | 'after'
  /** Whether the checkbox appears flat (no elevation) */
  flat?: boolean
  /** Whether the checkbox has a background color */
  bgColor?: boolean
  /** Inline text style */
  inline?: boolean
  /** Name attribute for form submission */
  name?: string
}

const props = withDefaults(defineProps<CheckboxProps>(), {
  size: 'md',
  density: 'default',
  color: 'primary',
  trueValue: true,
  falseValue: false,
  hideIcon: false,
  ripple: true,
  labelPosition: 'after',
  flat: false,
  bgColor: false,
  inline: false,
})

const emits = defineEmits<{
  'update:modelValue': [value: boolean | 'indeterminate']
  change: [value: boolean | 'indeterminate']
  focus: [event: FocusEvent]
  blur: [event: FocusEvent]
}>()

const delegatedProps = reactiveOmit(
  props,
  'class',
  'size',
  'color',
  'label',
  'hint',
  'errorMessages',
  'error',
  'disabled',
  'readonly',
  'indeterminate',
  'density',
  'hideIcon',
  'loading',
  'ripple',
  'checkedIcon',
  'indeterminateIcon',
  'labelPosition',
  'flat',
  'bgColor',
  'inline',
  'trueValue',
  'falseValue',
  'modelValue',
  'name',
)

const forwarded = useForwardPropsEmits(delegatedProps, emits)

// Injected group context
const groupContext = inject<{ name?: ComputedRef<string | undefined> } | null>('checkboxGroupContext', null)
const actualName = computed(() => props.name ?? groupContext?.name?.value)

// Size classes
const sizeClasses = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-5',
}

const iconSizes = {
  sm: 'size-2.5',
  md: 'size-3.5',
  lg: 'size-4',
}

// Color classes for checked state
const colorClasses: Record<string, string> = {
  primary:
    'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary',
  secondary:
    'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:border-secondary',
  success:
    'data-[state=checked]:bg-[var(--success)] data-[state=checked]:border-[var(--success)] data-[state=indeterminate]:bg-[var(--success)] data-[state=indeterminate]:border-[var(--success)]',
  warning:
    'data-[state=checked]:bg-[var(--warning)] data-[state=checked]:border-[var(--warning)] data-[state=indeterminate]:bg-[var(--warning)] data-[state=indeterminate]:border-[var(--warning)]',
  error:
    'data-[state=checked]:bg-destructive data-[state=checked]:border-destructive data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:border-destructive',
  info: 'data-[state=checked]:bg-[var(--info)] data-[state=checked]:border-[var(--info)] data-[state=indeterminate]:bg-[var(--info)] data-[state=indeterminate]:border-[var(--info)]',
}

// Density classes
const densityClasses = {
  compact: 'gap-1',
  default: 'gap-2',
  comfortable: 'gap-3',
}

// Build error state
const hasError = computed(() => {
  if (props.error) return true
  if (
    props.errorMessages &&
    (typeof props.errorMessages === 'string' ? props.errorMessages : props.errorMessages.length > 0)
  )
    return true
  return false
})

// Determine if the checkbox is in an indeterminate state
const isIndeterminate = computed(() => {
  return props.indeterminate || props.modelValue === 'indeterminate'
})

// Detect whether the parent bound v-model (looks for an onUpdate:modelValue
// listener) and whether they passed an initial modelValue prop at all (Vue
// auto-coerces Boolean-union props to `false` when not provided, so a prop
// check alone can't distinguish controlled vs unbound usage).
const instance = getCurrentInstance()
const isControlled = computed(() => Boolean(instance?.vnode?.props?.['onUpdate:modelValue']))
const userPassedModelValue = computed(() => {
  const raw = instance?.vnode?.props
  return Boolean(raw && ('modelValue' in raw || 'model-value' in raw))
})

// Bind model-value only when actually controlled. Otherwise seed Reka's
// internal state via default-value so click toggles work.
const checkboxStateBindings = computed(() => {
  if (isIndeterminate.value) return { 'model-value': 'indeterminate' as const }
  if (isControlled.value) return { 'model-value': props.modelValue }
  if (userPassedModelValue.value) return { 'default-value': Boolean(props.modelValue) }
  return { 'default-value': false }
})

// Build checkbox classes
const checkboxClasses = computed(() => {
  return cn(
    'peer border-input data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 rounded-[4px] border shadow-xs transition-colors duration-200 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
    sizeClasses[props.size],
    colorClasses[props.color] || colorClasses.primary,
    hasError.value &&
      'border-destructive data-[state=checked]:!bg-destructive data-[state=checked]:!border-destructive data-[state=indeterminate]:!bg-destructive data-[state=indeterminate]:!border-destructive',
    props.flat && 'shadow-none',
    props.class,
  )
})
</script>

<template>
  <div class="flex items-start" :class="[densityClasses[density], inline ? 'inline-flex' : 'flex-col']">
    <label
      v-if="label && labelPosition === 'before'"
      :for="id"
      class="mr-2 cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      :class="[hasError ? 'text-destructive' : '', disabled && 'cursor-not-allowed opacity-50']"
    >
      {{ label }}
    </label>

    <div class="flex items-center">
      <CheckboxRoot
        v-bind="{ 'data-slot': 'checkbox', ...forwarded, ...checkboxStateBindings }"
        :id="id"
        v-slot="slotProps"
        :value="value"
        :disabled="disabled"
        :name="actualName"
        :class="checkboxClasses"
        @update:model-value="(val: boolean | 'indeterminate') => emits('update:modelValue', val)"
      >
        <CheckboxIndicator
          data-uipkge
          data-slot="checkbox-indicator"
          class="grid place-content-center text-current transition-none"
          :force-mount="isIndeterminate || hideIcon"
        >
          <slot v-bind="slotProps">
            <Loader2 v-if="loading" :class="[iconSizes[size], 'animate-spin']" />
            <Minus v-else-if="isIndeterminate" :class="iconSizes[size]" />
            <Check v-else-if="!hideIcon" :class="iconSizes[size]" />
          </slot>
        </CheckboxIndicator>
      </CheckboxRoot>

      <label
        v-if="label && labelPosition === 'after'"
        :for="id"
        class="ml-2 cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        :class="[hasError ? 'text-destructive' : '', disabled && 'cursor-not-allowed opacity-50']"
      >
        {{ label }}
      </label>
    </div>

    <p v-if="hint && !hasError" class="text-muted-foreground mt-1 text-xs">
      {{ hint }}
    </p>

    <div v-if="hasError" class="mt-1 flex flex-col gap-0.5">
      <p v-if="typeof errorMessages === 'string'" class="text-destructive text-xs">
        {{ errorMessages }}
      </p>
      <template v-else>
        <p v-for="(msg, i) in errorMessages" :key="i" class="text-destructive text-xs">
          {{ msg }}
        </p>
      </template>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/checkbox/CheckboxGroup.vue`

```vue
<script setup lang="ts">
import { computed, provide } from 'vue'
import type { ComputedRef, HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { CheckboxGroupRoot, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import Checkbox from './Checkbox.vue'

export interface CheckboxOption {
  label: string
  value: string
  disabled?: boolean
}

export interface CheckboxGroupProps {
  class?: HTMLAttributes['class']
  /** The value of the checkbox items that should be checked when initially rendered. */
  defaultValue?: string[]
  /** When `true`, prevents the user from interacting with the checkboxes. */
  disabled?: boolean
  /** Specifies whether the checkbox group is in an error state */
  error?: boolean
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Label for the group */
  label?: string
  /** Hint text for the group */
  hint?: string
  /** The orientation of the checkboxes */
  orientation?: 'horizontal' | 'vertical'
  /** Whether to show a border around the group */
  bordered?: boolean
  /** Density of the checkboxes */
  density?: 'compact' | 'default' | 'comfortable'
  /** Options to render as checkboxes automatically */
  options?: (string | CheckboxOption)[]
  /** Name attribute for all checkboxes in the group */
  name?: string
  /** Inline layout (alias for horizontal) */
  inline?: boolean
}

const props = withDefaults(defineProps<CheckboxGroupProps>(), {
  orientation: 'vertical',
  density: 'default',
  bordered: false,
})

const modelValue = defineModel<string[]>()

const forwarded = useForwardProps(
  reactiveOmit(
    props,
    'class',
    'label',
    'hint',
    'error',
    'errorMessages',
    'density',
    'bordered',
    'options',
    'name',
    'inline',
  ),
)

const actualOrientation = computed(() => (props.inline ? 'horizontal' : props.orientation))

provide('checkboxGroupContext', {
  name: computed(() => props.name),
})
</script>

<template>
  <CheckboxGroupRoot
    v-bind="forwarded"
    :model-value="modelValue"
    @update:model-value="modelValue = $event"
    :name="name"
    :orientation="actualOrientation"
    class="flex flex-col gap-2"
    :class="[
      actualOrientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
      bordered && 'rounded-lg border p-4',
      props.class,
    ]"
  >
    <label v-if="label" class="text-sm font-medium">
      {{ label }}
    </label>

    <p v-if="hint && !error" class="text-muted-foreground text-xs">
      {{ hint }}
    </p>

    <div
      class="flex gap-4"
      :class="[actualOrientation === 'horizontal' ? 'flex-row flex-wrap items-center' : 'flex-col']"
    >
      <template v-if="options && options.length > 0">
        <Checkbox
          v-for="(option, i) in options"
          :key="i"
          :value="typeof option === 'string' ? option : option.value"
          :label="typeof option === 'string' ? option : option.label"
          :disabled="typeof option === 'string' ? undefined : option.disabled"
          :name="name"
          :density="density"
        />
      </template>

      <slot v-else :model-value="modelValue" />
    </div>

    <div v-if="error || errorMessages" class="flex flex-col gap-0.5">
      <p v-if="typeof errorMessages === 'string'" class="text-destructive text-xs">
        {{ errorMessages }}
      </p>
      <template v-else>
        <p v-for="(msg, i) in errorMessages" :key="i" class="text-destructive text-xs">
          {{ msg }}
        </p>
      </template>
    </div>
  </CheckboxGroupRoot>
</template>

```

### `packages/registry-vue/components/checkbox/index.ts`

```ts
export { default as Checkbox } from './Checkbox.vue'
export { default as CheckboxGroup } from './CheckboxGroup.vue'

```

## checkout-flow

- type: `registry:block`
- description: Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
- npm deps: `lucide-vue-next`
- registry deps: `payment-card`, `payment-form`, `button`, `input`, `label`, `stepper`, `separator`

### `packages/registry-vue/blocks/checkout-flow/CheckoutFlow.vue`

```vue
<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'
import { ArrowLeft, Check, Minus, Plus, Trash2, X } from 'lucide-vue-next'
import { PaymentCard } from '@/components/ui/payment-card'
import { Button } from '@/components/ui/button'
import { Stepper } from '@/components/ui/stepper'
import { Separator } from '@/components/ui/separator'
import PaymentForm from '@/components/blocks/PaymentForm.vue'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'
interface PaymentPayload {
  number: string
  name: string
  expiry: string
  cvc: string
  brand: CardBrand
}

interface CartItem {
  id: string
  name: string
  image?: string
  qty: number
  price: number
}

const props = withDefaults(
  defineProps<{
    items: CartItem[]
    currency?: string
    shippingFee?: number
    taxRate?: number
    onSubmit?: (data: PaymentPayload) => Promise<{ orderId: string }>
  }>(),
  {
    currency: 'USD',
    shippingFee: 0,
    taxRate: 0,
  },
)

const emit = defineEmits<{
  complete: [payload: { orderId: string }]
  cancel: []
}>()

type Step = 'cart' | 'payment' | 'confirm' | 'success' | 'error'
const step = ref<Step>('cart')
const direction = ref<'forward' | 'back'>('forward')

const cart = ref<CartItem[]>(props.items.map((i) => ({ ...i })))
const paymentPayload = ref<PaymentPayload | null>(null)
const orderId = ref<string | null>(null)
const lastError = ref<Error | null>(null)
const placing = ref(false)

watch(
  () => props.items,
  (next) => {
    cart.value = next.map((i) => ({ ...i }))
  },
)

function go(next: Step) {
  const order: Record<Step, number> = { cart: 0, payment: 1, confirm: 2, success: 3, error: 3 }
  direction.value = order[next] >= order[step.value] ? 'forward' : 'back'
  step.value = next
}

const subtotal = computed(() => cart.value.reduce((s, i) => s + i.qty * i.price, 0))
const tax = computed(() => subtotal.value * props.taxRate)
const total = computed(() => subtotal.value + props.shippingFee + tax.value)

const fmt = (n: number) => {
  try {
    return new Intl.NumberFormat(undefined, { style: 'currency', currency: props.currency }).format(n)
  } catch {
    return `${props.currency} ${n.toFixed(2)}`
  }
}

const stepIndex = computed(() => {
  if (step.value === 'cart') return 1
  if (step.value === 'payment') return 2
  return 3
})

const stepperSteps = [{ title: 'Cart' }, { title: 'Payment' }, { title: 'Confirm' }]

function dec(item: CartItem) {
  if (item.qty > 1) item.qty--
}
function inc(item: CartItem) {
  item.qty++
}
function remove(item: CartItem) {
  cart.value = cart.value.filter((i) => i.id !== item.id)
}

async function placeOrder() {
  if (!paymentPayload.value || placing.value) return
  placing.value = true
  try {
    if (props.onSubmit) {
      const res = await props.onSubmit(paymentPayload.value)
      orderId.value = res?.orderId ?? Math.random().toString(36).slice(2, 10).toUpperCase()
    } else {
      orderId.value = Math.random().toString(36).slice(2, 10).toUpperCase()
    }
    emit('complete', { orderId: orderId.value })
    go('success')
  } catch (err) {
    lastError.value = err instanceof Error ? err : new Error(String(err))
    go('error')
  } finally {
    placing.value = false
  }
}

function onPaymentSuccess() {
  go('confirm')
}

function captureFormPayload(payload: PaymentPayload) {
  paymentPayload.value = payload
}

// Confetti — 50 particles, simple physics, ~1.4s
interface Particle {
  id: number
  x: number
  y: number
  vx: number
  vy: number
  rot: number
  vr: number
  color: string
  size: number
}
const particles = ref<Particle[]>([])
let confettiRaf: number | null = null
const reducedMotion =
  typeof window !== 'undefined' && window.matchMedia
    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
    : false

function fireConfetti() {
  if (reducedMotion) return
  // Pull theme tokens at runtime so confetti follows the active palette
  // (light/dark mode + any consumer theme override). Falls back to a
  // sensible default if the variable isn't defined.
  const cs = typeof window !== 'undefined' ? getComputedStyle(document.documentElement) : null
  const tok = (name: string, fallback: string) => cs?.getPropertyValue(name).trim() || fallback
  const colors = [
    tok('--chart-1', 'oklch(0.65 0.18 145)'),
    tok('--chart-2', 'oklch(0.6 0.22 260)'),
    tok('--chart-3', 'oklch(0.7 0.16 75)'),
    tok('--chart-4', 'oklch(0.65 0.2 330)'),
    tok('--chart-5', 'oklch(0.6 0.22 30)'),
    tok('--primary', 'oklch(0.55 0.22 260)'),
  ]
  particles.value = Array.from({ length: 60 }, (_, id) => ({
    id,
    x: 50,
    y: 40,
    vx: (Math.random() - 0.5) * 12,
    vy: -Math.random() * 14 - 4,
    rot: Math.random() * 360,
    vr: (Math.random() - 0.5) * 20,
    color: colors[Math.floor(Math.random() * colors.length)],
    size: 4 + Math.random() * 6,
  }))
  const start = performance.now()
  const tick = (now: number) => {
    const elapsed = now - start
    if (elapsed > 1800) {
      particles.value = []
      confettiRaf = null
      return
    }
    particles.value = particles.value.map((p) => ({
      ...p,
      x: p.x + p.vx * 0.25,
      y: p.y + p.vy * 0.25,
      vy: p.vy + 0.45,
      rot: p.rot + p.vr,
    }))
    confettiRaf = requestAnimationFrame(tick)
  }
  confettiRaf = requestAnimationFrame(tick)
}

watch(step, (s) => {
  if (s === 'success') fireConfetti()
})

onUnmounted(() => {
  if (confettiRaf) cancelAnimationFrame(confettiRaf)
})

const transitionName = computed(() => (direction.value === 'forward' ? 'flow-forward' : 'flow-back'))
</script>

<template>
  <div class="bg-card text-card-foreground mx-auto w-full max-w-3xl overflow-hidden rounded-xl border shadow-sm">
    <!-- Stepper header (hidden on end states) -->
    <div v-if="step !== 'success' && step !== 'error'" class="bg-muted/30 border-b px-6 py-4">
      <Stepper :steps="stepperSteps" :model-value="stepIndex" />
    </div>

    <div class="relative min-h-[420px]">
      <Transition :name="transitionName" mode="out-in">
        <!-- CART -->
        <div v-if="step === 'cart'" key="cart" class="p-6">
          <h3 class="mb-4 text-lg font-semibold">Your cart</h3>

          <div v-if="cart.length === 0" class="text-muted-foreground py-12 text-center text-sm">
            Your cart is empty.
          </div>

          <ul v-else class="divide-border divide-y">
            <li v-for="item in cart" :key="item.id" class="flex items-center gap-3 py-3">
              <div class="bg-muted size-14 shrink-0 overflow-hidden rounded-md">
                <img v-if="item.image" :src="item.image" :alt="item.name" class="size-full object-cover" />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-sm font-medium">{{ item.name }}</p>
                <p class="text-muted-foreground text-xs">{{ fmt(item.price) }} each</p>
              </div>
              <div class="flex items-center gap-1">
                <Button variant="outline" size="icon-sm" aria-label="Decrease" @click="dec(item)"
                  ><Minus class="size-3.5"
                /></Button>
                <span class="w-8 text-center text-sm tabular-nums">{{ item.qty }}</span>
                <Button variant="outline" size="icon-sm" aria-label="Increase" @click="inc(item)"
                  ><Plus class="size-3.5"
                /></Button>
              </div>
              <div class="w-20 text-right text-sm font-medium tabular-nums">{{ fmt(item.qty * item.price) }}</div>
              <Button variant="ghost" size="icon-sm" aria-label="Remove" @click="remove(item)">
                <Trash2 class="text-muted-foreground size-4" />
              </Button>
            </li>
          </ul>

          <Separator class="my-4" />

          <dl class="space-y-1.5 text-sm">
            <div class="flex justify-between">
              <dt class="text-muted-foreground">Subtotal</dt>
              <dd>{{ fmt(subtotal) }}</dd>
            </div>
            <div v-if="shippingFee > 0" class="flex justify-between">
              <dt class="text-muted-foreground">Shipping</dt>
              <dd>{{ fmt(shippingFee) }}</dd>
            </div>
            <div v-if="taxRate > 0" class="flex justify-between">
              <dt class="text-muted-foreground">Tax</dt>
              <dd>{{ fmt(tax) }}</dd>
            </div>
            <div class="flex justify-between border-t pt-2 text-base font-semibold">
              <dt>Total</dt>
              <dd>{{ fmt(total) }}</dd>
            </div>
          </dl>

          <div class="mt-5 flex justify-between">
            <Button variant="ghost" @click="emit('cancel')">Cancel</Button>
            <Button :disabled="cart.length === 0" @click="go('payment')">Continue to payment →</Button>
          </div>
        </div>

        <!-- PAYMENT -->
        <div v-else-if="step === 'payment'" key="payment" class="p-6">
          <button
            type="button"
            class="text-muted-foreground hover:text-foreground mb-3 inline-flex items-center gap-1 text-sm"
            @click="go('cart')"
          >
            <ArrowLeft class="size-3.5" /> Back to cart
          </button>
          <PaymentForm
            :amount="total"
            :currency="currency"
            @brand-change="
              (b) => {
                /* parent could react */ void b
              }
            "
            @success="onPaymentSuccess"
            :on-submit="
              async (payload) => {
                captureFormPayload(payload) /* defer real call to confirm step */
              }
            "
          />
        </div>

        <!-- CONFIRM -->
        <div v-else-if="step === 'confirm'" key="confirm" class="p-6">
          <h3 class="mb-4 text-lg font-semibold">Review your order</h3>

          <div class="mb-4 flex items-start gap-4 rounded-lg border p-4">
            <PaymentCard
              v-if="paymentPayload"
              :number="paymentPayload.number"
              :name="paymentPayload.name"
              :expiry="paymentPayload.expiry"
              :brand="paymentPayload.brand"
              variant="compact"
              :flip="false"
            />
            <div class="min-w-0 flex-1 text-sm">
              <p class="font-medium">Paying with card ending {{ paymentPayload?.number.slice(-4) }}</p>
              <p class="text-muted-foreground">{{ paymentPayload?.name }} · expires {{ paymentPayload?.expiry }}</p>
              <button class="text-primary mt-2 text-xs underline" @click="go('payment')">Change payment method</button>
            </div>
          </div>

          <ul class="divide-border divide-y border-y">
            <li v-for="item in cart" :key="item.id" class="flex justify-between py-2 text-sm">
              <span class="truncate">{{ item.qty }} × {{ item.name }}</span>
              <span class="tabular-nums">{{ fmt(item.qty * item.price) }}</span>
            </li>
          </ul>

          <dl class="mt-3 space-y-1 text-sm">
            <div class="flex justify-between">
              <dt class="text-muted-foreground">Subtotal</dt>
              <dd>{{ fmt(subtotal) }}</dd>
            </div>
            <div v-if="shippingFee > 0" class="flex justify-between">
              <dt class="text-muted-foreground">Shipping</dt>
              <dd>{{ fmt(shippingFee) }}</dd>
            </div>
            <div v-if="taxRate > 0" class="flex justify-between">
              <dt class="text-muted-foreground">Tax</dt>
              <dd>{{ fmt(tax) }}</dd>
            </div>
            <div class="flex justify-between border-t pt-2 text-base font-semibold">
              <dt>Total</dt>
              <dd>{{ fmt(total) }}</dd>
            </div>
          </dl>

          <div class="mt-5 flex justify-between">
            <Button variant="outline" @click="go('payment')"><ArrowLeft class="mr-1.5 size-4" /> Back</Button>
            <Button :disabled="placing" @click="placeOrder">{{
              placing ? 'Placing order…' : `Place order · ${fmt(total)}`
            }}</Button>
          </div>
        </div>

        <!-- SUCCESS -->
        <div
          v-else-if="step === 'success'"
          key="success"
          class="relative flex flex-col items-center px-6 py-14 text-center"
        >
          <!-- Confetti layer -->
          <div class="pointer-events-none absolute inset-0 overflow-hidden">
            <div
              v-for="p in particles"
              :key="p.id"
              class="absolute"
              :style="{
                left: p.x + '%',
                top: p.y + '%',
                width: p.size + 'px',
                height: p.size + 'px',
                background: p.color,
                transform: `rotate(${p.rot}deg)`,
                borderRadius: '2px',
              }"
            />
          </div>

          <div class="bg-primary/10 ring-primary/30 relative grid size-20 place-items-center rounded-full ring-2">
            <svg
              viewBox="0 0 52 52"
              class="text-primary size-12"
              fill="none"
              stroke="currentColor"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
            >
              <path d="M14 27 L23 36 L40 18" pathLength="100" class="check-draw" />
            </svg>
          </div>
          <h3 class="mt-5 text-xl font-semibold">Order placed</h3>
          <p class="text-muted-foreground mt-1 text-sm">Thanks — a confirmation will be sent shortly.</p>
          <div class="bg-muted mt-4 inline-flex rounded-md px-3 py-1.5 font-mono text-sm">#{{ orderId }}</div>
          <Button variant="outline" class="mt-6" @click="emit('cancel')">Back to home</Button>
        </div>

        <!-- ERROR -->
        <div v-else-if="step === 'error'" key="error" class="flex flex-col items-center px-6 py-14 text-center">
          <div
            class="bg-destructive/10 ring-destructive/30 relative grid size-20 place-items-center rounded-full ring-2"
          >
            <svg
              viewBox="0 0 52 52"
              class="text-destructive size-12"
              fill="none"
              stroke="currentColor"
              stroke-width="4"
              stroke-linecap="round"
              aria-hidden="true"
            >
              <path d="M16 16 L36 36 M36 16 L16 36" pathLength="100" class="check-draw" />
            </svg>
          </div>
          <h3 class="mt-5 text-xl font-semibold">Payment failed</h3>
          <p class="text-muted-foreground mt-1 max-w-xs text-sm">
            {{ lastError?.message || 'Something went wrong while charging your card.' }}
          </p>
          <div class="mt-6 flex gap-2">
            <Button variant="outline" @click="emit('cancel')">Cancel</Button>
            <Button @click="go('payment')">Try again</Button>
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped>
.flow-forward-enter-active,
.flow-forward-leave-active,
.flow-back-enter-active,
.flow-back-leave-active {
  transition:
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease;
}
.flow-forward-enter-from {
  transform: translateX(24px);
  opacity: 0;
}
.flow-forward-leave-to {
  transform: translateX(-24px);
  opacity: 0;
}
.flow-back-enter-from {
  transform: translateX(-24px);
  opacity: 0;
}
.flow-back-leave-to {
  transform: translateX(24px);
  opacity: 0;
}

.check-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: check-draw 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms forwards;
}
@keyframes check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-forward-enter-active,
  .flow-forward-leave-active,
  .flow-back-enter-active,
  .flow-back-leave-active {
    transition-duration: 0ms;
  }
  .check-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}
</style>

```

## chip

- type: `registry:ui`
- description: Compact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/chip/Chip.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { chipVariants } from './chip.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// `ChipVariants['variant'] | ['size']`.
const props = defineProps<{
  variant?: 'default' | 'filled' | 'outlined' | 'elevated' | 'success' | 'warning' | 'destructive'
  size?: 'sm' | 'default' | 'lg'
  class?: HTMLAttributes['class']
  closable?: boolean
}>()

const emit = defineEmits<{
  close: []
}>()
</script>

<template>
  <span :class="cn(chipVariants({ variant, size }), props.class)">
    <slot />
    <button
      v-if="closable"
      type="button"
      aria-label="Remove item"
      class="focus-visible:ring-ring hover:bg-foreground/10 ml-0.5 inline-flex min-h-6 min-w-6 items-center justify-center rounded-full focus-visible:ring-1 focus-visible:outline-none"
      @click.stop="emit('close')"
    >
      <X class="size-3" aria-hidden="true" />
    </button>
  </span>
</template>

```

### `packages/registry-vue/components/chip/ChipGroup.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    selected?: string[]
    multiple?: boolean
    filter?: boolean
    column?: boolean
    mandatory?: boolean
    max?: number
    disabled?: boolean
  }>(),
  {
    selected: () => [],
    multiple: false,
    filter: false,
    column: false,
    mandatory: false,
    disabled: false,
  },
)

const emit = defineEmits<{
  'update:selected': [value: string[]]
}>()

function isSelected(value: string) {
  return props.selected.includes(value)
}

function toggle(value: string) {
  if (props.disabled) return

  let newSelected: string[]

  if (props.multiple) {
    if (isSelected(value)) {
      newSelected = props.selected.filter((v) => v !== value)
    } else {
      if (props.max && props.selected.length >= props.max) {
        newSelected = [...props.selected.slice(1), value]
      } else {
        newSelected = [...props.selected, value]
      }
    }
  } else {
    if (isSelected(value) && !props.mandatory) {
      newSelected = []
    } else {
      newSelected = [value]
    }
  }

  emit('update:selected', newSelected)
}
</script>

<template>
  <div
    :class="['flex flex-wrap gap-2', column ? 'flex-col' : '', filter ? 'flex-wrap' : '', props.class]"
    :data-chip-group="true"
    :data-multiple="multiple || undefined"
    :data-filter="filter || undefined"
  >
    <slot :selected="selected" :multiple="multiple" :filter="filter" :is-selected="isSelected" :toggle="toggle" />
  </div>
</template>

```

### `packages/registry-vue/components/chip/chip.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const chipVariants = cva(
  'inline-flex items-center justify-center gap-1 rounded-full text-xs font-medium w-fit whitespace-nowrap shrink-0 transition-colors duration-200 overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
  {
    variants: {
      variant: {
        default: 'bg-muted text-muted-foreground hover:bg-muted/80',
        filled: 'bg-primary text-primary-foreground hover:bg-primary/90',
        outlined: 'border border-current bg-transparent hover:bg-accent',
        elevated: 'bg-primary/10 text-primary shadow-sm hover:bg-primary/20',
        success: 'bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] hover:bg-[var(--success)]/20',
        warning: 'bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] hover:bg-[var(--warning)]/20',
        destructive: 'bg-destructive/10 text-destructive dark:text-destructive hover:bg-destructive/20',
      },
      size: {
        sm: 'h-6 px-2 text-xs',
        default: 'h-7 px-2.5 text-xs',
        lg: 'h-8 px-3 text-sm',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ChipVariants = VariantProps<typeof chipVariants>

```

### `packages/registry-vue/components/chip/index.ts`

```ts
export { default as Chip } from './Chip.vue'
export { default as ChipGroup } from './ChipGroup.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { chipVariants, type ChipVariants } from './chip.variants'

```

## circular-progress

- type: `registry:ui`
- description: Radial/circular progress indicator. Supports value (0-100), size presets or custom pixel size, stroke thickness, custom arc and track colors, indeterminate spinning mode, a label slot for center content, and a show-value prop that renders the percentage in the center.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/circular-progress/CircularProgress.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { circularProgressVariants } from './circular-progress.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `CircularProgressVariants['size']`.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    /** Progress value 0-100. Ignored when indeterminate is true. */
    value?: number
    /** Diameter in pixels. */
    size?: 'sm' | 'default' | 'lg' | number
    /** Stroke thickness in pixels. */
    thickness?: number
    /** Progress arc color. Defaults to primary. */
    color?: string
    /** Track (background ring) color. */
    trackColor?: string
    /** Indeterminate spinning mode. */
    indeterminate?: boolean
    /** Show the numeric value in the center. */
    showValue?: boolean
    /** Suffix appended to the value (e.g. '%'). */
    suffix?: string
    /** Accessible label. */
    ariaLabel?: string
  }>(),
  {
    value: 0,
    size: 'default',
    thickness: 8,
    indeterminate: false,
    showValue: false,
    suffix: '%',
    ariaLabel: 'Progress',
  },
)

const sizePx = computed(() => {
  if (typeof props.size === 'number') return props.size
  switch (props.size) {
    case 'sm':
      return 40
    case 'lg':
      return 80
    default:
      return 56
  }
})

const normalizedValue = computed(() => Math.min(100, Math.max(0, props.value)))

const radius = computed(() => (sizePx.value - props.thickness) / 2)
const circumference = computed(() => 2 * Math.PI * radius.value)
const strokeDashoffset = computed(() => {
  if (props.indeterminate) return circumference.value * 0.25
  return circumference.value * (1 - normalizedValue.value / 100)
})

const resolvedColor = computed(() => props.color || 'var(--primary)')
const resolvedTrackColor = computed(() => props.trackColor || 'var(--muted)')

const viewBox = computed(() => `0 0 ${sizePx.value} ${sizePx.value}`)
const center = computed(() => sizePx.value / 2)

const fontSize = computed(() => {
  const s = sizePx.value
  if (s <= 40) return 'text-xs'
  if (s <= 56) return 'text-sm'
  return 'text-base'
})
</script>

<template>
  <div
    data-uipkge
    data-slot="circular-progress"
    :data-size="typeof size === 'string' ? size : 'custom'"
    :data-indeterminate="indeterminate ? 'true' : 'false'"
    :class="cn(circularProgressVariants(), props.class)"
    :style="{ width: `${sizePx}px`, height: `${sizePx}px` }"
    role="progressbar"
    :aria-valuemin="0"
    :aria-valuemax="100"
    :aria-valuenow="indeterminate ? undefined : normalizedValue"
    :aria-label="ariaLabel"
  >
    <svg :width="sizePx" :height="sizePx" :viewBox="viewBox" class="block">
      <!-- Track -->
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        fill="none"
        :stroke="resolvedTrackColor"
        :stroke-width="thickness"
      />
      <!-- Progress arc -->
      <g
        :transform="indeterminate ? undefined : `rotate(-90 ${center} ${center})`"
        :class="indeterminate ? 'animate-spin-circular' : ''"
        :style="indeterminate ? { transformBox: 'fill-box', transformOrigin: 'center' } : undefined"
      >
        <circle
          :cx="center"
          :cy="center"
          :r="radius"
          fill="none"
          :stroke="resolvedColor"
          :stroke-width="thickness"
          stroke-linecap="round"
          :stroke-dasharray="circumference"
          :stroke-dashoffset="strokeDashoffset"
          :class="!indeterminate ? 'transition-[stroke-dashoffset] duration-500 ease-out' : ''"
        />
      </g>
    </svg>

    <div v-if="showValue || $slots.default" class="absolute inset-0 flex items-center justify-center">
      <slot :value="normalizedValue">
        <span v-if="showValue" :class="cn('text-foreground font-medium tabular-nums', fontSize)">
          {{ Math.round(normalizedValue) }}{{ suffix }}
        </span>
      </slot>
    </div>
  </div>
</template>

<style scoped>
@media (prefers-reduced-motion: no-preference) {
  .animate-spin-circular {
    animation: spin-circular 1.4s linear infinite;
  }
}

@keyframes spin-circular {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

```

### `packages/registry-vue/components/circular-progress/circular-progress.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `CircularProgress.vue` can `import { circularProgressVariants } from
 * './circular-progress.variants'` without creating a circular dependency through
 * the index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const circularProgressVariants = cva('relative inline-flex items-center justify-center')

export type CircularProgressVariants = VariantProps<typeof circularProgressVariants>

```

### `packages/registry-vue/components/circular-progress/index.ts`

```ts
export { default as CircularProgress } from './CircularProgress.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// CircularProgress.vue <-> index.ts circular import that broke dev SSR for Card).
export { circularProgressVariants, type CircularProgressVariants } from './circular-progress.variants'

```

## clipboard

- type: `registry:ui`
- description: Copy-to-clipboard button with success/error feedback. Swaps the icon to a check on success, shows a tooltip with configurable feedback text, supports a visible label, disabled state, a custom timeout for feedback reset, and copy/success/error events. Includes a legacy execCommand fallback for non-secure contexts. Composes the tooltip primitive.
- npm deps: `lucide-vue-next`, `reka-ui`
- registry deps: `tooltip`

### `packages/registry-vue/components/clipboard/Clipboard.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue'
import type { HTMLAttributes } from 'vue'
import { Check, Copy } from 'lucide-vue-next'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    /** Text to copy to the clipboard. */
    text?: string
    /** Optional visible label next to the icon. */
    label?: string
    /** Disable the button (no copy, no tooltip). */
    disabled?: boolean
    /** Hide the copy icon (useful when a label is shown). */
    hideIcon?: boolean
    /** Tooltip text shown on hover before copying. */
    tooltip?: string
    /** Feedback text shown after a successful copy. */
    successText?: string
    /** Feedback text shown after a failed copy. */
    errorText?: string
    /** How long (ms) the success/error feedback stays before resetting. */
    timeout?: number
    /** Show the feedback as a tooltip rather than swapping the icon. */
    feedbackTooltip?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    text: '',
    label: '',
    disabled: false,
    hideIcon: false,
    tooltip: 'Copy',
    successText: 'Copied!',
    errorText: 'Failed',
    timeout: 2000,
    feedbackTooltip: true,
  },
)

const emit = defineEmits<{
  (e: 'copy', text: string): void
  (e: 'success', text: string): void
  (e: 'error', error: Error): void
}>()

type State = 'idle' | 'success' | 'error'
const state = ref<State>('idle')
let resetTimer: ReturnType<typeof setTimeout> | null = null

function setFeedback(nextState: State) {
  state.value = nextState
  if (resetTimer) clearTimeout(resetTimer)
  resetTimer = setTimeout(() => {
    state.value = 'idle'
  }, props.timeout)
}

async function copy() {
  if (props.disabled) return
  const value = props.text
  emit('copy', value)
  try {
    if (navigator.clipboard?.writeText) {
      const write = navigator.clipboard.writeText(value)
      setFeedback('success')
      await write
    } else {
      // Legacy fallback for non-secure contexts.
      const ta = document.createElement('textarea')
      ta.value = value
      ta.style.position = 'fixed'
      ta.style.opacity = '0'
      document.body.appendChild(ta)
      ta.select()
      document.execCommand('copy')
      document.body.removeChild(ta)
      setFeedback('success')
    }
    emit('success', value)
  } catch (err) {
    setFeedback('error')
    emit('error', err as Error)
  }
}

const currentTooltip = computed(() => {
  if (state.value === 'success') return props.successText
  if (state.value === 'error') return props.errorText
  return props.tooltip
})

onBeforeUnmount(() => {
  if (resetTimer) clearTimeout(resetTimer)
})
</script>

<template>
  <TooltipProvider :delay-duration="300">
    <Tooltip>
      <TooltipTrigger as-child>
        <button
          type="button"
          data-uipkge
          data-slot="clipboard"
          :data-feedback-state="state"
          :disabled="disabled"
          :class="
            cn(
              'inline-flex items-center gap-1.5 rounded-md text-sm transition-colors',
              'text-muted-foreground hover:text-foreground',
              'focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
              'disabled:cursor-not-allowed disabled:opacity-50',
              props.class,
            )
          "
          :aria-label="currentTooltip"
          @click="copy"
        >
          <span v-if="!hideIcon" data-slot="clipboard-icon" class="inline-flex">
            <Check v-if="state === 'success'" class="size-4 text-emerald-500" />
            <Copy v-else class="size-4" />
          </span>
          <span v-if="label" data-slot="clipboard-label">{{ label }}</span>
          <slot :state="state" />
        </button>
      </TooltipTrigger>
      <TooltipContent v-if="feedbackTooltip || state === 'idle'">
        {{ currentTooltip }}
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

```

### `packages/registry-vue/components/clipboard/index.ts`

```ts
export { default as Clipboard } from './Clipboard.vue'

```

## code-block

- type: `registry:ui`
- description: Read-only code preview with a header, optional filename, copy button, and `<pre>`-rendered content. Use for installation snippets, API examples, and snippets you want users to copy verbatim.
- npm deps: `lucide-vue-next`
- registry deps: `button`

### `packages/registry-vue/components/code-block/CodeBlock.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Check, ChevronDown, ChevronUp, Copy } from 'lucide-vue-next'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

interface Props {
  /** Source code to display. */
  code: string
  /** Language label shown in the header. */
  language?: string
  /** Render line numbers in the gutter. */
  showLineNumbers?: boolean
  /** Maximum height of the code body before scrolling kicks in. */
  maxHeight?: string
  /** Render expanded on first paint. Default true. */
  defaultExpanded?: boolean
  /** Show the language label / copy / collapse header. */
  showHeader?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  language: 'vue',
  showLineNumbers: true,
  maxHeight: '400px',
  defaultExpanded: true,
  showHeader: true,
})

const isExpanded = ref(props.defaultExpanded)
const copied = ref(false)

const lines = computed(() => props.code.replace(/\s+$/, '').split('\n'))

async function copyToClipboard() {
  try {
    await navigator.clipboard.writeText(props.code)
    copied.value = true
    setTimeout(() => (copied.value = false), 1600)
  } catch (e) {
    console.warn('Clipboard write failed', e)
  }
}
</script>

<template>
  <div
    data-uipkge
    data-slot="code-block"
    :class="cn('group border-border bg-muted/20 relative overflow-hidden rounded-lg border', props.class)"
  >
    <!-- Header -->
    <div v-if="showHeader" class="border-border bg-muted/40 flex items-center justify-between gap-2 border-b px-3 py-2">
      <span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
        {{ language }}
      </span>
      <div class="flex items-center gap-1">
        <Button variant="ghost" size="xs" class="h-7 gap-1.5 px-2" @click="copyToClipboard">
          <Check v-if="copied" class="text-success size-3" aria-hidden="true" />
          <Copy v-else class="size-3" aria-hidden="true" />
          <span class="text-xs">{{ copied ? 'Copied' : 'Copy' }}</span>
        </Button>
        <Button variant="ghost" size="xs" class="h-7 gap-1.5 px-2" @click="isExpanded = !isExpanded">
          <ChevronUp v-if="isExpanded" class="size-3" aria-hidden="true" />
          <ChevronDown v-else class="size-3" aria-hidden="true" />
          <span class="text-xs">{{ isExpanded ? 'Hide' : 'Show' }} code</span>
        </Button>
      </div>
    </div>

    <!-- Code body. We render line-by-line so the gutter and the code stay in
         sync without measuring text height. The renderer is intentionally
         plain: code is displayed as-is and the consumer can layer their own
         syntax highlighter (shiki, prism, hljs) on top by replacing this
         file or by wrapping it in their own component. -->
    <div
      v-show="isExpanded"
      class="bg-background/40 overflow-auto font-mono text-sm leading-relaxed"
      :style="{ maxHeight: props.maxHeight }"
    >
      <pre class="m-0 flex"><div
          v-if="showLineNumbers"
          aria-hidden="true"
          class="text-muted-foreground/60 sticky left-0 select-none border-r border-border/60 bg-muted/30 px-3 py-3 text-right tabular-nums"
        ><div v-for="(_, i) in lines" :key="i">{{ i + 1 }}</div></div><code
          class="block flex-1 px-4 py-3"
        ><template v-for="(line, i) in lines" :key="i"><span>{{ line || ' ' }}</span><br v-if="i < lines.length - 1"></template></code></pre>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/code-block/index.ts`

```ts
export { default as CodeBlock } from './CodeBlock.vue'

```

## collapsible

- type: `registry:ui`
- description: Headless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.
- npm deps: `reka-ui`

### `packages/registry-vue/components/collapsible/Collapsible.vue`

```vue
<script setup lang="ts">
import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'

// CLAUDE.md mandate: bare `defineProps<RekaUiX>()` can bail under Vue 3.5+
// because reka-ui has no exports.types. The intersection form delegates
// type extraction to TS via the installed typescript package.
const props = defineProps<CollapsibleRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<CollapsibleRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <CollapsibleRoot v-slot="slotProps" data-uipkge data-slot="collapsible" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </CollapsibleRoot>
</template>

```

### `packages/registry-vue/components/collapsible/CollapsibleContent.vue`

```vue
<script setup lang="ts">
import type { CollapsibleContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleContent } from 'reka-ui'

// CLAUDE.md mandate: intersection form delegates type extraction to TS.
const props = defineProps<CollapsibleContentProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <CollapsibleContent data-uipkge data-slot="collapsible-content" v-bind="props">
    <slot />
  </CollapsibleContent>
</template>

```

### `packages/registry-vue/components/collapsible/CollapsibleTrigger.vue`

```vue
<script setup lang="ts">
import type { CollapsibleTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { CollapsibleTrigger } from 'reka-ui'

// CLAUDE.md mandate: intersection form delegates type extraction to TS.
const props = defineProps<CollapsibleTriggerProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <CollapsibleTrigger data-uipkge data-slot="collapsible-trigger" v-bind="props">
    <slot />
  </CollapsibleTrigger>
</template>

```

### `packages/registry-vue/components/collapsible/index.ts`

```ts
export { default as Collapsible } from './Collapsible.vue'
export { default as CollapsibleContent } from './CollapsibleContent.vue'
export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

```

## color-picker

- type: `registry:ui`
- description: Hex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.

### `packages/registry-vue/components/color-picker/ColorPicker.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    disabled?: boolean
    /** Override the swatches shown below the color input. Pass [] to hide entirely. */
    presets?: string[]
    /** Hide the hex text field next to the color trigger. */
    hideHexInput?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    presets: () => [
      '#ef4444',
      '#f97316',
      '#eab308',
      '#22c55e',
      '#14b8a6',
      '#3b82f6',
      '#8b5cf6',
      '#ec4899',
      '#ffffff',
      '#d4d4d4',
      '#737373',
      '#171717',
    ],
    hideHexInput: false,
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const swatches = computed(() => props.presets ?? [])
</script>

<template>
  <div :class="cn('space-y-3', props.class)" v-bind="$attrs">
    <!-- Color trigger + hex field -->
    <div class="flex items-center gap-2">
      <div
        class="border-input relative h-10 w-10 shrink-0 overflow-hidden rounded-md border shadow-xs"
        :style="{ backgroundColor: modelValue || '#ffffff' }"
      >
        <input
          type="color"
          :value="modelValue || '#ffffff'"
          :disabled="disabled"
          aria-label="Pick color"
          class="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
          @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
        />
      </div>
      <input
        v-if="!hideHexInput"
        type="text"
        :value="modelValue || ''"
        placeholder="#000000"
        :disabled="disabled"
        class="bg-background border-input text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-10 flex-1 rounded-md border px-3 text-sm uppercase shadow-xs outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
        @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
      />
    </div>

    <!-- Preset swatches -->
    <div v-if="swatches.length" class="flex flex-wrap gap-1.5">
      <button
        type="button"
        v-for="color in swatches"
        :key="color"
        :disabled="disabled"
        :aria-label="`Select ${color}`"
        :style="{ backgroundColor: color }"
        :class="
          cn(
            'ring-offset-background focus-visible:ring-ring/40 size-6 shrink-0 rounded-md shadow-sm transition-transform outline-none hover:scale-110 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
            modelValue?.toLowerCase() === color.toLowerCase()
              ? 'ring-foreground ring-2 ring-offset-2'
              : 'ring-border/50 ring-1',
            color.toLowerCase() === '#ffffff' && 'ring-border',
          )
        "
        @click="emit('update:modelValue', color)"
      />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/color-picker/index.ts`

```ts
export { default as ColorPicker } from './ColorPicker.vue'

```

## command

- type: `registry:ui`
- description: Searchable command palette à la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and fuzzy filtering. Use as a global launcher (mounted in a Dialog) or inline as a typeahead select.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `dialog`

### `packages/registry-vue/components/command/Command.vue`

```vue
<script setup lang="ts">
import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
import { reactive, ref, watch } from 'vue'
import { cn } from '@/lib/utils'
import { provideCommandContext } from '.'

const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
  modelValue: '',
})

const emits = defineEmits<ListboxRootEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)

const allItems = ref<Map<string, string>>(new Map())
const allGroups = ref<Map<string, Set<string>>>(new Map())

const { contains } = useFilter({ sensitivity: 'base' })
const filterState = reactive({
  search: '',
  filtered: {
    /** The count of all visible items. */
    count: 0,
    /** Map from visible item id to its search score. */
    items: new Map() as Map<string, number>,
    /** Set of groups with at least one visible item. */
    groups: new Set() as Set<string>,
  },
})

function filterItems() {
  if (!filterState.search) {
    filterState.filtered.count = allItems.value.size
    // Do nothing, each item will know to show itself because search is empty
    return
  }

  // Reset the groups
  filterState.filtered.groups = new Set()
  let itemCount = 0

  // Check which items should be included
  for (const [id, value] of allItems.value) {
    const score = contains(value, filterState.search)
    filterState.filtered.items.set(id, score ? 1 : 0)
    if (score) itemCount++
  }

  // Check which groups have at least 1 item shown
  for (const [groupId, group] of allGroups.value) {
    for (const itemId of group) {
      if (filterState.filtered.items.get(itemId)! > 0) {
        filterState.filtered.groups.add(groupId)
        break
      }
    }
  }

  filterState.filtered.count = itemCount
}

watch(
  () => filterState.search,
  () => {
    filterItems()
  },
)

provideCommandContext({
  allItems,
  allGroups,
  filterState,
})
</script>

<template>
  <ListboxRoot
    data-uipkge
    data-slot="command"
    v-bind="forwarded"
    :class="
      cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)
    "
  >
    <slot />
  </ListboxRoot>
</template>

```

### `packages/registry-vue/components/command/CommandDialog.vue`

```vue
<script setup lang="ts">
import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
import { useForwardPropsEmits } from 'reka-ui'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import Command from './Command.vue'

const props = withDefaults(
  defineProps<
    DialogRootProps & {
      title?: string
      description?: string
    }
  >(),
  {
    title: 'Command Palette',
    description: 'Search for a command to run...',
  },
)
const emits = defineEmits<DialogRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <Dialog v-slot="slotProps" v-bind="forwarded">
    <DialogContent class="overflow-hidden p-0">
      <DialogHeader class="sr-only">
        <DialogTitle>{{ title }}</DialogTitle>
        <DialogDescription>{{ description }}</DialogDescription>
      </DialogHeader>
      <Command>
        <slot v-bind="slotProps" />
      </Command>
    </DialogContent>
  </Dialog>
</template>

```

### `packages/registry-vue/components/command/CommandEmpty.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Primitive } from 'reka-ui'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { useCommand } from '.'

const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const { filterState } = useCommand()
const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0)
</script>

<template>
  <Primitive
    v-if="isRender"
    data-uipkge
    data-slot="command-empty"
    v-bind="delegatedProps"
    :class="cn('py-6 text-center text-sm', props.class)"
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/command/CommandGroup.vue`

```vue
<script setup lang="ts">
import type { ListboxGroupProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
import { computed, onMounted, onUnmounted } from 'vue'
import { cn } from '@/lib/utils'
import { provideCommandGroupContext, useCommand } from '.'

const props = defineProps<
  ListboxGroupProps & {
    class?: HTMLAttributes['class']
    heading?: string
  }
>()

const delegatedProps = reactiveOmit(props, 'class')

const { allGroups, filterState } = useCommand()
const id = useId()

const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)))

provideCommandGroupContext({ id })
onMounted(() => {
  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set())
})
onUnmounted(() => {
  allGroups.value.delete(id)
})
</script>

<template>
  <ListboxGroup
    v-bind="delegatedProps"
    :id="id"
    data-uipkge
    data-slot="command-group"
    :class="cn('text-foreground overflow-hidden p-1', props.class)"
    :hidden="isRender ? undefined : true"
  >
    <ListboxGroupLabel
      v-if="heading"
      data-uipkge
      data-slot="command-group-heading"
      class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
    >
      {{ heading }}
    </ListboxGroupLabel>
    <slot />
  </ListboxGroup>
</template>

```

### `packages/registry-vue/components/command/CommandInput.vue`

```vue
<script setup lang="ts">
import type { ListboxFilterProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Search } from 'lucide-vue-next'
import { ListboxFilter, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { useCommand } from '.'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<
    ListboxFilterProps & {
      class?: HTMLAttributes['class']
    }
  >(),
  // Focus on mount by default (command-palette behavior). Consumers embedding
  // Command inline on a page can pass :auto-focus="false" so it doesn't steal
  // focus and scroll the input into view on load.
  { autoFocus: true },
)

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)

const { filterState } = useCommand()
</script>

<template>
  <div data-uipkge data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
    <Search class="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
    <ListboxFilter
      v-bind="{ ...forwardedProps, ...$attrs }"
      v-model="filterState.search"
      data-uipkge
      data-slot="command-input"
      :class="
        cn(
          'placeholder:text-muted-foreground focus-visible:ring-ring/40 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
          props.class,
        )
      "
    />
  </div>
</template>

```

### `packages/registry-vue/components/command/CommandItem.vue`

```vue
<script setup lang="ts">
import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit, useCurrentElement } from '@vueuse/core'
import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { cn } from '@/lib/utils'
import { useCommand, useCommandGroup } from '.'

const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<ListboxItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)

const id = useId()
const { filterState, allItems, allGroups } = useCommand()
const groupContext = useCommandGroup()

const isRender = computed(() => {
  if (!filterState.search) {
    return true
  } else {
    const filteredCurrentItem = filterState.filtered.items.get(id)
    // If the filtered items is undefined means not in the all times map yet
    // Do the first render to add into the map
    if (filteredCurrentItem === undefined) {
      return true
    }

    // Check with filter
    return filteredCurrentItem > 0
  }
})

const itemRef = ref()
const currentElement = useCurrentElement(itemRef)
onMounted(() => {
  if (!(currentElement.value instanceof HTMLElement)) return

  // textValue to perform filter
  allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')

  const groupId = groupContext?.id
  if (groupId) {
    if (!allGroups.value.has(groupId)) {
      allGroups.value.set(groupId, new Set([id]))
    } else {
      allGroups.value.get(groupId)?.add(id)
    }
  }
})
onUnmounted(() => {
  allItems.value.delete(id)
})
</script>

<template>
  <ListboxItem
    v-if="isRender"
    v-bind="forwarded"
    :id="id"
    ref="itemRef"
    data-uipkge
    data-slot="command-item"
    :class="
      cn(
        'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class,
      )
    "
    @select="
      () => {
        filterState.search = ''
      }
    "
  >
    <slot />
  </ListboxItem>
</template>

```

### `packages/registry-vue/components/command/CommandList.vue`

```vue
<script setup lang="ts">
import type { ListboxContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ListboxContent, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardProps(delegatedProps)
</script>

<template>
  <ListboxContent
    data-uipkge
    data-slot="command-list"
    v-bind="forwarded"
    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
  >
    <div role="presentation">
      <slot />
    </div>
  </ListboxContent>
</template>

```

### `packages/registry-vue/components/command/CommandSeparator.vue`

```vue
<script setup lang="ts">
import type { SeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Separator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Separator
    data-uipkge
    data-slot="command-separator"
    v-bind="delegatedProps"
    :class="cn('bg-border -mx-1 h-px', props.class)"
  >
    <slot />
  </Separator>
</template>

```

### `packages/registry-vue/components/command/CommandShortcut.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="command-shortcut"
    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/command/index.ts`

```ts
import type { Ref } from 'vue'
import { createContext } from 'reka-ui'

export { default as Command } from './Command.vue'
export { default as CommandDialog } from './CommandDialog.vue'
export { default as CommandEmpty } from './CommandEmpty.vue'
export { default as CommandGroup } from './CommandGroup.vue'
export { default as CommandInput } from './CommandInput.vue'
export { default as CommandItem } from './CommandItem.vue'
export { default as CommandList } from './CommandList.vue'
export { default as CommandSeparator } from './CommandSeparator.vue'
export { default as CommandShortcut } from './CommandShortcut.vue'

export const [useCommand, provideCommandContext] = createContext<{
  allItems: Ref<Map<string, string>>
  allGroups: Ref<Map<string, Set<string>>>
  filterState: {
    search: string
    filtered: { count: number; items: Map<string, number>; groups: Set<string> }
  }
}>('Command')

export const [useCommandGroup, provideCommandGroupContext] = createContext<{
  id?: string
}>('CommandGroup')

```

## command-palette

- type: `registry:block`
- description: Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and emits `select`. `show-trigger=false` hides the inline button so the consumer can fire it from elsewhere via the exposed `show()` / `toggle()` methods.
- npm deps: `lucide-vue-next`
- registry deps: `command`, `kbd`

### `packages/registry-vue/blocks/command-palette/CommandPalette.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, type Component } from 'vue'
import { LayoutDashboard, FileText, Inbox, Settings, Users, KanbanSquare, Search } from 'lucide-vue-next'
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'

export interface CommandPaletteItem {
  label: string
  value?: string
  hint?: string
  icon?: Component
  onSelect?: () => void
}

export interface CommandPaletteGroup {
  heading: string
  items: CommandPaletteItem[]
}

const props = withDefaults(
  defineProps<{
    groups?: CommandPaletteGroup[]
    placeholder?: string
    triggerLabel?: string
    showTrigger?: boolean
  }>(),
  {
    placeholder: 'Search pages, commands…',
    triggerLabel: 'Search pages, commands…',
    showTrigger: true,
    groups: () => [
      {
        heading: 'Navigate',
        items: [
          { label: 'Dashboard', hint: '/dashboard', icon: LayoutDashboard },
          { label: 'Inbox', hint: '/inbox', icon: Inbox },
          { label: 'Kanban', hint: '/kanban', icon: KanbanSquare },
          { label: 'Team', hint: '/team', icon: Users },
        ],
      },
      {
        heading: 'Settings',
        items: [
          { label: 'Profile', hint: '/profile', icon: FileText },
          { label: 'Settings', hint: '/settings', icon: Settings },
        ],
      },
    ],
  },
)

const emit = defineEmits<{
  (e: 'select', item: CommandPaletteItem): void
}>()

const open = ref(false)

function show() {
  open.value = true
}

function hide() {
  open.value = false
}

function toggle() {
  open.value = !open.value
}

function pick(item: CommandPaletteItem) {
  hide()
  item.onSelect?.()
  emit('select', item)
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
    e.preventDefault()
    toggle()
  }
}

const triggerShortcut = computed(() => {
  if (typeof navigator === 'undefined') return '⌘K'
  return /Mac|iPhone|iPad/i.test(navigator.platform) ? '⌘K' : 'Ctrl K'
})

onMounted(() => window.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))

defineExpose({ show, hide, toggle })
</script>

<template>
  <button
    v-if="showTrigger"
    type="button"
    class="bg-secondary/50 hover:bg-secondary text-muted-foreground focus-visible:ring-ring relative hidden h-8 w-full items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm shadow-none transition-colors focus-visible:ring-1 focus-visible:outline-none sm:flex md:w-[220px] lg:w-[300px]"
    aria-label="Open command palette"
    @click="show"
  >
    <Search class="size-3.5 shrink-0" />
    <span class="flex-1 truncate text-left">{{ triggerLabel }}</span>
    <kbd
      class="bg-muted/80 text-muted-foreground pointer-events-none flex h-5 items-center justify-center rounded-md border px-1.5 font-mono text-[10px] font-medium"
    >
      <span>{{ triggerShortcut }}</span>
    </kbd>
  </button>

  <CommandDialog v-model:open="open" title="Command palette" description="Search pages and run commands">
    <CommandInput :placeholder="placeholder" />
    <CommandList class="max-h-[480px]">
      <CommandEmpty>No matches.</CommandEmpty>
      <template v-for="(group, gi) in groups" :key="group.heading">
        <CommandGroup :heading="group.heading">
          <CommandItem
            v-for="item in group.items"
            :key="`${group.heading}-${item.label}`"
            :value="`${group.heading} ${item.label} ${item.hint ?? ''}`"
            @select="pick(item)"
          >
            <component :is="item.icon" v-if="item.icon" class="size-4" />
            <span>{{ item.label }}</span>
            <CommandShortcut v-if="item.hint" class="text-muted-foreground/70">{{ item.hint }}</CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator v-if="gi < groups.length - 1" />
      </template>
    </CommandList>
  </CommandDialog>
</template>

```

## contact-01

- type: `registry:block`
- description: Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits "submit" with the form payload.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `card`, `input`, `label`, `select`, `textarea`

### `packages/registry-vue/blocks/contact-01/Contact01.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'

const name = ref('')
const email = ref('')
const company = ref('')
const subject = ref('sales')
const message = ref('')
const sent = ref(false)

const canSubmit = computed(() => name.value && email.value && message.value)

const emit = defineEmits<{
  (e: 'submit', payload: { name: string; email: string; company: string; subject: string; message: string }): void
}>()

function submit() {
  if (!canSubmit.value) return
  emit('submit', {
    name: name.value,
    email: email.value,
    company: company.value,
    subject: subject.value,
    message: message.value,
  })
  sent.value = true
}
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-24">
      <div class="grid gap-10 lg:grid-cols-2 lg:items-start">
        <div class="space-y-6">
          <p class="text-primary text-sm font-medium tracking-widest uppercase">Contact</p>
          <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">Talk to a human</h2>
          <p class="text-muted-foreground text-lg">
            Tell us a bit about your team and we'll show you how we'd fit. Average reply: 4 hours.
          </p>

          <div class="space-y-3 pt-4">
            <div class="flex items-center gap-3">
              <div class="bg-primary/10 text-primary rounded-lg p-2">
                <Mail class="size-4" />
              </div>
              <div>
                <p class="text-muted-foreground text-xs uppercase">Email</p>
                <a href="mailto:hello@acme.test" class="text-sm font-medium hover:underline"> hello@acme.test </a>
              </div>
            </div>
            <div class="flex items-center gap-3">
              <div class="bg-primary/10 text-primary rounded-lg p-2">
                <Phone class="size-4" />
              </div>
              <div>
                <p class="text-muted-foreground text-xs uppercase">Phone</p>
                <p class="text-sm font-medium">+1 (415) 555-0142</p>
              </div>
            </div>
            <div class="flex items-center gap-3">
              <div class="bg-primary/10 text-primary rounded-lg p-2">
                <MapPin class="size-4" />
              </div>
              <div>
                <p class="text-muted-foreground text-xs uppercase">Office</p>
                <p class="text-sm font-medium">120 Howard St, San Francisco</p>
              </div>
            </div>
          </div>

          <div class="bg-muted/40 mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed">
            <p class="text-muted-foreground text-sm">Map placeholder</p>
          </div>
        </div>

        <Card>
          <template v-if="!sent">
            <CardHeader>
              <CardTitle>Send us a message</CardTitle>
              <CardDescription>We reply during business hours (PT)</CardDescription>
            </CardHeader>
            <CardContent>
              <form class="space-y-4" @submit.prevent="submit">
                <div class="grid gap-4 sm:grid-cols-2">
                  <div class="grid gap-2">
                    <Label for="contact-name">Name</Label>
                    <Input id="contact-name" v-model="name" required />
                  </div>
                  <div class="grid gap-2">
                    <Label for="contact-email">Work email</Label>
                    <Input id="contact-email" v-model="email" type="email" required />
                  </div>
                </div>
                <div class="grid gap-2">
                  <Label for="contact-company">Company</Label>
                  <Input id="contact-company" v-model="company" />
                </div>
                <div class="grid gap-2">
                  <Label for="contact-subject">I'm interested in</Label>
                  <Select v-model="subject">
                    <SelectTrigger id="contact-subject">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sales">Talking to sales</SelectItem>
                      <SelectItem value="support">Customer support</SelectItem>
                      <SelectItem value="partnership">Partnerships</SelectItem>
                      <SelectItem value="other">Something else</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div class="grid gap-2">
                  <Label for="contact-message">Message</Label>
                  <Textarea id="contact-message" v-model="message" placeholder="How can we help?" required />
                </div>
                <Button type="submit" class="w-full" :disabled="!canSubmit">
                  Send message
                  <Send class="ml-2 size-4" />
                </Button>
              </form>
            </CardContent>
          </template>

          <template v-else>
            <CardContent class="space-y-4 pt-8 text-center">
              <div
                class="mx-auto flex size-12 items-center justify-center rounded-full bg-[var(--success)]/10 text-[var(--success)]"
              >
                <CheckCircle2 class="size-6" />
              </div>
              <div class="space-y-1">
                <h3 class="text-lg font-semibold">Message sent</h3>
                <p class="text-muted-foreground text-sm">Thanks {{ name }}, we'll be in touch within a few hours.</p>
              </div>
              <Button variant="outline" @click="sent = false">Send another</Button>
            </CardContent>
          </template>
        </Card>
      </div>
    </div>
  </section>
</template>

```

## contact-us

- type: `registry:block`
- description: Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `card`, `input`, `label`, `select`, `textarea`, `map`

### `packages/registry-vue/blocks/contact-us/ContactUs.vue`

```vue
<script setup lang="ts">
/**
 * Contact section — two columns. Left: eyebrow, headline, lede, icon-prefixed
 * contact rows, and a live map pinned to your office (pass `access-token` +
 * `location`; falls back to a styled placeholder without a token). Right: a
 * Card-wrapped form (name / email / company / subject / message) that swaps to
 * a success state after submit. Emits "submit" with the payload.
 */
import { computed, ref } from 'vue'
import { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { Map, MapMarker } from '@/components/ui/map'

const props = withDefaults(
  defineProps<{
    /** Mapbox token. Without it the map area shows a styled placeholder. */
    accessToken?: string
    /** Office [lng, lat]. */
    location?: [number, number]
    locationLabel?: string
  }>(),
  {
    accessToken: '',
    location: () => [-122.4194, 37.7749],
    locationLabel: 'San Francisco, CA',
  },
)

const emit = defineEmits<{
  (e: 'submit', payload: { name: string; email: string; company: string; subject: string; message: string }): void
}>()

const name = ref('')
const email = ref('')
const company = ref('')
const subject = ref('sales')
const message = ref('')
const sent = ref(false)

const canSubmit = computed(() => name.value && email.value && message.value)

function submit() {
  if (!canSubmit.value) return
  emit('submit', { name: name.value, email: email.value, company: company.value, subject: subject.value, message: message.value })
  sent.value = true
}
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-20">
      <div class="grid gap-10 lg:grid-cols-2 lg:items-start">
        <!-- Left: copy + contact rows + map -->
        <div class="space-y-6">
          <p class="text-primary text-sm font-medium uppercase tracking-widest">Contact</p>
          <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">Talk to our team</h2>
          <p class="text-muted-foreground max-w-md">
            Questions about pricing, onboarding, or a custom plan? Send a note and we'll get back within one business day.
          </p>

          <ul class="space-y-3">
            <li class="flex items-center gap-3">
              <span class="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><Mail class="size-4" /></span>
              <span class="text-sm">hello@example.com</span>
            </li>
            <li class="flex items-center gap-3">
              <span class="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><Phone class="size-4" /></span>
              <span class="text-sm">+1 (555) 010-2030</span>
            </li>
            <li class="flex items-center gap-3">
              <span class="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><MapPin class="size-4" /></span>
              <span class="text-sm">{{ locationLabel }}</span>
            </li>
          </ul>

          <div class="h-56 overflow-hidden rounded-xl border">
            <Map v-if="accessToken" :access-token="accessToken" :center="location" :zoom="11" muted class="size-full">
              <MapMarker :lng-lat="location" anchor="bottom">
                <svg viewBox="0 0 24 24" width="26" height="34" class="text-primary drop-shadow">
                  <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" stroke="#fff" stroke-width="1.5" />
                  <circle cx="12" cy="9" r="2.6" fill="#fff" />
                </svg>
              </MapMarker>
            </Map>
            <div v-else class="bg-muted text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
              <MapPin class="size-4" /> {{ locationLabel }}
            </div>
          </div>
        </div>

        <!-- Right: form -->
        <Card>
          <template v-if="!sent">
            <CardHeader>
              <CardTitle>Send a message</CardTitle>
              <CardDescription>We'll route it to the right person.</CardDescription>
            </CardHeader>
            <CardContent class="space-y-4">
              <div class="grid gap-4 sm:grid-cols-2">
                <div class="space-y-1.5">
                  <Label for="cu-name">Name</Label>
                  <Input id="cu-name" v-model="name" placeholder="Jane Cooper" />
                </div>
                <div class="space-y-1.5">
                  <Label for="cu-email">Email</Label>
                  <Input id="cu-email" v-model="email" type="email" placeholder="jane@company.com" />
                </div>
              </div>
              <div class="space-y-1.5">
                <Label for="cu-company">Company</Label>
                <Input id="cu-company" v-model="company" placeholder="Acme Inc." />
              </div>
              <div class="space-y-1.5">
                <Label>Subject</Label>
                <Select v-model="subject">
                  <SelectTrigger><SelectValue placeholder="Choose a topic" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="sales">Sales</SelectItem>
                    <SelectItem value="support">Support</SelectItem>
                    <SelectItem value="partnership">Partnership</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div class="space-y-1.5">
                <Label for="cu-message">Message</Label>
                <Textarea id="cu-message" v-model="message" :rows="4" placeholder="How can we help?" />
              </div>
              <Button class="w-full" :disabled="!canSubmit" @click="submit">
                <Send class="size-4" /> Send message
              </Button>
            </CardContent>
          </template>

          <CardContent v-else class="flex flex-col items-center gap-3 py-16 text-center">
            <span class="bg-success/10 text-success flex size-12 items-center justify-center rounded-full"><CheckCircle2 class="size-6" /></span>
            <p class="text-lg font-semibold">Message sent</p>
            <p class="text-muted-foreground max-w-xs text-sm">Thanks, {{ name }} — we'll reply to {{ email }} within one business day.</p>
            <Button variant="outline" @click="sent = false">Send another</Button>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>

```

## context-menu

- type: `registry:ui`
- description: Right-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy/paste menus to.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/context-menu/ContextMenu.vue`

```vue
<script setup lang="ts">
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<ContextMenuRootProps>()
const emits = defineEmits<ContextMenuRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ContextMenuRoot data-uipkge data-slot="context-menu" v-bind="forwarded">
    <slot />
  </ContextMenuRoot>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuCheckboxItem.vue`

```vue
<script setup lang="ts">
import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Check } from 'lucide-vue-next'
import { ContextMenuCheckboxItem, ContextMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<ContextMenuCheckboxItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ContextMenuCheckboxItem
    data-uipkge
    data-slot="context-menu-checkbox-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <ContextMenuItemIndicator>
        <slot name="indicator-icon">
          <Check class="size-4" aria-hidden="true" />
        </slot>
      </ContextMenuItemIndicator>
    </span>
    <slot />
  </ContextMenuCheckboxItem>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuContent.vue`

```vue
<script setup lang="ts">
import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ContextMenuContent, ContextMenuPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<ContextMenuContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ContextMenuPortal>
    <ContextMenuContent
      data-uipkge
      data-slot="context-menu-content"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          props.class,
        )
      "
    >
      <slot />
    </ContextMenuContent>
  </ContextMenuPortal>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuGroup.vue`

```vue
<script setup lang="ts">
import type { ContextMenuGroupProps } from 'reka-ui'
import { ContextMenuGroup } from 'reka-ui'

const props = defineProps<ContextMenuGroupProps>()
</script>

<template>
  <ContextMenuGroup data-uipkge data-slot="context-menu-group" v-bind="props">
    <slot />
  </ContextMenuGroup>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuItem.vue`

```vue
<script setup lang="ts">
import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<
    ContextMenuItemProps & {
      class?: HTMLAttributes['class']
      inset?: boolean
      variant?: 'default' | 'destructive'
    }
  >(),
  {
    variant: 'default',
  },
)
const emits = defineEmits<ContextMenuItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ContextMenuItem
    data-uipkge
    data-slot="context-menu-item"
    :data-inset="inset ? '' : undefined"
    :data-variant="variant"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <slot />
  </ContextMenuItem>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuLabel.vue`

```vue
<script setup lang="ts">
import type { ContextMenuLabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ContextMenuLabel } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <ContextMenuLabel
    data-uipkge
    data-slot="context-menu-label"
    :data-inset="inset ? '' : undefined"
    v-bind="delegatedProps"
    :class="cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
  >
    <slot />
  </ContextMenuLabel>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuPortal.vue`

```vue
<script setup lang="ts">
import type { ContextMenuPortalProps } from 'reka-ui'
import { ContextMenuPortal } from 'reka-ui'

const props = defineProps<ContextMenuPortalProps>()
</script>

<template>
  <ContextMenuPortal data-uipkge data-slot="context-menu-portal" v-bind="props">
    <slot />
  </ContextMenuPortal>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuRadioGroup.vue`

```vue
<script setup lang="ts">
import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'reka-ui'
import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<ContextMenuRadioGroupProps>()
const emits = defineEmits<ContextMenuRadioGroupEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ContextMenuRadioGroup data-uipkge data-slot="context-menu-radio-group" v-bind="forwarded">
    <slot />
  </ContextMenuRadioGroup>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuRadioItem.vue`

```vue
<script setup lang="ts">
import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Circle } from 'lucide-vue-next'
import { ContextMenuItemIndicator, ContextMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<ContextMenuRadioItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ContextMenuRadioItem
    data-uipkge
    data-slot="context-menu-radio-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <ContextMenuItemIndicator>
        <slot name="indicator-icon">
          <Circle class="size-2 fill-current" />
        </slot>
      </ContextMenuItemIndicator>
    </span>
    <slot />
  </ContextMenuRadioItem>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuSeparator.vue`

```vue
<script setup lang="ts">
import type { ContextMenuSeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ContextMenuSeparator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <ContextMenuSeparator
    data-uipkge
    data-slot="context-menu-separator"
    v-bind="delegatedProps"
    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
  />
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuShortcut.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="context-menu-shortcut"
    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuSub.vue`

```vue
<script setup lang="ts">
import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui'
import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<ContextMenuSubProps>()
const emits = defineEmits<ContextMenuSubEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ContextMenuSub data-uipkge data-slot="context-menu-sub" v-bind="forwarded">
    <slot />
  </ContextMenuSub>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuSubContent.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuSubContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ContextMenuSubContent
    data-uipkge
    data-slot="context-menu-sub-content"
    v-bind="forwarded"
    :class="
      cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        props.class,
      )
    "
  >
    <slot />
  </ContextMenuSubContent>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuSubTrigger.vue`

```vue
<script setup lang="ts">
import type { ContextMenuSubTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <ContextMenuSubTrigger
    data-uipkge
    data-slot="context-menu-sub-trigger"
    :data-inset="inset ? '' : undefined"
    v-bind="forwardedProps"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <slot />
    <ChevronRight class="ml-auto" />
  </ContextMenuSubTrigger>
</template>

```

### `packages/registry-vue/components/context-menu/ContextMenuTrigger.vue`

```vue
<script setup lang="ts">
import type { ContextMenuTriggerProps } from 'reka-ui'
import { ContextMenuTrigger, useForwardProps } from 'reka-ui'

const props = defineProps<ContextMenuTriggerProps>()

const forwardedProps = useForwardProps(props)
</script>

<template>
  <ContextMenuTrigger data-uipkge data-slot="context-menu-trigger" v-bind="forwardedProps">
    <slot />
  </ContextMenuTrigger>
</template>

```

### `packages/registry-vue/components/context-menu/index.ts`

```ts
export { default as ContextMenu } from './ContextMenu.vue'
export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
export { default as ContextMenuContent } from './ContextMenuContent.vue'
export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
export { default as ContextMenuItem } from './ContextMenuItem.vue'
export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
export { default as ContextMenuSub } from './ContextMenuSub.vue'
export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'

```

## conversion-funnel

- type: `registry:block`
- description: Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
- registry deps: `smooth-funnel`

### `packages/registry-vue/blocks/conversion-funnel/ConversionFunnel.vue`

```vue
<script setup lang="ts">
/**
 * Conversion funnel: SmoothFunnel chart with count strip above and
 * stage-name + retention-from-previous strip below.
 *
 * Works for any drop-off flow with 3-6 stages: hiring (applied ->
 * hired), e-commerce (sessions -> purchases), onboarding (signed up
 * -> activated), etc. Reads as a single horizontal "flow":
 *
 *   72K        38.2K       16.8K       5.6K
 *   ╔══════╗╔════════╗╔══════════╗╔══════════╗
 *   ║ 100% ║║  53%   ║║   23%    ║║    8%    ║
 *   ╚══════╝╚════════╝╚══════════╝╚══════════╝
 *   Views      Cart        Checkout    Purchase
 *              -> 53%       -> 44%      -> 33%
 *
 * The middle pill (inside each band) shows the share OF THE TOP
 * stage (100%, 53%, 23%, ...). The bottom retention number shows the
 * stage-to-stage conversion -- usually the more actionable signal.
 */
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { SmoothFunnel } from '@/components/ui/charts/smooth-funnel'

interface Stage {
  name: string
  value: number
}

interface Props {
  data: Stage[]
  /** SmoothFunnel container height. Defaults to 180. */
  height?: number | string
  /** Override colour palette. Defaults to the registry's chart-1..N
   *  OKLCH tokens via CSS variables (so light/dark + theme-customizer
   *  flips ripple through without any JS). Pass a literal hex array to
   *  override. */
  colors?: string[]
  /** Compact number formatter for the count strip (default toLocaleString). */
  format?: (n: number) => string
  /** Hide the retention-from-previous footer on each non-first stage. */
  hideRetention?: boolean
  class?: HTMLAttributes['class']
}

const DEFAULT_PALETTE = [
  'var(--chart-1)',
  'var(--chart-2)',
  'var(--chart-3)',
  'var(--chart-4)',
  'var(--chart-5)',
  'var(--chart-1)',
]

const props = withDefaults(defineProps<Props>(), {
  height: 180,
  hideRetention: false,
})

const palette = computed(() => props.colors ?? DEFAULT_PALETTE)
const fmt = (v: number) => (props.format ? props.format(v) : v.toLocaleString())
const retention = (i: number) => {
  if (i === 0) return null
  const prev = props.data[i - 1]?.value ?? 1
  return Math.round((props.data[i]!.value / prev) * 100)
}
</script>

<template>
  <div data-uipkge data-slot="conversion-funnel" :class="cn('space-y-2', props.class)">
    <!-- Top: per-stage count -->
    <div class="grid px-2 text-center" :style="{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }">
      <div v-for="stage in data" :key="`top-${stage.name}`" class="text-foreground text-base font-bold tabular-nums">
        {{ fmt(stage.value) }}
      </div>
    </div>

    <!-- Funnel SVG -->
    <SmoothFunnel :data="data" :height="height" :colors="palette" />

    <!-- Bottom: stage name + retention from previous -->
    <div class="grid px-2 text-center" :style="{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }">
      <div v-for="(stage, i) in data" :key="`bot-${stage.name}`" class="space-y-0.5">
        <p class="text-muted-foreground text-xs">{{ stage.name }}</p>
        <p v-if="!hideRetention && retention(i) !== null" class="text-info text-[10px] font-semibold tabular-nums">
          → {{ retention(i) }}% retained
        </p>
      </div>
    </div>
  </div>
</template>

```

## cost-breakdown

- type: `registry:block`
- description: Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`
- registry deps: `bar-chart`, `pie-chart`

### `packages/registry-vue/blocks/cost-breakdown/CostBreakdown.vue`

```vue
<script setup lang="ts">
// Three-panel cost breakdown: a stacked-by-week bar over time on top,
// and two side-by-side categorical pie charts below (cost share by
// lane + by carrier). The patterns repeat across spend dashboards;
// swap `weeklySeries`, `byLane`, and `byCarrier` to repoint.
//
// All three panels are theme-aware: bar colors come from
// chartColors via the wrappers; pies surface inline value labels so
// the panels read at a glance without leaning on the legend alone.
import { computed } from 'vue'
import { BarChart, PieChart } from '@/components/ui/charts'

interface WeekRow {
  week: string
  detentionOrigin: number
  combinedDndOrigin: number
  demurrageOrigin: number
  detentionDest: number
  demurrageDest: number
  combinedDndDest: number
}

// 17 weeks of cost data. Heavy spike in mid-Feb mirrors a closing
// quarter cleanup or a port-disruption incident.
const weeklySeries: WeekRow[] = [
  {
    week: 'Jan 26 - Feb 1',
    detentionOrigin: 2800,
    combinedDndOrigin: 0,
    demurrageOrigin: 0,
    detentionDest: 0,
    demurrageDest: 0,
    combinedDndDest: 0,
  },
  {
    week: 'Feb 2 - Feb 8',
    detentionOrigin: 1100,
    combinedDndOrigin: 0,
    demurrageOrigin: 0,
    detentionDest: 0,
    demurrageDest: 0,
    combinedDndDest: 0,
  },
  {
    week: 'Feb 9 - Feb 15',
    detentionOrigin: 1800,
    combinedDndOrigin: 3100,
    demurrageOrigin: 800,
    detentionDest: 1800,
    demurrageDest: 4300,
    combinedDndDest: 1100,
  },
  {
    week: 'Feb 16 - Feb 22',
    detentionOrigin: 0,
    combinedDndOrigin: 22000,
    demurrageOrigin: 12500,
    detentionDest: 0,
    demurrageDest: 1900,
    combinedDndDest: 35500,
  },
  {
    week: 'Feb 23 - Mar 1',
    detentionOrigin: 0,
    combinedDndOrigin: 0,
    demurrageOrigin: 3300,
    detentionDest: 800,
    demurrageDest: 6800,
    combinedDndDest: 4400,
  },
  {
    week: 'Mar 2 - Mar 8',
    detentionOrigin: 2400,
    combinedDndOrigin: 0,
    demurrageOrigin: 6400,
    detentionDest: 1200,
    demurrageDest: 2800,
    combinedDndDest: 6600,
  },
  {
    week: 'Mar 9 - Mar 15',
    detentionOrigin: 0,
    combinedDndOrigin: 0,
    demurrageOrigin: 600,
    detentionDest: 1300,
    demurrageDest: 5300,
    combinedDndDest: 5400,
  },
  {
    week: 'Mar 16 - Mar 22',
    detentionOrigin: 5400,
    combinedDndOrigin: 0,
    demurrageOrigin: 6000,
    detentionDest: 600,
    demurrageDest: 4200,
    combinedDndDest: 1400,
  },
  {
    week: 'Mar 23 - Mar 29',
    detentionOrigin: 0,
    combinedDndOrigin: 11000,
    demurrageOrigin: 4900,
    detentionDest: 0,
    demurrageDest: 4300,
    combinedDndDest: 2200,
  },
  {
    week: 'Mar 30 - Apr 5',
    detentionOrigin: 7700,
    combinedDndOrigin: 14000,
    demurrageOrigin: 5400,
    detentionDest: 1700,
    demurrageDest: 6300,
    combinedDndDest: 7200,
  },
  {
    week: 'Apr 6 - Apr 12',
    detentionOrigin: 1200,
    combinedDndOrigin: 3100,
    demurrageOrigin: 1500,
    detentionDest: 0,
    demurrageDest: 4800,
    combinedDndDest: 6300,
  },
  {
    week: 'Apr 13 - Apr 19',
    detentionOrigin: 0,
    combinedDndOrigin: 3300,
    demurrageOrigin: 3200,
    detentionDest: 3500,
    demurrageDest: 5000,
    combinedDndDest: 5700,
  },
  {
    week: 'Apr 20 - Apr 26',
    detentionOrigin: 1700,
    combinedDndOrigin: 5300,
    demurrageOrigin: 2500,
    detentionDest: 600,
    demurrageDest: 3800,
    combinedDndDest: 4800,
  },
  {
    week: 'Apr 27 - May 3',
    detentionOrigin: 6000,
    combinedDndOrigin: 15000,
    demurrageOrigin: 5500,
    detentionDest: 600,
    demurrageDest: 800,
    combinedDndDest: 2400,
  },
  {
    week: 'May 4 - May 10',
    detentionOrigin: 1900,
    combinedDndOrigin: 2200,
    demurrageOrigin: 3300,
    detentionDest: 3500,
    demurrageDest: 3700,
    combinedDndDest: 1100,
  },
  {
    week: 'May 11 - May 17',
    detentionOrigin: 1900,
    combinedDndOrigin: 1200,
    demurrageOrigin: 800,
    detentionDest: 700,
    demurrageDest: 600,
    combinedDndDest: 1200,
  },
]

const stackKeys = [
  { key: 'detentionOrigin', label: 'Detention at origin' },
  { key: 'combinedDndOrigin', label: 'Combined at origin' },
  { key: 'demurrageOrigin', label: 'Demurrage at origin' },
  { key: 'detentionDest', label: 'Detention at destination' },
  { key: 'demurrageDest', label: 'Demurrage at destination' },
  { key: 'combinedDndDest', label: 'Combined at destination' },
] as const

const stackedOption = computed(() => ({
  series: stackKeys.map(() => ({ stack: 'total' as const })),
  yAxis: {
    type: 'value' as const,
    axisLabel: { formatter: (v: number) => (v >= 1000 ? `$${Math.round(v / 1000)}K` : `$${v}`) },
  },
}))

const byLane = [
  { name: 'LANE-01', value: 119800 },
  { name: 'LANE-02', value: 39000 },
  { name: 'LANE-03', value: 53100 },
  { name: 'LANE-04', value: 32000 },
  { name: 'LANE-05', value: 24700 },
  { name: 'LANE-06', value: 23500 },
  { name: 'LANE-07', value: 20300 },
  { name: 'LANE-08', value: 18300 },
  { name: 'LANE-09', value: 14700 },
  { name: 'OTHER', value: 8100 },
]

const byCarrier = [
  { name: 'C-ALPHA', value: 144200 },
  { name: 'C-BETA', value: 69800 },
  { name: 'C-GAMMA', value: 32700 },
  { name: 'C-DELTA', value: 31800 },
  { name: 'C-EPSILON', value: 27800 },
  { name: 'C-ZETA', value: 22600 },
  { name: 'OTHER', value: 10100 },
]

const totalAll = computed(() =>
  weeklySeries.reduce(
    (acc, w) =>
      acc +
      w.detentionOrigin +
      w.combinedDndOrigin +
      w.demurrageOrigin +
      w.detentionDest +
      w.demurrageDest +
      w.combinedDndDest,
    0,
  ),
)

const pieOption = {
  legend: { show: false },
  series: [
    {
      radius: ['0%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `$${(p.value / 1000).toFixed(1)}k\n(${p.percent}%)`,
        fontSize: 10,
        color: 'var(--background)',
      },
      labelLine: { show: false },
    },
  ],
}

const fmtUsd = (n: number) => `$${(n / 1000).toFixed(1)}k`
</script>

<template>
  <div class="space-y-6">
    <!-- Weekly trend (top) -->
    <section class="bg-card border-border rounded-lg border p-5">
      <div class="mb-3 flex items-baseline justify-between gap-4">
        <div>
          <h3 class="text-[15px] font-semibold tracking-tight">Cost per day</h3>
          <p class="text-muted-foreground mt-0.5 text-xs">17-week rollup. Hover a stack to inspect the breakdown.</p>
        </div>
        <div class="text-right">
          <div class="text-muted-foreground font-mono text-xs tracking-wider uppercase">Total</div>
          <div class="text-lg font-semibold tabular-nums">{{ fmtUsd(totalAll) }}</div>
        </div>
      </div>
      <BarChart
        :data="weeklySeries"
        x-field="week"
        :y-field="[
          'detentionOrigin',
          'combinedDndOrigin',
          'demurrageOrigin',
          'detentionDest',
          'demurrageDest',
          'combinedDndDest',
        ]"
        :option="stackedOption"
        height="320"
      />
    </section>

    <!-- Dual pie breakdown (bottom) -->
    <div class="grid gap-6 lg:grid-cols-2">
      <section class="bg-card border-border rounded-lg border p-5">
        <h3 class="text-[15px] font-semibold tracking-tight">Cost share by lane</h3>
        <p class="text-muted-foreground mt-0.5 mb-4 text-xs">Top 9 lanes + a grouped 'Other' bucket.</p>
        <PieChart :data="byLane" :option="pieOption" height="320" />
      </section>

      <section class="bg-card border-border rounded-lg border p-5">
        <h3 class="text-[15px] font-semibold tracking-tight">Cost share by carrier</h3>
        <p class="text-muted-foreground mt-0.5 mb-4 text-xs">Top 6 carriers + a grouped 'Other' bucket.</p>
        <PieChart :data="byCarrier" :option="pieOption" height="320" />
      </section>
    </div>
  </div>
</template>

```

## countdown

- type: `registry:ui`
- description: Countdown timer that shows time remaining to a target date. Supports DD:HH:MM:SS, HH:MM:SS, MM:SS, and SS formats plus custom token formats, named slots for days/hours/minutes/seconds, a label, leading-zero padding, a custom separator, paused state, and on-finish/tick events.

### `packages/registry-vue/components/countdown/Countdown.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

type Format = 'DD:HH:MM:SS' | 'HH:MM:SS' | 'MM:SS' | 'SS'

const props = withDefaults(
  defineProps<{
    /** Target date/time. Accepts a Date, ISO string, or epoch ms number. */
    target: Date | string | number
    /** Display format. Custom tokens: DD days, HH hours, MM minutes, SS seconds. */
    format?: Format | string
    /** Pause the countdown. */
    paused?: boolean
    /** Optional label rendered above the countdown. */
    label?: string
    /** Show leading zeros (e.g. 05 vs 5). */
    pad?: boolean
    /** Separator between units. */
    separator?: string
    class?: HTMLAttributes['class']
  }>(),
  {
    format: 'DD:HH:MM:SS',
    paused: false,
    label: '',
    pad: true,
    separator: ':',
  },
)

const emit = defineEmits<{
  (e: 'finish'): void
  (e: 'tick', remaining: number): void
}>()

const now = ref(Date.now())
let timer: ReturnType<typeof setInterval> | null = null
const finished = ref(false)

const targetMs = computed(() => {
  if (props.target instanceof Date) return props.target.getTime()
  if (typeof props.target === 'number') return props.target
  return new Date(props.target).getTime()
})

const remainingMs = computed(() => Math.max(0, targetMs.value - now.value))

const parts = computed(() => {
  const total = remainingMs.value
  const days = Math.floor(total / 86_400_000)
  const hours = Math.floor((total % 86_400_000) / 3_600_000)
  const minutes = Math.floor((total % 3_600_000) / 60_000)
  const seconds = Math.floor((total % 60_000) / 1000)
  return { days, hours, minutes, seconds }
})

function pad2(n: number) {
  return props.pad ? String(n).padStart(2, '0') : String(n)
}

const display = computed(() => {
  const f = props.format
  const { days, hours, minutes, seconds } = parts.value
  const sep = props.separator
  if (f === 'DD:HH:MM:SS') return `${pad2(days)}${sep}${pad2(hours)}${sep}${pad2(minutes)}${sep}${pad2(seconds)}`
  if (f === 'HH:MM:SS') return `${pad2(days * 24 + hours)}${sep}${pad2(minutes)}${sep}${pad2(seconds)}`
  if (f === 'MM:SS') return `${pad2(days * 24 * 60 + hours * 60 + minutes)}${sep}${pad2(seconds)}`
  if (f === 'SS') return pad2(Math.floor(remainingMs.value / 1000))
  // Custom token format: replace DD, HH, MM, SS tokens.
  return f
    .replace('DD', pad2(days))
    .replace('HH', pad2(hours))
    .replace('MM', pad2(minutes))
    .replace('SS', pad2(seconds))
})

function startTimer() {
  stopTimer()
  if (props.paused) return
  timer = setInterval(() => {
    now.value = Date.now()
    emit('tick', remainingMs.value)
    if (remainingMs.value <= 0 && !finished.value) {
      finished.value = true
      stopTimer()
      emit('finish')
    }
  }, 1000)
}

function stopTimer() {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

watch(
  () => props.paused,
  (paused) => {
    if (paused) stopTimer()
    else startTimer()
  },
)

watch(
  () => props.target,
  () => {
    finished.value = false
    now.value = Date.now()
    startTimer()
  },
)

onBeforeUnmount(stopTimer)

// Kick off immediately.
now.value = Date.now()
startTimer()
</script>

<template>
  <div
    data-uipkge
    data-slot="countdown"
    :data-finished="finished"
    :data-paused="paused"
    :class="cn('inline-flex flex-col gap-1', props.class)"
  >
    <span
      v-if="label"
      data-slot="countdown-label"
      class="text-muted-foreground text-xs font-medium tracking-wide uppercase"
    >
      {{ label }}
    </span>
    <div data-slot="countdown-display" class="flex items-baseline gap-1 font-mono tabular-nums">
      <slot
        name="default"
        :days="parts.days"
        :hours="parts.hours"
        :minutes="parts.minutes"
        :seconds="parts.seconds"
        :display="display"
        :finished="finished"
      >
        <slot name="days" :days="parts.days">
          <span v-if="format.includes('DD')" data-slot="countdown-days" class="text-foreground text-2xl font-semibold">
            {{ pad2(parts.days) }}
          </span>
        </slot>
        <span v-if="format.includes('DD') && format.includes('HH')" class="text-muted-foreground text-2xl">{{
          separator
        }}</span>
        <slot name="hours" :hours="parts.hours">
          <span v-if="format.includes('HH')" data-slot="countdown-hours" class="text-foreground text-2xl font-semibold">
            {{ pad2(parts.hours) }}
          </span>
        </slot>
        <span v-if="format.includes('HH') && format.includes('MM')" class="text-muted-foreground text-2xl">{{
          separator
        }}</span>
        <slot name="minutes" :minutes="parts.minutes">
          <span
            v-if="format.includes('MM')"
            data-slot="countdown-minutes"
            class="text-foreground text-2xl font-semibold"
          >
            {{ pad2(parts.minutes) }}
          </span>
        </slot>
        <span v-if="format.includes('MM') && format.includes('SS')" class="text-muted-foreground text-2xl">{{
          separator
        }}</span>
        <slot name="seconds" :seconds="parts.seconds">
          <span
            v-if="format.includes('SS')"
            data-slot="countdown-seconds"
            class="text-foreground text-2xl font-semibold"
          >
            {{ pad2(parts.seconds) }}
          </span>
        </slot>
      </slot>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/countdown/index.ts`

```ts
export { default as Countdown } from './Countdown.vue'

```

## cta-01

- type: `registry:block`
- description: Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.
- npm deps: `lucide-vue-next`
- registry deps: `button`

### `packages/registry-vue/blocks/cta-01/Cta01.vue`

```vue
<script setup lang="ts">
import { ArrowRight } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
</script>

<template>
  <section class="bg-background relative overflow-hidden">
    <div
      class="from-primary/15 via-background to-background pointer-events-none absolute inset-0 -z-10 bg-gradient-to-br"
    />
    <div class="bg-primary/10 pointer-events-none absolute right-1/4 -bottom-40 size-[500px] rounded-full blur-3xl" />

    <div class="mx-auto max-w-4xl px-6 py-24 text-center">
      <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">
        Ready to give your team a Monday they'll actually look forward to?
      </h2>
      <p class="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
        Set up takes 12 minutes. Migrate from your current tool with one CSV upload.
      </p>
      <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
        <Button size="lg">
          Start free trial
          <ArrowRight class="ml-2 size-4" />
        </Button>
        <Button size="lg" variant="outline">Book a demo</Button>
      </div>
      <p class="text-muted-foreground mt-4 text-xs">14-day free trial · No credit card required · Cancel anytime</p>
    </div>
  </section>
</template>

```

## dashboard-layout

- type: `registry:block`
- description: Full dashboard shell — collapsible sidebar (sidebar-02) + sticky topbar (sidebar trigger, breadcrumb, command palette, theme switch, notifications, profile menu) + main content slot. Drop it in a Nuxt layout: `<DashboardLayout><slot /></DashboardLayout>`. Auto-pulls every transitive piece (sidebar-02, command-palette, notifications-popover, profile-menu, theme-switch).
- npm deps: `lucide-vue-next`
- registry deps: `sidebar-02`, `command-palette`, `notifications-popover`, `theme-switch`, `use-theme`, `sidebar`, `breadcrumb`, `button`, `separator`

### `packages/registry-vue/blocks/dashboard-layout/DashboardLayout.vue`

```vue
<script setup lang="ts">
import { Bell } from 'lucide-vue-next'
import Sidebar02 from '@/components/blocks/sidebar-02/Sidebar02.vue'
import CommandPalette from '@/components/blocks/CommandPalette.vue'
import NotificationsPopover from '@/components/blocks/NotificationsPopover.vue'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
import { ThemeSwitch } from '@/components/ui/theme-switch'
import { useTheme } from '@/composables/useTheme'

interface Crumb {
  label: string
  href?: string
}

withDefaults(
  defineProps<{
    breadcrumbs?: Crumb[]
    user?: { name: string; email: string; avatar?: string }
  }>(),
  {
    breadcrumbs: () => [{ label: 'Dashboard' }],
    user: () => ({ name: 'Alex Morgan', email: 'alex@example.com' }),
  },
)

const emit = defineEmits<{
  (e: 'profile-select', key: string): void
  (e: 'command-select', item: { label: string; hint?: string }): void
}>()

const { theme, setTheme } = useTheme()
</script>

<template>
  <SidebarProvider>
    <Sidebar02 />
    <SidebarInset>
      <header
        class="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between border-b px-4 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
      >
        <div class="flex items-center gap-2">
          <SidebarTrigger class="-ml-1" />
          <Separator orientation="vertical" class="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <template v-for="(crumb, i) in breadcrumbs" :key="i">
                <BreadcrumbItem :class="i === 0 ? 'hidden md:block' : ''">
                  <BreadcrumbLink
                    v-if="crumb.href && i < breadcrumbs.length - 1"
                    :href="crumb.href"
                    class="text-muted-foreground/70 hover:text-foreground transition-colors"
                  >
                    {{ crumb.label }}
                  </BreadcrumbLink>
                  <BreadcrumbPage v-else class="font-medium">{{ crumb.label }}</BreadcrumbPage>
                </BreadcrumbItem>
                <BreadcrumbSeparator v-if="i < breadcrumbs.length - 1" :class="i === 0 ? 'hidden md:block' : ''" />
              </template>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <div class="flex items-center gap-1 px-2 sm:gap-3">
          <CommandPalette @select="(item) => emit('command-select', item)" />
          <div class="flex items-center gap-0.5">
            <ThemeSwitch :model-value="theme" variant="icon-only" @update:model-value="setTheme" />
            <NotificationsPopover>
              <template #default="{ unreadCount }">
                <Button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground relative size-8 rounded-lg"
                  aria-label="Notifications"
                >
                  <Bell class="size-4" />
                  <span
                    v-if="unreadCount > 0"
                    class="bg-primary ring-background absolute top-1.5 right-1.5 size-2 rounded-full ring-2"
                  />
                </Button>
              </template>
            </NotificationsPopover>
            <!-- ProfileMenu removed from header: the sidebar's NavUser
                 (sidebar-02 footer) already owns the profile/account
                 affordance. Two avatars in the same screen pulled the
                 eye in conflicting directions. The block still accepts
                 a `user` prop + emits `profile-select` so consumers can
                 wire those into NavUser or a custom header slot. -->
          </div>
        </div>
      </header>
      <main class="flex flex-1 flex-col px-4 pt-4 pb-4 lg:px-6 lg:pt-6 lg:pb-6">
        <slot />
      </main>
    </SidebarInset>
  </SidebarProvider>
</template>

```

## data-list

- type: `registry:ui`
- description: Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.

### `packages/registry-vue/components/data-list/DataList.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'
</script>

<template>
  <div :class="cn('flex flex-col', $attrs.class as string)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/data-list/DataListItem.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'
</script>

<template>
  <div
    :class="
      cn(
        'flex flex-row items-center justify-between border-b py-4 transition-colors duration-200 first:pt-0 last:border-0 last:pb-0',
        $attrs.class as string,
      )
    "
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/data-list/index.ts`

```ts
export { default as DataList } from './DataList.vue'
export { default as DataListItem } from './DataListItem.vue'

```

## data-table

- type: `registry:ui`
- description: Full-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header/toolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.
- npm deps: `@internationalized/date`, `@tanstack/vue-table`, `lucide-vue-next`, `reka-ui`
- registry deps: `badge`, `button`, `card`, `command`, `dropdown-menu`, `input`, `label`, `popover`, `range-calendar`, `select`, `separator`, `sheet`, `table`

### `packages/registry-vue/components/data-table/DataTable.vue`

```vue
<script setup lang="ts" generic="TData, TValue">
import type { ColumnDef, ColumnFiltersState, FilterFn, SortingState, VisibilityState, ExpandedState, GroupingState } from '@tanstack/vue-table'
import {
  FlexRender,
  getCoreRowModel,
  getExpandedRowModel,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
} from '@tanstack/vue-table'

// `valueUpdater` lives next to the low-level table primitive (which
// data-table depends on transitively via registryDependencies). Keep
// `@/lib/utils` reserved for the cn() helper shipped by the init
// bootstrap -- importing valueUpdater from there would force every
// consumer to hand-edit lib/utils.ts on install.
import { valueUpdater } from '@/components/ui/table/utils'
import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
import { CalendarDate, type DateValue } from '@internationalized/date'
import type { DateRange as RekaDateRange } from 'reka-ui'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

import DataTableToolbar from './DataTableToolbar.vue'
import DataTableFilterSheet from './DataTableFilterSheet.vue'
import DataTablePagination from './DataTablePagination.vue'

export interface FilterOption {
  value: string
  label: string
  icon?: any
}

export interface FilterDefinition {
  column: string
  label: string
  type: 'text' | 'select' | 'multiselect' | 'date'
  options?: (string | FilterOption)[]
}

interface DateRange {
  from?: string
  to?: string
}

const props = withDefaults(
  defineProps<{
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
    filterColumn?: string
    filterPlaceholder?: string
    filters?: FilterDefinition[]
    filterMode?: 'inline' | 'modal' | 'popover'
    /** Show the global search input. Default true. */
    enableSearch?: boolean
    /** Show the View column-visibility dropdown. Default true. */
    enableColumnVisibility?: boolean
    /** Show the pagination footer. Default true. */
    enablePagination?: boolean
    /** Hide the entire toolbar (search + filters + view). Default false. */
    hideToolbar?: boolean
    /** Show Export-CSV button in toolbar. Default false. */
    enableExport?: boolean
    /** Infinite-scroll mode: emits `fetch-more` when last row enters viewport,
     *  hides the pagination footer. Combine with append-on-success on the
     *  consumer side. */
    infinite?: boolean
    /** Allow drag-to-resize on column borders. */
    enableResize?: boolean
    /** Initial column pinning. Each column id is pinned to the given side. */
    defaultColumnPinning?: { left?: string[], right?: string[] }
    /** Allow drag-to-reorder on column headers. */
    enableReorder?: boolean
    /** Initial column ids to group by. Pass an empty array to disable grouping. */
    defaultGrouping?: string[]
    /** Virtual-scrolling mode (CSS content-visibility based). Best with large
     *  datasets and `max-height` for a scroll container. */
    virtual?: boolean
    /** Sticky header — keeps `<thead>` visible when scrolling. Pair with `max-height`. */
    stickyHeader?: boolean
    /** Density of cell padding: 'compact' | 'cozy' | 'comfortable'. Default cozy.
     *  Treated as the INITIAL density when `enableDensityToggle` is on; the user
     *  can override it at runtime from the toolbar. */
    density?: 'compact' | 'cozy' | 'comfortable'
    /** Show the density toggle in the toolbar. Default false. */
    enableDensityToggle?: boolean
    /** Strip the DataTable's borders.
     *  - `'inner'` removes toolbar bottom-divider, pagination top-divider,
     *    and filter-sheet section bgs/borders. The outer container border
     *    is kept.
     *  - `'full'` additionally removes the outer container border + rounded
     *    corners so the table renders completely flat on the canvas. */
    borderless?: 'inner' | 'full'
    /** Where the toolbar (search / filters / export / view) renders.
     *  - `'inside'` (default) is the canonical layout: toolbar lives inside
     *    the bordered container above the table, separated by a divider.
     *  - `'above'` floats the toolbar outside the bordered container, so
     *    the table's border only wraps the table (and pagination unless
     *    that is also moved out). Useful when you want the chrome to
     *    feel like a page action bar rather than card-internal. */
    toolbarPosition?: 'inside' | 'above'
    /** Where the pagination footer renders.
     *  - `'inside'` (default): footer sits inside the bordered container,
     *    separated by a top-divider.
     *  - `'below'` floats the footer outside the bordered container. */
    paginationPosition?: 'inside' | 'below'
    /** Max height; enables vertical scroll inside the card. */
    maxHeight?: string
    /** Row click — when set, rows become clickable + cursor-pointer. */
    onRowClick?: (row: TData) => void
    /** Server-side mode: total row count from API (enables manual pagination) */
    totalRows?: number
    /** Server-side mode: loading state indicator */
    loading?: boolean
  }>(),
  {
    filterColumn: '',
    filterPlaceholder: 'Filter...',
    filters: () => [],
    filterMode: 'modal',
    enableSearch: true,
    enableColumnVisibility: false,
    enablePagination: true,
    hideToolbar: false,
    enableExport: false,
    infinite: false,
    enableResize: false,
    defaultColumnPinning: () => ({ left: [], right: [] }),
    enableReorder: false,
    defaultGrouping: () => [],
    virtual: false,
    stickyHeader: false,
    density: 'cozy',
    enableDensityToggle: false,
    toolbarPosition: 'inside',
    paginationPosition: 'inside',
    maxHeight: '',
    totalRows: -1,
    loading: false,
  },
)

// User-mutable density -- initial value from prop, toggleable via toolbar
// when `enableDensityToggle` is on. Watch the prop so parents can still
// drive it externally (e.g. saving the user's last choice to a setting).
const currentDensity = ref<'compact' | 'cozy' | 'comfortable'>(props.density)
watch(() => props.density, (v) => { currentDensity.value = v })

// `borderless` is an enum at the DataTable level (`'inner'` vs `'full'`), but
// child components only need to know "should I drop my borders?" -- collapse
// to a single boolean for the pass-through.
const dropInnerBorders = computed(() => !!props.borderless)

const densityClass = computed(() => {
  if (currentDensity.value === 'compact') return '[&_td]:py-1.5 [&_td]:px-3 [&_td]:text-xs [&_th]:h-8 [&_th]:px-3 [&_th]:text-xs'
  if (currentDensity.value === 'comfortable') return '[&_td]:py-3 [&_th]:h-12'
  // cozy -- 8px vertical cell padding, 40px header. Tightens the
  // TableCell/TableHead defaults (py-3 / h-12) so a cozy DataTable
  // doesn't feel airy compared with the surrounding canvas.
  return '[&_td]:py-2 [&_th]:h-10'
})

const emit = defineEmits<{
  /** Emitted when server-side state changes (pagination, sorting, filters) */
  (
    e: 'update:state',
    state: {
      page: number
      pageSize: number
      sortBy: string
      sortOrder: 'asc' | 'desc'
      filters: Record<string, any>
      search: string
    },
  ): void
  /** Infinite-scroll: last row entered viewport, time to load more */
  (e: 'fetch-more'): void
}>()

const isServerSide = computed(() => props.totalRows >= 0)
const isFilterSheetOpen = ref(false)

// ── Filter snapshot (restore on close without apply) ─────────────────────────
// Shared between the modal Sheet and the inline Popover. Both surfaces stage
// edits in the live `columnFilters` ref (so the in-popover "N selected"
// badges update as the user clicks). Closing without hitting Apply rolls
// back via the snapshot.
let filterSnapshot: ColumnFiltersState | null = null
let dateRangeSnapshot: Record<string, RekaDateRange> | null = null
let filterApplied = false

function snapshotFilters() {
  filterApplied = false
  filterSnapshot = JSON.parse(JSON.stringify(columnFilters.value))
  dateRangeSnapshot = JSON.parse(JSON.stringify(dateRangeModels.value))
}

function maybeRestoreFilters() {
  if (!filterApplied && filterSnapshot) {
    columnFilters.value = filterSnapshot
    dateRangeModels.value = dateRangeSnapshot ?? {}
  }
  filterSnapshot = null
  dateRangeSnapshot = null
}

function onFilterSheetOpen() {
  snapshotFilters()
  isFilterSheetOpen.value = true
}

function onFilterSheetClose(open: boolean) {
  if (!open) maybeRestoreFilters()
  isFilterSheetOpen.value = open
}

// ── Timers for debounce / batching ──────────────────────────────────────────
let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
let paginationEmitTimer: ReturnType<typeof setTimeout> | null = null

function onSearchInput(val: string) {
  if (!props.filterColumn || !table.getColumn(props.filterColumn)) return
  table.getColumn(props.filterColumn)?.setFilterValue(val || undefined)
  if (isServerSide.value) {
    if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
    searchDebounceTimer = setTimeout(() => {
      table.setPageIndex(0)
      emitStateUpdate()
    }, 500)
  }
}

// Custom filter functions for multiselect and date range
const multiSelectFilterFn: FilterFn<TData> = (row, columnId, filterValue: string[]) => {
  if (!filterValue || filterValue.length === 0) return true
  const cellValue = String(row.getValue(columnId)).toLowerCase()
  return filterValue.some((v: string) => v.toLowerCase() === cellValue)
}

const dateRangeFilterFn: FilterFn<TData> = (row, columnId, filterValue: DateRange) => {
  if (!filterValue) return true
  const { from, to } = filterValue
  if (!from && !to) return true
  const cellValue = String(row.getValue(columnId))
  if (from && cellValue < from) return false
  if (to && cellValue > to) return false
  return true
}

// Augment columns with custom filter functions based on filter definitions
const processedColumns = computed(() => {
  return props.columns.map((col) => {
    const colId = (col as any).accessorKey || (col as any).id
    const filter = props.filters.find(f => f.column === colId)
    if (!filter) return col
    if (filter.type === 'multiselect') return { ...col, filterFn: multiSelectFilterFn }
    if (filter.type === 'date') return { ...col, filterFn: dateRangeFilterFn }
    return col
  })
})

const sorting = ref<SortingState>([])
const columnFilters = ref<ColumnFiltersState>([])
const columnVisibility = ref<VisibilityState>({})
const rowSelection = ref({})
const expanded = ref<ExpandedState>({})
const columnPinning = ref({
  left: props.defaultColumnPinning.left ?? [],
  right: props.defaultColumnPinning.right ?? [],
})
const columnOrder = ref<string[]>([])
const grouping = ref<GroupingState>(props.defaultGrouping)
const pagination = ref({ pageIndex: 0, pageSize: 10 })

const table = useVueTable({
  get data() {
    return props.data
  },
  get columns() {
    return processedColumns.value
  },
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: isServerSide.value ? undefined : getPaginationRowModel(),
  getSortedRowModel: isServerSide.value ? undefined : getSortedRowModel(),
  getFilteredRowModel: isServerSide.value ? undefined : getFilteredRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  get enableColumnResizing() {
    return props.enableResize
  },
  columnResizeMode: 'onChange',
  get manualPagination() {
    return isServerSide.value
  },
  get manualSorting() {
    return isServerSide.value
  },
  get manualFiltering() {
    return isServerSide.value
  },
  get rowCount() {
    return isServerSide.value ? props.totalRows : undefined
  },
  onSortingChange: (updaterOrValue) => {
    valueUpdater(updaterOrValue, sorting)
    if (isServerSide.value) emitStateUpdate()
  },
  onColumnFiltersChange: (updaterOrValue) => {
    valueUpdater(updaterOrValue, columnFilters)
    // Server-side: never auto-emit on filter change — handled by Apply button / search debounce
    // Client-side inline: filters apply locally via TanStack, no emit needed
  },
  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
  onPaginationChange: (updaterOrValue) => {
    valueUpdater(updaterOrValue, pagination)
    if (isServerSide.value) {
      // Debounce to batch rapid pagination changes (e.g. setPageSize + setPageIndex)
      if (paginationEmitTimer) clearTimeout(paginationEmitTimer)
      paginationEmitTimer = setTimeout(() => emitStateUpdate(), 0)
    }
  },
  state: {
    get sorting() {
      return sorting.value
    },
    get columnFilters() {
      return columnFilters.value
    },
    get columnVisibility() {
      return columnVisibility.value
    },
    get pagination() {
      return pagination.value
    },
    get rowSelection() {
      return rowSelection.value
    },
    get expanded() {
      return expanded.value
    },
    get columnPinning() {
      return columnPinning.value
    },
    get columnOrder() {
      return columnOrder.value
    },
    get grouping() {
      return grouping.value
    },
  },
  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinning),
  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, grouping),
})

/** Build and emit current server-side state */
function emitStateUpdate() {
  const s = sorting.value[0]
  const filterMap: Record<string, any> = {}
  for (const cf of columnFilters.value) {
    filterMap[cf.id] = cf.value
  }
  emit('update:state', {
    page: table.getState().pagination.pageIndex + 1,
    pageSize: table.getState().pagination.pageSize,
    sortBy: s?.id || '',
    sortOrder: s?.desc ? 'desc' : 'asc',
    filters: filterMap,
    search: (props.filterColumn && (table.getColumn(props.filterColumn)?.getFilterValue() as string)) || '',
  })
}

// ── Filter helpers ───────────────────────────────────────────────────────────

function getMultiSelectValue(column: string): string[] {
  return (table.getColumn(column)?.getFilterValue() as string[]) ?? []
}

function getDateRangeValue(column: string): DateRange {
  return (table.getColumn(column)?.getFilterValue() as DateRange) ?? {}
}

// ── Date conversion helpers ──────────────────────────────────────────────────

function stringToDateValue(str: string): DateValue | undefined {
  if (!str) return undefined
  const [y, m, d] = str.split('-').map(Number)
  if (y === undefined || m === undefined || d === undefined) return undefined
  return new CalendarDate(y, m, d)
}

function dateValueToString(dv: DateValue | undefined): string {
  if (!dv) return ''
  return `${dv.year}-${String(dv.month).padStart(2, '0')}-${String(dv.day).padStart(2, '0')}`
}

/** Per-filter reactive range calendar model, keyed by column name */
const dateRangeModels = ref<Record<string, RekaDateRange>>({})

function getCalendarModel(column: string): RekaDateRange {
  if (!dateRangeModels.value[column]) {
    const dr = getDateRangeValue(column)
    dateRangeModels.value[column] = {
      start: stringToDateValue(dr.from ?? '') as DateValue,
      end: stringToDateValue(dr.to ?? '') as DateValue,
    }
  }
  return dateRangeModels.value[column]
}

function onCalendarUpdate(column: string, val: RekaDateRange) {
  dateRangeModels.value[column] = val
  const from = val.start ? dateValueToString(val.start) : undefined
  const to = val.end ? dateValueToString(val.end) : undefined
  const hasValue = from || to
  table.getColumn(column)?.setFilterValue(hasValue ? { from, to } : undefined)
}

function formatDateRange(column: string): string {
  const dr = getDateRangeValue(column)
  if (dr.from && dr.to) return `${dr.from} - ${dr.to}`
  if (dr.from) return `From ${dr.from}`
  if (dr.to) return `Until ${dr.to}`
  return ''
}

function toggleMultiSelectValue(column: string, option: string) {
  const current = getMultiSelectValue(column)
  const next = current.includes(option) ? current.filter(v => v !== option) : [...current, option]
  table.getColumn(column)?.setFilterValue(next.length > 0 ? next : undefined)
}

function clearAllFilters() {
  filterApplied = true
  if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
  props.filters.forEach((f) => {
    table.getColumn(f.column)?.setFilterValue(undefined)
    if (f.type === 'date') {
      dateRangeModels.value[f.column] = { start: undefined as any, end: undefined as any }
    }
  })
  if (props.filterColumn && table.getColumn(props.filterColumn)) {
    table.getColumn(props.filterColumn)?.setFilterValue(undefined)
  }
  if (isServerSide.value) {
    table.setPageIndex(0)
    nextTick(() => emitStateUpdate())
  }
}

function isFilterActive(filter: FilterDefinition): boolean {
  const value = table.getColumn(filter.column)?.getFilterValue()
  if (value === undefined || value === '') return false
  if (filter.type === 'multiselect') return Array.isArray(value) && value.length > 0
  if (filter.type === 'date') {
    const d = value as DateRange
    return !!(d.from || d.to)
  }
  return true
}

const isAnyFilterActive = computed(() => {
  const hasSearchValue = !!(props.filterColumn && (table.getColumn(props.filterColumn)?.getFilterValue() as string))
  return hasSearchValue || props.filters.some(isFilterActive)
})

function getFilterSelectedLabels(filter: FilterDefinition): string[] {
  const vals = getMultiSelectValue(filter.column)
  return vals.map((v) => {
    const opt = filter.options?.find(o => resolveOption(o).value === v)
    return opt ? resolveOption(opt).label : v
  })
}

function resolveOption(opt: string | FilterOption): FilterOption {
  if (typeof opt === 'string') return { value: opt, label: opt }
  return opt
}

function clearFilter(filter: FilterDefinition) {
  table.getColumn(filter.column)?.setFilterValue(undefined)
}

const activeFilterCount = computed(() => {
  return props.filters.filter(isFilterActive).length
})

function clearDateFilter(filter: FilterDefinition) {
  clearFilter(filter)
  dateRangeModels.value[filter.column] = { start: undefined as any, end: undefined as any }
}

function onApplyFilters() {
  filterApplied = true
  if (isServerSide.value) {
    if (table.getState().pagination.pageIndex === 0) {
      emitStateUpdate()
    }
    else {
      table.setPageIndex(0)
    }
  }
  isFilterSheetOpen.value = false
}

/**
 * Popover filter mode: handle the staged-edit commit. The popover never
 * mutates `columnFilters` during interaction — it builds a draft locally
 * and emits it here on Apply. Walk the draft, write each column's value
 * via `setFilterValue`, and sync the calendar model for date filters so
 * a subsequent reopen reflects the just-applied range.
 */
function onCommitDraft(draft: Record<string, any>) {
  for (const f of props.filters) {
    if (!(f.column in draft)) continue
    const val = draft[f.column]
    if (f.type === 'date') {
      const dr = (val ?? {}) as DateRange
      dateRangeModels.value[f.column] = {
        start: stringToDateValue(dr.from ?? '') as DateValue,
        end: stringToDateValue(dr.to ?? '') as DateValue,
      }
      table.getColumn(f.column)?.setFilterValue(val)
    }
    else {
      table.getColumn(f.column)?.setFilterValue(val)
    }
  }
  // Reuse the same apply-side bookkeeping (server-side re-fetch +
  // pagination reset). filterApplied flips so any stale Sheet snapshot
  // doesn't try to roll back.
  onApplyFilters()
}

// Column reorder — HTML5 drag/drop swaps the dragged column with the drop target.
const dragColId = ref<string | null>(null)
const dragOverColId = ref<string | null>(null)

function onColDragStart(id: string, e: DragEvent) {
  dragColId.value = id
  document.body.style.cursor = 'grabbing'
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', id)
  }
}

function onColDragOver(targetId: string, e: DragEvent) {
  if (!props.enableReorder || !dragColId.value) return
  e.preventDefault()
  dragOverColId.value = targetId
  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
}

function onColDragEnd() {
  document.body.style.cursor = ''
  dragColId.value = null
  dragOverColId.value = null
}

function onColDrop(targetId: string) {
  const src = dragColId.value
  onColDragEnd()
  if (!src || src === targetId) return
  const order = (columnOrder.value.length ? columnOrder.value : table.getAllLeafColumns().map(c => c.id)).slice()
  const from = order.indexOf(src)
  const to = order.indexOf(targetId)
  if (from === -1 || to === -1) return
  order.splice(to, 0, ...order.splice(from, 1))
  columnOrder.value = order
}

// Pinning — return style for sticky pinned cells (header or body)
function pinStyle(col: any): Record<string, string> | undefined {
  const side = col.getIsPinned()
  if (!side) return undefined
  if (side === 'left') return { position: 'sticky', left: `${col.getStart('left')}px`, zIndex: '2' }
  return { position: 'sticky', right: `${col.getAfter('right')}px`, zIndex: '2' }
}

// Infinite scroll — sentinel row triggers fetch-more when visible
const sentinelEl = ref<HTMLElement | null>(null)
let io: IntersectionObserver | null = null

onMounted(() => {
  if (!props.infinite || !sentinelEl.value) return
  io = new IntersectionObserver(
    (entries) => {
      if (entries[0]?.isIntersecting) emit('fetch-more')
    },
    { rootMargin: '100px' },
  )
  io.observe(sentinelEl.value)
})

onBeforeUnmount(() => {
  io?.disconnect()
  io = null
})

watch(
  () => props.infinite,
  (on) => {
    if (on && sentinelEl.value && !io) {
      io = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting) emit('fetch-more')
        },
        { rootMargin: '100px' },
      )
      io.observe(sentinelEl.value)
    }
    else if (!on) {
      io?.disconnect()
      io = null
    }
  },
)

// CSV export — uses currently filtered + visible data, skips select/actions cols.
function exportCsv() {
  const visibleCols = table
    .getVisibleLeafColumns()
    .filter(c => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')
  const headers = visibleCols.map(c =>
    String(c.columnDef.header && typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id),
  )
  const rows = table.getFilteredRowModel().rows.map(row =>
    visibleCols.map((c) => {
      const v = row.getValue(c.id)
      const s = v == null ? '' : String(v)
      return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
    }),
  )
  const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n')
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `export-${Date.now()}.csv`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

// JSON export -- same row/column scope as CSV, but emits the underlying
// row.original objects so downstream tools get typed data, not strings.
function exportJson() {
  const visibleColIds = table
    .getVisibleLeafColumns()
    .filter(c => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')
    .map(c => c.id)
  const rows = table.getFilteredRowModel().rows.map((row) => {
    const original = row.original as Record<string, unknown>
    // When the page projects via accessorKey, original keys match. When it
    // uses accessorFn (eg. a synthesized "name" column), surface that under
    // the column id so consumers see the same shape they exported.
    const out: Record<string, unknown> = {}
    for (const id of visibleColIds) {
      out[id] = id in original ? original[id] : row.getValue(id)
    }
    return out
  })
  const json = JSON.stringify(rows, null, 2)
  const blob = new Blob([json], { type: 'application/json;charset=utf-8;' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `export-${Date.now()}.json`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

defineExpose({ table, exportCsv, exportJson })
</script>

<template>
  <!-- ClientOnly: the TanStack table renders identically on server and client
       in principle, but its interactive Reka-based controls resolve internal
       state in the browser, producing benign hydration mismatches. SSR of an
       interactive data grid adds little, so render it client-side. -->
  <ClientOnly>
    <div
      data-uipkge
      data-slot="data-table"
      class="w-full"
    >
      <!-- Toolbar (above-mode: floats outside the bordered card, no
           bottom-divider since nothing sits directly below it inside the
           same surface). -->
      <DataTableToolbar
        v-if="!hideToolbar && toolbarPosition === 'above'"
        :table="table"
        :filter-column="filterColumn"
        :filter-placeholder="filterPlaceholder"
        :filters="filters"
        :filter-mode="filterMode"
        :enable-search="enableSearch"
        :enable-column-visibility="enableColumnVisibility"
        :enable-export="enableExport"
        :enable-density-toggle="enableDensityToggle"
        :density="currentDensity"
        :borderless="true"
        :active-filter-count="activeFilterCount"
        :is-any-filter-active="isAnyFilterActive"
        :is-server-side="isServerSide"
        :get-multi-select-value="getMultiSelectValue"
        :get-date-range-value="getDateRangeValue"
        :get-filter-selected-labels="getFilterSelectedLabels"
        :format-date-range="formatDateRange"
        :get-calendar-model="getCalendarModel"
        @search="onSearchInput"
        @open-filter-sheet="onFilterSheetOpen"
        @apply-filters="onApplyFilters"
        @clear-all-filters="clearAllFilters"
        @toggle-multiselect="toggleMultiSelectValue"
        @clear-filter="clearFilter"
        @clear-date-filter="clearDateFilter"
        @calendar-update="onCalendarUpdate"
        @text-filter-update="(col, val) => table.getColumn(col)?.setFilterValue(val)"
        @commit-filters="onCommitDraft"
        @export-csv="exportCsv"
        @export-json="exportJson"
        @update:density="(d: 'compact' | 'cozy' | 'comfortable') => (currentDensity = d)"
      >
        <template
          v-if="$slots['toolbar-extra']"
          #toolbar-extra
        >
          <slot
            name="toolbar-extra"
            :table="table"
          />
        </template>
        <template
          v-if="$slots['custom-filters']"
          #custom-filters
        >
          <slot
            name="custom-filters"
            :table="table"
          />
        </template>
      </DataTableToolbar>

      <div
        :class="[
          'bg-card text-card-foreground overflow-hidden',
          borderless === 'full' ? '' : 'rounded-md border',
        ]"
      >
        <!-- Toolbar (inside-mode, default): canonical card layout, toolbar
             sits at the top of the bordered card with its bottom-divider. -->
        <DataTableToolbar
          v-if="!hideToolbar && toolbarPosition === 'inside'"
          :table="table"
          :filter-column="filterColumn"
          :filter-placeholder="filterPlaceholder"
          :filters="filters"
          :filter-mode="filterMode"
          :enable-search="enableSearch"
          :enable-column-visibility="enableColumnVisibility"
          :enable-export="enableExport"
          :enable-density-toggle="enableDensityToggle"
          :density="currentDensity"
          :borderless="dropInnerBorders"
          :active-filter-count="activeFilterCount"
          :is-any-filter-active="isAnyFilterActive"
          :is-server-side="isServerSide"
          :get-multi-select-value="getMultiSelectValue"
          :get-date-range-value="getDateRangeValue"
          :get-filter-selected-labels="getFilterSelectedLabels"
          :format-date-range="formatDateRange"
          :get-calendar-model="getCalendarModel"
          @search="onSearchInput"
          @open-filter-sheet="onFilterSheetOpen"
          @apply-filters="onApplyFilters"
          @clear-all-filters="clearAllFilters"
          @toggle-multiselect="toggleMultiSelectValue"
          @clear-filter="clearFilter"
          @clear-date-filter="clearDateFilter"
          @calendar-update="onCalendarUpdate"
          @text-filter-update="(col, val) => table.getColumn(col)?.setFilterValue(val)"
          @commit-filters="onCommitDraft"
          @export-csv="exportCsv"
          @export-json="exportJson"
          @update:density="(d: 'compact' | 'cozy' | 'comfortable') => (currentDensity = d)"
        >
          <template
            v-if="$slots['toolbar-extra']"
            #toolbar-extra
          >
            <slot
              name="toolbar-extra"
              :table="table"
            />
          </template>
          <template
            v-if="$slots['custom-filters']"
            #custom-filters
          >
            <slot
              name="custom-filters"
              :table="table"
            />
          </template>
        </DataTableToolbar>

        <!-- Filter Sheet (modal mode) -->
        <DataTableFilterSheet
          :open="isFilterSheetOpen"
          :table="table"
          :filters="filters"
          :active-filter-count="activeFilterCount"
          :is-any-filter-active="isAnyFilterActive"
          :is-server-side="isServerSide"
          :borderless="dropInnerBorders"
          :get-multi-select-value="getMultiSelectValue"
          :get-date-range-value="getDateRangeValue"
          :format-date-range="formatDateRange"
          :get-calendar-model="getCalendarModel"
          @update:open="onFilterSheetClose"
          @apply="onApplyFilters"
          @clear-all="clearAllFilters"
          @toggle-multiselect="toggleMultiSelectValue"
          @clear-filter="clearFilter"
          @clear-date-filter="clearDateFilter"
          @calendar-update="onCalendarUpdate"
          @text-filter-update="(col, val) => table.getColumn(col)?.setFilterValue(val)"
        >
          <template
            v-if="$slots['custom-filters']"
            #custom-filters
          >
            <slot
              name="custom-filters"
              :table="table"
            />
          </template>
        </DataTableFilterSheet>

        <!-- Bulk action bar (slot above table when rows selected) -->
        <div
          v-if="$slots['bulk-actions'] && table.getSelectedRowModel().rows.length > 0"
          class="bg-muted/40 flex items-center gap-3 border-b px-4 py-2"
        >
          <span class="text-sm font-medium"> {{ table.getSelectedRowModel().rows.length }} selected </span>
          <slot
            name="bulk-actions"
            :rows="table.getSelectedRowModel().rows"
            :clear="() => table.toggleAllRowsSelected(false)"
          />
          <button
            type="button"
            class="text-muted-foreground hover:text-foreground ml-auto text-xs transition"
            @click="table.toggleAllRowsSelected(false)"
          >
            Clear selection
          </button>
        </div>

        <!-- Table.
           The Table primitive wraps the <table> in its own overflow-auto div
           which would normally trap sticky-positioned children + draw native
           scrollbars. Neutralize that inner overflow and let
           OverlayScrollbarsComponent own both axes so we get a single,
           themed, auto-hiding pair of scrollbars across the whole region. -->
        <div
          v-os-scroll
          :class="[densityClass, 'relative [&_[data-slot=table-container]]:overflow-visible']"
          :style="maxHeight ? `max-height: ${maxHeight}` : ''"
        >
          <!-- Loading overlay -->
          <div
            v-if="loading"
            class="bg-card/60 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]"
          >
            <div class="border-primary size-5 animate-spin rounded-full border-2 border-t-transparent" />
          </div>
          <Table>
            <TableHeader :class="stickyHeader ? 'bg-muted/95 sticky top-0 z-10 backdrop-blur-sm' : ''">
              <TableRow
                v-for="headerGroup in table.getHeaderGroups()"
                :key="headerGroup.id"
              >
                <TableHead
                  v-for="header in headerGroup.headers"
                  :key="header.id"
                  class="relative transition-colors duration-150"
                  :class="[
                    enableReorder
                      && header.column.id !== 'select'
                      && header.column.id !== 'actions'
                      && header.column.id !== 'expander'
                      ? 'cursor-grab active:cursor-grabbing'
                      : '',
                    dragColId === header.column.id ? 'opacity-50' : '',
                    dragOverColId === header.column.id && dragColId !== header.column.id
                      ? 'border-foreground/60 border-l-2'
                      : '',
                  ]"
                  :style="{
                    ...(enableResize ? { width: `${header.getSize()}px` } : {}),
                    ...(pinStyle(header.column) ?? {}),
                  }"
                  :draggable="
                    enableReorder
                      && header.column.id !== 'select'
                      && header.column.id !== 'actions'
                      && header.column.id !== 'expander'
                  "
                  @dragstart="enableReorder ? onColDragStart(header.column.id, $event) : undefined"
                  @dragover="enableReorder ? onColDragOver(header.column.id, $event) : undefined"
                  @dragend="enableReorder ? onColDragEnd() : undefined"
                  @drop="enableReorder ? onColDrop(header.column.id) : undefined"
                >
                  <FlexRender
                    v-if="!header.isPlaceholder"
                    :render="header.column.columnDef.header"
                    :props="header.getContext()"
                  />
                  <div
                    v-if="enableResize && header.column.getCanResize()"
                    class="hover:bg-foreground/30 absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none transition-colors select-none"
                    :class="header.column.getIsResizing() ? 'bg-foreground/60' : ''"
                    @mousedown="header.getResizeHandler()?.($event)"
                    @touchstart="header.getResizeHandler()?.($event)"
                  />
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <template v-if="table.getRowModel().rows?.length">
                <template
                  v-for="row in table.getRowModel().rows"
                  :key="row.id"
                >
                  <TableRow
                    :data-state="row.getIsSelected() ? 'selected' : undefined"
                    :class="onRowClick ? 'hover:bg-muted/40 cursor-pointer' : ''"
                    :style="virtual ? 'content-visibility: auto; contain-intrinsic-size: auto 48px;' : undefined"
                    @click="onRowClick?.(row.original)"
                  >
                    <TableCell
                      v-for="cell in row.getVisibleCells()"
                      :key="cell.id"
                      class="bg-card"
                      :style="pinStyle(cell.column)"
                    >
                      <FlexRender
                        :render="cell.column.columnDef.cell"
                        :props="cell.getContext()"
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow
                    v-if="row.getIsExpanded() && $slots.expanded"
                    :key="`${row.id}-expanded`"
                  >
                    <TableCell
                      :colspan="row.getVisibleCells().length"
                      class="bg-muted/30 px-6 py-4"
                    >
                      <slot
                        name="expanded"
                        :row="row.original"
                        :tanstack-row="row"
                      />
                    </TableCell>
                  </TableRow>
                </template>
              </template>
              <template v-else>
                <TableRow>
                  <TableCell
                    :colspan="columns.length"
                    class="h-24 text-center"
                  >
                    <slot name="empty">
                      <div class="text-muted-foreground text-sm">
                        No results.
                      </div>
                    </slot>
                  </TableCell>
                </TableRow>
              </template>
            </TableBody>
            <tfoot
              v-if="$slots.footer"
              class="bg-muted/20 sticky bottom-0 border-t"
            >
              <slot
                name="footer"
                :rows="table.getRowModel().rows"
              />
            </tfoot>
          </Table>
          <!-- Infinite scroll sentinel -->
          <div
            v-if="infinite"
            ref="sentinelEl"
            class="h-1"
          />
          <div
            v-if="infinite && loading"
            class="border-border text-muted-foreground border-t px-4 py-3 text-center text-sm"
          >
            Loading more…
          </div>
        </div>

        <!-- Pagination (inside-mode, default) -->
        <DataTablePagination
          v-if="enablePagination && !infinite && paginationPosition === 'inside'"
          :table="table"
          :total-rows="totalRows"
          :is-server-side="isServerSide"
          :borderless="dropInnerBorders"
        />
      </div>

      <!-- Pagination (below-mode: floats outside the bordered card,
           dividerless since nothing sits directly above it on the same surface). -->
      <DataTablePagination
        v-if="enablePagination && !infinite && paginationPosition === 'below'"
        :table="table"
        :total-rows="totalRows"
        :is-server-side="isServerSide"
        :borderless="true"
      />
    </div>
  </ClientOnly>
</template>

```

### `packages/registry-vue/components/data-table/DataTableColumnHeader.vue`

```vue
<script setup lang="ts" generic="TData, TValue">
/**
 * Sortable / hideable header cell for TanStack DataTable columns. Use it from
 * a column definition like:
 *   header: ({ column }) => h(DataTableColumnHeader, { column, label: 'Email' })
 *
 * Click on the label cycles sort asc → desc → none.
 *
 * Optional per-column filter:
 *   header: ({ column }) => h(DataTableColumnHeader, {
 *     column,
 *     label: 'Status',
 *     filter: { column: 'status', label: 'Status', type: 'multiselect', options: [...] }
 *   })
 *
 * When `filter` is provided, a funnel icon renders next to the sort button.
 * Click opens a popover with the right filter UI for the type (text / select
 * / multiselect / date). The funnel shows a primary-coloured dot when the
 * column has an active filter.
 */
import { computed, ref, watch } from 'vue'
import type { Column } from '@tanstack/vue-table'
import { ArrowDown, ArrowUp, ArrowUpDown, Check, Filter, FilterX } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { parseDate, CalendarDate, type DateValue } from '@internationalized/date'

interface FilterOption {
  value: string
  label: string
}
interface FilterDefinition {
  column: string
  label: string
  type: 'text' | 'select' | 'multiselect' | 'date'
  options?: (string | FilterOption)[]
}

const props = defineProps<{
  column: Column<TData, TValue>
  label: string
  align?: 'left' | 'right' | 'center'
  filter?: FilterDefinition
  class?: string
}>()

const align = computed(() => props.align ?? 'left')

function next() {
  const current = props.column.getIsSorted()
  if (!current) props.column.toggleSorting(false)
  else if (current === 'asc') props.column.toggleSorting(true)
  else props.column.clearSorting()
}

function resolveOption(opt: string | FilterOption): FilterOption {
  return typeof opt === 'string' ? { value: opt, label: opt } : opt
}

// Filter state read directly off the TanStack column so the popover stays
// reactive to external clears (toolbar "Clear all", row-level edits, etc.).
const open = ref(false)
const filterValue = computed(() => props.column.getFilterValue())

const isFilterActive = computed(() => {
  const v = filterValue.value
  if (v === undefined || v === null || v === '') return false
  if (Array.isArray(v)) return v.length > 0
  if (typeof v === 'object') return Object.keys(v).length > 0
  return true
})

// Text-input bound separately so we can apply on blur / Enter rather than
// thrashing the column filter on every keystroke.
const textDraft = ref('')
watch(open, (isOpen) => {
  if (isOpen && props.filter?.type === 'text') {
    textDraft.value = (filterValue.value as string) ?? ''
  }
})

function applyText() {
  props.column.setFilterValue(textDraft.value || undefined)
}

function clearText() {
  textDraft.value = ''
  props.column.setFilterValue(undefined)
}

function toggleMultiselect(value: string) {
  const current = (filterValue.value as string[]) ?? []
  const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value]
  props.column.setFilterValue(next.length > 0 ? next : undefined)
}

function selectOne(value: string) {
  props.column.setFilterValue(value || undefined)
  open.value = false
}

function clearFilter() {
  props.column.setFilterValue(undefined)
  textDraft.value = ''
}

// Date-range bridging. The column stores ISO strings; the calendar wants
// CalendarDate instances. Reads/writes both shapes.
const dateModel = computed({
  get() {
    const v = filterValue.value as { from?: string; to?: string } | undefined
    if (!v?.from && !v?.to) return undefined
    try {
      return {
        start: v.from ? parseDate(v.from) : undefined,
        end: v.to ? parseDate(v.to) : undefined,
      }
    } catch {
      return undefined
    }
  },
  set(next: { start?: DateValue; end?: DateValue } | undefined) {
    const isoFrom = next?.start ? (next.start as CalendarDate).toString() : undefined
    const isoTo = next?.end ? (next.end as CalendarDate).toString() : undefined
    if (!isoFrom && !isoTo) {
      props.column.setFilterValue(undefined)
    } else {
      props.column.setFilterValue({ from: isoFrom, to: isoTo })
    }
  },
})

function selectedLabels(): string[] {
  const f = props.filter
  if (!f?.options) return []
  const selected = (filterValue.value as string[]) ?? []
  return f.options
    .map(resolveOption)
    .filter((o) => selected.includes(o.value))
    .map((o) => o.label)
}
</script>

<template>
  <div
    :class="
      cn(
        'flex items-center gap-0.5',
        align === 'right' && 'justify-end',
        align === 'center' && 'justify-center',
        props.class,
      )
    "
  >
    <button
      type="button"
      v-if="column.getCanSort()"
      class="group text-muted-foreground hover:text-foreground hover:bg-muted/60 -mx-2 inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm font-medium transition-colors duration-150"
      :aria-label="`Sort by ${label}`"
      @click="next"
    >
      <span>{{ label }}</span>
      <ArrowUp
        v-if="column.getIsSorted()"
        class="text-foreground size-3.5 transition-transform duration-200 ease-in-out"
        :class="column.getIsSorted() === 'desc' ? 'rotate-180' : 'rotate-0'"
      />
      <ArrowUpDown v-else class="size-3.5 opacity-40 transition-opacity duration-150 group-hover:opacity-70" />
    </button>
    <span v-else class="text-muted-foreground text-sm font-medium">{{ label }}</span>

    <!-- Optional per-column header filter -->
    <Popover v-if="filter" v-model:open="open">
      <PopoverTrigger as-child>
        <button
          type="button"
          :class="
            cn(
              'text-muted-foreground relative inline-flex size-6 items-center justify-center rounded transition-colors',
              'hover:text-foreground hover:bg-muted/60',
              isFilterActive && 'text-foreground',
            )
          "
          :aria-label="`Filter ${label}`"
        >
          <Filter class="size-3.5" />
          <span
            v-if="isFilterActive"
            aria-hidden
            class="bg-primary absolute -top-0.5 -right-0.5 size-1.5 rounded-full"
          />
        </button>
      </PopoverTrigger>
      <PopoverContent class="w-72 p-0" align="start">
        <div class="border-border flex items-center justify-between border-b px-3 py-2 text-xs font-medium">
          <span>Filter · {{ filter.label }}</span>
          <button
            type="button"
            v-if="isFilterActive"
            class="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 transition-colors"
            @click="clearFilter"
          >
            <FilterX class="size-3" />
            Clear
          </button>
        </div>

        <!-- TEXT -->
        <div v-if="filter.type === 'text'" class="space-y-2 p-3">
          <Input
            v-model="textDraft"
            :placeholder="`Search ${filter.label.toLowerCase()}…`"
            class="h-9"
            @keydown.enter="
              () => {
                applyText()
                open = false
              }
            "
            @blur="applyText"
          />
          <div class="flex gap-2">
            <Button
              size="sm"
              class="h-8 flex-1"
              @click="
                () => {
                  applyText()
                  open = false
                }
              "
              >Apply</Button
            >
            <Button size="sm" variant="outline" class="h-8" @click="clearText()">Clear</Button>
          </div>
        </div>

        <!-- SELECT / MULTISELECT -->
        <Command v-else-if="filter.type === 'select' || filter.type === 'multiselect'" class="max-h-[280px]">
          <CommandInput :placeholder="`Search ${filter.label.toLowerCase()}…`" class="h-9" />
          <CommandList>
            <CommandEmpty>No matches.</CommandEmpty>
            <CommandGroup>
              <template v-for="opt in filter.options ?? []" :key="resolveOption(opt).value">
                <CommandItem
                  :value="resolveOption(opt).value"
                  @select="
                    filter.type === 'multiselect'
                      ? toggleMultiselect(resolveOption(opt).value)
                      : selectOne(resolveOption(opt).value)
                  "
                >
                  <div
                    v-if="filter.type === 'multiselect'"
                    :class="
                      cn(
                        'border-primary/50 mr-2 flex size-4 items-center justify-center rounded-sm border transition-colors',
                        ((filterValue as string[]) ?? []).includes(resolveOption(opt).value)
                          ? 'bg-primary text-primary-foreground'
                          : 'opacity-50',
                      )
                    "
                  >
                    <Check class="size-3" />
                  </div>
                  <Check
                    v-else
                    :class="cn('mr-2 size-4', filterValue === resolveOption(opt).value ? 'opacity-100' : 'opacity-0')"
                  />
                  <span>{{ resolveOption(opt).label }}</span>
                </CommandItem>
              </template>
            </CommandGroup>
          </CommandList>
        </Command>

        <!-- DATE RANGE -->
        <div v-else-if="filter.type === 'date'" class="p-2">
          <RangeCalendar v-model="dateModel as any" />
          <div class="flex gap-2 px-1 pt-2">
            <Button size="sm" class="h-8 flex-1" @click="open = false">Apply</Button>
            <Button size="sm" variant="outline" class="h-8" @click="clearFilter">Clear</Button>
          </div>
        </div>

        <!-- Active selection summary -->
        <div
          v-if="isFilterActive && (filter.type === 'multiselect' || filter.type === 'select')"
          class="border-border text-muted-foreground border-t px-3 py-2 text-[11px]"
        >
          <span v-if="filter.type === 'multiselect'">
            {{ selectedLabels().length }} selected:
            <span class="text-foreground">{{ selectedLabels().join(', ') }}</span>
          </span>
          <span v-else>
            <span class="text-foreground">{{ filterValue }}</span>
          </span>
        </div>
      </PopoverContent>
    </Popover>
  </div>
</template>

```

### `packages/registry-vue/components/data-table/DataTableFilterPopover.vue`

```vue
<script setup lang="ts">
/**
 * Popover variant of DataTableFilterSheet. Same filter UI (text /
 * multiselect / date) packed into a Popover instead of a side Sheet.
 * Slot in via `filterMode="popover"` on <DataTable>.
 *
 * Trigger button is rendered inline by the toolbar; this component owns
 * the popover surface and content.
 *
 * ── Draft semantics ──────────────────────────────────────────────────
 * Unlike the Sheet (which mutates live TanStack column filters and rolls
 * back on cancel via a parent snapshot), this popover stages every edit
 * inside a local `draft` map. Real `columnFilters` are never touched
 * until the user clicks Apply -- at which point we emit `commit-draft`
 * with the full draft and the parent walks the entries calling
 * `setFilterValue` per column. Closing the popover (Escape / click out)
 * simply discards the draft.
 *
 * Why: ticking a checkbox inside the popover used to write straight to
 * `columnFilters`, causing the underlying table to flash filtered before
 * the user committed. Truly staging the edits avoids that flash and
 * makes "Reset" / per-section "Clear" behave intuitively (they clear
 * the draft, not the live table).
 */
import type { Table } from '@tanstack/vue-table'
import type { FilterDefinition, FilterOption } from './DataTable.vue'
import type { DateValue } from '@internationalized/date'
import type { DateRange as RekaDateRange } from 'reka-ui'
import { computed, ref, watch } from 'vue'
import { CalendarDate } from '@internationalized/date'

import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Check, SlidersHorizontal, X } from 'lucide-vue-next'

type DraftDateValue = { from?: string, to?: string }
type DraftValue = string[] | string | DraftDateValue | undefined
type Draft = Record<string, DraftValue>

function resolveOption(opt: string | FilterOption): FilterOption {
  if (typeof opt === 'string') return { value: opt, label: opt }
  return opt
}

const props = defineProps<{
  table: Table<any>
  filters: FilterDefinition[]
  activeFilterCount: number
  isAnyFilterActive: boolean
  isServerSide: boolean
  getMultiSelectValue: (column: string) => string[]
  getDateRangeValue: (column: string) => { from?: string, to?: string }
  formatDateRange: (column: string) => string
  getCalendarModel: (column: string) => any
}>()

const open = ref(false)

const emit = defineEmits<{
  (e: 'clear-all'): void
  // Committed draft on Apply -- a `Record<columnId, value>` where each
  // value is the final shape TanStack's `setFilterValue` expects
  // (multiselect: string[]|undefined, text: string|undefined,
  //  date: {from?,to?}|undefined).
  (e: 'commit-draft', draft: Draft): void
  (e: 'open'): void
}>()

// ── Draft state ──────────────────────────────────────────────────────
// Seeded from real column filter values when the popover opens; cleared
// when it closes. All in-popover UI binds to this map -- never to the
// live TanStack filter values directly.
const draft = ref<Draft>({})

function seedDraft() {
  const next: Draft = {}
  for (const f of props.filters) {
    if (f.type === 'multiselect' || f.type === 'select') {
      next[f.column] = [...props.getMultiSelectValue(f.column)]
    }
    else if (f.type === 'date') {
      const dr = props.getDateRangeValue(f.column)
      next[f.column] = { from: dr.from, to: dr.to }
    }
    else if (f.type === 'text') {
      const v = props.table.getColumn(f.column)?.getFilterValue() as string | undefined
      next[f.column] = v ?? ''
    }
  }
  draft.value = next
}

function getDraftMulti(column: string): string[] {
  const v = draft.value[column]
  return Array.isArray(v) ? v : []
}

function getDraftText(column: string): string {
  const v = draft.value[column]
  return typeof v === 'string' ? v : ''
}

function getDraftDate(column: string): DraftDateValue {
  const v = draft.value[column]
  if (v && typeof v === 'object' && !Array.isArray(v)) return v as DraftDateValue
  return {}
}

function toggleDraftMulti(column: string, option: string) {
  const current = getDraftMulti(column)
  const next = current.includes(option) ? current.filter(v => v !== option) : [...current, option]
  draft.value = { ...draft.value, [column]: next }
}

function setDraftText(column: string, value: string) {
  draft.value = { ...draft.value, [column]: value }
}

function clearDraftSection(filter: FilterDefinition) {
  if (filter.type === 'multiselect' || filter.type === 'select') {
    draft.value = { ...draft.value, [filter.column]: [] }
  }
  else if (filter.type === 'date') {
    draft.value = { ...draft.value, [filter.column]: {} }
  }
  else if (filter.type === 'text') {
    draft.value = { ...draft.value, [filter.column]: '' }
  }
}

function resetDraft() {
  const next: Draft = {}
  for (const f of props.filters) {
    if (f.type === 'multiselect' || f.type === 'select') next[f.column] = []
    else if (f.type === 'date') next[f.column] = {}
    else if (f.type === 'text') next[f.column] = ''
  }
  draft.value = next
}

// ── Date helpers (local; popover is fully self-contained for draft) ──
function stringToDateValue(str: string | undefined): DateValue | undefined {
  if (!str) return undefined
  const [y, m, d] = str.split('-').map(Number)
  if (y === undefined || m === undefined || d === undefined) return undefined
  return new CalendarDate(y, m, d)
}

function dateValueToString(dv: DateValue | undefined): string {
  if (!dv) return ''
  return `${dv.year}-${String(dv.month).padStart(2, '0')}-${String(dv.day).padStart(2, '0')}`
}

function getDraftCalendarModel(column: string): RekaDateRange {
  const dr = getDraftDate(column)
  return {
    start: stringToDateValue(dr.from) as DateValue,
    end: stringToDateValue(dr.to) as DateValue,
  }
}

function onDraftCalendarUpdate(column: string, val: RekaDateRange) {
  const from = val?.start ? dateValueToString(val.start) : undefined
  const to = val?.end ? dateValueToString(val.end) : undefined
  draft.value = { ...draft.value, [column]: { from, to } }
}

function formatDraftDateRange(column: string): string {
  const dr = getDraftDate(column)
  if (dr.from && dr.to) return `${dr.from} - ${dr.to}`
  if (dr.from) return `From ${dr.from}`
  if (dr.to) return `Until ${dr.to}`
  return ''
}

// ── Active section detection (draft, not live) ───────────────────────
function isDraftSectionActive(filter: FilterDefinition): boolean {
  if (filter.type === 'multiselect' || filter.type === 'select') {
    return getDraftMulti(filter.column).length > 0
  }
  if (filter.type === 'date') {
    const dr = getDraftDate(filter.column)
    return !!(dr.from || dr.to)
  }
  if (filter.type === 'text') {
    return !!getDraftText(filter.column)
  }
  return false
}

// `Reset` is disabled when the draft has nothing to clear.
const isDraftDirty = computed(() => props.filters.some(isDraftSectionActive))

// ── Popover lifecycle ────────────────────────────────────────────────
watch(open, (isOpen, wasOpen) => {
  if (isOpen && !wasOpen) {
    seedDraft()
    emit('open')
    return
  }
  if (!isOpen && wasOpen) {
    // Close-without-apply: nothing to do. Real column filters were never
    // mutated by the popover; the draft is local and can be left to
    // garbage-collect (next open re-seeds from live state).
    draft.value = {}
  }
})

function applyAndClose() {
  // Snapshot the draft so the parent receives a stable object even if
  // the close watcher fires before they finish consuming it.
  const snapshot: Draft = {}
  for (const f of props.filters) {
    const v = draft.value[f.column]
    if (f.type === 'multiselect' || f.type === 'select') {
      const arr = Array.isArray(v) ? v : []
      snapshot[f.column] = arr.length > 0 ? arr : undefined
    }
    else if (f.type === 'date') {
      const dr = (v && typeof v === 'object' && !Array.isArray(v)) ? v as DraftDateValue : {}
      snapshot[f.column] = (dr.from || dr.to) ? { from: dr.from, to: dr.to } : undefined
    }
    else if (f.type === 'text') {
      const s = typeof v === 'string' ? v : ''
      snapshot[f.column] = s || undefined
    }
  }
  emit('commit-draft', snapshot)
  open.value = false
}

function onResetClick() {
  resetDraft()
}

const filterScrollRef = ref<HTMLElement | null>(null)

watch(open, (isOpen) => {
  if (isOpen) {
    setTimeout(() => {
      filterScrollRef.value?.scrollTo({ top: 0 })
    }, 50)
  }
})
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        variant="outline"
        size="sm"
        class="h-9 gap-2"
      >
        <SlidersHorizontal class="size-3.5" />
        Filters
        <Badge
          v-if="activeFilterCount > 0"
          variant="secondary"
          class="ml-1 h-5 min-w-5 rounded-full px-1.5 text-xs font-semibold"
        >
          {{ activeFilterCount }}
        </Badge>
      </Button>
    </PopoverTrigger>
    <PopoverContent
      align="start"
      class="flex max-h-[min(560px,80vh)] w-[380px] flex-col overflow-hidden p-0"
    >
      <!-- Header -->
      <div class="border-b px-4 pt-3.5 pb-3">
        <div class="flex items-center gap-2.5">
          <div class="bg-muted flex size-7 items-center justify-center rounded-md">
            <SlidersHorizontal class="text-muted-foreground size-3.5" />
          </div>
          <div class="flex-1">
            <p class="text-sm leading-none font-semibold">
              Filters
            </p>
            <p class="text-muted-foreground mt-1 text-xs">
              <template v-if="activeFilterCount > 0">
                {{ activeFilterCount }} active
                <template v-if="!isServerSide">
                  &middot; {{ table.getFilteredRowModel().rows.length }} result{{
                    table.getFilteredRowModel().rows.length !== 1 ? 's' : ''
                  }}
                </template>
              </template>
              <template v-else>
                Narrow down results
              </template>
            </p>
          </div>
        </div>
      </div>

      <!-- Scrollable filter sections -->
      <div
        ref="filterScrollRef"
        class="flex-1 overflow-y-auto"
      >
        <div class="space-y-2 p-3">
          <template
            v-for="filter in filters"
            :key="filter.column"
          >
            <!-- Text filter -->
            <div
              v-if="filter.type === 'text'"
              class="bg-muted/40 rounded-lg p-2.5"
            >
              <div class="mb-2 flex items-center justify-between">
                <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                  filter.label
                }}</Label>
                <button
                  v-if="getDraftText(filter.column)"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="clearDraftSection(filter)"
                >
                  Clear
                </button>
              </div>
              <Input
                :placeholder="`Filter by ${filter.label.toLowerCase()}...`"
                :model-value="getDraftText(filter.column)"
                class="h-8 text-sm"
                @update:model-value="setDraftText(filter.column, ($event as string) ?? '')"
              />
            </div>

            <!-- Multiselect / Select filter -->
            <div
              v-else-if="filter.type === 'multiselect' || filter.type === 'select'"
              class="rounded-lg p-2.5 transition-colors"
              :class="[
                getDraftMulti(filter.column).length > 0
                  ? 'bg-primary/[0.04] ring-primary/20 ring-1'
                  : 'bg-muted/40',
              ]"
            >
              <div class="mb-2 flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                    filter.label
                  }}</Label>
                  <Badge
                    v-if="getDraftMulti(filter.column).length > 0"
                    variant="secondary"
                    class="bg-primary/15 text-primary h-4 rounded-full px-1.5 text-xs font-semibold"
                  >
                    {{ getDraftMulti(filter.column).length }}
                  </Badge>
                </div>
                <button
                  v-if="getDraftMulti(filter.column).length > 0"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="clearDraftSection(filter)"
                >
                  Clear
                </button>
              </div>
              <Command
                class="[&_[data-slot=command-input-wrapper]]:border-input overflow-visible bg-transparent [&_[data-slot=command-input-wrapper]]:h-8 [&_[data-slot=command-input-wrapper]]:rounded-md [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:px-2.5"
              >
                <CommandInput
                  class="h-7 text-sm"
                  :placeholder="`Search ${filter.label.toLowerCase()}...`"
                />
                <CommandList class="mt-1 max-h-[132px]">
                  <CommandEmpty>No results.</CommandEmpty>
                  <CommandGroup class="p-0">
                    <CommandItem
                      v-for="rawOpt in filter.options"
                      :key="resolveOption(rawOpt).value"
                      :value="resolveOption(rawOpt).label"
                      class="rounded-md px-2 py-1.5 text-sm"
                      @select="toggleDraftMulti(filter.column, resolveOption(rawOpt).value)"
                    >
                      <div
                        class="flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors"
                        :class="[
                          getDraftMulti(filter.column).includes(resolveOption(rawOpt).value)
                            ? 'border-primary bg-primary text-primary-foreground'
                            : 'border-muted-foreground/40 [&_svg]:invisible',
                        ]"
                      >
                        <Check class="size-3" />
                      </div>
                      <component
                        :is="resolveOption(rawOpt).icon"
                        v-if="resolveOption(rawOpt).icon"
                        class="text-muted-foreground size-4"
                      />
                      <span>{{ resolveOption(rawOpt).label }}</span>
                    </CommandItem>
                  </CommandGroup>
                </CommandList>
              </Command>
            </div>

            <!-- Date range filter -->
            <div
              v-else-if="filter.type === 'date'"
              class="rounded-lg p-2.5 transition-colors"
              :class="[
                getDraftDate(filter.column).from || getDraftDate(filter.column).to
                  ? 'bg-primary/[0.04] ring-primary/20 ring-1'
                  : 'bg-muted/40',
              ]"
            >
              <div class="mb-2 flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                    filter.label
                  }}</Label>
                  <Badge
                    v-if="getDraftDate(filter.column).from || getDraftDate(filter.column).to"
                    variant="secondary"
                    class="bg-primary/15 text-primary h-auto rounded-full px-1.5 py-0 text-xs font-medium"
                  >
                    {{ formatDraftDateRange(filter.column) }}
                  </Badge>
                </div>
                <button
                  v-if="getDraftDate(filter.column).from || getDraftDate(filter.column).to"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="clearDraftSection(filter)"
                >
                  Clear
                </button>
              </div>
              <div class="flex justify-center overflow-hidden rounded-md border">
                <RangeCalendar
                  :model-value="getDraftCalendarModel(filter.column)"
                  :number-of-months="1"
                  class="p-2"
                  @update:model-value="onDraftCalendarUpdate(filter.column, $event as RekaDateRange)"
                />
              </div>
            </div>
          </template>

          <!-- Consumer-supplied custom filter UI -->
          <slot name="custom-filters" />
        </div>
      </div>

      <!-- Footer -->
      <div class="flex gap-2 border-t px-3 py-2.5">
        <Button
          variant="outline"
          size="sm"
          class="h-8 flex-1"
          :disabled="!isDraftDirty"
          @click="onResetClick"
        >
          <X class="size-3.5" />
          Reset
        </Button>
        <Button
          size="sm"
          class="h-8 flex-1"
          @click="applyAndClose"
        >
          Apply
        </Button>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/data-table/DataTableFilterSheet.vue`

```vue
<script setup lang="ts">
import type { Table } from '@tanstack/vue-table'
import type { FilterDefinition, FilterOption } from './DataTable.vue'
import { ref, watch } from 'vue'

import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { Check, SlidersHorizontal, X } from 'lucide-vue-next'

function resolveOption(opt: string | FilterOption): FilterOption {
  if (typeof opt === 'string') return { value: opt, label: opt }
  return opt
}

withDefaults(
  defineProps<{
    table: Table<any>
    filters: FilterDefinition[]
    activeFilterCount: number
    isAnyFilterActive: boolean
    isServerSide: boolean
    /** Strip section bgs / rings / dividers / SheetContent side border. */
    borderless?: boolean
    getMultiSelectValue: (column: string) => string[]
    getDateRangeValue: (column: string) => { from?: string, to?: string }
    formatDateRange: (column: string) => string
    getCalendarModel: (column: string) => any
  }>(),
  { borderless: false },
)

const open = defineModel<boolean>('open', { default: false })

const emit = defineEmits<{
  (e: 'apply' | 'clear-all'): void
  (e: 'toggle-multiselect', column: string, value: string): void
  (e: 'clear-filter' | 'clear-date-filter', filter: FilterDefinition): void
  (e: 'calendar-update', column: string, value: any): void
  (e: 'text-filter-update', column: string, value: string | undefined): void
}>()

const filterScrollRef = ref<HTMLElement | null>(null)

watch(open, (isOpen) => {
  if (isOpen) {
    setTimeout(() => {
      filterScrollRef.value?.scrollTo({ top: 0 })
    }, 50)
  }
})
</script>

<template>
  <Sheet v-model:open="open">
    <SheetContent :class="['flex flex-col gap-0 p-0 sm:max-w-[400px]', borderless ? 'border-0' : '']">
      <!-- Header -->
      <div :class="[borderless ? 'px-5 pt-5 pb-2' : 'border-b px-5 pt-5 pb-4']">
        <div class="flex items-center gap-3">
          <div class="bg-muted flex size-9 items-center justify-center rounded-lg">
            <SlidersHorizontal class="text-muted-foreground size-4" />
          </div>
          <div class="flex-1">
            <SheetHeader class="space-y-0.5 p-0">
              <SheetTitle class="text-sm font-semibold">
                Filters
              </SheetTitle>
              <SheetDescription class="text-xs">
                <template v-if="activeFilterCount > 0">
                  {{ activeFilterCount }} active filter{{ activeFilterCount > 1 ? 's' : '' }}
                  <template v-if="!isServerSide">
                    &middot;
                    {{ table.getFilteredRowModel().rows.length }} result{{
                      table.getFilteredRowModel().rows.length !== 1 ? 's' : ''
                    }}
                  </template>
                </template>
                <template v-else>
                  Narrow down results
                </template>
              </SheetDescription>
            </SheetHeader>
          </div>
        </div>
      </div>

      <!-- Scrollable filter sections -->
      <div
        ref="filterScrollRef"
        class="flex-1 overflow-y-auto"
      >
        <div class="space-y-2 p-4">
          <template
            v-for="filter in filters"
            :key="filter.column"
          >
            <!-- Text filter -->
            <div
              v-if="filter.type === 'text'"
              :class="[borderless ? 'py-2' : 'bg-muted/40 rounded-lg p-3']"
            >
              <div class="mb-2 flex items-center justify-between">
                <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                  filter.label
                }}</Label>
                <button
                  v-if="table.getColumn(filter.column)?.getFilterValue() as string"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="emit('text-filter-update', filter.column, undefined)"
                >
                  Clear
                </button>
              </div>
              <Input
                :placeholder="`Filter by ${filter.label.toLowerCase()}...`"
                :model-value="(table.getColumn(filter.column)?.getFilterValue() as string) ?? ''"
                class="h-8 text-sm"
                @update:model-value="emit('text-filter-update', filter.column, ($event as string) || undefined)"
              />
            </div>

            <!-- Multiselect / Select filter -->
            <div
              v-else-if="filter.type === 'multiselect' || filter.type === 'select'"
              :class="
                borderless
                  ? 'py-2 transition-colors'
                  : [
                    'rounded-lg p-3 transition-colors',
                    getMultiSelectValue(filter.column).length > 0
                      ? 'bg-primary/[0.04] ring-primary/20 ring-1'
                      : 'bg-muted/40',
                  ]
              "
            >
              <div class="mb-2 flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                    filter.label
                  }}</Label>
                  <Badge
                    v-if="getMultiSelectValue(filter.column).length > 0"
                    variant="secondary"
                    class="bg-primary/15 text-primary h-4 rounded-full px-1.5 text-xs font-semibold"
                  >
                    {{ getMultiSelectValue(filter.column).length }}
                  </Badge>
                </div>
                <button
                  v-if="getMultiSelectValue(filter.column).length > 0"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="emit('clear-filter', filter)"
                >
                  Clear
                </button>
              </div>
              <Command
                class="[&_[data-slot=command-input-wrapper]]:border-input overflow-visible bg-transparent [&_[data-slot=command-input-wrapper]]:h-8 [&_[data-slot=command-input-wrapper]]:rounded-md [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:px-2.5"
              >
                <CommandInput
                  class="h-7 text-sm"
                  :placeholder="`Search ${filter.label.toLowerCase()}...`"
                />
                <CommandList class="mt-1 max-h-[132px]">
                  <CommandEmpty>No results.</CommandEmpty>
                  <CommandGroup class="p-0">
                    <CommandItem
                      v-for="rawOpt in filter.options"
                      :key="resolveOption(rawOpt).value"
                      :value="resolveOption(rawOpt).label"
                      class="rounded-md px-2 py-1.5 text-sm"
                      @select="emit('toggle-multiselect', filter.column, resolveOption(rawOpt).value)"
                    >
                      <div
                        class="flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors"
                        :class="[
                          getMultiSelectValue(filter.column).includes(resolveOption(rawOpt).value)
                            ? 'border-primary bg-primary text-primary-foreground'
                            : 'border-muted-foreground/40 [&_svg]:invisible',
                        ]"
                      >
                        <Check class="size-3" />
                      </div>
                      <component
                        :is="resolveOption(rawOpt).icon"
                        v-if="resolveOption(rawOpt).icon"
                        class="text-muted-foreground size-4"
                      />
                      <span>{{ resolveOption(rawOpt).label }}</span>
                    </CommandItem>
                  </CommandGroup>
                </CommandList>
              </Command>
            </div>

            <!-- Date range filter -->
            <div
              v-else-if="filter.type === 'date'"
              :class="
                borderless
                  ? 'py-2 transition-colors'
                  : [
                    'rounded-lg p-3 transition-colors',
                    getDateRangeValue(filter.column).from || getDateRangeValue(filter.column).to
                      ? 'bg-primary/[0.04] ring-primary/20 ring-1'
                      : 'bg-muted/40',
                  ]
              "
            >
              <div class="mb-2 flex items-center justify-between">
                <div class="flex items-center gap-2">
                  <Label class="text-muted-foreground text-xs font-medium tracking-wide uppercase">{{
                    filter.label
                  }}</Label>
                  <Badge
                    v-if="getDateRangeValue(filter.column).from || getDateRangeValue(filter.column).to"
                    variant="secondary"
                    class="bg-primary/15 text-primary h-auto rounded-full px-1.5 py-0 text-xs font-medium"
                  >
                    {{ formatDateRange(filter.column) }}
                  </Badge>
                </div>
                <button
                  v-if="getDateRangeValue(filter.column).from || getDateRangeValue(filter.column).to"
                  type="button"
                  class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  @click="emit('clear-date-filter', filter)"
                >
                  Clear
                </button>
              </div>
              <div :class="['flex justify-center overflow-hidden', borderless ? '' : 'rounded-md border']">
                <RangeCalendar
                  :model-value="getCalendarModel(filter.column)"
                  :number-of-months="1"
                  class="p-2"
                  @update:model-value="emit('calendar-update', filter.column, $event)"
                />
              </div>
            </div>
          </template>

          <!-- Consumer-supplied custom filter UI -->
          <slot name="custom-filters" />
        </div>
      </div>

      <!-- Footer -->
      <div :class="['flex gap-2 px-4 py-3', borderless ? '' : 'border-t']">
        <Button
          variant="outline"
          size="sm"
          class="flex-1"
          :disabled="!isAnyFilterActive"
          @click="emit('clear-all')"
        >
          <X class="size-3.5" />
          Reset All
        </Button>
        <Button
          size="sm"
          class="flex-1"
          @click="emit('apply')"
        >
          <template v-if="isServerSide">
            Apply Filters
          </template>
          <template v-else>
            Show {{ table.getFilteredRowModel().rows.length }} result{{
              table.getFilteredRowModel().rows.length !== 1 ? 's' : ''
            }}
          </template>
        </Button>
      </div>
    </SheetContent>
  </Sheet>
</template>

```

### `packages/registry-vue/components/data-table/DataTablePagination.vue`

```vue
<script setup lang="ts">
import type { Table } from '@tanstack/vue-table'

import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-vue-next'

withDefaults(
  defineProps<{
    table: Table<any>
    totalRows: number
    isServerSide: boolean
    borderless?: boolean
  }>(),
  { borderless: false },
)
</script>

<template>
  <div :class="['flex items-center justify-between py-3', borderless ? '' : 'border-t px-4']">
    <div class="text-muted-foreground flex-1 text-sm">
      {{ table.getFilteredSelectedRowModel().rows.length }} of
      {{ isServerSide ? totalRows : table.getFilteredRowModel().rows.length }} row(s) selected.
    </div>
    <div class="flex items-center gap-6 lg:gap-8">
      <div class="flex items-center gap-2">
        <p class="text-sm font-medium whitespace-nowrap">
          Rows per page
        </p>
        <Select
          :model-value="`${table.getState().pagination.pageSize}`"
          @update:model-value="
            (value) => {
              table.setPageSize(Number(value))
              table.setPageIndex(0)
            }
          "
        >
          <SelectTrigger class="h-8 w-[70px]">
            <SelectValue :placeholder="`${table.getState().pagination.pageSize}`" />
          </SelectTrigger>
          <SelectContent side="top">
            <SelectItem
              v-for="pageSize in [10, 20, 30, 40, 50]"
              :key="pageSize"
              :value="`${pageSize}`"
            >
              {{ pageSize }}
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div class="flex items-center justify-center text-sm font-medium whitespace-nowrap">
        Page {{ table.getState().pagination.pageIndex + 1 }} of
        {{ table.getPageCount() }}
      </div>
      <div class="flex items-center gap-1">
        <Button
          variant="outline"
          size="icon"
          class="size-8"
          :disabled="!table.getCanPreviousPage()"
          @click="table.setPageIndex(0)"
        >
          <ChevronsLeft
            class="size-4"
            aria-hidden="true"
          />
          <span class="sr-only">First page</span>
        </Button>
        <Button
          variant="outline"
          size="icon"
          class="size-8"
          :disabled="!table.getCanPreviousPage()"
          @click="table.previousPage()"
        >
          <ChevronLeft
            class="size-4"
            aria-hidden="true"
          />
          <span class="sr-only">Previous page</span>
        </Button>
        <Button
          variant="outline"
          size="icon"
          class="size-8"
          :disabled="!table.getCanNextPage()"
          @click="table.nextPage()"
        >
          <ChevronRight
            class="size-4"
            aria-hidden="true"
          />
          <span class="sr-only">Next page</span>
        </Button>
        <Button
          variant="outline"
          size="icon"
          class="size-8"
          :disabled="!table.getCanNextPage()"
          @click="table.setPageIndex(table.getPageCount() - 1)"
        >
          <ChevronsRight
            class="size-4"
            aria-hidden="true"
          />
          <span class="sr-only">Last page</span>
        </Button>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/data-table/DataTableToolbar.vue`

```vue
<script setup lang="ts">
import type { Table } from '@tanstack/vue-table'
import type { FilterDefinition, FilterOption } from './DataTable.vue'

import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { CalendarIcon, Check, ChevronDown, Download, ListFilter, Plus, Rows3, SlidersHorizontal, X } from 'lucide-vue-next'
import DataTableFilterPopover from './DataTableFilterPopover.vue'

function resolveOption(opt: string | FilterOption): FilterOption {
  if (typeof opt === 'string') return { value: opt, label: opt }
  return opt
}

withDefaults(
  defineProps<{
    table: Table<any>
    filterColumn: string
    filterPlaceholder: string
    filters: FilterDefinition[]
    filterMode: 'inline' | 'modal' | 'popover'
    enableSearch?: boolean
    enableColumnVisibility?: boolean
    enableExport?: boolean
    enableDensityToggle?: boolean
    density?: 'compact' | 'cozy' | 'comfortable'
    borderless?: boolean
    activeFilterCount: number
    isAnyFilterActive: boolean
    isServerSide: boolean
    getMultiSelectValue: (column: string) => string[]
    getDateRangeValue: (column: string) => { from?: string, to?: string }
    getFilterSelectedLabels: (filter: FilterDefinition) => string[]
    formatDateRange: (column: string) => string
    getCalendarModel: (column: string) => any
  }>(),
  { enableSearch: true, enableColumnVisibility: true, enableExport: false, enableDensityToggle: false, density: 'cozy', borderless: false },
)

const emit = defineEmits<{
  (e: 'search', value: string): void
  (e: 'open-filter-sheet' | 'clear-all-filters' | 'apply-filters' | 'export-csv' | 'export-json'): void
  (e: 'toggle-multiselect', column: string, value: string): void
  (e: 'clear-filter' | 'clear-date-filter', filter: FilterDefinition): void
  (e: 'calendar-update', column: string, value: any): void
  (e: 'text-filter-update', column: string, value: string | undefined): void
  // Popover filter mode: commit-draft fires when the user clicks Apply
  // in the staged-edit popover. The payload is a Record<columnId, value>
  // ready to be fed into `setFilterValue` per column.
  (e: 'commit-filters', draft: Record<string, any>): void
  (e: 'update:density', value: 'compact' | 'cozy' | 'comfortable'): void
}>()
</script>

<template>
  <div :class="['flex flex-col gap-2 py-3', borderless ? '' : 'border-b px-4']">
    <div class="flex items-center gap-2">
      <!-- Search only renders when filterColumn maps to an actual column
           in the table; otherwise TanStack's getColumn() logs a noisy
           "[Table] Column with id '<x>' does not exist" warning even
           though our optional-chaining keeps the call safe. -->
      <Input
        v-if="enableSearch && filterColumn && table.getColumn(filterColumn)"
        class="h-9 max-w-xs"
        :placeholder="filterPlaceholder"
        :model-value="table.getColumn(filterColumn)?.getFilterValue() as string"
        @update:model-value="emit('search', $event as string)"
      />

      <!-- ── INLINE filter mode ── -->
      <template v-if="filterMode === 'inline'">
        <template
          v-for="filter in filters"
          :key="filter.column"
        >
          <!-- Multiselect / Select -->
          <Popover v-if="filter.type === 'multiselect' || filter.type === 'select'">
            <PopoverTrigger as-child>
              <Button
                variant="outline"
                size="sm"
                class="h-9 border-dashed"
              >
                <Plus
                  class="size-4"
                  aria-hidden="true"
                />
                {{ filter.label }}
                <template v-if="getMultiSelectValue(filter.column).length > 0">
                  <Separator
                    orientation="vertical"
                    class="mx-1 h-4"
                  />
                  <div class="flex gap-1">
                    <Badge
                      v-if="getMultiSelectValue(filter.column).length > 2"
                      variant="secondary"
                      class="rounded-sm px-1 font-normal"
                    >
                      {{ getMultiSelectValue(filter.column).length }} selected
                    </Badge>
                    <template v-else>
                      <Badge
                        v-for="label in getFilterSelectedLabels(filter)"
                        :key="label"
                        variant="secondary"
                        class="rounded-sm px-1 font-normal"
                      >
                        {{ label }}
                      </Badge>
                    </template>
                  </div>
                </template>
              </Button>
            </PopoverTrigger>
            <PopoverContent
              class="w-52 p-0"
              align="start"
            >
              <Command>
                <CommandInput :placeholder="`Search ${filter.label.toLowerCase()}...`" />
                <CommandList>
                  <CommandEmpty>No results.</CommandEmpty>
                  <CommandGroup>
                    <CommandItem
                      v-for="rawOpt in filter.options"
                      :key="resolveOption(rawOpt).value"
                      :value="resolveOption(rawOpt).label"
                      @select="emit('toggle-multiselect', filter.column, resolveOption(rawOpt).value)"
                    >
                      <div
                        class="border-primary flex size-4 shrink-0 items-center justify-center rounded-sm border"
                        :class="[
                          getMultiSelectValue(filter.column).includes(resolveOption(rawOpt).value)
                            ? 'bg-primary text-primary-foreground'
                            : 'opacity-50 [&_svg]:invisible',
                        ]"
                      >
                        <Check class="size-3" />
                      </div>
                      <component
                        :is="resolveOption(rawOpt).icon"
                        v-if="resolveOption(rawOpt).icon"
                        class="text-muted-foreground size-4"
                      />
                      <span>{{ resolveOption(rawOpt).label }}</span>
                    </CommandItem>
                  </CommandGroup>
                  <template v-if="getMultiSelectValue(filter.column).length > 0">
                    <CommandSeparator />
                    <CommandGroup>
                      <CommandItem
                        value="__clear__"
                        class="justify-center text-center"
                        @select="emit('clear-filter', filter)"
                      >
                        Clear filter
                      </CommandItem>
                    </CommandGroup>
                  </template>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>

          <!-- Date range filter -->
          <Popover v-else-if="filter.type === 'date'">
            <PopoverTrigger as-child>
              <Button
                variant="outline"
                size="sm"
                class="h-9 border-dashed"
              >
                <CalendarIcon
                  class="size-4"
                  aria-hidden="true"
                />
                {{ filter.label }}
                <template v-if="getDateRangeValue(filter.column).from || getDateRangeValue(filter.column).to">
                  <Separator
                    orientation="vertical"
                    class="mx-1 h-4"
                  />
                  <Badge
                    variant="secondary"
                    class="rounded-sm px-1 font-normal"
                  >
                    {{ formatDateRange(filter.column) }}
                  </Badge>
                </template>
              </Button>
            </PopoverTrigger>
            <PopoverContent
              class="w-auto p-0"
              align="start"
            >
              <RangeCalendar
                :model-value="getCalendarModel(filter.column)"
                initial-focus
                :number-of-months="2"
                @update:model-value="emit('calendar-update', filter.column, $event)"
              />
              <div
                v-if="getDateRangeValue(filter.column).from || getDateRangeValue(filter.column).to"
                class="border-t p-2"
              >
                <Button
                  variant="ghost"
                  size="sm"
                  class="h-7 w-full text-xs"
                  @click="emit('clear-date-filter', filter)"
                >
                  Clear dates
                </Button>
              </div>
            </PopoverContent>
          </Popover>

          <!-- Text filter -->
          <Popover v-else-if="filter.type === 'text'">
            <PopoverTrigger as-child>
              <Button
                variant="outline"
                size="sm"
                class="h-9 border-dashed"
              >
                <Plus
                  class="size-4"
                  aria-hidden="true"
                />
                {{ filter.label }}
                <template v-if="table.getColumn(filter.column)?.getFilterValue() as string">
                  <Separator
                    orientation="vertical"
                    class="mx-1 h-4"
                  />
                  <Badge
                    variant="secondary"
                    class="rounded-sm px-1 font-normal"
                  >
                    {{ table.getColumn(filter.column)?.getFilterValue() }}
                  </Badge>
                </template>
              </Button>
            </PopoverTrigger>
            <PopoverContent
              class="w-60 p-3"
              align="start"
            >
              <div class="space-y-2">
                <p class="text-sm font-medium">
                  {{ filter.label }}
                </p>
                <Input
                  :placeholder="`Filter by ${filter.label.toLowerCase()}...`"
                  :model-value="(table.getColumn(filter.column)?.getFilterValue() as string) ?? ''"
                  class="h-8 text-sm"
                  @update:model-value="table.getColumn(filter.column)?.setFilterValue($event || undefined)"
                />
              </div>
            </PopoverContent>
          </Popover>
        </template>
      </template>

      <!-- ── MODAL filter mode (Sheet from the right) ── -->
      <template v-if="filterMode === 'modal'">
        <Button
          variant="outline"
          size="sm"
          class="h-9"
          :class="[activeFilterCount > 0 ? 'border-primary/40 bg-primary/5 text-primary hover:bg-primary/10' : '']"
          @click="emit('open-filter-sheet')"
        >
          <SlidersHorizontal
            class="size-4"
            aria-hidden="true"
          />
          Filters
          <Badge
            v-if="activeFilterCount > 0"
            class="bg-primary text-primary-foreground ml-0.5 size-5 rounded-full p-0 text-xs font-semibold"
          >
            {{ activeFilterCount }}
          </Badge>
        </Button>
      </template>

      <!-- ── POPOVER filter mode ── -->
      <template v-if="filterMode === 'popover' && filters.length">
        <DataTableFilterPopover
          :table="table"
          :filters="filters"
          :active-filter-count="activeFilterCount"
          :is-any-filter-active="isAnyFilterActive"
          :is-server-side="isServerSide"
          :get-multi-select-value="getMultiSelectValue"
          :get-date-range-value="getDateRangeValue"
          :format-date-range="formatDateRange"
          :get-calendar-model="getCalendarModel"
          @commit-draft="(d) => emit('commit-filters', d)"
          @clear-all="emit('clear-all-filters')"
        >
          <template
            v-if="$slots['custom-filters']"
            #custom-filters
          >
            <slot name="custom-filters" />
          </template>
        </DataTableFilterPopover>
      </template>

      <!-- Inline custom filters (when filterMode === 'inline') -->
      <slot
        v-if="filterMode === 'inline'"
        name="custom-filters"
      />

      <!-- Toolbar extras (e.g. group-by selector, density toggle) -->
      <slot name="toolbar-extra" />

      <!-- Reset button -->
      <Button
        v-if="isAnyFilterActive"
        variant="ghost"
        size="sm"
        class="h-9"
        @click="emit('clear-all-filters')"
      >
        Reset
        <X
          class="size-4"
          aria-hidden="true"
        />
      </Button>

      <!-- Export (CSV / JSON) -->
      <div
        v-if="enableExport"
        class="ml-auto"
      >
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button
              variant="outline"
              size="sm"
              class="h-9"
            >
              <Download class="size-3.5" />
              Export
              <ChevronDown class="size-3.5 opacity-60" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem @select="emit('export-csv')">
              Export as CSV
            </DropdownMenuItem>
            <DropdownMenuItem @select="emit('export-json')">
              Export as JSON
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <!-- Density toggle -->
      <div
        v-if="enableDensityToggle"
        :class="enableExport ? '' : 'ml-auto'"
      >
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button
              variant="outline"
              size="sm"
              class="h-9"
              :aria-label="`Row density: ${density}`"
            >
              <Rows3
                class="size-4"
                aria-hidden="true"
              />
              <span class="capitalize">{{ density }}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuRadioGroup
              :model-value="density"
              @update:model-value="(v: any) => emit('update:density', v as 'compact' | 'cozy' | 'comfortable')"
            >
              <DropdownMenuRadioItem value="compact">
                Compact
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="cozy">
                Cozy
              </DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="comfortable">
                Comfortable
              </DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <!-- Column Visibility -->
      <div
        v-if="enableColumnVisibility"
        :class="enableExport || enableDensityToggle ? '' : 'ml-auto'"
      >
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <Button
              variant="outline"
              size="sm"
              class="h-9"
            >
              <ListFilter
                class="size-4"
                aria-hidden="true"
              />
              View
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuCheckboxItem
              v-for="column in table.getAllColumns().filter((column) => column.getCanHide())"
              :key="column.id"
              class="capitalize"
              :checked="column.getIsVisible()"
              @update:checked="(value: boolean) => column.toggleVisibility(!!value)"
            >
              {{ column.id }}
            </DropdownMenuCheckboxItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/data-table/index.ts`

```ts
export { default as DataTable } from './DataTable.vue'
export { default as DataTableColumnHeader } from './DataTableColumnHeader.vue'
export { default as DataTableToolbar } from './DataTableToolbar.vue'
export { default as DataTableFilterSheet } from './DataTableFilterSheet.vue'
export { default as DataTableFilterPopover } from './DataTableFilterPopover.vue'
export { default as DataTablePagination } from './DataTablePagination.vue'
export type { FilterDefinition, FilterOption } from './DataTable.vue'

```

## date-picker

- type: `registry:ui`
- description: Date input that opens a Calendar in a Popover. Handles parsing, formatting, min/max bounds, and disabled dates. Use the Range Calendar version for from/to selections.
- npm deps: `@internationalized/date`, `lucide-vue-next`, `reka-ui`
- registry deps: `button`, `calendar`, `popover`, `range-calendar`, `time-picker`

### `packages/registry-vue/components/date-picker/DatePicker.vue`

```vue
<script setup lang="ts">
import type { DateValue } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { Calendar as CalendarIcon, X } from 'lucide-vue-next'
import {
  CalendarDate,
  CalendarDateTime,
  getLocalTimeZone,
  parseDate,
  parseDateTime,
  today,
} from '@internationalized/date'
import { useDateFormatter } from 'reka-ui'
import { toDate } from 'reka-ui/date'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { TimeColumns } from '@/components/ui/time-picker'
import { cn } from '@/lib/utils'

export type DatePickerType = 'single' | 'multiple' | 'range'
export type DatePickerLayout = 'default' | 'month-and-year' | 'month-only' | 'year-only'
export type DatePickerPicker = 'day' | 'week' | 'month' | 'quarter' | 'year'
export type DatePickerStatus = 'error' | 'warning'
export type DatePickerSize = 'small' | 'middle' | 'large'
export type DatePickerPlacement =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight'

type SingleValue = string | DateValue | null
type MultipleValue = (string | DateValue)[] | null
type RangeValue = { start: string | DateValue; end: string | DateValue } | null

export interface DatePickerPreset {
  label: string
  value: SingleValue | MultipleValue | RangeValue
  category?: string
}

export interface DisabledTimeResult {
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
}

type FormatValue = 'short' | 'medium' | 'long' | 'full' | Intl.DateTimeFormatOptions

interface Props {
  /** Controlled value. Shape depends on `type`. ISO `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm` when `show-time`). */
  modelValue?: SingleValue | MultipleValue | RangeValue
  type?: DatePickerType
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  /** Format for the trigger label. String presets or Intl.DateTimeFormatOptions for full flexibility. Ignored when `show-time` (always shows date + time). */
  format?: FormatValue
  /** Backward-compat alias for `format`. */
  dateFormat?: FormatValue
  locale?: string
  numberOfMonths?: number
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  fixedWeeks?: boolean
  minValue?: string | DateValue
  maxValue?: string | DateValue
  /** Header layout: control which parts (month/year) become dropdowns. */
  layout?: DatePickerLayout
  /**
   * Granularity of selection.
   * - `day` (default): pick a single day from the calendar grid.
   * - `week`: pick a full week — value is the week's start date (Monday or per locale).
   * - `month`: pick a whole month — value snaps to the 1st day of the month.
   * - `quarter`: pick a quarter — value snaps to the quarter's start date.
   * - `year`: pick a whole year — value snaps to Jan 1 of the year.
   * Only honored for `type='single'`.
   */
  picker?: DatePickerPicker
  /** Show "Today" shortcut at popover top (single + day picker only). */
  showCurrentDate?: boolean
  /** Require clicking OK before applying the selected value. */
  needConfirm?: boolean
  /** Validation status — applies colored border to the trigger. */
  status?: DatePickerStatus
  /** Size variant of the trigger input. */
  size?: DatePickerSize
  /** Placement of the popover relative to the trigger. */
  placement?: DatePickerPlacement
  /** Pair the calendar with a time selector. Value becomes `YYYY-MM-DDTHH:mm`. */
  showTime?: boolean
  /** Show seconds column in time picker. Only used when `show-time`. */
  showSeconds?: boolean
  /** 24h vs AM/PM column. Only used when `show-time`. */
  use24Hour?: boolean
  /** Minute step for the time column. Only used when `show-time`. */
  minuteStep?: number
  /** Second step for the time column. Only used when `show-time` and `show-seconds`. */
  secondStep?: number
  /** Default time for newly picked dates when `show-time` and no prior selection. `HH:mm` or `HH:mm:ss`. */
  defaultTime?: string
  /** Preset shortcuts for quick selection. */
  presets?: DatePickerPreset[]
  /** Custom separator between range start and end dates. */
  separator?: string
  /** Function to determine if a specific date should be disabled. */
  disabledDate?: (current: DateValue) => boolean
  /** Function to determine if specific times should be disabled. Only used when `show-time`. */
  disabledTime?: (current?: DateValue) => DisabledTimeResult
  triggerClass?: HTMLAttributes['class']
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  type: 'single',
  placeholder: 'Pick a date',
  disabled: false,
  readOnly: false,
  clearable: true,
  format: 'medium',
  locale: 'en-US',
  weekStartsOn: 0,
  fixedWeeks: false,
  layout: 'default',
  picker: 'day',
  showCurrentDate: false,
  needConfirm: false,
  status: undefined,
  size: 'middle',
  placement: 'bottomLeft',
  showTime: false,
  showSeconds: false,
  use24Hour: false,
  minuteStep: 5,
  secondStep: 1,
  defaultTime: '12:00',
  separator: '~',
})

const emits = defineEmits<{
  'update:modelValue': [value: SingleValue | MultipleValue | RangeValue]
}>()

const open = ref(false)
const formatter = useDateFormatter(props.locale)

const effectiveFormat = computed(() => props.dateFormat ?? props.format)

const effectiveNumberOfMonths = computed(() => props.numberOfMonths ?? (props.type === 'range' ? 2 : 1))

const effectivePresets = computed<DatePickerPreset[] | undefined>(() => {
  if (props.presets) return props.presets
  if (props.type !== 'range') return undefined
  const t = today(getLocalTimeZone())
  return [
    { label: 'Today', value: { start: t, end: t } },
    { label: 'Yesterday', value: { start: t.subtract({ days: 1 }), end: t.subtract({ days: 1 }) } },
    { label: 'Last 7 days', value: { start: t.subtract({ days: 6 }), end: t } },
    { label: 'Last 30 days', value: { start: t.subtract({ days: 29 }), end: t } },
    { label: 'This month', value: { start: t.set({ day: 1 }), end: t } },
    {
      label: 'Last month',
      value: (() => {
        const lastMonthEnd = t.set({ day: 1 }).subtract({ days: 1 })
        const lastMonthStart = lastMonthEnd.set({ day: 1 })
        return { start: lastMonthStart, end: lastMonthEnd }
      })(),
    },
    { label: 'Year to date', value: { start: t.set({ month: 1, day: 1 }), end: t } },
  ]
})

const presetGroups = computed(() => {
  const groups = new Map<string | undefined, DatePickerPreset[]>()
  for (const p of effectivePresets.value ?? []) {
    const cat = p.category
    if (!groups.has(cat)) groups.set(cat, [])
    groups.get(cat)!.push(p)
  }
  return Array.from(groups.entries()).map(([category, presets]) => ({ category, presets }))
})

// ---- Need confirm: preview state ----
const previewValue = ref<typeof internal.value>(undefined)
const activeValue = computed(() => (props.needConfirm ? (previewValue.value ?? internal.value) : internal.value))

function commitPreview() {
  if (props.needConfirm && previewValue.value !== undefined) {
    handleUpdate(previewValue.value)
    previewValue.value = undefined
  }
  open.value = false
}

function cancelPreview() {
  previewValue.value = undefined
  open.value = false
}

watch(open, (v) => {
  if (!v) previewValue.value = undefined
})

function coerce(v: string | DateValue | null | undefined): DateValue | null {
  if (!v) return null
  if (typeof v === 'string') {
    try {
      return v.includes('T') ? parseDateTime(v) : parseDate(v)
    } catch {
      return null
    }
  }
  return v
}

function coerceShape(v: Props['modelValue']) {
  if (props.type === 'multiple') {
    if (!Array.isArray(v)) return undefined
    return v.map(coerce).filter((x): x is DateValue => x != null)
  }
  if (props.type === 'range') {
    if (!v || Array.isArray(v) || typeof v === 'string' || !('start' in (v as object))) return undefined
    const r = v as { start: string | DateValue; end: string | DateValue }
    const start = coerce(r.start)
    const end = coerce(r.end)
    if (!start) return undefined
    return end ? { start, end } : { start }
  }
  return coerce(v as SingleValue) ?? undefined
}

const internal = ref(coerceShape(props.modelValue))
watch(
  () => props.modelValue,
  (v) => {
    internal.value = coerceShape(v)
  },
  { deep: true },
)

const minDate = computed(() => coerce(props.minValue) ?? undefined)
const maxDate = computed(() => coerce(props.maxValue) ?? undefined)

function fmtDate(d: DateValue) {
  const fmt = effectiveFormat.value
  if (typeof fmt === 'object') {
    return formatter.custom(toDate(d), fmt)
  }
  return formatter.custom(toDate(d), { dateStyle: fmt })
}

function fmtMonth(d: DateValue) {
  return formatter.custom(toDate(d), { month: 'long', year: 'numeric' })
}

function fmtTime(d: DateValue) {
  if (!('hour' in d)) return ''
  const dt = d as CalendarDateTime
  const h24 = String(dt.hour).padStart(2, '0')
  const m = String(dt.minute).padStart(2, '0')
  if (props.showSeconds) {
    const s = String(dt.second).padStart(2, '0')
    if (props.use24Hour) return `${h24}:${m}:${s}`
    const h12 = dt.hour % 12 === 0 ? 12 : dt.hour % 12
    const period = dt.hour >= 12 ? 'PM' : 'AM'
    return `${h12}:${m}:${s} ${period}`
  }
  if (props.use24Hour) {
    return `${h24}:${m}`
  }
  const h12 = dt.hour % 12 === 0 ? 12 : dt.hour % 12
  const period = dt.hour >= 12 ? 'PM' : 'AM'
  return `${h12}:${m} ${period}`
}

function fmtDateTime(d: DateValue) {
  return `${fmtDate(d)} ${fmtTime(d)}`.trim()
}

const display = computed(() => {
  const v = internal.value
  if (!v) return ''
  if (props.type === 'multiple') {
    const arr = v as DateValue[]
    if (!arr.length) return ''
    if (arr.length === 1) return fmtDate(arr[0]!)
    if (arr.length <= 3) return arr.map(fmtDate).join(', ')
    return `${arr.length} dates selected`
  }
  if (props.type === 'range') {
    const r = v as { start?: DateValue; end?: DateValue }
    const fmt = props.showTime ? fmtDateTime : fmtDate
    if (r.start && r.end) return `${fmt(r.start)} ${props.separator} ${fmt(r.end)}`
    if (r.start) return `${fmt(r.start)} ${props.separator} …`
    return ''
  }
  if (props.picker === 'week') {
    const ws = weekStart(v as DateValue)
    return `Week ${weekNumber(ws)}, ${ws.year}`
  }
  if (props.picker === 'month') return fmtMonth(v as DateValue)
  if (props.picker === 'quarter') {
    const q = Math.ceil((v as DateValue).month / 3)
    return `Q${q} ${(v as DateValue).year}`
  }
  if (props.picker === 'year') return String((v as DateValue).year)
  return props.showTime ? fmtDateTime(v as DateValue) : fmtDate(v as DateValue)
})

const hasValue = computed(() => {
  const v = internal.value
  if (!v) return false
  if (props.type === 'multiple') return (v as DateValue[]).length > 0
  if (props.type === 'range') return Boolean((v as { start?: DateValue }).start)
  return true
})

function emitOut(v: typeof internal.value) {
  if (props.type === 'multiple') {
    const arr = (v as DateValue[]) ?? []
    emits(
      'update:modelValue',
      arr.map((d) => d.toString()),
    )
    return
  }
  if (props.type === 'range') {
    const r = v as { start?: DateValue; end?: DateValue } | undefined
    if (!r?.start || !r?.end) return
    emits('update:modelValue', {
      start: r.start.toString(),
      end: r.end.toString(),
    })
    return
  }
  emits('update:modelValue', v ? (v as DateValue).toString() : null)
}

function handleUpdate(v: typeof internal.value) {
  internal.value = v
  emitOut(v)
  if (props.needConfirm) return
  // Don't close on day click when show-time is on — user still needs to pick the time.
  if (props.type === 'single' && v && !props.showTime) open.value = false
  if (props.type === 'range') {
    const r = v as { start?: DateValue; end?: DateValue } | undefined
    if (r?.start && r?.end && !props.showTime) open.value = false
  }
}

function clear(event: Event) {
  event.stopPropagation()
  if (props.disabled || props.readOnly) return
  if (props.type === 'multiple') handleUpdate([])
  else handleUpdate(undefined)
}

function applyPreset(preset: DatePickerPreset) {
  if (props.disabled || props.readOnly) return
  const v = preset.value
  if (!v) {
    handleUpdate(undefined)
    open.value = false
    return
  }
  if (props.type === 'multiple') {
    const arr = (v as MultipleValue) ?? []
    handleUpdate(arr.map(coerce).filter((x): x is DateValue => x != null) as never)
    open.value = false
    return
  }
  if (props.type === 'range') {
    const r = v as RangeValue
    if (!r?.start) {
      handleUpdate(undefined)
      open.value = false
      return
    }
    const start = coerce(r.start)
    const end = coerce(r.end)
    if (!start) {
      handleUpdate(undefined)
      open.value = false
      return
    }
    handleUpdate(end ? { start, end } : ({ start } as never))
    open.value = false
    return
  }
  handleUpdate(coerce(v as SingleValue) as never)
  open.value = false
}

const placeholderDate = today(getLocalTimeZone())
const calendarType = computed(() => {
  if (props.type === 'multiple') return { type: 'multiple' as const }
  if (props.type === 'range') return { type: 'range' as const }
  return undefined
})
const calendarLayout = computed(() => (props.layout === 'default' ? undefined : props.layout))

function pickToday() {
  if (props.type !== 'single') return
  const t = today(getLocalTimeZone())
  if (props.picker === 'week') {
    handleUpdate(weekStart(t))
    return
  }
  handleUpdate(t)
}

// ---- Week picker utilities ----
function weekStart(d: DateValue): CalendarDate {
  // ISO week starts on Monday (1), but respect weekStartsOn prop
  const jsDate = toDate(d)
  const dayOfWeek = jsDate.getDay()
  const offset = (dayOfWeek - props.weekStartsOn + 7) % 7
  return new CalendarDate(d.year, d.month, d.day).subtract({ days: offset })
}

function weekNumber(d: DateValue): number {
  const jsDate = toDate(d)
  const target = new Date(jsDate.valueOf())
  const dayNr = (jsDate.getDay() + 6) % 7
  target.setDate(target.getDate() - dayNr + 3)
  const firstThursday = target.valueOf()
  target.setMonth(0, 1)
  if (target.getDay() !== 4) {
    target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7))
  }
  return 1 + Math.ceil((firstThursday - target.valueOf()) / 604800000)
}

function weekAnchorForMonth(year: number, month: number): CalendarDate {
  const firstOfMonth = new CalendarDate(year, month, 1)
  return weekStart(firstOfMonth)
}

const weekGrid = computed(() => {
  const anchor = monthYearAnchor.value
  const start = weekAnchorForMonth(anchor.year, anchor.month)
  // Generate 6 weeks to cover the month
  return Array.from({ length: 6 }, (_, i) => {
    const weekStartDate = start.add({ weeks: i })
    const weekEndDate = weekStartDate.add({ days: 6 })
    return {
      start: weekStartDate,
      end: weekEndDate,
      weekNum: weekNumber(weekStartDate),
    }
  })
})

function isWeekSelected(ws: CalendarDate) {
  const v = activeValue.value as DateValue | undefined
  if (!v) return false
  const selectedWeekStart = weekStart(v)
  return selectedWeekStart.compare(ws) === 0
}

function isWeekDisabled(ws: CalendarDate) {
  if (minDate.value && ws.compare(minDate.value) < 0) return true
  const weekEnd = ws.add({ days: 6 })
  if (maxDate.value && weekEnd.compare(maxDate.value) > 0) return true
  if (props.disabledDate && props.disabledDate(ws)) return true
  return false
}

function pickWeek(ws: CalendarDate) {
  if (isWeekDisabled(ws)) return
  if (props.needConfirm) {
    previewValue.value = ws
    return
  }
  handleUpdate(ws)
}

// ---- Quarter picker utilities ----
const quarterLabels = ['Q1', 'Q2', 'Q3', 'Q4']
const quarterMonths = [1, 4, 7, 10] as const

function quarterStart(year: number, quarterIdx: number): CalendarDate {
  return new CalendarDate(year, quarterMonths[quarterIdx]!, 1)
}

function isQuarterSelected(qIdx: number) {
  const v = activeValue.value as DateValue | undefined
  if (!v) return false
  return v.year === monthYearAnchor.value.year && Math.ceil(v.month / 3) === qIdx + 1
}

function isQuarterDisabled(qIdx: number) {
  const d = quarterStart(monthYearAnchor.value.year, qIdx)
  if (minDate.value && d.compare(minDate.value) < 0) return true
  const lastMonth = d.add({ months: 2 })
  const lastDay = lastMonth.add({ months: 1 }).subtract({ days: 1 })
  if (maxDate.value && lastDay.compare(maxDate.value) > 0) return true
  if (props.disabledDate && props.disabledDate(d)) return true
  return false
}

function pickQuarter(qIdx: number) {
  const d = quarterStart(monthYearAnchor.value.year, qIdx)
  if (isQuarterDisabled(qIdx)) return
  if (props.needConfirm) {
    previewValue.value = d
    return
  }
  handleUpdate(d)
}

// ---- Calendar value passed to Reka must be a CalendarDate (no time component),
// so it doesn't refuse the value or repaint with a stale time.
function stripTime(d?: DateValue) {
  if (!d) return d
  return new CalendarDate(d.year, d.month, d.day)
}

const calendarValue = computed(() => {
  const v = internal.value
  if (props.type === 'multiple') return (v as DateValue[] | undefined)?.map(stripTime) as never
  if (props.type === 'range') {
    const r = v as { start?: DateValue; end?: DateValue } | undefined
    if (!r) return undefined as never
    return { start: stripTime(r.start), end: stripTime(r.end) } as never
  }
  return stripTime(v as DateValue | undefined) as never
})

// Wrap update from calendar — re-attach time component if show-time is on.
type TimeShape = { h: number; m: number; s: number }

const lastTime = computed<TimeShape>(() => {
  const v = internal.value
  if (props.type === 'single' && v && 'hour' in (v as object)) {
    const dt = v as CalendarDateTime
    return { h: dt.hour, m: dt.minute, s: dt.second }
  }
  if (props.type === 'range') {
    const r = v as { start?: DateValue } | undefined
    if (r?.start && 'hour' in (r.start as object)) {
      const dt = r.start as CalendarDateTime
      return { h: dt.hour, m: dt.minute, s: dt.second }
    }
  }
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(props.defaultTime)
  if (!m) return { h: 12, m: 0, s: 0 }
  return { h: Number(m[1]), m: Number(m[2]), s: m[3] ? Number(m[3]) : 0 }
})

function withTime(d: DateValue, t: TimeShape = lastTime.value) {
  return new CalendarDateTime(d.year, d.month, d.day, t.h, t.m, t.s)
}

function handleCalendarUpdate(v: unknown) {
  if (props.needConfirm) {
    if (props.type === 'multiple') {
      previewValue.value = ((v as DateValue[])?.map((d) => withTime(d)) as never) ?? []
    } else if (props.type === 'range') {
      const r = v as { start?: DateValue; end?: DateValue } | undefined
      if (!r?.start) {
        previewValue.value = undefined
      } else {
        const start = props.showTime ? withTime(r.start) : r.start
        const end = r.end ? (props.showTime ? withTime(r.end) : r.end) : undefined
        previewValue.value = end ? { start, end } : ({ start } as never)
      }
    } else {
      previewValue.value = v ? ((props.showTime ? withTime(v as DateValue) : (v as DateValue)) as never) : undefined
    }
    return
  }
  if (!props.showTime) {
    handleUpdate(v as typeof internal.value)
    return
  }
  if (props.type === 'multiple') {
    const arr = (v as DateValue[]) ?? []
    handleUpdate(arr.map((d) => withTime(d)) as never)
    return
  }
  if (props.type === 'range') {
    const r = v as { start?: DateValue; end?: DateValue } | undefined
    if (!r?.start) return handleUpdate(undefined)
    const start = withTime(r.start)
    const end = r.end ? withTime(r.end) : undefined
    handleUpdate(end ? { start, end } : ({ start } as never))
    return
  }
  if (v) handleUpdate(withTime(v as DateValue) as never)
}

// Time column for show-time mode.
const timeForColumns = computed(() => {
  const t = lastTime.value
  if (props.showSeconds) {
    return `${String(t.h).padStart(2, '0')}:${String(t.m).padStart(2, '0')}:${String(t.s).padStart(2, '0')}`
  }
  return `${String(t.h).padStart(2, '0')}:${String(t.m).padStart(2, '0')}`
})

const timeFormat = computed(() => {
  if (props.showSeconds) return 'HH:mm:ss'
  return 'HH:mm'
})

function handleTimeUpdate(value: string) {
  if (!internal.value) return
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(value)
  if (!m) return
  const t: TimeShape = { h: Number(m[1]), m: Number(m[2]), s: m[3] ? Number(m[3]) : 0 }
  if (props.type === 'single') {
    handleUpdate(withTime(internal.value as DateValue, t) as never)
    return
  }
  if (props.type === 'range') {
    const r = internal.value as { start?: DateValue; end?: DateValue }
    if (!r.start) return
    const start = withTime(r.start, t)
    const end = r.end ? withTime(r.end, t) : undefined
    handleUpdate(end ? { start, end } : ({ start } as never))
  }
}

const disabledTimeConfig = computed(() => {
  if (!props.disabledTime) return undefined
  let current: DateValue | undefined
  if (props.type === 'range') {
    const r = activeValue.value as { start?: DateValue } | undefined
    current = r?.start
  } else {
    current = activeValue.value as DateValue | undefined
  }
  return props.disabledTime(current)
})

// ---- Month / year picker mode ----
const monthYearAnchor = ref<DateValue>((internal.value as DateValue) ?? today(getLocalTimeZone()))
watch(open, (v) => {
  if (v) monthYearAnchor.value = (internal.value as DateValue) ?? today(getLocalTimeZone())
})

const monthLabels = computed(() => {
  const base = today(getLocalTimeZone())
  return Array.from({ length: 12 }, (_, m) => {
    const d = new CalendarDate(base.year, m + 1, 1)
    return formatter.custom(toDate(d), { month: 'short' })
  })
})

const yearGrid = computed(() => {
  const y = monthYearAnchor.value.year
  const start = y - (y % 12)
  return Array.from({ length: 12 }, (_, i) => start + i)
})

function shiftAnchor(dir: -1 | 1) {
  const a = monthYearAnchor.value
  if (props.picker === 'month' || props.picker === 'week') {
    monthYearAnchor.value = new CalendarDate(a.year + dir, a.month, 1)
  } else if (props.picker === 'year' || props.picker === 'quarter') {
    monthYearAnchor.value = new CalendarDate(a.year + dir, 1, 1)
  }
}

function isMonthSelected(monthIdx: number) {
  const v = activeValue.value as DateValue | undefined
  if (!v) return false
  return v.year === monthYearAnchor.value.year && v.month === monthIdx + 1
}

function isYearSelected(year: number) {
  const v = activeValue.value as DateValue | undefined
  return !!v && v.year === year
}

function pickMonth(monthIdx: number) {
  const d = new CalendarDate(monthYearAnchor.value.year, monthIdx + 1, 1)
  if (isMonthDisabled(monthIdx)) return
  if (props.needConfirm) {
    previewValue.value = d
    return
  }
  handleUpdate(d)
}

function pickYear(year: number) {
  const d = new CalendarDate(year, 1, 1)
  if (isYearDisabled(year)) return
  if (props.picker === 'year') {
    if (props.needConfirm) {
      previewValue.value = d
      return
    }
    handleUpdate(d)
  } else {
    monthYearAnchor.value = d
  }
}

function isMonthDisabled(monthIdx: number) {
  const d = new CalendarDate(monthYearAnchor.value.year, monthIdx + 1, 1)
  if (minDate.value && d.compare(minDate.value) < 0) return true
  if (maxDate.value && d.compare(maxDate.value) > 0) return true
  if (props.disabledDate && props.disabledDate(d)) return true
  return false
}

function isYearDisabled(year: number) {
  const d = new CalendarDate(year, 1, 1)
  if (minDate.value && new CalendarDate(year, 12, 31).compare(minDate.value) < 0) return true
  if (maxDate.value && d.compare(maxDate.value) > 0) return true
  if (props.disabledDate && props.disabledDate(d)) return true
  return false
}

// ---- Popover placement ----
const popoverPlacement = computed(() => {
  const map: Record<string, { side: 'top' | 'bottom' | 'left' | 'right'; align: 'start' | 'center' | 'end' }> = {
    top: { side: 'top', align: 'center' },
    bottom: { side: 'bottom', align: 'center' },
    left: { side: 'left', align: 'center' },
    right: { side: 'right', align: 'center' },
    topLeft: { side: 'top', align: 'start' },
    topRight: { side: 'top', align: 'end' },
    bottomLeft: { side: 'bottom', align: 'start' },
    bottomRight: { side: 'bottom', align: 'end' },
  }
  return map[props.placement] ?? { side: 'bottom', align: 'start' }
})

// ---- Size ----
const buttonSize = computed(() => {
  if (props.size === 'small') return 'sm'
  if (props.size === 'large') return 'lg'
  return 'default'
})

const triggerClasses = computed(() =>
  cn(
    props.showTime ? 'min-w-[280px]' : 'min-w-[240px]',
    'justify-start gap-2 text-left font-normal',
    !hasValue.value && 'text-muted-foreground',
    props.status === 'error' && 'border-destructive focus-visible:ring-destructive',
    props.status === 'warning' && 'border-warning focus-visible:ring-warning',
    props.triggerClass,
    props.class,
  ),
)

function applyAndClose() {
  open.value = false
}
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        type="button"
        variant="outline"
        :size="buttonSize"
        :disabled="disabled"
        :class="triggerClasses"
        data-uipkge
        data-slot="date-picker"
      >
        <CalendarIcon class="size-4" aria-hidden="true" />
        <span class="flex-1 truncate">{{ display || placeholder }}</span>
        <button
          type="button"
          v-if="clearable && hasValue && !disabled && !readOnly"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
          aria-label="Clear date"
          @click.stop="clear"
        >
          <X class="size-3.5" />
        </button>
      </Button>
    </PopoverTrigger>
    <PopoverContent
      class="w-auto p-0"
      :side="popoverPlacement.side as 'top' | 'bottom' | 'left' | 'right' | undefined"
      :align="popoverPlacement.align as 'center' | 'end' | 'start' | undefined"
    >
      <div
        v-if="showCurrentDate && type === 'single' && (picker === 'day' || picker === 'week')"
        class="flex justify-end border-b px-3 py-2"
      >
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded px-2 py-1.5 text-xs focus-visible:ring-2 focus-visible:outline-none"
          @click="pickToday"
        >
          Today
        </button>
      </div>
      <div v-if="picker !== 'day' && type === 'single'" class="w-[260px] p-3" data-uipkge data-slot="month-year-picker">
        <!-- Week picker -->
        <template v-if="picker === 'week'">
          <div class="mb-3 flex items-center justify-between">
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Previous"
              @click="shiftAnchor(-1)"
            >
              <span class="text-muted-foreground text-sm">‹</span>
            </button>
            <span class="text-sm font-medium">
              {{ formatter.custom(toDate(monthYearAnchor as DateValue), { month: 'short', year: 'numeric' }) }}
            </span>
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Next"
              @click="shiftAnchor(1)"
            >
              <span class="text-muted-foreground text-sm">›</span>
            </button>
          </div>
          <div class="flex flex-col gap-1">
            <button
              type="button"
              v-for="(week, i) in weekGrid"
              :key="i"
              data-uipkge
              data-slot="week-picker-cell"
              :data-active="isWeekSelected(week.start)"
              :disabled="isWeekDisabled(week.start)"
              :aria-pressed="isWeekSelected(week.start)"
              :aria-disabled="isWeekDisabled(week.start) || undefined"
              class="hover:bg-accent focus-visible:ring-ring flex items-center justify-between rounded px-3 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
              :class="isWeekSelected(week.start) ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
              @click="pickWeek(week.start)"
            >
              <span class="font-medium">Week {{ week.weekNum }}</span>
              <span
                class="text-muted-foreground text-xs"
                :class="isWeekSelected(week.start) ? 'text-primary-foreground' : ''"
              >
                {{ week.start.day }} {{ formatter.custom(toDate(week.start), { month: 'short' }) }} – {{ week.end.day }}
                {{ formatter.custom(toDate(week.end), { month: 'short' }) }}
              </span>
            </button>
          </div>
        </template>

        <!-- Quarter picker -->
        <template v-else-if="picker === 'quarter'">
          <div class="mb-3 flex items-center justify-between">
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Previous"
              @click="shiftAnchor(-1)"
            >
              <span class="text-muted-foreground text-sm">‹</span>
            </button>
            <span class="text-sm font-medium">{{ monthYearAnchor.year }}</span>
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Next"
              @click="shiftAnchor(1)"
            >
              <span class="text-muted-foreground text-sm">›</span>
            </button>
          </div>
          <div class="grid grid-cols-2 gap-2">
            <button
              type="button"
              v-for="(label, q) in quarterLabels"
              :key="q"
              data-uipkge
              data-slot="quarter-picker-cell"
              :data-active="isQuarterSelected(q)"
              :disabled="isQuarterDisabled(q)"
              :aria-pressed="isQuarterSelected(q)"
              :aria-disabled="isQuarterDisabled(q) || undefined"
              class="hover:bg-accent focus-visible:ring-ring rounded px-4 py-6 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
              :class="isQuarterSelected(q) ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
              @click="pickQuarter(q)"
            >
              {{ label }}
            </button>
          </div>
        </template>

        <!-- Month / Year picker -->
        <template v-else>
          <div class="mb-3 flex items-center justify-between">
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Previous"
              @click="shiftAnchor(-1)"
            >
              <span class="text-muted-foreground text-sm">‹</span>
            </button>
            <span class="text-sm font-medium">
              {{ picker === 'month' ? monthYearAnchor.year : `${yearGrid[0]} – ${yearGrid[yearGrid.length - 1]}` }}
            </span>
            <button
              type="button"
              class="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
              aria-label="Next"
              @click="shiftAnchor(1)"
            >
              <span class="text-muted-foreground text-sm">›</span>
            </button>
          </div>
          <div v-if="picker === 'month'" class="grid grid-cols-3 gap-2">
            <button
              type="button"
              v-for="(label, m) in monthLabels"
              :key="m"
              :disabled="isMonthDisabled(m)"
              data-uipkge
              data-slot="month-picker-cell"
              :data-active="isMonthSelected(m)"
              :aria-pressed="isMonthSelected(m)"
              :aria-disabled="isMonthDisabled(m) || undefined"
              class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
              :class="isMonthSelected(m) ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
              @click="pickMonth(m)"
            >
              {{ label }}
            </button>
          </div>
          <div v-else class="grid grid-cols-3 gap-2">
            <button
              type="button"
              v-for="y in yearGrid"
              :key="y"
              :disabled="isYearDisabled(y)"
              data-uipkge
              data-slot="year-picker-cell"
              :data-active="isYearSelected(y)"
              :aria-pressed="isYearSelected(y)"
              :aria-disabled="isYearDisabled(y) || undefined"
              class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-2 text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
              :class="isYearSelected(y) ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
              @click="pickYear(y)"
            >
              {{ y }}
            </button>
          </div>
        </template>
      </div>
      <div v-else class="flex">
        <aside v-if="presetGroups.length" class="flex w-40 flex-col gap-1 border-r p-2">
          <template v-for="(group, gIdx) in presetGroups" :key="gIdx">
            <div
              v-if="group.category"
              class="text-muted-foreground px-2 pt-1 text-xs font-semibold tracking-wider uppercase"
            >
              {{ group.category }}
            </div>
            <button
              type="button"
              v-for="p in group.presets"
              :key="p.label"
              class="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
              @click="applyPreset(p)"
            >
              {{ p.label }}
            </button>
          </template>
        </aside>
        <RangeCalendar
          v-if="type === 'range'"
          :model-value="calendarValue"
          :placeholder="placeholderDate"
          :number-of-months="effectiveNumberOfMonths"
          :week-starts-on="weekStartsOn"
          :fixed-weeks="fixedWeeks"
          :min-value="minDate"
          :max-value="maxDate"
          :read-only="readOnly"
          :is-date-disabled="disabledDate"
          @update:model-value="handleCalendarUpdate"
        />
        <Calendar
          v-else
          :model-value="calendarValue"
          :type="calendarType"
          :placeholder="placeholderDate"
          :number-of-months="effectiveNumberOfMonths"
          :week-starts-on="weekStartsOn"
          :fixed-weeks="fixedWeeks"
          :min-value="minDate"
          :max-value="maxDate"
          :read-only="readOnly"
          :layout="calendarLayout"
          :is-date-disabled="disabledDate"
          @update:model-value="handleCalendarUpdate"
        >
          <template #cell="{ day, month }">
            <slot name="cell" :day="day" :month="month">
              {{ day.day }}
            </slot>
          </template>
        </Calendar>
        <div v-if="showTime" class="flex flex-col border-l">
          <div class="flex items-center justify-between border-b px-3 py-2">
            <span class="text-muted-foreground text-xs tracking-widest uppercase">Time</span>
            <button
              type="button"
              class="text-primary focus-visible:ring-ring rounded px-2 py-1.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
              @click="applyAndClose"
            >
              Done
            </button>
          </div>
          <TimeColumns
            :model-value="timeForColumns"
            :format="timeFormat"
            :use24-hour="use24Hour"
            :minute-step="minuteStep"
            :second-step="secondStep"
            :visible="open"
            :disabled-hours="disabledTimeConfig?.disabledHours"
            :disabled-minutes="disabledTimeConfig?.disabledMinutes"
            :disabled-seconds="disabledTimeConfig?.disabledSeconds"
            @update:model-value="handleTimeUpdate"
          />
        </div>
      </div>

      <!-- Need confirm footer -->
      <div v-if="needConfirm" class="flex items-center justify-end gap-2 border-t px-3 py-2">
        <button
          type="button"
          class="hover:bg-accent focus-visible:ring-ring rounded px-3 py-1.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
          @click="cancelPreview"
        >
          Cancel
        </button>
        <button
          type="button"
          class="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring rounded px-3 py-1.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
          @click="commitPreview"
        >
          OK
        </button>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/date-picker/index.ts`

```ts
export { default as DatePicker } from './DatePicker.vue'
export type {
  DatePickerType,
  DatePickerPicker,
  DatePickerStatus,
  DatePickerLayout,
  DatePickerSize,
  DatePickerPlacement,
  DatePickerPreset,
  DisabledTimeResult,
} from './DatePicker.vue'

```

## dialog

- type: `registry:ui`
- description: Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `button`

### `packages/registry-vue/components/dialog/Dialog.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
import { DialogRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<DialogRootProps>()
const emits = defineEmits<DialogRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)

// Merge forwarded with slotProps to ensure state is passed through
const mergedProps = computed(() => ({
  ...forwarded.value,
}))
</script>

<template>
  <DialogRoot v-slot="slotProps" v-bind="mergedProps">
    <slot v-bind="slotProps" />
  </DialogRoot>
</template>

```

### `packages/registry-vue/components/dialog/DialogClose.vue`

```vue
<script setup lang="ts">
import type { DialogCloseProps } from 'reka-ui'
import { DialogClose } from 'reka-ui'

const props = defineProps<DialogCloseProps>()
</script>

<template>
  <DialogClose data-uipkge data-slot="dialog-close" v-bind="props">
    <slot />
  </DialogClose>
</template>

```

### `packages/registry-vue/components/dialog/DialogContent.vue`

```vue
<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import DialogOverlay from './DialogOverlay.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<DialogContentProps & { class?: HTMLAttributes['class']; showCloseButton?: boolean }>(),
  {
    showCloseButton: true,
  },
)
const emits = defineEmits<DialogContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <DialogOverlay />
    <DialogContent
      data-uipkge
      data-slot="dialog-content"
      role="dialog"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          props.class,
        )
      "
    >
      <slot />

      <DialogClose
        v-if="showCloseButton"
        data-uipkge
        data-slot="dialog-close"
        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
      >
        <X />
        <span class="sr-only">Close</span>
      </DialogClose>
    </DialogContent>
  </DialogPortal>
</template>

```

### `packages/registry-vue/components/dialog/DialogDescription.vue`

```vue
<script setup lang="ts">
import type { DialogDescriptionProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogDescription, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DialogDescription
    data-uipkge
    data-slot="dialog-description"
    v-bind="forwardedProps"
    :class="cn('text-muted-foreground text-sm', props.class)"
  >
    <slot />
  </DialogDescription>
</template>

```

### `packages/registry-vue/components/dialog/DialogFooter.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { DialogClose } from 'reka-ui'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    showCloseButton?: boolean
  }>(),
  {
    showCloseButton: false,
  },
)
</script>

<template>
  <div
    data-uipkge
    data-slot="dialog-footer"
    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
  >
    <slot />
    <DialogClose v-if="showCloseButton" as-child>
      <Button variant="outline"> Close </Button>
    </DialogClose>
  </div>
</template>

```

### `packages/registry-vue/components/dialog/DialogHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="dialog-header" :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/dialog/DialogOverlay.vue`

```vue
<script setup lang="ts">
import type { DialogOverlayProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogOverlay } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <DialogOverlay
    data-uipkge
    data-slot="dialog-overlay"
    v-bind="delegatedProps"
    :class="
      cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',
        props.class,
      )
    "
  >
    <slot />
  </DialogOverlay>
</template>

```

### `packages/registry-vue/components/dialog/DialogScrollContent.vue`

```vue
<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DialogContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <DialogOverlay
      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50 grid place-items-center overflow-y-auto"
    >
      <DialogContent
        :class="
          cn(
            'bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
            props.class,
          )
        "
        v-bind="{ ...$attrs, ...forwarded }"
        @pointer-down-outside="
          (event) => {
            const originalEvent = event.detail.originalEvent
            const target = originalEvent.target as HTMLElement
            if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
              event.preventDefault()
            }
          }
        "
      >
        <slot />

        <DialogClose class="hover:bg-secondary absolute top-4 right-4 rounded-md p-0.5 transition-colors duration-200">
          <X class="h-4 w-4" />
          <span class="sr-only">Close</span>
        </DialogClose>
      </DialogContent>
    </DialogOverlay>
  </DialogPortal>
</template>

```

### `packages/registry-vue/components/dialog/DialogTitle.vue`

```vue
<script setup lang="ts">
import type { DialogTitleProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogTitle, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DialogTitle
    data-uipkge
    data-slot="dialog-title"
    v-bind="forwardedProps"
    :class="cn('text-lg leading-none font-semibold', props.class)"
  >
    <slot />
  </DialogTitle>
</template>

```

### `packages/registry-vue/components/dialog/DialogTrigger.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { DialogTrigger } from 'reka-ui'

const props = defineProps<{
  class?: HTMLAttributes['class']
  asChild?: boolean
  dialog?: any
}>()
</script>

<template>
  <DialogTrigger data-uipkge data-slot="dialog-trigger" :class="props.class" :as-child="props.asChild">
    <slot />
  </DialogTrigger>
</template>

```

### `packages/registry-vue/components/dialog/index.ts`

```ts
export { default as Dialog } from './Dialog.vue'
export { default as DialogClose } from './DialogClose.vue'
export { default as DialogContent } from './DialogContent.vue'
export { default as DialogDescription } from './DialogDescription.vue'
export { default as DialogFooter } from './DialogFooter.vue'
export { default as DialogHeader } from './DialogHeader.vue'
export { default as DialogOverlay } from './DialogOverlay.vue'
export { default as DialogScrollContent } from './DialogScrollContent.vue'
export { default as DialogTitle } from './DialogTitle.vue'
export { default as DialogTrigger } from './DialogTrigger.vue'

```

## dock

- type: `registry:ui`
- description: macOS-style dock menu with magnification on hover. Items expand as the cursor approaches using a cosine bell curve. Supports an items array (icon + label + handler), magnification scale, base size, tooltips on hover, click handlers, and an active state indicator.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/dock/Dock.vue`

```vue
<script setup lang="ts">
import { computed, ref, type Component, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export interface DockItem {
  /** Unique id for the item. */
  id: string
  /** Lucide icon component to render. */
  icon: Component
  /** Label shown in the tooltip on hover. */
  label: string
  /** Click handler. */
  handler?: () => void
  /** Whether this item is the active one. */
  active?: boolean
}

interface Props {
  /** Dock items. */
  items: DockItem[]
  /** Base icon size in pixels. Default 48. */
  baseSize?: number
  /** Peak magnification scale as the cursor hovers directly over an item. Default 1.6. */
  magnification?: number
  /** Pixel radius within which items magnify. Default 120. */
  distance?: number
  /** Orientation. Only 'horizontal' (bottom dock) is supported. */
  orientation?: 'horizontal'
  /** Show the tooltip label on hover. Default true. */
  showTooltips?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  baseSize: 48,
  magnification: 1.6,
  distance: 120,
  orientation: 'horizontal',
  showTooltips: true,
})

const mouseX = ref<number | null>(null)
const hoveredId = ref<string | null>(null)

function onMove(e: MouseEvent) {
  mouseX.value = e.clientX
}

function onLeave() {
  mouseX.value = null
  hoveredId.value = null
}

function sizeFor(item: DockItem, index: number): number {
  if (mouseX.value === null) return props.baseSize
  const el = itemRefs.value[index]
  if (!el) return props.baseSize
  const rect = el.getBoundingClientRect()
  const center = rect.left + rect.width / 2
  const dist = Math.abs(mouseX.value - center)
  if (dist > props.distance) return props.baseSize
  // Cosine bell curve so magnification falls off smoothly.
  const t = 1 - dist / props.distance
  const scale = 1 + (props.magnification - 1) * t
  return props.baseSize * scale
}

const itemRefs = ref<HTMLElement[]>([])

function setRef(el: any, index: number) {
  if (el) itemRefs.value[index] = el as HTMLElement
}

const sizes = computed(() => props.items.map((_, i) => sizeFor(props.items[i]!, i)))
</script>

<template>
  <div
    data-uipkge
    data-slot="dock"
    :data-orientation="orientation"
    :class="
      cn(
        'border-border/60 bg-background/60 flex items-end justify-center gap-3 rounded-2xl border px-3 py-2 backdrop-blur-md',
        props.class,
      )
    "
    @mousemove="onMove"
    @mouseleave="onLeave"
  >
    <div
      v-for="(item, index) in items"
      :key="item.id"
      :ref="(el) => setRef(el, index)"
      data-slot="dock-item"
      :data-active="item.active ? '' : undefined"
      role="button"
      tabindex="0"
      :aria-label="item.label"
      :aria-current="item.active ? 'true' : undefined"
      class="group focus-visible:ring-ring/50 relative flex shrink-0 cursor-pointer items-end justify-center rounded-xl outline-none focus-visible:ring-[3px]"
      @mouseenter="hoveredId = item.id"
      @mouseleave="hoveredId = null"
      @click="item.handler?.()"
      @keydown.enter="item.handler?.()"
      @keydown.space.prevent="item.handler?.()"
    >
      <!-- Tooltip -->
      <span
        v-if="showTooltips && hoveredId === item.id"
        class="border-border bg-popover text-popover-foreground pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border px-2 py-1 text-xs whitespace-nowrap shadow-md"
      >
        {{ item.label }}
      </span>

      <!-- Icon tile -->
      <span
        :class="
          cn(
            'flex items-center justify-center rounded-xl border transition-[width,height] duration-100 ease-out will-change-[width,height]',
            item.active
              ? 'border-primary/40 bg-primary/10 text-primary'
              : 'border-border/50 bg-muted/40 text-foreground hover:bg-muted',
          )
        "
        :style="{ width: `${sizes[index]}px`, height: `${sizes[index]}px` }"
      >
        <component :is="item.icon" :style="{ width: `${sizes[index] * 0.5}px`, height: `${sizes[index] * 0.5}px` }" />
      </span>

      <!-- Active indicator dot -->
      <span v-if="item.active" class="bg-primary absolute -bottom-1.5 size-1 rounded-full" aria-hidden="true" />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/dock/index.ts`

```ts
export { default as Dock } from './Dock.vue'
export type { DockItem } from './Dock.vue'

```

## dropdown-menu

- type: `registry:ui`
- description: Floating menu launched from a trigger button — for account switchers, row actions, editor menus, and any short list of commands. Supports labels, icons, separators, keyboard shortcuts, checkbox/radio items, and nested submenus. Built on reka-ui; ARIA + keyboard navigation handled.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/dropdown-menu/DropdownMenu.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<DropdownMenuRootProps>()
const emits = defineEmits<DropdownMenuRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuRoot v-slot="slotProps" data-uipkge data-slot="dropdown-menu" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </DropdownMenuRoot>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuCheckboxItem.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Check } from 'lucide-vue-next'
import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuCheckboxItem
    data-uipkge
    data-slot="dropdown-menu-checkbox-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuItemIndicator>
        <slot name="indicator-icon">
          <Check class="size-4" aria-hidden="true" />
        </slot>
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuCheckboxItem>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuContent.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
  sideOffset: 4,
})
const emits = defineEmits<DropdownMenuContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuPortal>
    <DropdownMenuContent
      data-uipkge
      data-slot="dropdown-menu-content"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          props.class,
        )
      "
    >
      <slot />
    </DropdownMenuContent>
  </DropdownMenuPortal>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuGroup.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuGroupProps } from 'reka-ui'
import { DropdownMenuGroup } from 'reka-ui'

const props = defineProps<DropdownMenuGroupProps>()
</script>

<template>
  <DropdownMenuGroup data-uipkge data-slot="dropdown-menu-group" v-bind="props">
    <slot />
  </DropdownMenuGroup>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuItem.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuItem, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<
    DropdownMenuItemProps & {
      class?: HTMLAttributes['class']
      inset?: boolean
      variant?: 'default' | 'destructive'
    }
  >(),
  {
    variant: 'default',
  },
)

const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuItem
    data-uipkge
    data-slot="dropdown-menu-item"
    :data-inset="inset ? '' : undefined"
    :data-variant="variant"
    v-bind="forwardedProps"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <slot />
  </DropdownMenuItem>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuLabel.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuLabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuLabel, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class', 'inset')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuLabel
    data-uipkge
    data-slot="dropdown-menu-label"
    :data-inset="inset ? '' : undefined"
    v-bind="forwardedProps"
    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
  >
    <slot />
  </DropdownMenuLabel>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuRadioGroup.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui'
import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<DropdownMenuRadioGroupProps>()
const emits = defineEmits<DropdownMenuRadioGroupEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuRadioGroup data-uipkge data-slot="dropdown-menu-radio-group" v-bind="forwarded">
    <slot />
  </DropdownMenuRadioGroup>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuRadioItem.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Circle } from 'lucide-vue-next'
import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()

const emits = defineEmits<DropdownMenuRadioItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuRadioItem
    data-uipkge
    data-slot="dropdown-menu-radio-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuItemIndicator>
        <slot name="indicator-icon">
          <Circle class="size-2 fill-current" />
        </slot>
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuRadioItem>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuSeparator.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuSeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuSeparator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  DropdownMenuSeparatorProps & {
    class?: HTMLAttributes['class']
  }
>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <DropdownMenuSeparator
    data-uipkge
    data-slot="dropdown-menu-separator"
    v-bind="delegatedProps"
    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
  />
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuShortcut.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="dropdown-menu-shortcut"
    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuSub.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui'
import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<DropdownMenuSubProps>()
const emits = defineEmits<DropdownMenuSubEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuSub v-slot="slotProps" data-uipkge data-slot="dropdown-menu-sub" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </DropdownMenuSub>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuSubContent.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<DropdownMenuSubContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DropdownMenuSubContent
    data-uipkge
    data-slot="dropdown-menu-sub-content"
    v-bind="forwarded"
    :class="
      cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        props.class,
      )
    "
  >
    <slot />
  </DropdownMenuSubContent>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuSubTrigger.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuSubTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class', 'inset')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <DropdownMenuSubTrigger
    data-uipkge
    data-slot="dropdown-menu-sub-trigger"
    v-bind="forwardedProps"
    :data-inset="inset ? '' : undefined"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <slot />
    <ChevronRight class="ml-auto size-4" />
  </DropdownMenuSubTrigger>
</template>

```

### `packages/registry-vue/components/dropdown-menu/DropdownMenuTrigger.vue`

```vue
<script setup lang="ts">
import type { DropdownMenuTriggerProps } from 'reka-ui'
import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'

const props = defineProps<DropdownMenuTriggerProps>()

const forwardedProps = useForwardProps(props)
</script>

<template>
  <DropdownMenuTrigger data-uipkge data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
    <slot />
  </DropdownMenuTrigger>
</template>

```

### `packages/registry-vue/components/dropdown-menu/index.ts`

```ts
export { default as DropdownMenu } from './DropdownMenu.vue'

export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
export { DropdownMenuPortal } from 'reka-ui'

```

## empty-state

- type: `registry:ui`
- description: Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.

### `packages/registry-vue/components/empty-state/EmptyState.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  icon?: Component
  title?: string
  description?: string
  role?: 'status' | 'alert'
  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  class?: string
}>()
</script>

<template>
  <div
    :class="cn('flex flex-col items-center py-12 text-center', props.class)"
    :role="props.role ?? 'status'"
    aria-live="polite"
  >
    <component :is="icon" v-if="icon" class="text-muted-foreground mx-auto mb-3 size-10" aria-hidden="true" />
    <component :is="props.headingTag ?? 'h3'" v-if="title" class="text-foreground font-medium">
      {{ title }}
    </component>
    <p v-if="description" class="text-muted-foreground mt-1 max-w-sm text-sm">{{ description }}</p>
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/empty-state/index.ts`

```ts
export { default as EmptyState } from './EmptyState.vue'

```

## event-calendar

- type: `registry:block`
- description: Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. v-model:events binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless composable.
- npm deps: `lucide-vue-next`
- registry deps: `use-month-grid`, `button`, `dialog`, `select`, `avatar`, `separator`, `skeleton`, `input`, `context-menu`

### `packages/registry-vue/blocks/event-calendar/EventCalendar.vue`

```vue
<script setup lang="ts">
/**
 * EventCalendar -- a full month-view event calendar with stats strip,
 * drag/shift range select, side rail (selected day or range summary),
 * upcoming list, and per-event/per-cell context menus.
 *
 * Configurable surface:
 *   - v-model:events  CalendarEvent[]   the source of truth
 *   - :event-types    Record<typeKey, EventTypeMeta>  visual config per type
 *   - :initial-date   YYYY-MM-DD        which month opens first
 *   - :week-starts-on 0 | 1              Sunday vs Monday
 *   - :loading                          skeleton state during fetch
 *   - :title / :description / :show-* toggles per pane
 *
 * Slots:
 *   - #header-actions     extra controls to the right of search/view/new
 *   - #event-dialog       full override of the detail dialog body
 *   - #empty              text shown when a selected day has no events
 *
 * Emits:
 *   - event-click(event)
 *   - event-create(dateKey)             requested from "New event" or
 *                                       the per-cell context menu
 *   - event-edit / event-duplicate / event-delete(event)
 *   - range-change({ lo, hi })          fires when the selection range moves
 */
import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import {
  ChevronLeft,
  ChevronRight,
  Plus,
  Clock,
  MapPin,
  Users,
  Search,
  CalendarDays,
  ListFilter,
  Sparkles,
  Copy,
  X,
  CalendarPlus,
  ArrowRight,
  MousePointer2,
  Pencil,
  Trash2,
  Eye,
  CopyPlus,
} from 'lucide-vue-next'
import { useMonthGrid, dateFromKey } from '@/composables/useMonthGrid'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
  ContextMenuLabel,
} from '@/components/ui/context-menu'
import type { CalendarEvent, EventTypeMeta } from './types'
import { defaultEventTypes } from './defaults'

const props = withDefaults(
  defineProps<{
    /** Source of truth. Pair with v-model:events. */
    events?: CalendarEvent[]
    /** Visual + semantic theme per event type. Falls back to defaultEventTypes. */
    eventTypes?: Record<string, EventTypeMeta>
    /** YYYY-MM-DD -- month to open first. Defaults to today. */
    initialDate?: string
    /** 0 = Sunday (default), 1 = Monday. */
    weekStartsOn?: 0 | 1
    /** Show the skeleton placeholders instead of cells / rail rows. */
    loading?: boolean
    title?: string
    description?: string
    /** Default = true. Stats strip across the top. */
    showStats?: boolean
    /** Default = true. Side rail to the right of the grid. */
    showSideRail?: boolean
    /** Default = true. Search input in the header. */
    showSearch?: boolean
    /** Default = true. Month/Week/Day select. Week/Day not implemented yet
     *  -- the select is purely visual until you wire up the modes. */
    showViewSelect?: boolean
    /** Default = true. Legend strip under the grid. */
    showLegend?: boolean
    /** Default = true. "Up next" pane under the side rail. */
    showUpcoming?: boolean
  }>(),
  {
    events: () => [],
    eventTypes: () => defaultEventTypes,
    weekStartsOn: 0,
    loading: false,
    title: 'Calendar',
    description: 'Schedule, meetings, and deadlines. Drag or shift-click to select a range.',
    showStats: true,
    showSideRail: true,
    showSearch: true,
    showViewSelect: true,
    showLegend: true,
    showUpcoming: true,
  },
)

const emit = defineEmits<{
  'update:events': [value: CalendarEvent[]]
  'event-click': [event: CalendarEvent]
  'event-create': [dateKey: string]
  'event-edit': [event: CalendarEvent]
  'event-duplicate': [event: CalendarEvent]
  'event-delete': [event: CalendarEvent]
  'range-change': [bounds: { lo: string; hi: string }]
}>()

const view = ref<'month' | 'week' | 'day'>('month')
const eventOpen = ref(false)
const selectedEvent = ref<CalendarEvent | null>(null)
const search = ref('')

const {
  todayKey,
  cursor,
  monthLabel,
  gridDays,
  weekdays,
  rangeStart,
  rangeBounds,
  rangeDayCount,
  isRange,
  inRange,
  prevMonth,
  nextMonth,
  goToToday,
  selectWeekOf,
  clearRange,
  onCellMouseDown,
  onCellMouseEnter,
  endDrag,
} = useMonthGrid({ initialDate: props.initialDate, weekStartsOn: props.weekStartsOn })

watch(rangeBounds, (b) => emit('range-change', b))

// Fall through to a neutral style for unknown event types so the calendar
// doesn't crash when a consumer passes a type that's missing from the map.
const neutralMeta: EventTypeMeta = {
  label: 'Event',
  icon: CalendarDays,
  chip: 'bg-muted text-muted-foreground ring-muted-foreground/20',
  bar: 'bg-muted-foreground',
  dot: 'bg-muted-foreground',
  glow: 'bg-muted-foreground/10',
  text: 'text-muted-foreground',
  ring: 'hover:ring-muted-foreground/30',
}
function metaFor(type: string): EventTypeMeta {
  return props.eventTypes[type] ?? neutralMeta
}

const typeKeys = computed(() => Object.keys(props.eventTypes))

const filtered = computed(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return props.events
  return props.events.filter(
    (e) =>
      e.title.toLowerCase().includes(q) ||
      (e.description ?? '').toLowerCase().includes(q) ||
      (e.location ?? '').toLowerCase().includes(q),
  )
})

const eventsByDate = computed(() => {
  const map = new Map<string, CalendarEvent[]>()
  for (const e of filtered.value) {
    if (!map.has(e.date)) map.set(e.date, [])
    map.get(e.date)!.push(e)
  }
  for (const arr of map.values()) arr.sort((a, b) => a.start.localeCompare(b.start))
  return map
})

const monthCounts = computed(() => {
  const y = cursor.value.getFullYear()
  const m = cursor.value.getMonth()
  const out: Record<string, number> & { total: number } = { total: 0 }
  for (const k of typeKeys.value) out[k] = 0
  for (const e of props.events) {
    const d = new Date(e.date)
    if (d.getFullYear() === y && d.getMonth() === m) {
      if (out[e.type] !== undefined) out[e.type]!++
      out.total++
    }
  }
  return out
})

const typeStats = computed(() => {
  const y = cursor.value.getFullYear()
  const m = cursor.value.getMonth()
  const out: Record<string, { weeks: number[]; next: CalendarEvent | null }> = {}
  for (const k of typeKeys.value) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null }
  const firstOffset = new Date(y, m, 1).getDay()

  for (const e of props.events) {
    const d = new Date(e.date)
    if (d.getFullYear() === y && d.getMonth() === m && out[e.type]) {
      const week = Math.floor((d.getDate() - 1 + firstOffset) / 7)
      out[e.type]!.weeks[week]!++
    }
  }
  for (const t of typeKeys.value) {
    const next = props.events
      .filter((e) => e.type === t && e.date >= todayKey)
      .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))[0]
    out[t]!.next = next ?? null
  }
  return out
})

function fmtNextDate(key: string) {
  if (key === todayKey) return 'Today'
  return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

const rangeEvents = computed(() => {
  const { lo, hi } = rangeBounds.value
  return filtered.value
    .filter((e) => e.date >= lo && e.date <= hi)
    .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))
})

const rangeTypeCounts = computed(() => {
  const init: Record<string, number> = {}
  for (const k of typeKeys.value) init[k] = 0
  for (const e of rangeEvents.value) {
    if (init[e.type] !== undefined) init[e.type]!++
  }
  return init
})

const selectedDayEvents = computed(() => eventsByDate.value.get(rangeStart.value) ?? [])

const upcoming = computed(() =>
  filtered.value
    .filter((e) => e.date > todayKey)
    .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))
    .slice(0, 4),
)

function openEvent(e: CalendarEvent) {
  selectedEvent.value = e
  eventOpen.value = true
  emit('event-click', e)
}

function copyDate(key: string) {
  if (typeof navigator !== 'undefined' && navigator.clipboard) {
    navigator.clipboard.writeText(key).catch(() => {
      /* clipboard may be denied; nothing to do */
    })
  }
}

function fmtDayLong(key: string) {
  return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })
}
function fmtDayShort(key: string) {
  return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

function initials(name: string) {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .slice(0, 2)
}

function cellRangeClass(key: string, inMonth: boolean) {
  const { lo, hi } = rangeBounds.value
  if (!inRange(key)) return inMonth ? 'bg-background hover:bg-accent/40' : 'bg-muted/20 hover:bg-muted/30'
  if (key === lo && key === hi) return 'bg-accent/30 ring-1 ring-inset ring-primary/60'
  let cls = 'bg-primary/10 hover:bg-primary/15'
  if (key === lo) cls += ' ring-1 ring-inset ring-primary/60'
  if (key === hi) cls += ' ring-1 ring-inset ring-primary/60'
  return cls
}

// Window listeners are also used inside useMonthGrid for mouseup; mirror
// them at the block level so the drag also ends when the user releases
// the mouse outside the grid surface.
onMounted(() => {
  if (typeof window !== 'undefined') {
    window.addEventListener('mouseup', endDrag)
    window.addEventListener('mouseleave', endDrag)
  }
})
onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('mouseup', endDrag)
    window.removeEventListener('mouseleave', endDrag)
  }
})
</script>

<template>
  <div class="flex flex-col gap-5" @mouseup="endDrag">
    <!-- Header -->
    <header class="flex flex-wrap items-end justify-between gap-4">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight">{{ title }}</h1>
        <p v-if="description" class="text-muted-foreground mt-1 text-sm">{{ description }}</p>
      </div>
      <div class="flex items-center gap-2">
        <div v-if="showSearch" class="relative">
          <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
          <Input v-model="search" placeholder="Search events" class="h-8 w-56 pl-8 text-xs" />
        </div>
        <Select v-if="showViewSelect" v-model="view">
          <SelectTrigger class="h-8 w-24 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="month">Month</SelectItem>
            <SelectItem value="week">Week</SelectItem>
            <SelectItem value="day">Day</SelectItem>
          </SelectContent>
        </Select>
        <slot name="header-actions">
          <Button size="sm" class="gap-1.5" @click="emit('event-create', rangeStart)">
            <Plus class="size-3.5" />
            New event
          </Button>
        </slot>
      </div>
    </header>

    <!-- Stats strip -->
    <div
      v-if="showStats"
      class="grid grid-cols-1 gap-3"
      :class="`sm:grid-cols-2 lg:grid-cols-${Math.min(typeKeys.length, 4)}`"
    >
      <button
        v-for="key in typeKeys"
        :key="key"
        type="button"
        :class="[
          'group bg-card/40 hover:bg-card relative isolate flex flex-col overflow-hidden rounded-xl border p-4 text-left ring-1 ring-transparent backdrop-blur transition-all ring-inset hover:-translate-y-px hover:shadow-lg',
          eventTypes[key]!.ring,
        ]"
        @click="
          search =
            eventTypes[key]!.label.toLowerCase() === search.toLowerCase() ? '' : eventTypes[key]!.label.toLowerCase()
        "
      >
        <component
          :is="eventTypes[key]!.icon"
          :class="[
            'pointer-events-none absolute -top-4 -right-4 size-24 opacity-[0.06] transition-opacity group-hover:opacity-[0.12]',
            eventTypes[key]!.text,
          ]"
        />
        <div
          :class="[
            'pointer-events-none absolute -right-12 -bottom-12 size-32 rounded-full blur-2xl',
            eventTypes[key]!.glow,
          ]"
        />

        <div class="flex items-center justify-between gap-2">
          <div class="flex items-center gap-1.5">
            <span :class="['size-1.5 rounded-full', eventTypes[key]!.dot]" />
            <p class="text-muted-foreground text-[10px] font-medium tracking-[0.14em] uppercase">
              {{ eventTypes[key]!.label }}
            </p>
          </div>
          <div :class="['flex size-7 items-center justify-center rounded-md ring-1 ring-inset', eventTypes[key]!.chip]">
            <component :is="eventTypes[key]!.icon" class="size-3.5" />
          </div>
        </div>

        <div class="mt-2 flex items-baseline gap-1.5">
          <p class="text-3xl leading-none font-semibold tabular-nums">{{ monthCounts[key] ?? 0 }}</p>
          <p class="text-muted-foreground text-[10px] tracking-wider uppercase">this month</p>
        </div>

        <div class="mt-3 flex h-6 items-end gap-1">
          <span
            v-for="(n, i) in typeStats[key]!.weeks.slice(0, 6)"
            :key="i"
            :class="[
              'flex-1 rounded-sm transition-colors',
              n > 0 ? eventTypes[key]!.bar : 'bg-muted/40',
              n > 0 && 'opacity-70 group-hover:opacity-100',
            ]"
            :style="{ height: n > 0 ? `${Math.min(100, 30 + n * 35)}%` : '20%' }"
            :title="`Week ${i + 1}: ${n} ${eventTypes[key]!.label.toLowerCase()}${n === 1 ? '' : 's'}`"
          />
        </div>

        <div class="border-border/50 mt-3 min-h-[2.25rem] border-t pt-2">
          <template v-if="typeStats[key]!.next">
            <p class="text-muted-foreground text-[10px] tracking-wider uppercase">
              Next <span :class="eventTypes[key]!.text">{{ fmtNextDate(typeStats[key]!.next!.date) }}</span>
            </p>
            <p class="mt-0.5 truncate text-xs font-medium">{{ typeStats[key]!.next!.title }}</p>
          </template>
          <template v-else>
            <p class="text-muted-foreground text-[10px] tracking-wider uppercase">No upcoming</p>
            <p class="text-muted-foreground/70 mt-0.5 text-xs">All clear</p>
          </template>
        </div>
      </button>
    </div>

    <!-- Main: calendar + side rail -->
    <div :class="['grid gap-4', showSideRail && 'lg:grid-cols-[minmax(0,1fr)_320px]']">
      <!-- Month grid -->
      <div class="bg-card/40 overflow-hidden rounded-xl border">
        <div class="bg-muted/30 flex flex-wrap items-center justify-between gap-3 border-b px-4 py-2.5">
          <div class="flex items-center gap-2">
            <Button variant="outline" size="icon" class="size-7" @click="prevMonth"
              ><ChevronLeft class="size-4"
            /></Button>
            <Button variant="outline" size="icon" class="size-7" @click="nextMonth"
              ><ChevronRight class="size-4"
            /></Button>
            <Button variant="ghost" size="sm" class="h-7 text-xs" @click="goToToday">Today</Button>
            <h2 class="ml-2 text-sm font-semibold">{{ monthLabel }}</h2>
          </div>
          <div class="text-muted-foreground flex items-center gap-3 text-[11px]">
            <div
              v-if="isRange"
              class="bg-primary/10 text-primary ring-primary/20 flex items-center gap-1.5 rounded-full px-2 py-0.5 ring-1 ring-inset"
            >
              <MousePointer2 class="size-3" />
              <span>{{ rangeDayCount }} days, {{ rangeEvents.length }} events</span>
              <button class="hover:text-foreground ml-0.5" @click="clearRange"><X class="size-3" /></button>
            </div>
            <div class="flex items-center gap-1.5">
              <Sparkles class="size-3" />
              <span>{{ monthCounts.total }} event{{ monthCounts.total === 1 ? '' : 's' }} this month</span>
            </div>
          </div>
        </div>

        <div class="bg-muted/10 text-muted-foreground grid grid-cols-7 border-b text-[10px] tracking-wider uppercase">
          <div v-for="w in weekdays" :key="w" class="px-2 py-2 font-medium">{{ w }}</div>
        </div>

        <div class="grid grid-cols-7 select-none">
          <template v-if="loading">
            <div v-for="i in 42" :key="i" class="h-24 border-r border-b p-1.5 last:border-r-0">
              <Skeleton class="h-3 w-6" />
              <Skeleton class="mt-2 h-3 w-full" />
            </div>
          </template>
          <template v-else>
            <ContextMenu v-for="(d, i) in gridDays" :key="d.key">
              <ContextMenuTrigger as-child>
                <button
                  type="button"
                  :class="[
                    'group focus-visible:ring-ring relative flex h-24 flex-col gap-1 border-r border-b p-1.5 text-left transition-colors focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none',
                    (i + 1) % 7 === 0 && 'border-r-0',
                    i >= 35 && 'border-b-0',
                    cellRangeClass(d.key, d.inMonth),
                    !d.inMonth && !inRange(d.key) && 'text-muted-foreground/60',
                  ]"
                  @mousedown="onCellMouseDown(d.key, $event)"
                  @mouseenter="onCellMouseEnter(d.key)"
                >
                  <div class="flex items-center justify-between">
                    <span
                      :class="[
                        'inline-flex size-5 items-center justify-center rounded-full text-[11px] tabular-nums',
                        d.key === todayKey && 'bg-primary text-primary-foreground font-semibold',
                        d.key !== todayKey && d.inMonth && 'text-foreground',
                        !d.inMonth && 'text-muted-foreground/60',
                      ]"
                      >{{ d.date.getDate() }}</span
                    >
                    <span
                      v-if="(eventsByDate.get(d.key)?.length ?? 0) > 0"
                      class="text-muted-foreground text-[9px] tabular-nums"
                    >
                      {{ eventsByDate.get(d.key)!.length }}
                    </span>
                  </div>
                  <div class="flex flex-col gap-0.5">
                    <ContextMenu v-for="e in (eventsByDate.get(d.key) ?? []).slice(0, 2)" :key="e.id">
                      <ContextMenuTrigger as-child>
                        <span
                          :class="[
                            'flex cursor-pointer items-center gap-1 truncate rounded px-1 py-0.5 text-[10px] ring-1 ring-inset',
                            metaFor(e.type).chip,
                          ]"
                          @mousedown.stop
                          @click.stop="openEvent(e)"
                          @contextmenu.stop
                        >
                          <span class="tabular-nums opacity-70">{{ e.start }}</span>
                          <span class="truncate">{{ e.title }}</span>
                        </span>
                      </ContextMenuTrigger>
                      <ContextMenuContent class="w-52">
                        <ContextMenuLabel class="text-muted-foreground flex items-center gap-1.5 text-[11px]">
                          <span :class="['size-1.5 rounded-full', metaFor(e.type).dot]" />
                          <span class="truncate">{{ e.title }}</span>
                        </ContextMenuLabel>
                        <ContextMenuSeparator />
                        <ContextMenuItem class="gap-2" @select="openEvent(e)">
                          <Eye class="size-3.5" /> View details
                          <ContextMenuShortcut>Enter</ContextMenuShortcut>
                        </ContextMenuItem>
                        <ContextMenuItem class="gap-2" @select="emit('event-edit', e)"
                          ><Pencil class="size-3.5" /> Edit</ContextMenuItem
                        >
                        <ContextMenuItem class="gap-2" @select="emit('event-duplicate', e)"
                          ><CopyPlus class="size-3.5" /> Duplicate</ContextMenuItem
                        >
                        <ContextMenuItem class="gap-2" @select="copyDate(e.date)">
                          <Copy class="size-3.5" /> Copy date
                        </ContextMenuItem>
                        <ContextMenuSeparator />
                        <ContextMenuItem
                          class="text-destructive focus:text-destructive gap-2"
                          @select="emit('event-delete', e)"
                        >
                          <Trash2 class="size-3.5" /> Cancel event
                        </ContextMenuItem>
                      </ContextMenuContent>
                    </ContextMenu>
                    <span
                      v-if="(eventsByDate.get(d.key)?.length ?? 0) > 2"
                      class="text-muted-foreground px-1 text-[10px]"
                    >
                      +{{ eventsByDate.get(d.key)!.length - 2 }} more
                    </span>
                  </div>
                </button>
              </ContextMenuTrigger>
              <ContextMenuContent class="w-56">
                <ContextMenuLabel class="text-muted-foreground text-[11px]">{{ fmtDayLong(d.key) }}</ContextMenuLabel>
                <ContextMenuSeparator />
                <ContextMenuItem class="gap-2" @select="emit('event-create', d.key)">
                  <CalendarPlus class="size-3.5" /> New event
                  <ContextMenuShortcut>N</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuItem class="gap-2" @select="selectWeekOf(d.key)">
                  <CalendarDays class="size-3.5" /> Select this week
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem class="gap-2" @select="copyDate(d.key)">
                  <Copy class="size-3.5" /> Copy date
                  <ContextMenuShortcut class="tabular-nums">{{ d.key }}</ContextMenuShortcut>
                </ContextMenuItem>
                <ContextMenuItem class="gap-2" @select="goToToday">
                  <ArrowRight class="size-3.5" /> Go to today
                </ContextMenuItem>
                <ContextMenuItem
                  v-if="isRange"
                  class="text-destructive focus:text-destructive gap-2"
                  @select="clearRange"
                >
                  <X class="size-3.5" /> Clear range
                </ContextMenuItem>
              </ContextMenuContent>
            </ContextMenu>
          </template>
        </div>

        <div
          v-if="showLegend"
          class="bg-muted/20 text-muted-foreground flex flex-wrap items-center gap-3 border-t px-4 py-2 text-[10px]"
        >
          <ListFilter class="size-3" />
          <div v-for="key in typeKeys" :key="key" class="flex items-center gap-1.5">
            <span :class="['size-2 rounded-full', eventTypes[key]!.dot]" />
            {{ eventTypes[key]!.label }}
          </div>
          <span class="ml-auto text-[10px]">Tip: drag or shift-click to range. Right-click for actions.</span>
        </div>
      </div>

      <!-- Side rail -->
      <aside v-if="showSideRail" class="flex flex-col gap-4">
        <div v-if="!isRange" class="bg-card/40 overflow-hidden rounded-xl border">
          <div class="bg-muted/30 border-b px-4 py-3">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-muted-foreground text-[10px] tracking-wider uppercase">
                  {{ rangeStart === todayKey ? 'Today' : 'Selected' }}
                </p>
                <p class="mt-0.5 text-sm font-semibold">{{ fmtDayLong(rangeStart) }}</p>
              </div>
              <div class="text-right">
                <p class="text-muted-foreground text-[10px] tracking-wider uppercase">Events</p>
                <p class="text-sm font-semibold tabular-nums">{{ selectedDayEvents.length }}</p>
              </div>
            </div>
          </div>
          <div class="max-h-[420px] overflow-y-auto p-3">
            <template v-if="loading">
              <div v-for="i in 3" :key="i" class="mb-2 space-y-2 rounded-lg border p-3">
                <Skeleton class="h-3 w-32" />
                <Skeleton class="h-2 w-20" />
              </div>
            </template>
            <template v-else-if="selectedDayEvents.length === 0">
              <slot name="empty">
                <div class="flex flex-col items-center justify-center gap-2 py-8 text-center">
                  <div class="bg-muted flex size-10 items-center justify-center rounded-full">
                    <CalendarDays class="text-muted-foreground size-5" />
                  </div>
                  <p class="text-sm font-medium">Nothing scheduled</p>
                  <p class="text-muted-foreground text-xs">Click a date or add a new event.</p>
                  <Button
                    size="sm"
                    variant="outline"
                    class="mt-1 h-7 gap-1.5 text-xs"
                    @click="emit('event-create', rangeStart)"
                  >
                    <Plus class="size-3" /> New event
                  </Button>
                </div>
              </slot>
            </template>
            <template v-else>
              <ContextMenu v-for="e in selectedDayEvents" :key="e.id">
                <ContextMenuTrigger as-child>
                  <div
                    class="group hover:bg-accent/50 relative flex cursor-pointer gap-3 rounded-lg p-2.5 transition-colors"
                    @click="openEvent(e)"
                  >
                    <div :class="['w-0.5 shrink-0 rounded-full', metaFor(e.type).bar]" />
                    <div class="min-w-0 flex-1 space-y-1">
                      <div class="flex items-start justify-between gap-2">
                        <p class="text-sm leading-tight font-medium">{{ e.title }}</p>
                        <span
                          :class="[
                            'shrink-0 rounded px-1.5 py-0.5 text-[9px] tracking-wider uppercase ring-1 ring-inset',
                            metaFor(e.type).chip,
                          ]"
                        >
                          {{ metaFor(e.type).label }}
                        </span>
                      </div>
                      <div class="text-muted-foreground flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px]">
                        <span class="inline-flex items-center gap-1"
                          ><Clock class="size-3" />{{ e.start }}-{{ e.end }}</span
                        >
                        <span v-if="e.location" class="inline-flex items-center gap-1"
                          ><MapPin class="size-3" />{{ e.location }}</span
                        >
                      </div>
                      <div v-if="e.attendees?.length" class="flex items-center -space-x-1.5 pt-0.5">
                        <Avatar
                          v-for="(a, i) in e.attendees.slice(0, 4)"
                          :key="i"
                          class="border-background size-5 border-2"
                        >
                          <AvatarFallback class="bg-primary/10 text-primary text-[8px]">{{
                            initials(a)
                          }}</AvatarFallback>
                        </Avatar>
                        <span v-if="e.attendees.length > 4" class="text-muted-foreground pl-2 text-[10px]"
                          >+{{ e.attendees.length - 4 }}</span
                        >
                      </div>
                    </div>
                  </div>
                </ContextMenuTrigger>
                <ContextMenuContent class="w-48">
                  <ContextMenuLabel class="text-muted-foreground truncate text-[11px]">{{ e.title }}</ContextMenuLabel>
                  <ContextMenuSeparator />
                  <ContextMenuItem class="gap-2" @select="openEvent(e)"
                    ><Eye class="size-3.5" /> View details</ContextMenuItem
                  >
                  <ContextMenuItem class="gap-2" @select="emit('event-edit', e)"
                    ><Pencil class="size-3.5" /> Edit</ContextMenuItem
                  >
                  <ContextMenuItem class="gap-2" @select="emit('event-duplicate', e)"
                    ><CopyPlus class="size-3.5" /> Duplicate</ContextMenuItem
                  >
                  <ContextMenuSeparator />
                  <ContextMenuItem
                    class="text-destructive focus:text-destructive gap-2"
                    @select="emit('event-delete', e)"
                    ><Trash2 class="size-3.5" /> Cancel event</ContextMenuItem
                  >
                </ContextMenuContent>
              </ContextMenu>
            </template>
          </div>
        </div>

        <div v-else class="bg-card/40 overflow-hidden rounded-xl border">
          <div class="from-primary/10 border-b bg-gradient-to-r to-transparent px-4 py-3">
            <div class="flex items-center justify-between gap-3">
              <div class="min-w-0">
                <p class="text-muted-foreground text-[10px] tracking-wider uppercase">
                  Range, {{ rangeDayCount }} days
                </p>
                <p class="mt-0.5 truncate text-sm font-semibold">
                  {{ fmtDayShort(rangeBounds.lo) }} -> {{ fmtDayShort(rangeBounds.hi) }}
                </p>
              </div>
              <Button variant="ghost" size="icon" class="size-7" @click="clearRange"><X class="size-3.5" /></Button>
            </div>
            <div class="mt-3 grid gap-2" :class="`grid-cols-${Math.min(typeKeys.length, 4)}`">
              <div v-for="key in typeKeys" :key="key" class="bg-background/40 rounded-md border px-2 py-1.5">
                <div class="text-muted-foreground flex items-center gap-1 text-[9px] tracking-wider uppercase">
                  <span :class="['size-1.5 rounded-full', eventTypes[key]!.dot]" />
                  {{ eventTypes[key]!.label }}
                </div>
                <p class="mt-0.5 text-sm font-semibold tabular-nums">{{ rangeTypeCounts[key] ?? 0 }}</p>
              </div>
            </div>
          </div>
          <div class="max-h-[420px] overflow-y-auto">
            <template v-if="rangeEvents.length === 0">
              <p class="text-muted-foreground px-4 py-8 text-center text-xs">No events in range.</p>
            </template>
            <template v-else>
              <div
                v-for="e in rangeEvents"
                :key="e.id"
                class="hover:bg-accent/40 flex cursor-pointer items-start gap-3 border-b px-3 py-2.5 transition-colors last:border-b-0"
                @click="openEvent(e)"
              >
                <div
                  class="bg-background/60 flex w-10 shrink-0 flex-col items-center rounded-md border px-1 py-1 text-center"
                >
                  <span class="text-muted-foreground text-[8px] uppercase">{{
                    new Date(e.date).toLocaleDateString('en-US', { month: 'short' })
                  }}</span>
                  <span class="text-sm leading-none font-semibold tabular-nums">{{ new Date(e.date).getDate() }}</span>
                </div>
                <div :class="['w-0.5 shrink-0 self-stretch rounded-full', metaFor(e.type).bar]" />
                <div class="min-w-0 flex-1">
                  <p class="truncate text-xs font-medium">{{ e.title }}</p>
                  <p class="text-muted-foreground mt-0.5 text-[11px] tabular-nums">
                    {{ e.start }}-{{ e.end }}<span v-if="e.location"> {{ ' ' }} {{ e.location }}</span>
                  </p>
                </div>
                <span
                  :class="[
                    'shrink-0 rounded px-1.5 py-0.5 text-[9px] tracking-wider uppercase ring-1 ring-inset',
                    metaFor(e.type).chip,
                  ]"
                >
                  {{ metaFor(e.type).label }}
                </span>
              </div>
            </template>
          </div>
        </div>

        <div v-if="showUpcoming" class="bg-card/40 overflow-hidden rounded-xl border">
          <div class="bg-muted/30 border-b px-4 py-2.5">
            <p class="text-sm font-semibold">Up next</p>
            <p class="text-muted-foreground text-[11px]">After today</p>
          </div>
          <div class="divide-y">
            <template v-if="loading">
              <div v-for="i in 3" :key="i" class="flex items-center gap-3 p-3">
                <Skeleton class="size-9 rounded-md" />
                <div class="flex-1 space-y-1">
                  <Skeleton class="h-3 w-32" />
                  <Skeleton class="h-2 w-20" />
                </div>
              </div>
            </template>
            <template v-else-if="upcoming.length === 0">
              <p class="text-muted-foreground px-4 py-6 text-center text-xs">Nothing on the horizon.</p>
            </template>
            <template v-else>
              <button
                v-for="e in upcoming"
                :key="e.id"
                type="button"
                class="group hover:bg-accent/40 flex w-full items-center gap-3 p-3 text-left transition-colors"
                @click="openEvent(e)"
              >
                <div
                  class="bg-background flex size-10 shrink-0 flex-col items-center justify-center rounded-md border text-center"
                >
                  <span class="text-muted-foreground text-[9px] uppercase">{{
                    new Date(e.date).toLocaleDateString('en-US', { month: 'short' })
                  }}</span>
                  <span class="text-sm leading-none font-semibold tabular-nums">{{ new Date(e.date).getDate() }}</span>
                </div>
                <div class="min-w-0 flex-1">
                  <div class="flex items-center gap-1.5">
                    <span :class="['size-1.5 rounded-full', metaFor(e.type).dot]" />
                    <p class="truncate text-xs font-medium">{{ e.title }}</p>
                  </div>
                  <p class="text-muted-foreground mt-0.5 text-[11px] tabular-nums">
                    {{ e.start }}-{{ e.end }}<span v-if="e.location"> {{ ' ' }} {{ e.location }}</span>
                  </p>
                </div>
              </button>
            </template>
          </div>
        </div>
      </aside>
    </div>

    <!-- Event Detail Dialog -->
    <Dialog v-model:open="eventOpen">
      <DialogContent v-if="selectedEvent" class="sm:max-w-md">
        <slot name="event-dialog" :event="selectedEvent">
          <DialogHeader>
            <div class="flex items-center gap-2">
              <div
                :class="[
                  'flex size-8 items-center justify-center rounded-md ring-1 ring-inset',
                  metaFor(selectedEvent.type).chip,
                ]"
              >
                <component :is="metaFor(selectedEvent.type).icon" class="size-4" />
              </div>
              <div>
                <DialogTitle class="text-base">{{ selectedEvent.title }}</DialogTitle>
                <DialogDescription class="text-xs">
                  {{ metaFor(selectedEvent.type).label
                  }}<span v-if="selectedEvent.status"> {{ ' ' }} {{ selectedEvent.status }}</span>
                </DialogDescription>
              </div>
            </div>
          </DialogHeader>
          <div class="space-y-3 py-2">
            <p v-if="selectedEvent.description" class="text-muted-foreground text-sm">
              {{ selectedEvent.description }}
            </p>
            <Separator />
            <div class="grid gap-2 text-sm">
              <div class="flex items-center gap-2">
                <Clock class="text-muted-foreground size-4" />
                <span>{{ selectedEvent.date }} {{ ' ' }} {{ selectedEvent.start }} - {{ selectedEvent.end }}</span>
              </div>
              <div v-if="selectedEvent.location" class="flex items-center gap-2">
                <MapPin class="text-muted-foreground size-4" />
                <span>{{ selectedEvent.location }}</span>
              </div>
              <div v-if="selectedEvent.attendees?.length" class="flex items-start gap-2">
                <Users class="text-muted-foreground mt-0.5 size-4" />
                <div class="flex flex-wrap items-center gap-1.5">
                  <div
                    v-for="a in selectedEvent.attendees"
                    :key="a"
                    class="bg-muted flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs"
                  >
                    <Avatar class="size-4">
                      <AvatarFallback class="bg-primary/10 text-primary text-[8px]">{{ initials(a) }}</AvatarFallback>
                    </Avatar>
                    <span>{{ a }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              size="sm"
              @click="
                () => {
                  emit('event-edit', selectedEvent)
                  eventOpen = false
                }
              "
              >Edit</Button
            >
            <Button
              size="sm"
              variant="destructive"
              @click="
                () => {
                  emit('event-delete', selectedEvent)
                  eventOpen = false
                }
              "
              >Cancel event</Button
            >
          </DialogFooter>
        </slot>
      </DialogContent>
    </Dialog>
  </div>
</template>

```

### `packages/registry-vue/blocks/event-calendar/defaults.ts`

```ts
import { Video, CheckCircle2, AlertCircle, Plane } from 'lucide-vue-next'
import type { EventTypeMeta } from './types'

/**
 * Default event-type theme. Mirrors the boilerplate dashboard but routes
 * every color through OKLCH tokens (chart-1..4, success, warning) so it
 * follows light/dark mode and any consumer theme override.
 *
 * Override per-type or replace the whole map via `<EventCalendar :event-types="..." />`.
 */
export const defaultEventTypes: Record<string, EventTypeMeta> = {
  meeting: {
    label: 'Meeting',
    icon: Video,
    chip: 'bg-chart-1/10 text-chart-1 ring-chart-1/20',
    bar: 'bg-chart-1',
    dot: 'bg-chart-1',
    glow: 'bg-chart-1/10',
    text: 'text-chart-1',
    ring: 'hover:ring-chart-1/30',
  },
  task: {
    label: 'Task',
    icon: CheckCircle2,
    chip: 'bg-success/10 text-success ring-success/20',
    bar: 'bg-success',
    dot: 'bg-success',
    glow: 'bg-success/10',
    text: 'text-success',
    ring: 'hover:ring-success/30',
  },
  reminder: {
    label: 'Reminder',
    icon: AlertCircle,
    chip: 'bg-warning/10 text-warning ring-warning/20',
    bar: 'bg-warning',
    dot: 'bg-warning',
    glow: 'bg-warning/10',
    text: 'text-warning',
    ring: 'hover:ring-warning/30',
  },
  travel: {
    label: 'Travel',
    icon: Plane,
    chip: 'bg-chart-3/10 text-chart-3 ring-chart-3/20',
    bar: 'bg-chart-3',
    dot: 'bg-chart-3',
    glow: 'bg-chart-3/10',
    text: 'text-chart-3',
    ring: 'hover:ring-chart-3/30',
  },
}

```

### `packages/registry-vue/blocks/event-calendar/types.ts`

```ts
import type { Component } from 'vue'

/**
 * Single event on the calendar. `type` is a free-form string (e.g. `'meeting'`,
 * `'task'`, anything) -- the matching key must exist in the `eventTypes` map
 * passed to <EventCalendar>. Unknown types fall through to a neutral style.
 */
export interface CalendarEvent {
  id: string
  title: string
  /** YYYY-MM-DD */
  date: string
  /** HH:mm */
  start: string
  /** HH:mm */
  end: string
  type: string
  description?: string
  location?: string
  attendees?: string[]
  /** Free-form status tag rendered next to the type label in the dialog. */
  status?: string
}

/**
 * Visual + semantic config per event type. The default theme uses OKLCH
 * tokens (chart-1..4, success, warning) so consumers get sensible colors
 * out of the box, but you can override per-type to wire any palette.
 */
export interface EventTypeMeta {
  label: string
  /** Lucide icon component for the stat tile + chip + dialog header. */
  icon: Component
  /** Tailwind classes for the colored chip on event rows + dialog header.
   *  Shape: `bg-X/10 text-X ring-X/20` is what the default theme uses. */
  chip: string
  /** Tailwind class for the vertical bar to the left of side-rail rows. */
  bar: string
  /** Tailwind class for the legend / stat-tile dot. */
  dot: string
  /** Tailwind class for the soft watermark glow behind stat tiles. */
  glow: string
  /** Tailwind class for the small text accent on "Next: ..." date labels. */
  text: string
  /** Tailwind class for the stat-tile hover ring. */
  ring: string
}

```

### `packages/registry-vue/blocks/event-calendar/index.ts`

```ts
export { default as EventCalendar } from './EventCalendar.vue'
export type { CalendarEvent, EventTypeMeta } from './types'
export { defaultEventTypes } from './defaults'

```

## event-list

- type: `registry:block`
- description: List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.
- npm deps: `lucide-vue-next`
- registry deps: `section-card`, `data-list`, `badge`

### `packages/registry-vue/blocks/event-list/EventList.vue`

```vue
<script setup lang="ts">
import { Clock } from 'lucide-vue-next'
import { SectionCard } from '@/components/ui/section-card'
import { DataList, DataListItem } from '@/components/ui/data-list'
import { Badge } from '@/components/ui/badge'

interface EventItem {
  id: string | number
  title: string
  date: string
  status?: string
  statusVariant?: 'default' | 'secondary' | 'outline' | 'destructive'
}

defineProps<{
  title?: string
  description?: string
  events: EventItem[]
  class?: string
}>()
</script>

<template>
  <SectionCard :title="title ?? 'Upcoming Events'" :description="description" :class="$props.class">
    <DataList>
      <DataListItem v-for="event in events" :key="event.id" class="flex-col items-stretch">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium">{{ event.title }}</p>
          <Badge v-if="event.status" :variant="event.statusVariant ?? 'secondary'">{{ event.status }}</Badge>
        </div>
        <div class="text-muted-foreground mt-1 flex items-center gap-1.5 text-xs">
          <Clock class="size-3" />
          <span>{{ event.date }}</span>
        </div>
      </DataListItem>
    </DataList>
  </SectionCard>
</template>

```

## fab

- type: `registry:ui`
- description: Floating action button — a fixed or absolute positioned circular button for the primary screen action. Supports an icon (default), an extended label variant, mini/large sizes, four color variants, six anchor positions, and a disabled state.
- npm deps: `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/fab/Fab.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { fabVariants } from './fab.variants'

type Variant = 'default' | 'secondary' | 'destructive' | 'outline'
type Size = 'mini' | 'default' | 'large' | 'extended'
type Position = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'inline'

interface Props {
  /** Label text — renders an extended FAB. Use the default slot for an icon. */
  label?: string
  as?: string
  asChild?: boolean
  variant?: Variant
  size?: Size
  position?: Position
  /** Use absolute instead of fixed positioning (for contained FABs). */
  absolute?: boolean
  disabled?: boolean
  /** Accessible label. Defaults to the label prop or 'Floating action'. */
  ariaLabel?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  as: 'button',
  variant: 'default',
  size: 'default',
  position: 'bottom-right',
  absolute: false,
})

const emit = defineEmits<{ (e: 'click', event: MouseEvent): void }>()

function onClick(e: MouseEvent) {
  if (props.disabled) return
  emit('click', e)
}

const resolvedSize = () => (props.label ? 'extended' : props.size)
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="fab"
    :data-variant="variant"
    :data-size="resolvedSize()"
    :data-position="position"
    :as="as"
    :as-child="asChild"
    :disabled="disabled"
    :aria-label="ariaLabel || label || 'Floating action'"
    :class="
      cn(
        fabVariants({ variant, size: resolvedSize(), position }),
        absolute && position !== 'inline' && 'absolute',
        props.class,
      )
    "
    @click="onClick"
  >
    <slot />
    <span v-if="label" class="pr-1">{{ label }}</span>
  </Primitive>
</template>

```

### `packages/registry-vue/components/fab/fab.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const fabVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-full font-medium shadow-lg transition-[color,background-color,box-shadow,transform] duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] active:scale-95 touch-manipulation [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive: 'bg-destructive text-white hover:bg-destructive/90',
        outline:
          'border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
      },
      size: {
        mini: "size-10 [&_svg:not([class*='size-'])]:size-4",
        default: 'size-14',
        large: "size-16 [&_svg:not([class*='size-'])]:size-7",
        extended: 'h-14 px-5',
      },
      position: {
        'bottom-right': 'fixed bottom-6 right-6',
        'bottom-left': 'fixed bottom-6 left-6',
        'top-right': 'fixed top-6 right-6',
        'top-left': 'fixed top-6 left-6',
        'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2',
        inline: '',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
      position: 'bottom-right',
    },
  },
)

export type FabVariants = VariantProps<typeof fabVariants>

```

### `packages/registry-vue/components/fab/index.ts`

```ts
export { default as Fab } from './Fab.vue'

export { fabVariants, type FabVariants } from './fab.variants'

```

## faq-01

- type: `registry:block`
- description: Single-column FAQ section. Eyebrow + headline + email-CTA lede, then six accordion items (trial / migration / security / pricing / support / cancel). Uses Accordion in single-collapsible mode so only one answer expands at a time. Questions are spelled out inline so consumers can rewrite them directly.
- registry deps: `accordion`

### `packages/registry-vue/blocks/faq-01/Faq01.vue`

```vue
<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-3xl px-6 py-24">
      <div class="text-center">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">FAQ</p>
        <h2 class="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Questions, answered</h2>
        <p class="text-muted-foreground mx-auto mt-3 max-w-xl text-lg">
          Anything we missed? Email
          <a href="mailto:hello@acme.test" class="hover:text-foreground underline underline-offset-4">
            hello@acme.test
          </a>
          and we'll reply within a day.
        </p>
      </div>

      <Accordion type="single" collapsible class="mt-10 w-full">
        <AccordionItem value="trial">
          <AccordionTrigger>How does the 14-day free trial work?</AccordionTrigger>
          <AccordionContent>
            Sign up with a work email — no credit card. You get every feature on the Team plan for 14 days. At the end
            of the trial you pick a plan or your workspace switches to read-only until you do; nothing is deleted.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="migration">
          <AccordionTrigger>Can we migrate from our current tool?</AccordionTrigger>
          <AccordionContent>
            Yes. Most teams import people, time off balances and org structure with one CSV. We have prebuilt importers
            for BambooHR, Personio, Rippling and Gusto; for everything else, our team will run the migration with you
            free of charge.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="security">
          <AccordionTrigger>Is our employee data secure?</AccordionTrigger>
          <AccordionContent>
            SOC 2 Type II, ISO 27001, GDPR and HIPAA compliant. Data is encrypted at rest (AES-256) and in transit (TLS
            1.3). EU customers stay on EU-region infrastructure. Full audit trail is available on every plan.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="pricing">
          <AccordionTrigger>What does the per-user pricing include?</AccordionTrigger>
          <AccordionContent>
            All core modules — directory, payroll, time off, performance, onboarding — are included on the Team plan.
            SSO, SCIM, audit logs and a dedicated success manager are Enterprise-only. There are no per-feature add-ons.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="support">
          <AccordionTrigger>What support do we get?</AccordionTrigger>
          <AccordionContent>
            Email support is included on every plan with a 4-hour business-hours reply. Team and Enterprise customers
            get a shared Slack channel; Enterprise adds a named success manager and a 99.99% uptime SLA with credits.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="cancel">
          <AccordionTrigger>How do we cancel?</AccordionTrigger>
          <AccordionContent>
            One click in Settings → Billing. We charge month-to-month or annually; if you cancel mid-cycle, your
            workspace stays active through the end of the period and you can export all data as CSV or JSON before it
            ends.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  </section>
</template>

```

## features-01

- type: `registry:block`
- description: Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.
- npm deps: `lucide-vue-next`
- registry deps: `card`

### `packages/registry-vue/blocks/features-01/Features01.vue`

```vue
<script setup lang="ts">
import { BarChart3, Calendar, FileCheck2, ShieldCheck, Users, Wallet } from 'lucide-vue-next'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-24">
      <div class="mb-12 max-w-2xl space-y-3">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">Features</p>
        <h2 class="text-3xl font-semibold tracking-tight sm:text-4xl">Everything teams need, nothing they don't.</h2>
        <p class="text-muted-foreground text-lg">
          Six modules that work together out of the box. Pay only for what you use.
        </p>
      </div>
      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Users class="size-5" />
            </div>
            <CardTitle class="text-base">Employee directory</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Single source of truth for people, roles and reporting lines — searchable and exportable.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Wallet class="size-5" />
            </div>
            <CardTitle class="text-base">Payroll</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Multi-currency runs with automatic tax filing and direct deposit. Pause and resume in one click.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <BarChart3 class="size-5" />
            </div>
            <CardTitle class="text-base">Performance</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              OKRs, 1:1s, 360 reviews and continuous feedback all linked to the org chart.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <FileCheck2 class="size-5" />
            </div>
            <CardTitle class="text-base">Onboarding</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              34 templated tasks split across pre-start, day 1, week 1, month 1 and 90-day milestones.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <Calendar class="size-5" />
            </div>
            <CardTitle class="text-base">Time off</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              Accrual-based leave with manager approval workflow and shared team calendar.
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader class="space-y-3">
            <div class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
              <ShieldCheck class="size-5" />
            </div>
            <CardTitle class="text-base">Compliance</CardTitle>
          </CardHeader>
          <CardContent>
            <p class="text-muted-foreground text-sm">
              GDPR, SOC2 and HIPAA-ready audit trails. Right-to-erasure built in.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  </section>
</template>

```

## file-upload

- type: `registry:ui`
- description: Drag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `<input type="file">` with proper a11y.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/file-upload/FileUpload.vue`

```vue
<script setup lang="ts">
import { ref, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  accept?: string
  multiple?: boolean
  disabled?: boolean
  modelValue?: File[]
}>()

const emit = defineEmits<{
  'update:modelValue': [files: File[]]
}>()

const inputRef = ref<HTMLInputElement>()
const isDragging = ref(false)

function handleFiles(files: FileList | null) {
  if (!files) return
  const fileArray = Array.from(files)
  const first = fileArray[0]
  emit('update:modelValue', props.multiple ? fileArray : first ? [first] : [])
}

function handleInputChange(e: Event) {
  handleFiles((e.target as HTMLInputElement).files)
}

function handleDrop(e: DragEvent) {
  isDragging.value = false
  handleFiles(e.dataTransfer?.files ?? null)
}

function handleDragOver(e: DragEvent) {
  e.preventDefault()
  isDragging.value = true
}

function handleDragLeave() {
  isDragging.value = false
}

function openFilePicker() {
  inputRef.value?.click()
}
</script>

<template>
  <div :class="cn('space-y-3', props.class)" v-bind="$attrs">
    <input
      ref="inputRef"
      type="file"
      :accept="accept"
      :multiple="multiple"
      :disabled="disabled"
      class="sr-only"
      @change="handleInputChange"
    />

    <div
      :class="[
        'border-muted-foreground/25 hover:border-muted-foreground/50 bg-muted/50 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors duration-200',
        isDragging && 'border-primary bg-primary/5',
        disabled && 'pointer-events-none opacity-50',
      ]"
      @click="openFilePicker"
      @drop.prevent="handleDrop"
      @dragover="handleDragOver"
      @dragleave="handleDragLeave"
    >
      <slot name="icon">
        <svg
          class="text-muted-foreground mb-2 size-10"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
          />
        </svg>
      </slot>
      <slot>
        <p class="text-muted-foreground text-sm">
          <span class="text-foreground font-semibold">Click to upload</span> or drag and drop
        </p>
        <p v-if="accept" class="text-muted-foreground/70 mt-1 text-xs">{{ accept }}</p>
      </slot>
    </div>

    <slot name="content" />
  </div>
</template>

```

### `packages/registry-vue/components/file-upload/FileUploadContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div :class="cn('space-y-2', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/file-upload/FileUploadItem.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { FileIcon, X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const file = defineModel<File>({ required: true })

defineEmits<{
  (e: 'remove'): void
}>()
</script>

<template>
  <div :class="cn('bg-muted/50 flex items-center gap-3 rounded-md border p-3', props.class)">
    <FileIcon class="text-muted-foreground size-8 shrink-0" />
    <div class="min-w-0 flex-1">
      <p class="truncate text-sm font-medium">{{ file.name }}</p>
      <p class="text-muted-foreground text-xs">{{ (file.size / 1024).toFixed(1) }} KB</p>
    </div>
    <button
      type="button"
      class="text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-auto rounded-sm transition-colors duration-200 focus-visible:ring-1 focus-visible:outline-none"
      @click="$emit('remove')"
    >
      <X class="size-4" aria-hidden="true" />
      <span class="sr-only">Remove file</span>
    </button>
  </div>
</template>

```

### `packages/registry-vue/components/file-upload/FileUploadItemName.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <p :class="cn('truncate text-sm font-medium', props.class)" v-bind="$attrs">
    <slot />
  </p>
</template>

```

### `packages/registry-vue/components/file-upload/FileUploadItemSize.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span :class="cn('text-muted-foreground text-xs', props.class)" v-bind="$attrs">
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/file-upload/FileUploadTrigger.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div :class="cn('cursor-pointer', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/file-upload/index.ts`

```ts
export { default as FileUpload } from './FileUpload.vue'
export { default as FileUploadTrigger } from './FileUploadTrigger.vue'
export { default as FileUploadContent } from './FileUploadContent.vue'
export { default as FileUploadItem } from './FileUploadItem.vue'
export { default as FileUploadItemName } from './FileUploadItemName.vue'
export { default as FileUploadItemSize } from './FileUploadItemSize.vue'

```

## float-label

- type: `registry:ui`
- description: Floating label wrapper for any input element. The label floats up when the input is focused or has a value. Wrap it around any input, select, or textarea. Supports required indicator and disabled state.

### `packages/registry-vue/components/float-label/FloatLabel.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  label: string
  required?: boolean
  disabled?: boolean
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

const isFocused = ref(false)
const hasValue = ref(false)
const wrapperRef = ref<HTMLElement | null>(null)

const isFloating = computed(() => isFocused.value || hasValue.value)

function checkValue(target: EventTarget | null) {
  const el = target as HTMLElement | null
  if (!el) return
  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
    hasValue.value = !!el.value
  } else if (el instanceof HTMLSelectElement) {
    hasValue.value = !!el.value
  } else {
    const input = el.querySelector?.('input, textarea, select') as
      | HTMLInputElement
      | HTMLTextAreaElement
      | HTMLSelectElement
      | null
    if (input) hasValue.value = !!input.value
  }
}

function handleFocusin(event: FocusEvent) {
  isFocused.value = true
  checkValue(event.target)
}

function handleFocusout(event: FocusEvent) {
  isFocused.value = false
  checkValue(event.target)
}

function handleInput(event: Event) {
  checkValue(event.target)
}

// Check for prefilled value on mount (before any focus/input events fire)
onMounted(() => {
  if (!wrapperRef.value) return
  const input = wrapperRef.value.querySelector('input, textarea, select') as
    | HTMLInputElement
    | HTMLTextAreaElement
    | HTMLSelectElement
    | null
  if (input) hasValue.value = !!input.value
})

const wrapperClasses = computed(() =>
  cn('relative flex flex-col', props.disabled && 'opacity-50 cursor-not-allowed', props.class),
)

const labelClasses = computed(() =>
  cn(
    'text-muted-foreground pointer-events-none absolute left-3 z-10 bg-transparent px-1 text-sm transition-all duration-200',
    !isFloating.value && 'top-1/2 -translate-y-1/2',
    isFloating.value && 'top-0 -translate-y-1/2 scale-75 bg-background text-foreground',
    isFocused.value && 'text-ring',
    props.required && "after:text-destructive after:ml-0.5 after:content-['*']",
  ),
)
</script>

<template>
  <div
    ref="wrapperRef"
    :class="wrapperClasses"
    data-uipkge
    data-slot="float-label"
    :data-floating="isFloating"
    @focusin="handleFocusin"
    @focusout="handleFocusout"
    @input="handleInput"
    @change="handleInput"
  >
    <label :class="labelClasses">
      {{ label }}
    </label>
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/float-label/index.ts`

```ts
export { default as FloatLabel } from './FloatLabel.vue'

```

## footer-01

- type: `registry:block`
- description: Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `input`, `separator`

### `packages/registry-vue/blocks/footer-01/Footer01.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Boxes, Github, Linkedin, Twitter } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'

const newsletter = ref('')
const subscribed = ref(false)

function subscribe() {
  if (!newsletter.value) return
  subscribed.value = true
  newsletter.value = ''
}
</script>

<template>
  <footer class="bg-background border-t">
    <div class="mx-auto max-w-6xl px-6 py-16">
      <div class="grid gap-10 lg:grid-cols-12">
        <div class="space-y-4 lg:col-span-4">
          <div class="flex items-center gap-2">
            <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
              <Boxes class="size-4" />
            </div>
            <span class="text-base font-semibold">Acme</span>
          </div>
          <p class="text-muted-foreground max-w-sm text-sm">Built on shadcn-vue. Get product updates monthly.</p>
          <form class="flex max-w-sm gap-2" @submit.prevent="subscribe">
            <Input v-model="newsletter" type="email" placeholder="you@company.com" required class="flex-1" />
            <Button type="submit">Subscribe</Button>
          </form>
          <p v-if="subscribed" class="text-xs text-[var(--success)]">Thanks — check your inbox to confirm.</p>
        </div>

        <div class="grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8">
          <div class="space-y-3">
            <h3 class="text-sm font-semibold">Product</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Features</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Pricing</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Changelog</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Roadmap</a>
              </li>
            </ul>
          </div>
          <div class="space-y-3">
            <h3 class="text-sm font-semibold">Company</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">About</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Blog</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Careers</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Contact</a>
              </li>
            </ul>
          </div>
          <div class="space-y-3">
            <h3 class="text-sm font-semibold">Resources</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"
                  >Documentation</a
                >
              </li>
              <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">API</a></li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors"
                  >Help center</a
                >
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Status</a>
              </li>
            </ul>
          </div>
          <div class="space-y-3">
            <h3 class="text-sm font-semibold">Legal</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Terms</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Privacy</a>
              </li>
              <li>
                <a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Security</a>
              </li>
              <li><a href="#" class="text-muted-foreground hover:text-foreground text-sm transition-colors">DPA</a></li>
            </ul>
          </div>
        </div>
      </div>

      <Separator class="my-10" />

      <div class="flex flex-wrap items-center justify-between gap-4">
        <p class="text-muted-foreground text-xs">© 2026 Acme. All rights reserved.</p>
        <div class="flex items-center gap-3">
          <a href="#" aria-label="GitHub" class="text-muted-foreground hover:text-foreground transition-colors">
            <Github class="size-4" />
          </a>
          <a href="#" aria-label="Twitter" class="text-muted-foreground hover:text-foreground transition-colors">
            <Twitter class="size-4" />
          </a>
          <a href="#" aria-label="LinkedIn" class="text-muted-foreground hover:text-foreground transition-colors">
            <Linkedin class="size-4" />
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>

```

## form

- type: `registry:ui`
- description: Zod-first form block built on TanStack Vue Form. Wires field labels, descriptions, error messages, and validation together; bind a field once and the rest is automatic.
- npm deps: `reka-ui`, `@tanstack/vue-form`, `lucide-vue-next`
- registry deps: `label`

### `packages/registry-vue/components/form/Form.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { provide } from 'vue'
import { cn } from '@/lib/utils'
import { FORM_INSTANCE_INJECTION_KEY, type TanstackFormApi } from './injectionKeys'

const props = defineProps<{
  form: TanstackFormApi
  class?: HTMLAttributes['class']
}>()

provide(FORM_INSTANCE_INJECTION_KEY, props.form)

function onSubmit(e: Event) {
  e.preventDefault()
  e.stopPropagation()
  void props.form.handleSubmit()
}
</script>

<template>
  <form data-uipkge data-slot="form" :class="cn(props.class)" @submit="onSubmit">
    <slot />
  </form>
</template>

```

### `packages/registry-vue/components/form/FormActions.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    align?: 'left' | 'center' | 'right'
    gap?: 'sm' | 'md' | 'lg'
    class?: HTMLAttributes['class']
  }>(),
  {
    align: 'right',
    gap: 'md',
  },
)

const alignClasses = {
  left: 'justify-start',
  center: 'justify-center',
  right: 'justify-end',
}

const gapClasses = {
  sm: 'gap-2',
  md: 'gap-3',
  lg: 'gap-4',
}
</script>

<template>
  <div
    data-uipkge
    data-slot="form-actions"
    :class="cn('flex flex-wrap items-center', alignClasses[align], gapClasses[gap], props.class)"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/form/FormControl.vue`

```vue
<script lang="ts" setup>
import { Slot } from 'reka-ui'
import { useFormField } from './useFormField'

const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
</script>

<template>
  <Slot
    :id="formItemId"
    data-uipkge
    data-slot="form-control"
    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
    :aria-invalid="!!error"
  >
    <slot />
  </Slot>
</template>

```

### `packages/registry-vue/components/form/FormDescription.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useFormField } from './useFormField'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { formDescriptionId } = useFormField()
</script>

<template>
  <p
    :id="formDescriptionId"
    data-uipkge
    data-slot="form-description"
    :class="cn('text-muted-foreground text-sm', props.class)"
  >
    <slot />
  </p>
</template>

```

### `packages/registry-vue/components/form/FormField.vue`

```vue
<script lang="ts" setup>
import { computed, inject } from 'vue'
import FormFieldInner from './FormFieldInner.vue'
import { FORM_INSTANCE_INJECTION_KEY, type TanstackFormApi } from './injectionKeys'

const props = defineProps<{
  form?: TanstackFormApi
  name: string
  validators?: Record<string, unknown>
}>()

const injected = inject(FORM_INSTANCE_INJECTION_KEY, null)

const resolvedForm = computed<TanstackFormApi>(() => {
  const f = props.form ?? injected
  if (!f) throw new Error('<FormField> requires a `form` prop or to be nested inside <Form :form="...">')
  return f
})
</script>

<template>
  <component :is="resolvedForm.Field" :name="props.name" :validators="props.validators">
    <template #default="{ field }">
      <FormFieldInner :field="field">
        <template #default="binding">
          <slot v-bind="binding" />
        </template>
      </FormFieldInner>
    </template>
  </component>
</template>

```

### `packages/registry-vue/components/form/FormFieldInner.vue`

```vue
<script lang="ts" setup>
import { computed, onUnmounted, provide, shallowRef, watch } from 'vue'
import { FORM_FIELD_INJECTION_KEY } from './injectionKeys'

interface FieldMeta {
  errors: Array<unknown>
  errorMap?: Record<string, Array<unknown> | undefined>
  isDirty: boolean
  isTouched: boolean
  isValid: boolean
}

interface FieldApi {
  name: string
  state: {
    value: unknown
    meta: FieldMeta
  }
  store: {
    subscribe: (cb: () => void) => () => void
  }
  handleChange: (v: unknown) => void
  handleBlur: () => void
}

const props = defineProps<{ field: FieldApi }>()

const snapshot = shallowRef({ value: props.field.state.value, meta: props.field.state.meta })
let unsubscribe: (() => void) | null = null

function refreshSnapshot() {
  snapshot.value = { value: props.field.state.value, meta: props.field.state.meta }
}

function subscribe(field: FieldApi) {
  unsubscribe?.()
  unsubscribe = field.store.subscribe(refreshSnapshot)
  refreshSnapshot()
}

subscribe(props.field)
watch(
  () => props.field,
  (next) => subscribe(next),
)
onUnmounted(() => unsubscribe?.())

function formatError(raw: unknown): string {
  if (typeof raw === 'string') return raw
  if (raw && typeof raw === 'object' && 'message' in raw) {
    return String((raw as { message: unknown }).message)
  }
  return String(raw)
}

const error = computed(() => {
  const meta = snapshot.value.meta
  const flat = meta.errors
  if (Array.isArray(flat) && flat.length > 0 && flat[0] != null) {
    return formatError(flat[0])
  }
  const map = meta.errorMap ?? {}
  for (const key of Object.keys(map)) {
    const arr = map[key]
    if (Array.isArray(arr) && arr.length > 0 && arr[0] != null) {
      return formatError(arr[0])
    }
  }
  return undefined
})

const valid = computed(() => snapshot.value.meta.isValid)
const isDirty = computed(() => snapshot.value.meta.isDirty)
const isTouched = computed(() => snapshot.value.meta.isTouched)

provide(FORM_FIELD_INJECTION_KEY, {
  name: props.field.name,
  error,
  valid,
  isDirty,
  isTouched,
})

const componentField = computed(() => ({
  modelValue: snapshot.value.value,
  'onUpdate:modelValue': (v: unknown) => props.field.handleChange(v),
  onBlur: () => props.field.handleBlur(),
  name: props.field.name,
}))
</script>

<template>
  <slot
    :field="props.field"
    :component-field="componentField"
    :error="error"
    :valid="valid"
    :is-dirty="isDirty"
    :is-touched="isTouched"
  />
</template>

```

### `packages/registry-vue/components/form/FormItem.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { useId } from 'reka-ui'
import { computed, provide } from 'vue'
import { cn } from '@/lib/utils'
import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
import FormLabel from './FormLabel.vue'
import type { FormStatus } from './types'

const props = defineProps<{
  class?: HTMLAttributes['class']
  label?: string
  required?: boolean
  description?: string
  status?: FormStatus
  help?: string
  layout?: 'vertical' | 'horizontal'
  labelWidth?: string
}>()

const id = useId()
provide(FORM_ITEM_INJECTION_KEY, id)

const statusBorderClass = computed(() => {
  switch (props.status) {
    case 'error':
      return 'border-destructive focus-within:border-destructive focus-within:ring-destructive/20'
    case 'warning':
      return 'border-warning focus-within:border-warning focus-within:ring-warning/20'
    case 'success':
      return 'border-success focus-within:border-success focus-within:ring-success/20'
    default:
      return ''
  }
})

const isHorizontal = computed(() => props.layout === 'horizontal')
</script>

<template>
  <div
    data-uipkge
    data-slot="form-item"
    :class="
      cn(
        'grid gap-1.5',
        isHorizontal && 'grid-cols-[var(--label-width,140px)_1fr] items-start gap-x-4 gap-y-0',
        props.class,
      )
    "
    :style="labelWidth ? { '--label-width': labelWidth } : undefined"
  >
    <div v-if="label || $slots.label" class="flex items-center gap-1">
      <FormLabel v-if="label" :for="id">{{ label }}</FormLabel>
      <slot name="label" />
      <span v-if="required" class="text-destructive text-sm">*</span>
    </div>

    <div class="space-y-1">
      <slot />
      <p v-if="description" class="text-muted-foreground text-xs">{{ description }}</p>
      <p
        v-if="help"
        class="text-xs"
        :class="{
          'text-destructive': status === 'error',
          'text-warning': status === 'warning',
          'text-success': status === 'success',
          'text-muted-foreground': !status,
        }"
      >
        {{ help }}
      </p>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/form/FormLabel.vue`

```vue
<script lang="ts" setup>
import type { LabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { useFormField } from './useFormField'

const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

const { error, formItemId } = useFormField()
</script>

<template>
  <Label
    data-uipkge
    data-slot="form-label"
    :data-error="!!error"
    :class="cn('data-[error=true]:text-destructive', props.class)"
    :for="formItemId"
  >
    <slot />
  </Label>
</template>

```

### `packages/registry-vue/components/form/FormMessage.vue`

```vue
<script lang="ts" setup>
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useFormField } from './useFormField'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { error, formMessageId } = useFormField()
</script>

<template>
  <p
    v-if="error"
    :id="formMessageId"
    data-uipkge
    data-slot="form-message"
    :class="cn('text-destructive text-sm', props.class)"
  >
    {{ error }}
  </p>
</template>

```

### `packages/registry-vue/components/form/FormSection.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  title?: string
  subtitle?: string
  description?: string
  divider?: boolean
  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5'
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="form-section" :class="cn('space-y-3', props.class)">
    <div v-if="divider || title || subtitle" :class="divider && 'border-t pt-4'">
      <div v-if="title || subtitle" class="space-y-1">
        <component :is="props.headingLevel ?? 'h4'" v-if="title" class="text-sm font-semibold">{{ title }}</component>
        <p v-if="subtitle" class="text-muted-foreground text-xs">{{ subtitle }}</p>
      </div>
    </div>
    <p v-if="description" class="text-muted-foreground text-xs">{{ description }}</p>
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/form/FormStatus.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes, Component } from 'vue'
import { CircleAlert, TriangleAlert, CircleCheck } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { FormStatus } from './types'

const props = defineProps<{
  class?: HTMLAttributes['class']
  status: FormStatus
  message: string
}>()

const statusConfig: Record<FormStatus, { icon: Component; container: string }> = {
  error: {
    icon: CircleAlert,
    container: 'bg-destructive/10 text-destructive border-destructive/20',
  },
  warning: {
    icon: TriangleAlert,
    container: 'bg-warning/10 text-warning border-warning/30',
  },
  success: {
    icon: CircleCheck,
    container: 'bg-success/10 text-success border-success/30',
  },
}
</script>

<template>
  <div
    v-if="status"
    data-uipkge
    data-slot="form-status"
    :class="
      cn('flex items-center gap-2 rounded-md border px-3 py-2 text-sm', statusConfig[status].container, props.class)
    "
  >
    <component :is="statusConfig[status].icon" class="size-4 shrink-0" />
    <span>{{ message }}</span>
  </div>
</template>

```

### `packages/registry-vue/components/form/index.ts`

```ts
export { default as Form } from './Form.vue'
export { default as FormField } from './FormField.vue'
export { default as FormControl } from './FormControl.vue'
export { default as FormDescription } from './FormDescription.vue'
export { default as FormItem } from './FormItem.vue'
export { default as FormLabel } from './FormLabel.vue'
export { default as FormMessage } from './FormMessage.vue'
export { default as FormActions } from './FormActions.vue'
export { default as FormSection } from './FormSection.vue'
export { default as FormStatus } from './FormStatus.vue'
export { useFormField } from './useFormField'
export { FORM_ITEM_INJECTION_KEY, FORM_FIELD_INJECTION_KEY } from './injectionKeys'
export type { FormFieldContext } from './injectionKeys'
export type { FormStatus as FormStatusValue } from './types'
export { useForm } from '@tanstack/vue-form'

```

### `packages/registry-vue/components/form/injectionKeys.ts`

```ts
import type { ComputedRef, InjectionKey } from 'vue'

export const FORM_ITEM_INJECTION_KEY = Symbol() as InjectionKey<string>

export interface FormFieldContext {
  name: string
  error: ComputedRef<string | undefined>
  valid: ComputedRef<boolean>
  isDirty: ComputedRef<boolean>
  isTouched: ComputedRef<boolean>
}

export const FORM_FIELD_INJECTION_KEY = Symbol() as InjectionKey<FormFieldContext>

export interface TanstackFormApi {
  Field: unknown
  handleSubmit: () => void | Promise<void>
}

export const FORM_INSTANCE_INJECTION_KEY = Symbol() as InjectionKey<TanstackFormApi>

```

### `packages/registry-vue/components/form/types.ts`

```ts
export type FormStatus = 'error' | 'warning' | 'success' | null | undefined

```

### `packages/registry-vue/components/form/useFormField.ts`

```ts
import { computed, inject } from 'vue'
import { FORM_FIELD_INJECTION_KEY, FORM_ITEM_INJECTION_KEY } from './injectionKeys'

export function useFormField() {
  const fieldContext = inject(FORM_FIELD_INJECTION_KEY)
  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)

  if (!fieldContext) throw new Error('useFormField should be used within <FormField>')

  const id = fieldItemContext

  return {
    id,
    name: computed(() => fieldContext.name),
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    valid: fieldContext.valid,
    isDirty: fieldContext.isDirty,
    isTouched: fieldContext.isTouched,
    error: fieldContext.error,
  }
}

```

## funnel-chart

- type: `registry:ui`
- description: Funnel chart wrapper around Apache ECharts. Conversion-stage visualization with inverted and percentage-label variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/funnel-chart/FunnelChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { FunnelChart as EChartsFunnelChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTextColor, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsFunnelChart, TooltipComponent, LegendComponent])

interface Props {
  data: { name: string; value: number }[]
  height?: number | string
  showLabels?: boolean
  showLegend?: boolean
  /** ECharts option escape hatch -- merged on top of the computed option. */
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 300,
  showLabels: true,
  showLegend: false,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'funnel',
      left: '8%',
      right: '8%',
      top: 12,
      bottom: props.showLegend ? 32 : 12,
      sort: 'descending',
      // Floor the narrowest band at 20% width so funnels with a wide
      // value range (e.g. 482 applied -> 12 hired) don't collapse to
      // a sharp point. The bottom stage still reads as the smallest;
      // it's just a recognisable shape, not a pixel.
      minSize: '20%',
      maxSize: '100%',
      funnelAlign: 'center',
      gap: 2,
      label: {
        show: props.showLabels,
        position: 'inside',
        color: '#fff',
        fontSize: 11,
        fontWeight: 600,
      },
      labelLine: { length: 8, lineStyle: { width: 1, type: 'solid' } },
      itemStyle: { borderWidth: 0 },
      emphasis: { label: { fontSize: 13, fontWeight: 700 } },
      data: props.data,
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: props.showLegend
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : undefined,
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/funnel-chart/index.ts`

```ts
export { default as FunnelChart } from './FunnelChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## gauge-chart

- type: `registry:ui`
- description: Gauge / speedometer wrapper around Apache ECharts. Threshold-banded stoplight (teal/amber/red), progress-ring, and multi-needle variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/gauge-chart/GaugeChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GaugeChart as EChartsGaugeChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  gaugeThresholds,
} from '../useChartTheme'

interface Props {
  value: number
  min?: number
  max?: number
  unit?: string
  label?: string
  height?: number | string
  /** Colour stops as [percentage, hex] pairs. Default: teal->amber->red,
   *  pulled from `gaugeThresholds` in useChartTheme so the safe-zone
   *  colour ties back to the dashboard palette. Pass your own to override. */
  thresholds?: [number, string][]
  option?: any
  class?: string
}

use([CanvasRenderer, EChartsGaugeChart, TooltipComponent])

const props = withDefaults(defineProps<Props>(), {
  min: 0,
  max: 100,
  unit: '',
  height: 220,
  thresholds: () => gaugeThresholds,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'gauge',
      min: props.min,
      max: props.max,
      center: ['50%', '60%'],
      radius: '85%',
      startAngle: 200,
      endAngle: -20,
      progress: { show: true, width: 14 },
      pointer: { show: true, length: '55%', width: 4 },
      axisLine: {
        lineStyle: {
          width: 14,
          color: props.thresholds.map(([stop, color]) => [stop, color] as [number, string]),
        },
      },
      axisTick: { distance: -22, length: 4, lineStyle: { color: chartTextColor.value, width: 1 } },
      splitLine: { distance: -26, length: 8, lineStyle: { color: chartTextColor.value, width: 2 } },
      axisLabel: { color: chartTextColor.value, fontSize: 10, distance: -34 },
      anchor: { show: false },
      title: {
        offsetCenter: [0, '88%'],
        color: chartTextColor.value,
        fontSize: 11,
        fontWeight: 500,
      },
      detail: {
        valueAnimation: true,
        formatter: `{value}${props.unit ? ' ' + props.unit : ''}`,
        color: chartColors.value[0],
        fontSize: 28,
        fontWeight: 700,
        offsetCenter: [0, '40%'],
      },
      data: [{ value: props.value, name: props.label ?? '' }],
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    tooltip: {
      formatter: '{b}: {c}' + (props.unit ? ` ${props.unit}` : ''),
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/gauge-chart/index.ts`

```ts
export { default as GaugeChart } from './GaugeChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## gradient-text

- type: `registry:ui`
- description: Applies a CSS gradient as text color via background-clip: text. Supports preset gradients (sunset, ocean, forest, fire, candy, aurora, rainbow, gold, neon, grape), custom from/to colors with a direction, a fully custom CSS gradient string, and an animated mode that shifts the gradient.
- npm deps: `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/gradient-text/GradientText.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { gradientTextPresets, type GradientPreset } from './gradient-text.variants'

type Direction =
  | 'to right'
  | 'to left'
  | 'to top'
  | 'to bottom'
  | 'to top right'
  | 'to top left'
  | 'to bottom right'
  | 'to bottom left'

const props = withDefaults(
  defineProps<{
    /** Rendered element / component via Primitive. */
    as?: string
    asChild?: boolean
    /** Preset gradient name. Overrides from/to when set. */
    preset?: GradientPreset
    /** Start color of a custom two-stop gradient. */
    from?: string
    /** End color of a custom two-stop gradient. */
    to?: string
    /** Gradient direction. */
    direction?: Direction
    /** Fully custom CSS gradient (e.g. 'linear-gradient(45deg, #f00, #00f, #0f0)'). Overrides preset/from/to. */
    gradient?: string
    /** Animate the gradient (subtle background-position shift). */
    animated?: boolean
    /** Animation duration in seconds. Default 4. */
    animationDuration?: number
    class?: HTMLAttributes['class']
  }>(),
  {
    as: 'span',
    direction: 'to right',
    animated: false,
    animationDuration: 4,
  },
)

const gradientValue = computed(() => {
  if (props.gradient) return props.gradient
  if (props.preset) return gradientTextPresets[props.preset] ?? ''
  if (props.from && props.to) {
    return `linear-gradient(${props.direction}, ${props.from}, ${props.to})`
  }
  // Default fallback: primary token gradient.
  return 'linear-gradient(to right, var(--primary), var(--primary))'
})

const style = computed(() => ({
  backgroundImage: gradientValue.value,
  backgroundClip: 'text',
  WebkitBackgroundClip: 'text',
  color: 'transparent',
  WebkitTextFillColor: 'transparent',
  backgroundSize: props.animated ? '200% 200%' : undefined,
}))
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="gradient-text"
    :data-preset="preset"
    :data-animated="animated ? 'true' : undefined"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'inline-block',
        animated ? `motion-safe:animate-[gradient-text-shift_${props.animationDuration}s_ease_infinite]` : '',
        props.class,
      )
    "
    :style="style"
  >
    <slot />
  </Primitive>
</template>

<style scoped>
@media (prefers-reduced-motion: no-preference) {
  @keyframes gradient-text-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}
</style>

```

### `packages/registry-vue/components/gradient-text/gradient-text.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Preset gradients keyed by name. Each value is a full CSS gradient string
 * applied as `background-image` with `background-clip: text`.
 */
export const gradientTextPresets = {
  sunset: 'linear-gradient(to right, #ff7e5f, #feb47b)',
  ocean: 'linear-gradient(to right, #2193b0, #6dd5ed)',
  forest: 'linear-gradient(to right, #11998e, #38ef7d)',
  fire: 'linear-gradient(to right, #f12711, #f5af19)',
  candy: 'linear-gradient(to right, #f857a6, #ff8a5c)',
  aurora: 'linear-gradient(to right, #00c6ff, #0072ff, #00c6ff)',
  rainbow: 'linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)',
  gold: 'linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c)',
  neon: 'linear-gradient(to right, #00f260, #0575e6)',
  grape: 'linear-gradient(to right, #6a11cb, #2575fc)',
} as const

export type GradientPreset = keyof typeof gradientTextPresets

export const gradientTextVariants = cva('inline-block', {
  variants: {},
  defaultVariants: {},
})

export type GradientTextVariants = VariantProps<typeof gradientTextVariants>

```

### `packages/registry-vue/components/gradient-text/index.ts`

```ts
export { default as GradientText } from './GradientText.vue'
export {
  gradientTextPresets,
  gradientTextVariants,
  type GradientPreset,
  type GradientTextVariants,
} from './gradient-text.variants'

```

## graph-chart

- type: `registry:ui`
- description: Network / graph chart wrapper around Apache ECharts. Force-directed, circular, or manual layouts; directed or undirected edges; optional category coloring. Useful for service maps, social graphs, knowledge bases.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/graph-chart/GraphChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { GraphChart as EChartsGraphChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartAxisColor,
  chartTextColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
} from '../useChartTheme'

use([CanvasRenderer, EChartsGraphChart, TooltipComponent, LegendComponent])

interface GraphNode {
  name: string
  /** Optional category index (paints with chart-N colour). */
  category?: number
  /** Optional fixed marker size. Defaults to 28. */
  symbolSize?: number
}
interface GraphLink {
  source: string
  target: string
  /** Optional edge value (shows up in the tooltip + sizes the line on weighted layouts). */
  value?: number
}

interface Props {
  nodes: GraphNode[]
  links: GraphLink[]
  /** Optional category labels rendered in the legend. */
  categories?: string[]
  /** Layout engine. `force` is force-directed (default), `circular` arranges
   *  on a ring, `none` lets you place nodes manually via `x`/`y`. */
  layout?: 'force' | 'circular' | 'none'
  /** Allow click-and-drag pan + scroll zoom. Default false. */
  roam?: boolean
  /** Draw arrowheads on the target end. Default true. */
  directed?: boolean
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  layout: 'force',
  roam: false,
  directed: true,
  height: 380,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'graph',
      layout: props.layout,
      roam: props.roam,
      symbolSize: 28,
      label: { show: true, fontSize: 11, color: chartTextColor.value },
      edgeSymbol: props.directed ? (['none', 'arrow'] as [string, string]) : (['none', 'none'] as [string, string]),
      edgeSymbolSize: [0, 6],
      force: { repulsion: 220, edgeLength: 90 },
      lineStyle: { color: chartAxisColor.value, curveness: 0.15, width: 1 },
      emphasis: { focus: 'adjacency' as const, lineStyle: { width: 2 } },
      categories: props.categories?.map((name) => ({ name })),
      data: props.nodes.map((n) => ({
        ...n,
        itemStyle:
          typeof n.category === 'number'
            ? { color: chartColors.value[n.category % chartColors.value.length] }
            : undefined,
      })),
      links: props.links,
    },
  ]

  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: props.categories?.length
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : undefined,
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/graph-chart/index.ts`

```ts
export { default as GraphChart } from './GraphChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## grid

- type: `registry:ui`
- description: Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.

### `packages/registry-vue/components/grid/Grid.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

// Responsive CSS-grid container. Pass an integer for fixed column count, or
// a breakpoint map for responsive layouts: `{ base: 1, sm: 2, lg: 3 }`.
//
// Examples:
//   <Grid :cols="3" :gap="4">...</Grid>
//   <Grid :cols="{ base: 1, sm: 2, lg: 4 }" :gap="6">...</Grid>
//
// Tailwind v4's content scanner cannot see classnames built from
// `grid-cols-${n}` template strings, so we map each supported value
// to a complete class string. The scanner sees the literal classes
// and emits them in the consumer's production CSS.
type ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
type Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>
type GapToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16

const COLS_BASE: Record<ColIndex, string> = {
  1: 'grid-cols-1',
  2: 'grid-cols-2',
  3: 'grid-cols-3',
  4: 'grid-cols-4',
  5: 'grid-cols-5',
  6: 'grid-cols-6',
  7: 'grid-cols-7',
  8: 'grid-cols-8',
  9: 'grid-cols-9',
  10: 'grid-cols-10',
  11: 'grid-cols-11',
  12: 'grid-cols-12',
}
const COLS_SM: Record<ColIndex, string> = {
  1: 'sm:grid-cols-1',
  2: 'sm:grid-cols-2',
  3: 'sm:grid-cols-3',
  4: 'sm:grid-cols-4',
  5: 'sm:grid-cols-5',
  6: 'sm:grid-cols-6',
  7: 'sm:grid-cols-7',
  8: 'sm:grid-cols-8',
  9: 'sm:grid-cols-9',
  10: 'sm:grid-cols-10',
  11: 'sm:grid-cols-11',
  12: 'sm:grid-cols-12',
}
const COLS_MD: Record<ColIndex, string> = {
  1: 'md:grid-cols-1',
  2: 'md:grid-cols-2',
  3: 'md:grid-cols-3',
  4: 'md:grid-cols-4',
  5: 'md:grid-cols-5',
  6: 'md:grid-cols-6',
  7: 'md:grid-cols-7',
  8: 'md:grid-cols-8',
  9: 'md:grid-cols-9',
  10: 'md:grid-cols-10',
  11: 'md:grid-cols-11',
  12: 'md:grid-cols-12',
}
const COLS_LG: Record<ColIndex, string> = {
  1: 'lg:grid-cols-1',
  2: 'lg:grid-cols-2',
  3: 'lg:grid-cols-3',
  4: 'lg:grid-cols-4',
  5: 'lg:grid-cols-5',
  6: 'lg:grid-cols-6',
  7: 'lg:grid-cols-7',
  8: 'lg:grid-cols-8',
  9: 'lg:grid-cols-9',
  10: 'lg:grid-cols-10',
  11: 'lg:grid-cols-11',
  12: 'lg:grid-cols-12',
}
const COLS_XL: Record<ColIndex, string> = {
  1: 'xl:grid-cols-1',
  2: 'xl:grid-cols-2',
  3: 'xl:grid-cols-3',
  4: 'xl:grid-cols-4',
  5: 'xl:grid-cols-5',
  6: 'xl:grid-cols-6',
  7: 'xl:grid-cols-7',
  8: 'xl:grid-cols-8',
  9: 'xl:grid-cols-9',
  10: 'xl:grid-cols-10',
  11: 'xl:grid-cols-11',
  12: 'xl:grid-cols-12',
}
const GAP: Record<GapToken, string> = {
  0: 'gap-0',
  1: 'gap-1',
  2: 'gap-2',
  3: 'gap-3',
  4: 'gap-4',
  5: 'gap-5',
  6: 'gap-6',
  8: 'gap-8',
  10: 'gap-10',
  12: 'gap-12',
  16: 'gap-16',
}

const props = withDefaults(
  defineProps<{
    cols?: Cols
    gap?: GapToken
    class?: HTMLAttributes['class']
  }>(),
  {
    cols: 1,
    gap: 4,
  },
)

const colsClass = computed(() => {
  const c = props.cols
  if (typeof c === 'number') return COLS_BASE[c]
  return [
    c.base != null ? COLS_BASE[c.base] : '',
    c.sm != null ? COLS_SM[c.sm] : '',
    c.md != null ? COLS_MD[c.md] : '',
    c.lg != null ? COLS_LG[c.lg] : '',
    c.xl != null ? COLS_XL[c.xl] : '',
  ]
    .filter(Boolean)
    .join(' ')
})

const gapClass = computed(() => GAP[props.gap])
</script>

<template>
  <div data-uipkge data-slot="grid" :class="cn('grid', colsClass, gapClass, props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/grid/index.ts`

```ts
export { default as Grid } from './Grid.vue'

```

## header-01

- type: `registry:block`
- description: Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `sheet`

### `packages/registry-vue/blocks/header-01/Header01.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Boxes, Menu, X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'

const mobileOpen = ref(false)
</script>

<template>
  <header class="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur">
    <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
      <a href="#" class="flex items-center gap-2">
        <div class="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
          <Boxes class="size-4" />
        </div>
        <span class="text-base font-semibold">Acme</span>
      </a>

      <nav class="hidden items-center gap-6 md:flex" aria-label="Primary">
        <a href="#features" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Features</a>
        <a href="#pricing" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Pricing</a>
        <a href="#customers" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Customers</a>
        <a href="#docs" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Docs</a>
        <a href="#blog" class="text-muted-foreground hover:text-foreground text-sm transition-colors">Blog</a>
      </nav>

      <div class="hidden items-center gap-2 md:flex">
        <Button variant="ghost" size="sm">Sign in</Button>
        <Button size="sm">Start free trial</Button>
      </div>

      <Sheet v-model:open="mobileOpen">
        <SheetTrigger as-child>
          <Button variant="ghost" size="icon" class="md:hidden" aria-label="Open menu">
            <Menu class="size-5" />
          </Button>
        </SheetTrigger>
        <SheetContent side="right" class="w-72">
          <div class="flex h-full flex-col">
            <div class="flex items-center justify-between border-b px-4 py-3">
              <div class="flex items-center gap-2">
                <div class="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md">
                  <Boxes class="size-3.5" />
                </div>
                <span class="text-sm font-semibold">Acme</span>
              </div>
              <Button variant="ghost" size="icon" class="size-8" aria-label="Close menu" @click="mobileOpen = false">
                <X class="size-4" />
              </Button>
            </div>
            <nav class="flex flex-1 flex-col gap-1 p-4" aria-label="Mobile">
              <a
                href="#features"
                class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                @click="mobileOpen = false"
                >Features</a
              >
              <a
                href="#pricing"
                class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                @click="mobileOpen = false"
                >Pricing</a
              >
              <a
                href="#customers"
                class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                @click="mobileOpen = false"
                >Customers</a
              >
              <a
                href="#docs"
                class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                @click="mobileOpen = false"
                >Docs</a
              >
              <a
                href="#blog"
                class="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                @click="mobileOpen = false"
                >Blog</a
              >
            </nav>
            <div class="flex flex-col gap-2 border-t p-4">
              <Button variant="outline" class="w-full">Sign in</Button>
              <Button class="w-full">Start free trial</Button>
            </div>
          </div>
        </SheetContent>
      </Sheet>
    </div>
  </header>
</template>

```

## heatmap

- type: `registry:ui`
- description: Grid heatmap wrapper around Apache ECharts with visualMap color ramp. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/heatmap/Heatmap.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { HeatmapChart as EChartsHeatmap } from 'echarts/charts'
import { GridComponent, TooltipComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsHeatmap, GridComponent, TooltipComponent, VisualMapComponent])

interface Props {
  data: [number, number, number][] // [xIndex, yIndex, value]
  xLabels: string[]
  yLabels: string[]
  height?: number | string
  min?: number
  max?: number
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 300,
})

const mergedOption = computed(() => {
  const values = props.data.map((d) => d[2])
  const computedMin = props.min ?? Math.min(...values)
  const computedMax = props.max ?? Math.max(...values)

  return {
    grid: { left: 16, right: 16, top: 16, bottom: 16, containLabel: true },
    tooltip: {
      position: 'top',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
      formatter: (params: any) =>
        `${props.yLabels[params.value[1]]} / ${props.xLabels[params.value[0]]}: ${params.value[2]}`,
    },
    xAxis: {
      type: 'category',
      data: props.xLabels,
      splitArea: { show: true },
      axisLabel: { fontSize: 11 },
      axisTick: { show: false },
    },
    yAxis: {
      type: 'category',
      data: props.yLabels,
      splitArea: { show: true },
      axisLabel: { fontSize: 11 },
      axisTick: { show: false },
    },
    visualMap: {
      min: computedMin,
      max: computedMax,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: 0,
      itemWidth: 12,
      itemHeight: 80,
      inRange: {
        color: ['#e0f2fe', '#3b82f6', '#1e3a8a'],
      },
      textStyle: { fontSize: 10 },
    },
    series: (() => {
      const series = [
        {
          type: 'heatmap',
          data: props.data,
          label: { show: false },
          itemStyle: { borderRadius: 2, borderWidth: 0 },
          emphasis: {
            itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)' },
          },
        },
      ]
      const userSeries = (props.option as any)?.series
      return Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series
    })(),
    // visualMap / tooltip / axes overrides still spread on top — strip
    // `series` so it doesn't clobber the merged result above.
    ...(() => {
      const { series: _, ...rest } = (props.option as any) ?? {}
      return rest
    })(),
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/heatmap/index.ts`

```ts
export { default as Heatmap } from './Heatmap.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## hero-01

- type: `registry:block`
- description: Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `badge`, `button`, `card`

### `packages/registry-vue/blocks/hero-01/Hero01.vue`

```vue
<script setup lang="ts">
import { ArrowRight, PlayCircle, Sparkles } from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
</script>

<template>
  <section class="bg-background relative overflow-hidden">
    <div
      class="bg-primary/10 pointer-events-none absolute -top-40 left-1/2 size-[600px] -translate-x-1/2 rounded-full blur-3xl"
    />

    <div class="relative mx-auto max-w-6xl px-6 py-24 lg:py-32">
      <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
        <div class="space-y-6">
          <Badge variant="secondary" class="gap-1">
            <Sparkles class="size-3" />
            New: AI-powered insights
          </Badge>
          <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
            The platform your team will actually use.
          </h1>
          <p class="text-muted-foreground max-w-xl text-lg">
            One workspace for everything your team needs. Built on shadcn-vue primitives — fast, accessible, easy to
            customise.
          </p>
          <div class="flex flex-wrap items-center gap-3">
            <Button size="lg">
              Start free trial
              <ArrowRight class="ml-2 size-4" />
            </Button>
            <Button size="lg" variant="outline">
              <PlayCircle class="mr-2 size-4" />
              Watch demo (2 min)
            </Button>
          </div>
          <div class="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
            <span>★★★★★ 4.9 on G2</span>
            <span>14-day free trial</span>
            <span>No credit card required</span>
          </div>
        </div>

        <div class="relative">
          <Card class="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
            <CardContent class="space-y-1 p-4">
              <p class="text-muted-foreground text-xs uppercase">Active users</p>
              <p class="text-2xl font-semibold">1,284</p>
              <p class="text-xs text-[var(--success)]">+8.2% MoM</p>
            </CardContent>
          </Card>
          <Card class="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
            <CardContent class="space-y-1 p-4">
              <p class="text-muted-foreground text-xs uppercase">Uptime</p>
              <p class="text-2xl font-semibold">100%</p>
              <p class="text-muted-foreground text-xs">12 cycles, 0 misses</p>
            </CardContent>
          </Card>
          <Card class="ml-auto w-72 shadow-xl">
            <CardHeader>
              <CardTitle class="text-base">Onboarding queue</CardTitle>
              <CardDescription>3 starting Monday</CardDescription>
            </CardHeader>
            <CardContent class="space-y-3">
              <div class="flex items-center gap-3">
                <Avatar class="size-8">
                  <AvatarFallback>LW</AvatarFallback>
                </Avatar>
                <div class="flex-1">
                  <p class="text-sm font-medium">Lena Wei</p>
                  <p class="text-muted-foreground text-xs">Engineering</p>
                </div>
                <Badge variant="secondary">Pending</Badge>
              </div>
              <div class="flex items-center gap-3">
                <Avatar class="size-8">
                  <AvatarFallback>JR</AvatarFallback>
                </Avatar>
                <div class="flex-1">
                  <p class="text-sm font-medium">Joaquín Reyes</p>
                  <p class="text-muted-foreground text-xs">Engineering</p>
                </div>
                <Badge variant="secondary">Pending</Badge>
              </div>
              <div class="flex items-center gap-3">
                <Avatar class="size-8">
                  <AvatarFallback>PS</AvatarFallback>
                </Avatar>
                <div class="flex-1">
                  <p class="text-sm font-medium">Priya Shah</p>
                  <p class="text-muted-foreground text-xs">Engineering</p>
                </div>
                <Badge variant="secondary">Pending</Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  </section>
</template>

```

## highlight

- type: `registry:ui`
- description: Highlights matching substrings in text for search results. Supports string or regex queries, case-sensitive and whole-word matching, custom highlight tag, and a max-highlight cap.

### `packages/registry-vue/components/highlight/Highlight.vue`

```vue
<script setup lang="ts">
import { computed, onMounted, watch, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  /** Text to search within. */
  text: string
  /** Query string or RegExp to highlight. */
  query: string | RegExp
  /** HTML tag used to wrap matched substrings. Default 'mark'. */
  highlightTag?: 'mark' | 'span'
  /** Class applied to each highlight wrapper. */
  highlightClass?: HTMLAttributes['class']
  /** Inline style applied to each highlight wrapper. */
  highlightStyle?: HTMLAttributes['style']
  /** Case-sensitive matching. Default false. */
  caseSensitive?: boolean
  /** Match whole words only. Default false. */
  wholeWord?: boolean
  /** Cap the number of highlights rendered. 0 = unlimited. Default 0. */
  maxHighlights?: number
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  highlightTag: 'mark',
  caseSensitive: false,
  wholeWord: false,
  maxHighlights: 0,
})

const emit = defineEmits<{
  /** Emitted when the query changes. Provides the total match count (before maxHighlights cap). */
  matchCount: [count: number]
}>()

interface Segment {
  text: string
  match: boolean
}

const segments = computed<Segment[]>(() => {
  const text = props.text
  const query = props.query
  if (!text) return []
  if (!query) return [{ text, match: false }]

  let pattern: RegExp
  if (query instanceof RegExp) {
    const flags = query.flags.includes('g') ? query.flags : query.flags + 'g'
    pattern = new RegExp(query.source, flags)
  } else {
    if (!query) return [{ text, match: false }]
    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    const body = props.wholeWord ? `\\b${escaped}\\b` : escaped
    const flags = props.caseSensitive ? 'g' : 'gi'
    pattern = new RegExp(body, flags)
  }

  const out: Segment[] = []
  let last = 0
  let count = 0
  let m: RegExpExecArray | null
  while ((m = pattern.exec(text)) !== null) {
    if (m.index > last) out.push({ text: text.slice(last, m.index), match: false })
    out.push({ text: m[0], match: true })
    last = m.index + m[0].length
    count++
    if (props.maxHighlights > 0 && count >= props.maxHighlights) break
    if (m[0] === '') pattern.lastIndex++
  }
  if (last < text.length) out.push({ text: text.slice(last), match: false })

  return out
})

// Total match count (uncapped) — emitted via watch to avoid side-effects in computed
const totalMatchCount = computed(() => {
  const text = props.text
  const query = props.query
  if (!text || !query) return 0

  let pattern: RegExp
  if (query instanceof RegExp) {
    const flags = query.flags.includes('g') ? query.flags : query.flags + 'g'
    pattern = new RegExp(query.source, flags)
  } else {
    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
    const body = props.wholeWord ? `\\b${escaped}\\b` : escaped
    const flags = props.caseSensitive ? 'g' : 'gi'
    pattern = new RegExp(body, flags)
  }

  let total = 0
  let m: RegExpExecArray | null
  while ((m = pattern.exec(text)) !== null) {
    total++
    if (m[0] === '') pattern.lastIndex++
  }
  return total
})

watch(totalMatchCount, (n) => emit('matchCount', n))
onMounted(() => emit('matchCount', totalMatchCount.value))
</script>

<template>
  <span data-uipkge data-slot="highlight" :class="cn(props.class)">
    <template v-for="(seg, i) in segments" :key="i">
      <component
        :is="highlightTag"
        v-if="seg.match"
        data-slot="highlight-match"
        :class="cn('bg-yellow-200 text-yellow-950 dark:bg-yellow-500/30 dark:text-yellow-100 rounded px-0.5 font-medium', highlightClass)"
        :style="highlightStyle"
        >{{ seg.text }}</component
      >
      <template v-else>{{ seg.text }}</template>
    </template>
  </span>
</template>

```

### `packages/registry-vue/components/highlight/index.ts`

```ts
export { default as Highlight } from './Highlight.vue'

```

## hover-card

- type: `registry:ui`
- description: Rich popover triggered by hover/focus instead of click. Use for inline previews — user cards on @mentions, link previews, KPI explanations. Built on reka-ui with a configurable open/close delay.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/hover-card/HoverCard.vue`

```vue
<script setup lang="ts">
import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui'
import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<HoverCardRootProps>()
const emits = defineEmits<HoverCardRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <HoverCardRoot v-slot="slotProps" data-uipkge data-slot="hover-card" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </HoverCardRoot>
</template>

```

### `packages/registry-vue/components/hover-card/HoverCardContent.vue`

```vue
<script setup lang="ts">
import type { HoverCardContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(), {
  sideOffset: 4,
})

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <HoverCardPortal>
    <HoverCardContent
      data-uipkge
      data-slot="hover-card-content"
      v-bind="{ ...$attrs, ...forwardedProps }"
      :class="
        cn(
          'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
          props.class,
        )
      "
    >
      <slot />
    </HoverCardContent>
  </HoverCardPortal>
</template>

```

### `packages/registry-vue/components/hover-card/HoverCardTrigger.vue`

```vue
<script setup lang="ts">
import type { HoverCardTriggerProps } from 'reka-ui'
import { HoverCardTrigger } from 'reka-ui'

const props = defineProps<HoverCardTriggerProps>()
</script>

<template>
  <HoverCardTrigger data-uipkge data-slot="hover-card-trigger" v-bind="props">
    <slot />
  </HoverCardTrigger>
</template>

```

### `packages/registry-vue/components/hover-card/index.ts`

```ts
export { default as HoverCard } from './HoverCard.vue'
export { default as HoverCardContent } from './HoverCardContent.vue'
export { default as HoverCardTrigger } from './HoverCardTrigger.vue'

```

## icon-box

- type: `registry:ui`
- description: Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.

### `packages/registry-vue/components/icon-box/IconBox.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    icon: Component
    variant?: 'primary' | 'muted' | 'custom'
    shape?: 'rounded' | 'circle'
    size?: 'sm' | 'md' | 'lg'
    class?: string
    iconClass?: string
  }>(),
  {
    variant: 'primary',
    shape: 'rounded',
    size: 'md',
  },
)

const variantClasses: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  muted: 'bg-muted text-muted-foreground',
  custom: '',
}

const shapeClasses: Record<string, string> = {
  rounded: 'rounded-lg',
  circle: 'rounded-full',
}

const sizeClasses: Record<string, string> = {
  sm: 'p-1.5',
  md: 'p-2',
  lg: 'p-3',
}

const iconSizes: Record<string, string> = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-6',
}
</script>

<template>
  <div :class="cn('shrink-0', variantClasses[variant], shapeClasses[shape], sizeClasses[size], props.class)">
    <component :is="icon" :class="cn(iconSizes[size], props.iconClass)" />
  </div>
</template>

```

### `packages/registry-vue/components/icon-box/index.ts`

```ts
export { default as IconBox } from './IconBox.vue'

```

## icon-transition

- type: `registry:ui`
- description: Animated icon swap for click acknowledgements — copy → check, bookmark → bookmark-filled, follow → follower. Pass two icon components and an async `action`; clicking runs the action then springs the active icon in. Auto-reverts after `resetAfter` ms (default 1500), or pass `0` to keep the active icon and call the exposed `reset()` method to flip it back. Renders as a `<button>` by default; use `as="span"` plus the `:active` prop when you want an externally controlled, non-interactive icon swap inside another control. Honors `prefers-reduced-motion`.

### `packages/registry-vue/components/icon-transition/IconTransition.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue'
import type { Component, HTMLAttributes } from 'vue'

// Self-contained icon-swap control. Click runs an optional async `action`,
// then flips from `defaultIcon` to `activeIcon` with a spring pop. By default
// it auto-reverts after 1500ms; pass `:resetAfter="0"` to keep the active
// icon, then call `iconRef.value.reset()` manually.
//
// Two operating modes:
//   1. Self-managed (most common): pass `defaultIcon`, `activeIcon`, and
//      either `action` or just listen to `@activate`. The component runs
//      the action, manages its own `active` state, and auto-resets.
//   2. Externally controlled: pass `:active="boolean"` and the component
//      will mirror that prop, ignoring its internal flag.
//
// Renders as a <button> by default. Pass `as="span"` for a non-interactive
// icon (e.g. inside a parent button) — in that mode the parent is responsible
// for triggering `trigger()` via the exposed ref.

const props = withDefaults(
  defineProps<{
    defaultIcon: Component
    activeIcon: Component
    /** Tailwind size/color applied to the icons. */
    iconClass?: HTMLAttributes['class']
    /** Async work executed on click before the icon flips. Return `false` to skip the flip. */
    action?: () => boolean | void | Promise<boolean | void>
    /** ms before reverting to defaultIcon. Set to `0` (or null) to stay active. */
    resetAfter?: number | null
    /** Pop animation duration in ms (also scales the leave fade). */
    duration?: number
    /** aria-label shown in default state. */
    label?: string
    /** aria-label shown after activation; falls back to `label`. */
    activeLabel?: string
    /** Tailwind class applied while active (e.g. "text-success"). */
    activeClass?: string
    /** Render element. `button` adds click handler + focus styling; `span` is purely visual. */
    as?: 'button' | 'span'
    /** External control. When provided, this prop wins over internal state. */
    active?: boolean
  }>(),
  {
    iconClass: 'size-4',
    resetAfter: 1500,
    duration: 240,
    activeClass: 'text-success',
    as: 'button',
    active: undefined,
  },
)

const emit = defineEmits<{
  activate: []
  reset: []
}>()

const internalActive = ref(false)
const isActive = computed(() => (props.active !== undefined ? props.active : internalActive.value))

let timer: ReturnType<typeof setTimeout> | null = null

async function trigger() {
  if (props.action) {
    const result = await props.action()
    if (result === false) return
  }
  internalActive.value = true
  emit('activate')
  clearTimer()
  if (props.resetAfter && props.resetAfter > 0) {
    timer = setTimeout(reset, props.resetAfter)
  }
}

function reset() {
  internalActive.value = false
  emit('reset')
  clearTimer()
}

function clearTimer() {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
}

defineExpose({ trigger, reset })

onBeforeUnmount(clearTimer)
</script>

<template>
  <component
    :is="as"
    v-bind="as === 'button' ? { type: 'button' } : {}"
    :aria-label="isActive ? (activeLabel ?? label) : label"
    :aria-live="isActive ? 'polite' : undefined"
    :class="[
      'icon-transition focus-visible:ring-ring inline-grid place-items-center transition-colors focus-visible:ring-2 focus-visible:outline-none',
      isActive ? activeClass : '',
    ]"
    :style="{ '--it-duration': `${duration}ms` }"
    @click="as === 'button' ? trigger() : null"
  >
    <Transition name="icon-transition" mode="default">
      <!-- Wrapping span isolates the absolute-positioning + transform from
        the icon itself. Putting position:absolute + inset:0 directly on the
        SVG would stretch it to fill the parent (e.g. 28×28 inside a size-7
        button) and the icon would visually balloon mid-transition; the
        wrapper takes the layout role and the SVG keeps its intrinsic
        iconClass-driven size. -->
      <span :key="isActive ? 'active' : 'default'" class="icon-transition-slot">
        <component :is="isActive ? activeIcon : defaultIcon" :class="iconClass" aria-hidden="true" />
      </span>
    </Transition>
  </component>
</template>

<style scoped>
.icon-transition-slot {
  /* Both default and active icons map to the same grid cell so they can
     overlap during the cross-fade without ever leaving the parent's flow.
     No `position: absolute` here — that would have to inset:0 the slot,
     stretching it to the button size and dragging the SVG along with it. */
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-transition-enter-active,
.icon-transition-leave-active {
  transform-origin: center;
}
.icon-transition-enter-active {
  animation: icon-transition-pop var(--it-duration, 240ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.icon-transition-leave-active {
  animation: icon-transition-fade calc(var(--it-duration, 240ms) * 0.66) ease-in both;
}
@keyframes icon-transition-pop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.18) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes icon-transition-fade {
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-transition-enter-active,
  .icon-transition-leave-active {
    animation-duration: 0ms !important;
  }
}
</style>

```

### `packages/registry-vue/components/icon-transition/index.ts`

```ts
export { default as IconTransition } from './IconTransition.vue'

```

## icons

- type: `registry:ui`
- description: Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and copy-paste imports.

### `packages/registry-vue/components/icons/Icon.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

/**
 * Universal Icon component supporting multiple icon libraries:
 * - Lucide (default, via slot)
 * - Font Awesome (via class:fa-* and :class)
 * - Material Design Icons (via class:mdi-* and :class)
 * - Heroicons (via slot)
 * - Custom SVG (via src prop)
 */
const props = withDefaults(
  defineProps<{
    // Size
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'
    // Color
    color?: string
    // Custom class for icon libraries (fa-, mdi-, etc.)
    class?: HTMLAttributes['class']
    // For img-based icons
    src?: string
    alt?: string
    // Rotation/flip
    rotation?: number | string
    flip?: 'horizontal' | 'vertical' | 'both'
    // A11y
    label?: string
    ariaLabel?: string
    // Style
    inline?: boolean
  }>(),
  {
    size: 'md',
    inline: true,
  },
)

const sizeClasses = {
  xs: 'size-3',
  sm: 'size-4',
  md: 'size-5',
  lg: 'size-6',
  xl: 'size-8',
  '2xl': 'size-12',
  inherit: 'size-full',
}

const rotationDeg = computed(() => {
  if (!props.rotation) return undefined
  return typeof props.rotation === 'string' ? parseInt(props.rotation) : props.rotation
})

const flipClasses = computed(() => {
  if (!props.flip) return ''
  if (props.flip === 'horizontal') return '-scale-x-100'
  if (props.flip === 'vertical') return '-scale-y-100'
  if (props.flip === 'both') return '-scale-x-100 -scale-y-100'
  return ''
})
</script>

<template>
  <!-- Image-based icon (Material Design, custom URLs, etc.) -->
  <img
    v-if="src"
    :src="src"
    :alt="alt || label"
    :class="cn('shrink-0 object-contain', size !== 'inherit' ? sizeClasses[size] : '', flipClasses, props.class)"
    :style="{
      color: color,
      transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
    }"
    :aria-label="ariaLabel || label"
    role="img"
  />

  <!-- Slot-based icon (Lucide, Heroicons, inline SVG) -->
  <span
    v-else
    :class="
      cn(
        'inline-flex shrink-0 items-center justify-center',
        size !== 'inherit' ? sizeClasses[size] : '',
        flipClasses,
        props.class,
      )
    "
    :style="{
      color: color,
      transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
    }"
    :aria-label="ariaLabel || label"
    :role="label ? 'img' : undefined"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/icons/index.ts`

```ts
export { default as Icon } from './Icon.vue'

// Icon library class prefixes for reference:
// Font Awesome: 'fa-solid', 'fa-regular', 'fa-brands', 'fa-*'
// Material Design: 'mdi mdi-*'
// Heroicons: already SVG-based, use slot

// Helper function to generate Font Awesome class
export function faClass(iconName: string, style: 'solid' | 'regular' | 'brands' = 'solid'): string {
  const prefix = style === 'brands' ? 'fab' : style === 'solid' ? 'fas' : 'far'
  return `${prefix} fa-${iconName}`
}

// Helper function to generate Material Design class
export function mdiClass(iconName: string): string {
  return `mdi mdi-${iconName}`
}

```

## image-compare

- type: `registry:ui`
- description: Before/after image comparison slider with a draggable divider. Two images overlaid via clip-path, pointer-driven (mouse + touch), horizontal or vertical orientation, custom handle slot, labels, and disabled state.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/image-compare/ImageCompare.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { MoveHorizontal, MoveVertical } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { imageCompareVariants } from './image-compare.variants'

interface Props {
  beforeSrc: string
  afterSrc: string
  beforeAlt?: string
  afterAlt?: string
  beforeLabel?: string
  afterLabel?: string
  modelValue?: number
  orientation?: 'horizontal' | 'vertical'
  disabled?: boolean
  showLabels?: boolean
  showHandle?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  beforeAlt: 'Before',
  afterAlt: 'After',
  beforeLabel: 'Before',
  afterLabel: 'After',
  modelValue: 50,
  orientation: 'horizontal',
  disabled: false,
  showLabels: true,
  showHandle: true,
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const containerRef = ref<HTMLElement | null>(null)
const handleRef = ref<HTMLElement | null>(null)
const dragging = ref(false)
const position = ref(props.modelValue)

watch(
  () => props.modelValue,
  (v) => {
    if (v !== position.value) position.value = v
  },
)

function clamp(v: number): number {
  return Math.min(100, Math.max(0, v))
}

function updateFromPointer(clientX: number, clientY: number) {
  const el = containerRef.value
  if (!el) return
  const rect = el.getBoundingClientRect()
  if (props.orientation === 'horizontal') {
    position.value = clamp(((clientX - rect.left) / rect.width) * 100)
  } else {
    position.value = clamp(((clientY - rect.top) / rect.height) * 100)
  }
  emit('update:modelValue', position.value)
}

function onPointerDown(e: PointerEvent) {
  if (props.disabled) return
  dragging.value = true
  const el = e.currentTarget as HTMLElement
  try {
    el.setPointerCapture(e.pointerId)
  } catch {
    // pointer capture can fail on synthetic / non-active pointers
  }
  updateFromPointer(e.clientX, e.clientY)
}

function onPointerMove(e: PointerEvent) {
  if (!dragging.value || props.disabled) return
  updateFromPointer(e.clientX, e.clientY)
}

function onPointerUp(e: PointerEvent) {
  if (!dragging.value) return
  dragging.value = false
  const el = e.currentTarget as HTMLElement
  try {
    el.releasePointerCapture(e.pointerId)
  } catch {
    // pointer already released
  }
}

// Keyboard support: arrow keys move the slider by 1% (Shift = 10%)
function onKeyDown(e: KeyboardEvent) {
  if (props.disabled) return
  const isH = props.orientation === 'horizontal'
  const step = e.shiftKey ? 10 : 1
  let next = position.value
  if (isH) {
    if (e.key === 'ArrowLeft') next -= step
    else if (e.key === 'ArrowRight') next += step
    else return
  } else {
    if (e.key === 'ArrowUp') next -= step
    else if (e.key === 'ArrowDown') next += step
    else return
  }
  e.preventDefault()
  position.value = clamp(next)
  emit('update:modelValue', position.value)
}

// "After" image is clipped to show only the right portion.
// Dragging right (higher %) reveals more of "before" on the left.
const clipStyle = computed(() => {
  const pct = position.value
  if (props.orientation === 'horizontal') {
    return { clipPath: `inset(0 0 0 ${pct}%)` }
  }
  return { clipPath: `inset(${pct}% 0 0 0)` }
})

const dividerStyle = computed(() => {
  const pct = position.value
  if (props.orientation === 'horizontal') {
    return { left: `${pct}%` }
  }
  return { top: `${pct}%` }
})

onBeforeUnmount(() => {
  dragging.value = false
})
</script>

<template>
  <div
    ref="containerRef"
    data-uipkge
    data-slot="image-compare"
    :data-orientation="orientation"
    :data-disabled="disabled ? '' : undefined"
    :class="cn(imageCompareVariants({ orientation }), props.class)"
    style="touch-action: none"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerUp"
    @pointercancel="onPointerUp"
  >
    <!-- Before (base layer, full) -->
    <img
      :src="beforeSrc"
      :alt="beforeAlt"
      class="pointer-events-none absolute inset-0 size-full object-cover select-none"
      draggable="false"
    />
    <span
      v-if="showLabels"
      class="bg-background/80 text-foreground absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs font-medium backdrop-blur-sm"
    >
      {{ beforeLabel }}
    </span>

    <!-- After (clipped overlay — visible on the right side) -->
    <div class="absolute inset-0 size-full" :style="clipStyle">
      <img
        :src="afterSrc"
        :alt="afterAlt"
        class="pointer-events-none absolute inset-0 size-full object-cover select-none"
        draggable="false"
      />
      <span
        v-if="showLabels"
        class="bg-background/80 text-foreground absolute right-2 bottom-2 rounded px-2 py-0.5 text-xs font-medium backdrop-blur-sm"
      >
        {{ afterLabel }}
      </span>
    </div>

    <!-- Divider + handle -->
    <div
      v-if="!disabled"
      class="bg-border absolute z-10"
      :class="orientation === 'horizontal' ? 'top-0 h-full w-0.5' : 'left-0 h-0.5 w-full'"
      :style="dividerStyle"
    >
      <button
        v-if="showHandle"
        ref="handleRef"
        type="button"
        role="slider"
        :aria-valuenow="Math.round(position)"
        aria-valuemin="0"
        aria-valuemax="100"
        :aria-label="`Image comparison slider, ${Math.round(position)} percent`"
        :aria-orientation="orientation"
        tabindex="0"
        class="bg-background border-border focus-visible:ring-ring absolute flex size-9 cursor-ew-resize items-center justify-center rounded-full border shadow-md transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:outline-none"
        :class="orientation === 'horizontal' ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'"
        :style="orientation === 'vertical' ? { cursor: 'ns-resize' } : {}"
        @keydown="onKeyDown"
        @pointerdown.stop="onPointerDown"
        @pointermove="onPointerMove"
        @pointerup="onPointerUp"
        @pointercancel="onPointerUp"
      >
        <slot name="handle">
          <MoveHorizontal v-if="orientation === 'horizontal'" class="text-foreground size-4" />
          <MoveVertical v-else class="text-foreground size-4" />
        </slot>
      </button>
    </div>

    <div v-if="disabled" class="bg-background/40 absolute inset-0" />
  </div>
</template>

```

### `packages/registry-vue/components/image-compare/image-compare.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const imageCompareVariants = cva('bg-muted relative overflow-hidden rounded-lg border select-none', {
  variants: {
    orientation: {
      horizontal: 'cursor-ew-resize',
      vertical: 'cursor-ns-resize',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
})

export type ImageCompareVariants = VariantProps<typeof imageCompareVariants>

```

### `packages/registry-vue/components/image-compare/index.ts`

```ts
export { default as ImageCompare } from './ImageCompare.vue'
export { imageCompareVariants, type ImageCompareVariants } from './image-compare.variants'

```

## inbox

- type: `registry:block`
- description: Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `button`, `input`

### `packages/registry-vue/blocks/inbox/Inbox.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import {
  Archive,
  ArrowLeft,
  ArrowRight,
  AtSign,
  Forward,
  Inbox as InboxIcon,
  MoreVertical,
  Paperclip,
  Pencil,
  Reply,
  ReplyAll,
  Search,
  Send,
  Smile,
  Star,
  Tag,
  Trash2,
  AlertOctagon,
  FileText,
  Bookmark,
} from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

type ReplyMode = 'reply' | 'reply-all' | 'forward'

type FolderId = 'inbox' | 'starred' | 'sent' | 'drafts' | 'spam' | 'trash'

interface Folder {
  id: FolderId
  label: string
  icon: any
}

interface LabelTag {
  id: string
  label: string
  color: string
}

interface Mail {
  id: string
  folder: FolderId
  from: { name: string; email: string; initials: string }
  to: string
  subject: string
  preview: string
  body: string
  receivedAt: Date
  read: boolean
  starred: boolean
  hasAttachment: boolean
  labels: string[]
}

const folders: Folder[] = [
  { id: 'inbox', label: 'Inbox', icon: InboxIcon },
  { id: 'starred', label: 'Starred', icon: Star },
  { id: 'sent', label: 'Sent', icon: Send },
  { id: 'drafts', label: 'Drafts', icon: FileText },
  { id: 'spam', label: 'Spam', icon: AlertOctagon },
  { id: 'trash', label: 'Trash', icon: Trash2 },
]

const labels: LabelTag[] = [
  { id: 'work', label: 'Work', color: 'bg-primary' },
  { id: 'personal', label: 'Personal', color: 'bg-success' },
  { id: 'finance', label: 'Finance', color: 'bg-info' },
  { id: 'travel', label: 'Travel', color: 'bg-warning' },
]

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const mails = ref<Mail[]>([
  {
    id: 'e1',
    folder: 'inbox',
    from: { name: 'Sarah Connor', email: 'sarah@acme.com', initials: 'SC' },
    to: 'you@acme.com',
    subject: 'Q2 OKR draft — your sign-off needed',
    preview:
      'Pulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need…',
    body: `Hi,\n\nPulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need your call before we lock it:\n\n• Hiring plan: 4 vs 6 ENG roles (page 3)\n• EU rollout timing: April vs June (page 7)\n\nGoing to share with the rest of the leadership team Wednesday EOD, so anything from you by Tuesday is great.\n\nThanks,\nSarah`,
    receivedAt: new Date(now.getTime() - 18 * 60 * 1000),
    read: false,
    starred: true,
    hasAttachment: true,
    labels: ['work'],
  },
  {
    id: 'e2',
    folder: 'inbox',
    from: { name: 'Marcus Rivera', email: 'marcus@acme.com', initials: 'MR' },
    to: 'you@acme.com',
    subject: 'Re: Dashboard review tomorrow',
    preview:
      'Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.',
    body: `Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.\n\nFew things I want to cover:\n  - Throughput delta vs last sprint\n  - The two stories we de-scoped\n  - Q2 capacity ask\n\nSee you tomorrow,\nMarcus`,
    receivedAt: new Date(now.getTime() - 95 * 60 * 1000),
    read: false,
    starred: false,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e3',
    folder: 'inbox',
    from: { name: 'Stripe', email: 'receipts@stripe.com', initials: 'St' },
    to: 'you@acme.com',
    subject: 'Your invoice from Acme Inc. — $1,290.00',
    preview: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00…',
    body: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00.',
    receivedAt: new Date(now.getTime() - 4 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: true,
    labels: ['finance'],
  },
  {
    id: 'e4',
    folder: 'inbox',
    from: { name: 'Linear', email: 'no-reply@linear.app', initials: 'Li' },
    to: 'you@acme.com',
    subject: 'Weekly summary: 14 issues closed, 22 opened',
    preview:
      'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',
    body: 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',
    receivedAt: new Date(now.getTime() - 9 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e5',
    folder: 'inbox',
    from: { name: 'Priya Shah', email: 'priya@acme.com', initials: 'PS' },
    to: 'you@acme.com',
    subject: 'Color tokens are live in staging',
    preview:
      'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look…',
    body: 'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look when you have a sec.',
    receivedAt: yesterday,
    read: true,
    starred: true,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e6',
    folder: 'inbox',
    from: { name: 'United Airlines', email: 'reservations@united.com', initials: 'UA' },
    to: 'you@acme.com',
    subject: 'Your itinerary: SFO → LHR, departing Apr 12',
    preview: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',
    body: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',
    receivedAt: new Date(now.getTime() - 38 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: true,
    labels: ['travel'],
  },
  {
    id: 'e7',
    folder: 'inbox',
    from: { name: 'Mom', email: 'mom@family.net', initials: 'M' },
    to: 'you@acme.com',
    subject: 'Sunday lunch?',
    preview: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',
    body: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',
    receivedAt: new Date(now.getTime() - 55 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: false,
    labels: ['personal'],
  },
])

const activeFolder = ref<FolderId>('inbox')
const activeLabel = ref<string | null>(null)
const activeId = ref<string>('e1')
const search = ref('')
const replyMode = ref<ReplyMode>('reply')
const replyDraft = ref('')
const justSent = ref(false)

function folderCount(id: FolderId): number {
  if (id === 'starred') return mails.value.filter((m) => m.starred && m.folder !== 'trash').length
  return mails.value.filter((m) => m.folder === id).length
}

function unreadCount(id: FolderId): number {
  if (id === 'starred') return mails.value.filter((m) => m.starred && !m.read && m.folder !== 'trash').length
  return mails.value.filter((m) => m.folder === id && !m.read).length
}

const labelCounts = computed(() =>
  labels.reduce<Record<string, number>>((acc, l) => {
    acc[l.id] = mails.value.filter((m) => m.labels.includes(l.id)).length
    return acc
  }, {}),
)

const visibleMails = computed(() => {
  const q = search.value.trim().toLowerCase()
  let list = mails.value.filter((m) => {
    if (activeLabel.value) return m.labels.includes(activeLabel.value)
    if (activeFolder.value === 'starred') return m.starred && m.folder !== 'trash'
    return m.folder === activeFolder.value
  })
  if (q) {
    list = list.filter(
      (m) =>
        m.subject.toLowerCase().includes(q) ||
        m.from.name.toLowerCase().includes(q) ||
        m.preview.toLowerCase().includes(q),
    )
  }
  return [...list].sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())
})

const activeMail = computed(() => mails.value.find((m) => m.id === activeId.value) ?? null)

function selectMail(id: string) {
  activeId.value = id
  const m = mails.value.find((m) => m.id === id)
  if (m) m.read = true
}

function selectFolder(id: FolderId) {
  activeFolder.value = id
  activeLabel.value = null
  const first = visibleMails.value[0]
  if (first) activeId.value = first.id
}

function selectLabel(id: string) {
  activeLabel.value = id
  const first = visibleMails.value[0]
  if (first) activeId.value = first.id
}

function toggleStar(id: string, e?: Event) {
  e?.stopPropagation()
  const m = mails.value.find((m) => m.id === id)
  if (m) m.starred = !m.starred
}

function archive(id: string) {
  mails.value = mails.value.filter((m) => m.id !== id)
  const next = visibleMails.value[0]
  if (next) activeId.value = next.id
}

function formatMailTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000))
  if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' })
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

function formatFullTime(d: Date): string {
  return d.toLocaleString(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  })
}

function labelMeta(id: string): LabelTag | undefined {
  return labels.find((l) => l.id === id)
}

const replyRecipient = computed(() => {
  const m = activeMail.value
  if (!m) return ''
  if (replyMode.value === 'forward') return ''
  return m.from.name + ' <' + m.from.email + '>'
})

const replyPlaceholder = computed(() =>
  replyMode.value === 'forward' ? 'Add a note before forwarding' : 'Write a reply',
)

const sendDisabled = computed(() => !replyDraft.value.trim() || (replyMode.value === 'forward' && false))

function setReplyMode(mode: ReplyMode) {
  replyMode.value = mode
  justSent.value = false
}

function sendReply() {
  const body = replyDraft.value.trim()
  if (!body) return
  replyDraft.value = ''
  justSent.value = true
  window.setTimeout(() => {
    justSent.value = false
  }, 1800)
}

function onReplyKey(e: KeyboardEvent) {
  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
    e.preventDefault()
    sendReply()
  }
}

watch(activeId, () => {
  replyDraft.value = ''
  replyMode.value = 'reply'
  justSent.value = false
  nextTick()
})
</script>

<template>
  <div
    class="bg-card text-card-foreground grid h-[680px] w-full grid-cols-[220px_340px_1fr] overflow-hidden rounded-xl border shadow-sm"
  >
    <aside class="bg-muted/30 flex min-w-0 flex-col border-r">
      <div class="flex h-14 shrink-0 items-center border-b px-3">
        <Button class="h-9 w-full justify-start gap-2 rounded-lg" size="sm">
          <Pencil class="size-4" />
          Compose
        </Button>
      </div>
      <nav class="flex-1 space-y-1 overflow-y-auto px-3 pt-3 pb-3">
        <p class="text-muted-foreground px-2 pb-1 text-[10px] font-semibold tracking-widest uppercase">Folders</p>
        <button
          v-for="f in folders"
          :key="f.id"
          :class="[
            'flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors',
            activeFolder === f.id && !activeLabel
              ? 'bg-primary/10 text-primary font-medium'
              : 'hover:bg-muted/60 text-foreground/80',
          ]"
          @click="selectFolder(f.id)"
        >
          <span class="flex min-w-0 items-center gap-2">
            <component :is="f.icon" class="size-4 shrink-0" />
            <span class="truncate">{{ f.label }}</span>
          </span>
          <span v-if="unreadCount(f.id) > 0" class="text-muted-foreground shrink-0 text-[10px] tabular-nums">
            {{ unreadCount(f.id) }}
          </span>
        </button>

        <p class="text-muted-foreground mt-4 px-2 pb-1 text-[10px] font-semibold tracking-widest uppercase">Labels</p>
        <button
          v-for="l in labels"
          :key="l.id"
          :class="[
            'flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors',
            activeLabel === l.id ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/60 text-foreground/80',
          ]"
          @click="selectLabel(l.id)"
        >
          <span class="flex min-w-0 items-center gap-2">
            <span :class="['size-2.5 shrink-0 rounded-full', l.color]" />
            <span class="truncate">{{ l.label }}</span>
          </span>
          <span class="text-muted-foreground shrink-0 text-[10px] tabular-nums">
            {{ labelCounts[l.id] ?? 0 }}
          </span>
        </button>
      </nav>
    </aside>

    <section class="bg-background flex min-w-0 flex-col border-r">
      <div class="flex h-14 shrink-0 items-center gap-2 border-b px-3">
        <div class="relative flex-1">
          <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
          <Input v-model="search" placeholder="Search mail" class="h-8 rounded-lg pl-8 text-xs" />
        </div>
        <Button variant="ghost" size="icon" class="size-8" aria-label="Filter">
          <Tag class="size-4" />
        </Button>
      </div>
      <div class="flex items-center justify-between px-4 pt-3 pb-2">
        <h2 class="text-sm font-semibold tracking-tight capitalize">
          {{ activeLabel ? labelMeta(activeLabel)?.label : activeFolder }}
        </h2>
        <span class="text-muted-foreground text-[10px] tabular-nums">
          {{ visibleMails.length }} message{{ visibleMails.length === 1 ? '' : 's' }}
        </span>
      </div>
      <div class="list-scroll flex-1 overflow-y-auto pb-3">
        <button
          v-for="m in visibleMails"
          :key="m.id"
          :class="[
            'group relative w-full px-4 py-3 text-left transition-colors',
            m.id === activeId ? 'bg-primary/5' : 'hover:bg-muted/60',
          ]"
          @click="selectMail(m.id)"
        >
          <span v-if="m.id === activeId" class="bg-primary absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full" />
          <div class="flex items-start gap-3">
            <Avatar class="mt-0.5 size-8 shrink-0">
              <AvatarFallback class="text-[11px]">{{ m.from.initials }}</AvatarFallback>
            </Avatar>
            <div class="min-w-0 flex-1">
              <div class="flex items-center justify-between gap-2">
                <p :class="['truncate text-[13px]', m.read ? 'font-medium' : 'font-semibold']">
                  {{ m.from.name }}
                </p>
                <span class="text-muted-foreground shrink-0 text-[10px] tabular-nums">
                  {{ formatMailTime(m.receivedAt) }}
                </span>
              </div>
              <p :class="['mt-0.5 truncate text-xs', m.read ? 'text-foreground/80' : 'font-semibold']">
                {{ m.subject }}
              </p>
              <p class="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">
                {{ m.preview }}
              </p>
              <div class="mt-1.5 flex items-center gap-1.5">
                <span
                  v-for="lid in m.labels"
                  :key="lid"
                  class="text-muted-foreground bg-muted inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px]"
                >
                  <span :class="['size-1.5 rounded-full', labelMeta(lid)?.color]" />
                  {{ labelMeta(lid)?.label }}
                </span>
                <Paperclip v-if="m.hasAttachment" class="text-muted-foreground size-3" />
                <span v-if="!m.read" class="bg-primary ml-auto size-1.5 shrink-0 rounded-full" />
              </div>
            </div>
            <button
              class="text-muted-foreground hover:text-warning shrink-0 transition-colors"
              :title="m.starred ? 'Unstar' : 'Star'"
              @click="toggleStar(m.id, $event)"
            >
              <Star :class="['size-3.5', m.starred ? 'fill-warning text-warning' : '']" />
            </button>
          </div>
        </button>

        <div v-if="visibleMails.length === 0" class="flex flex-col items-center justify-center px-6 py-16 text-center">
          <div class="bg-muted mb-3 rounded-full p-3">
            <InboxIcon class="text-muted-foreground size-5" />
          </div>
          <p class="text-sm font-medium">Nothing here</p>
          <p class="text-muted-foreground mt-0.5 text-xs">No messages match the current filter.</p>
        </div>
      </div>
    </section>

    <section class="bg-background flex min-w-0 flex-col">
      <template v-if="activeMail">
        <div class="flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
          <div class="flex items-center gap-1">
            <Button variant="ghost" size="icon" class="size-8" aria-label="Back">
              <ArrowLeft class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="Archive" @click="archive(activeMail.id)">
              <Archive class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="Delete">
              <Trash2 class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="Save">
              <Bookmark class="size-4" />
            </Button>
          </div>
          <div class="flex items-center gap-1">
            <Button variant="ghost" size="icon" class="size-8" aria-label="Reply">
              <Reply class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="Reply all">
              <ReplyAll class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="Forward">
              <Forward class="size-4" />
            </Button>
            <Button variant="ghost" size="icon" class="size-8" aria-label="More options">
              <MoreVertical class="size-4" />
            </Button>
          </div>
        </div>

        <div class="reader-scroll flex-1 overflow-y-auto">
          <div class="px-6 pt-5 pb-3">
            <h1 class="text-foreground text-xl leading-tight font-semibold tracking-tight">
              {{ activeMail.subject }}
            </h1>
            <div class="mt-2 flex flex-wrap items-center gap-2">
              <span
                v-for="lid in activeMail.labels"
                :key="lid"
                class="text-foreground/70 bg-muted inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px]"
              >
                <span :class="['size-1.5 rounded-full', labelMeta(lid)?.color]" />
                {{ labelMeta(lid)?.label }}
              </span>
            </div>
          </div>

          <div class="flex items-start gap-3 px-6 pb-4">
            <Avatar class="size-10">
              <AvatarFallback>{{ activeMail.from.initials }}</AvatarFallback>
            </Avatar>
            <div class="min-w-0 flex-1">
              <div class="flex flex-wrap items-baseline gap-x-2">
                <p class="text-sm font-semibold">{{ activeMail.from.name }}</p>
                <p class="text-muted-foreground text-xs">&lt;{{ activeMail.from.email }}&gt;</p>
              </div>
              <p class="text-muted-foreground text-xs">to {{ activeMail.to }}</p>
            </div>
            <div class="text-muted-foreground flex shrink-0 items-center gap-2 text-xs">
              <span>{{ formatFullTime(activeMail.receivedAt) }}</span>
              <button
                class="hover:text-warning transition-colors"
                :title="activeMail.starred ? 'Unstar' : 'Star'"
                @click="toggleStar(activeMail.id)"
              >
                <Star :class="['size-4', activeMail.starred ? 'fill-warning text-warning' : '']" />
              </button>
            </div>
          </div>

          <article class="text-foreground/90 px-6 pb-6 text-sm leading-relaxed whitespace-pre-wrap">
            {{ activeMail.body }}
          </article>

          <div v-if="activeMail.hasAttachment" class="px-6 pb-6">
            <div class="bg-muted/40 flex items-center gap-3 rounded-lg border px-3 py-2.5">
              <div class="bg-info/10 text-info flex size-8 items-center justify-center rounded-md">
                <FileText class="size-4" />
              </div>
              <div class="min-w-0 flex-1">
                <p class="truncate text-xs font-medium">attachment.pdf</p>
                <p class="text-muted-foreground text-[10px]">142 KB · PDF</p>
              </div>
              <Button variant="ghost" size="sm" class="h-7 text-xs">Download</Button>
            </div>
          </div>
        </div>

        <div class="bg-muted/20 border-t px-4 pt-3 pb-3">
          <div class="mb-2 flex items-center gap-1">
            <button
              :class="[
                'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                replyMode === 'reply'
                  ? 'bg-background text-foreground border-input/60 border shadow-sm'
                  : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
              ]"
              @click="setReplyMode('reply')"
            >
              <Reply class="size-3.5" />
              Reply
            </button>
            <button
              :class="[
                'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                replyMode === 'reply-all'
                  ? 'bg-background text-foreground border-input/60 border shadow-sm'
                  : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
              ]"
              @click="setReplyMode('reply-all')"
            >
              <ReplyAll class="size-3.5" />
              Reply all
            </button>
            <button
              :class="[
                'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                replyMode === 'forward'
                  ? 'bg-background text-foreground border-input/60 border shadow-sm'
                  : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
              ]"
              @click="setReplyMode('forward')"
            >
              <Forward class="size-3.5" />
              Forward
            </button>
          </div>
          <div
            class="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4"
          >
            <p
              v-if="replyRecipient"
              class="border-input/40 text-muted-foreground border-b px-4 pt-2.5 pb-2 text-[11px]"
            >
              <span class="text-foreground/70 font-medium">To:</span> {{ replyRecipient }}
            </p>
            <Textarea
              v-model="replyDraft"
              :placeholder="replyPlaceholder"
              rows="1"
              class="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
              @keydown="onReplyKey"
            />
            <div class="flex items-center justify-between gap-2 px-2 pb-2">
              <div class="flex items-center gap-0.5">
                <Button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Attach file"
                >
                  <Paperclip class="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Emoji"
                >
                  <Smile class="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  class="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Mention"
                >
                  <AtSign class="size-4" />
                </Button>
              </div>
              <div class="flex items-center gap-2">
                <kbd
                  class="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex"
                >
                  <span>⌘</span><span>↵</span>
                </kbd>
                <Button
                  class="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                  :disabled="sendDisabled"
                  aria-label="Send"
                  @click="sendReply"
                >
                  Send
                  <ArrowRight class="size-3.5" />
                </Button>
              </div>
            </div>
          </div>
          <p v-if="justSent" class="text-success mt-2 text-center text-[11px] font-medium">Reply sent</p>
        </div>
      </template>

      <div v-else class="flex flex-1 items-center justify-center">
        <div class="text-center">
          <div class="bg-muted mx-auto mb-3 size-12 rounded-full p-3">
            <InboxIcon class="text-muted-foreground size-6" />
          </div>
          <p class="text-sm font-medium">No message selected</p>
          <p class="text-muted-foreground mt-1 text-xs">Pick a message from the list to read it here.</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.list-scroll::-webkit-scrollbar,
.reader-scroll::-webkit-scrollbar {
  width: 6px;
}
.list-scroll::-webkit-scrollbar-thumb,
.reader-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
</style>

```

## infinite-scroll

- type: `registry:ui`
- description: Load-more-on-scroll sentinel. Emits a `load` event when the user scrolls near the bottom (or top, in reverse mode). Supports a window or element scroll target, distance threshold, loading/hasMore/disabled gating, and slots for custom loading and end-of-list states.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/infinite-scroll/InfiniteScroll.vue`

```vue
<script setup lang="ts" generic="T = any">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { Loader2 } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    /** Rendered list. The component does not mutate it; the parent appends
     *  new items in response to the `load` event. */
    items?: T[]
    /** When false, the sentinel never fires `load` (end of data reached). */
    hasMore?: boolean
    /** True while the parent is fetching. While true the sentinel is paused
     *  so duplicate loads are not emitted. */
    loading?: boolean
    /** Distance (px) from the boundary at which `load` fires. Larger = earlier. */
    distance?: number
    /** Scroll container. `"window"` listens on the viewport; pass an element
     *  ref (HTMLElement) or a CSS selector string to listen on a scrollable
     *  element instead. */
    scrollTarget?: 'window' | HTMLElement | string
    /** Reverse mode: prepend items at the top. The sentinel is anchored to the
     *  top edge and `load` fires when the user scrolls near the top. */
    reverse?: boolean
    /** Hard pause independent of `loading`/`hasMore`. */
    disabled?: boolean
    /** Hide the default loading spinner (use the `loading` slot instead). */
    hideSpinner?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    items: () => [] as T[],
    hasMore: true,
    loading: false,
    distance: 0,
    scrollTarget: 'window',
    reverse: false,
    disabled: false,
    hideSpinner: false,
  },
)

const emit = defineEmits<{
  (e: 'load'): void
}>()

const sentinel = ref<HTMLElement | null>(null)
let scrollEl: HTMLElement | Window | null = null

const showSpinner = computed(() => props.loading && !props.hideSpinner)

function getScrollElement(): HTMLElement | Window | null {
  if (props.scrollTarget === 'window') return window
  if (typeof props.scrollTarget === 'string') {
    return (document.querySelector(props.scrollTarget) as HTMLElement | null) ?? window
  }
  return props.scrollTarget
}

function check() {
  if (props.disabled || props.loading || !props.hasMore || !sentinel.value) return
  const sentinelRect = sentinel.value.getBoundingClientRect()
  const viewportH = window.innerHeight || document.documentElement.clientHeight
  const viewportW = window.innerWidth || document.documentElement.clientWidth
  if (props.reverse) {
    // Reverse: fire when the sentinel (anchored at top) approaches the top edge.
    if (sentinelRect.bottom >= -props.distance && sentinelRect.top <= viewportH) {
      emit('load')
    }
  } else {
    // Forward: fire when the sentinel approaches the bottom edge.
    if (sentinelRect.top <= viewportH + props.distance && sentinelRect.bottom >= -props.distance) {
      void viewportW
      emit('load')
    }
  }
}

function onScroll() {
  check()
}

onMounted(() => {
  scrollEl = getScrollElement()
  scrollEl?.addEventListener('scroll', onScroll, { passive: true })
  // Fire once on mount so an initially-empty list starts loading immediately.
  check()
})

onBeforeUnmount(() => {
  scrollEl?.removeEventListener('scroll', onScroll)
})

// Re-bind the listener when the scroll target changes.
watch(
  () => props.scrollTarget,
  () => {
    scrollEl?.removeEventListener('scroll', onScroll)
    scrollEl = getScrollElement()
    scrollEl?.addEventListener('scroll', onScroll, { passive: true })
    check()
  },
)

// When a load completes (loading flips false) and there is still more data,
// re-check in case the viewport is still larger than the content (short list).
watch(
  () => props.loading,
  (now, was) => {
    if (was && !now && props.hasMore) {
      requestAnimationFrame(check)
    }
  },
)
</script>

<template>
  <div data-uipkge data-slot="infinite-scroll" :class="cn('w-full', props.class)">
    <!-- Reverse mode: spinner + sentinel sit above the items so new rows
         prepend naturally without shifting the scroll position. -->
    <template v-if="reverse">
      <div v-if="showSpinner" data-slot="infinite-scroll-loading" class="flex w-full justify-center py-3">
        <slot name="loading">
          <Loader2 class="text-muted-foreground size-5 animate-spin" aria-label="Loading" />
        </slot>
      </div>
      <div ref="sentinel" data-slot="infinite-scroll-sentinel" class="h-px w-full" aria-hidden="true" />
      <slot :items="items" />
    </template>

    <template v-else>
      <slot :items="items" />
      <div ref="sentinel" data-slot="infinite-scroll-sentinel" class="h-px w-full" aria-hidden="true" />
      <div v-if="showSpinner" data-slot="infinite-scroll-loading" class="flex w-full justify-center py-3">
        <slot name="loading">
          <Loader2 class="text-muted-foreground size-5 animate-spin" aria-label="Loading" />
        </slot>
      </div>
      <div
        v-if="!hasMore && !loading"
        data-slot="infinite-scroll-end"
        class="text-muted-foreground w-full py-3 text-center text-xs"
      >
        <slot name="end">No more items</slot>
      </div>
    </template>
  </div>
</template>

```

### `packages/registry-vue/components/infinite-scroll/index.ts`

```ts
export { default as InfiniteScroll } from './InfiniteScroll.vue'

```

## init

- type: `registry:lib`
- description: One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the useTheme composable in a single command. Run this first when starting a new app.
- npm deps: `typescript`
- registry deps: `tailwind`, `utils`, `use-theme`

## input

- type: `registry:ui`
- description: Text input — single-line. Same sizing and ring treatment as the rest of the form primitives. Pair with Label, attach an icon via the `start` / `end` slots, or compose into a search input.
- npm deps: `@vueuse/core`, `lucide-vue-next`

### `packages/registry-vue/components/input/Input.vue`

```vue
<script setup lang="ts">
import type { Component, HTMLAttributes } from 'vue'
import { computed, ref, useAttrs, useSlots } from 'vue'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
import { X, Eye, EyeOff } from 'lucide-vue-next'

defineOptions({
  inheritAttrs: false,
})

interface Props {
  defaultValue?: string | number
  modelValue?: string | number
  class?: HTMLAttributes['class']
  size?: 'small' | 'middle' | 'large'
  variant?: 'outlined' | 'filled' | 'borderless'
  status?: 'error' | 'warning'
  prefix?: string
  suffix?: string
  // Convenience props for the very common "icon at the start/end" case.
  // Pass a lucide-vue-next (or any) component: `:prefix-icon="Mail"`.
  // If both `prefix` (string) and `prefixIcon` are set, the icon wins.
  prefixIcon?: Component
  suffixIcon?: Component
  addonBefore?: string
  addonAfter?: string
  allowClear?: boolean
  showCount?: boolean
  showPasswordToggle?: boolean
  disabled?: boolean
  readonly?: boolean
  maxlength?: number | string
  minlength?: number | string
  type?: string
  placeholder?: string
  id?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 'middle',
  variant: 'outlined',
  type: 'text',
})

const emits = defineEmits<{
  (e: 'update:modelValue', payload: string | number): void
}>()

const slots = useSlots()
const attrs = useAttrs()

const modelValue = useVModel(props, 'modelValue', emits, {
  passive: true,
  defaultValue: props.defaultValue,
})

const inputRef = ref<HTMLInputElement | null>(null)
const focused = ref(false)
const hovered = ref(false)
const passwordVisible = ref(false)

const isPassword = computed(() => props.type === 'password')
const hasPrefix = computed(() => !!props.prefix || !!props.prefixIcon || !!slots.prefix)
const hasSuffix = computed(() => !!props.suffix || !!props.suffixIcon || !!slots.suffix)
const hasAddonBefore = computed(() => !!props.addonBefore || !!slots.addonBefore)
const hasAddonAfter = computed(() => !!props.addonAfter || !!slots.addonAfter)

const hasRightConfig = computed(() => {
  const hasCount = props.showCount && props.maxlength != null
  const hasPasswordToggle = props.showPasswordToggle && isPassword.value
  return props.allowClear || hasPasswordToggle || hasCount
})

const currentLength = computed(() => String(modelValue.value ?? '').length)

const showClear = computed(() => {
  return (
    props.allowClear && !!modelValue.value && (focused.value || hovered.value) && !props.disabled && !props.readonly
  )
})

const showPasswordToggleBtn = computed(() => {
  return isPassword.value && props.showPasswordToggle && !props.disabled && !props.readonly
})

const showCountDisplay = computed(() => {
  return props.showCount && props.maxlength != null
})

const computedType = computed(() => {
  if (!isPassword.value) return props.type
  return passwordVisible.value ? 'text' : 'password'
})

const sizeClasses = {
  small: 'h-8 text-xs',
  middle: 'h-9 text-base md:text-sm',
  large: 'h-11 text-base',
}

const wrapperRounded = computed(() => {
  if (hasAddonBefore.value && hasAddonAfter.value) return 'rounded-none'
  if (hasAddonBefore.value) return 'rounded-l-none rounded-r-md'
  if (hasAddonAfter.value) return 'rounded-r-none rounded-l-md'
  return 'rounded-md'
})

const wrapperClasses = computed(() => {
  const base = 'flex w-full items-center gap-1.5 overflow-hidden border transition-[color,box-shadow] outline-none'
  const sizeClass = sizeClasses[props.size]

  const variantMap = {
    outlined: 'border-input bg-transparent shadow-xs',
    filled: 'border-transparent bg-muted/50 shadow-none',
    borderless: 'border-transparent bg-transparent shadow-none',
  }
  const variantClass = variantMap[props.variant]

  const statusMap = {
    error:
      'border-destructive focus-within:border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40',
    warning: 'border-[var(--warning)] focus-within:border-[var(--warning)] focus-within:ring-[var(--warning)]/20',
  }
  const statusClass = props.status ? statusMap[props.status] : ''

  const focusClass = !props.status ? 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]' : ''

  const disabledClass = props.disabled ? 'pointer-events-none opacity-50 cursor-not-allowed bg-muted/30' : ''

  const ariaInvalidClass =
    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'

  return cn(
    base,
    sizeClass,
    variantClass,
    statusClass,
    focusClass,
    disabledClass,
    ariaInvalidClass,
    wrapperRounded.value,
    props.class,
  )
})

function addonClasses(position: 'before' | 'after') {
  const roundedClass =
    position === 'before' ? 'rounded-l-md rounded-r-none border-r-0' : 'rounded-r-md rounded-l-none border-l-0'
  return cn(
    'flex items-center bg-muted px-3 text-sm text-muted-foreground border border-input',
    roundedClass,
    sizeClasses[props.size],
  )
}

const inputPadding = computed(() => {
  const hasLeft = hasPrefix.value
  const hasRight = hasSuffix.value || hasRightConfig.value
  const leftPad = props.size === 'small' ? 'pl-2' : props.size === 'large' ? 'pl-3' : 'pl-2.5'
  const rightPad = props.size === 'small' ? 'pr-2' : props.size === 'large' ? 'pr-3' : 'pr-2.5'

  if (!hasLeft && !hasRight) return cn(leftPad, rightPad)
  if (hasLeft && !hasRight) return cn('pl-0', rightPad)
  if (!hasLeft && hasRight) return cn(leftPad, 'pr-0')
  return 'px-0'
})

function handleClear() {
  modelValue.value = ''
  inputRef.value?.focus()
}

function togglePassword() {
  passwordVisible.value = !passwordVisible.value
  inputRef.value?.focus()
}
</script>

<template>
  <div class="flex w-full">
    <!-- Addon before -->
    <div v-if="hasAddonBefore" :class="addonClasses('before')">
      <slot name="addonBefore">{{ addonBefore }}</slot>
    </div>

    <!-- Input wrapper -->
    <div
      :class="wrapperClasses"
      data-uipkge
      data-slot="input"
      :aria-invalid="attrs['aria-invalid'] as 'true' | 'false' | 'grammar' | 'spelling' | undefined"
      @mouseenter="hovered = true"
      @mouseleave="hovered = false"
      @click="inputRef?.focus()"
    >
      <!-- Prefix -->
      <span
        v-if="hasPrefix"
        class="text-muted-foreground pointer-events-none shrink-0 select-none"
        :class="props.size === 'small' ? 'pl-2' : props.size === 'large' ? 'pl-3' : 'pl-2.5'"
      >
        <slot name="prefix">
          <component :is="prefixIcon" v-if="prefixIcon" class="size-4" aria-hidden="true" />
          <template v-else>{{ prefix }}</template>
        </slot>
      </span>

      <!-- Native input -->
      <input
        :id="id"
        ref="inputRef"
        v-model="modelValue"
        v-bind="attrs"
        :type="computedType"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :minlength="minlength"
        :placeholder="placeholder"
        :class="
          cn(
            'w-full min-w-0 flex-1 bg-transparent outline-none',
            'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',
            'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
            'disabled:cursor-not-allowed',
            inputPadding,
          )
        "
        @focus="focused = true"
        @blur="focused = false"
      />

      <!-- Suffix / Actions -- built-in actions (clear / password toggle /
           count) render first, then the user's suffix slot so the slotted
           content is always the rightmost element in the row. -->
      <div
        class="flex shrink-0 items-center gap-1"
        :class="props.size === 'small' ? 'pr-2' : props.size === 'large' ? 'pr-3' : 'pr-2.5'"
      >
        <button
          v-if="showClear"
          type="button"
          aria-label="Clear input"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none"
          @mousedown.prevent="handleClear"
          @click="handleClear"
        >
          <X class="size-4" aria-hidden="true" />
        </button>

        <button
          v-if="showPasswordToggleBtn"
          type="button"
          :aria-label="passwordVisible ? 'Hide password' : 'Show password'"
          :aria-pressed="passwordVisible"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none"
          @mousedown.prevent="togglePassword"
          @click="togglePassword"
        >
          <Eye v-if="passwordVisible" class="size-4" aria-hidden="true" />
          <EyeOff v-else class="size-4" aria-hidden="true" />
        </button>

        <span v-if="showCountDisplay" class="text-muted-foreground pointer-events-none text-xs select-none">
          {{ currentLength }}/{{ maxlength }}
        </span>

        <span v-if="hasSuffix" class="text-muted-foreground pointer-events-none select-none">
          <slot name="suffix">
            <component :is="suffixIcon" v-if="suffixIcon" class="size-4" aria-hidden="true" />
            <template v-else>{{ suffix }}</template>
          </slot>
        </span>
      </div>
    </div>

    <!-- Addon after -->
    <div v-if="hasAddonAfter" :class="addonClasses('after')">
      <slot name="addonAfter">{{ addonAfter }}</slot>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/input/index.ts`

```ts
export { default as Input } from './Input.vue'

```

## json-tree-view

- type: `registry:ui`
- description: Collapsible JSON tree viewer with color-coded value types, click-to-copy, live search/filter, hover path display, and expand/collapse-all controls. Renders objects, arrays, and primitives with configurable default depth and max depth.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/json-tree-view/JsonTreeView.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { ChevronDown, ChevronRight, Search, Braces, Copy, Check, FoldVertical, UnfoldVertical } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import JsonTreeNode from './JsonTreeNode.vue'
import type { JsonValue } from './types'

export type { JsonValue } from './types'

interface Props {
  data: JsonValue
  expandDepth?: number
  maxDepth?: number
  showSearch?: boolean
  showToolbar?: boolean
  showPath?: boolean
  rootLabel?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  expandDepth: 1,
  maxDepth: 100,
  showSearch: true,
  showToolbar: true,
  showPath: true,
  rootLabel: 'root',
})

const emit = defineEmits<{
  copy: [value: string, path: string]
}>()

const expanded = ref<Set<string>>(new Set())
const search = ref('')
const copiedPath = ref<string | null>(null)
const hoveredPath = ref<string | null>(null)

function pathKey(path: (string | number)[]): string {
  return path.length ? path.map((p) => (typeof p === 'number' ? `[${p}]` : `.${p}`)).join('') : '$'
}

function defaultExpanded(): Set<string> {
  const next = new Set<string>()
  const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
    if (depth >= props.expandDepth) return
    if (val !== null && typeof val === 'object') {
      next.add(pathKey(path))
      const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
      for (const [k, v] of entries) {
        walk(v as JsonValue, [...path, k], depth + 1)
      }
    }
  }
  walk(props.data)
  return next
}

watch(
  () => [props.data, props.expandDepth],
  () => {
    expanded.value = defaultExpanded()
  },
  { immediate: true },
)

function toggle(path: (string | number)[]) {
  const key = pathKey(path)
  const next = new Set(expanded.value)
  if (next.has(key)) next.delete(key)
  else next.add(key)
  expanded.value = next
}

function isExpanded(path: (string | number)[]): boolean {
  return expanded.value.has(pathKey(path))
}

function expandAll() {
  const next = new Set<string>()
  const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
    if (depth >= props.maxDepth) return
    if (val !== null && typeof val === 'object') {
      next.add(pathKey(path))
      const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
      for (const [k, v] of entries) {
        walk(v as JsonValue, [...path, k], depth + 1)
      }
    }
  }
  walk(props.data)
  expanded.value = next
}

function collapseAll() {
  expanded.value = new Set()
}

// Auto-expand nodes that contain search matches
watch(search, (q) => {
  if (!q) {
    expanded.value = defaultExpanded()
    return
  }
  const next = new Set<string>()
  const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
    if (depth >= props.maxDepth) return
    if (val !== null && typeof val === 'object') {
      if (matchesSearch(val)) next.add(pathKey(path))
      const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
      for (const [k, v] of entries) {
        walk(v as JsonValue, [...path, k], depth + 1)
      }
    }
  }
  walk(props.data)
  expanded.value = next
})

function matchesSearch(val: JsonValue): boolean {
  if (!search.value) return true
  const term = search.value.toLowerCase()
  const walk = (v: JsonValue): boolean => {
    if (v === null) return 'null'.includes(term)
    if (typeof v === 'string') return v.toLowerCase().includes(term)
    if (typeof v === 'number' || typeof v === 'boolean') return String(v).includes(term)
    if (Array.isArray(v)) return v.some(walk)
    if (typeof v === 'object') return Object.entries(v).some(([k, val]) => k.toLowerCase().includes(term) || walk(val))
    return false
  }
  return walk(val)
}

function typeOf(val: JsonValue): 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' {
  if (val === null) return 'null'
  if (Array.isArray(val)) return 'array'
  return typeof val as 'object' | 'string' | 'number' | 'boolean'
}

function formatValue(val: JsonValue): string {
  if (val === null) return 'null'
  if (typeof val === 'string') return JSON.stringify(val)
  return String(val)
}

const typeColor: Record<string, string> = {
  string: 'text-emerald-600 dark:text-emerald-400',
  number: 'text-blue-600 dark:text-blue-400',
  boolean: 'text-amber-600 dark:text-amber-400',
  null: 'text-muted-foreground italic',
  object: 'text-foreground',
  array: 'text-foreground',
}

const keyColor = 'text-violet-600 dark:text-violet-400'

async function copyValue(val: JsonValue, path: (string | number)[]) {
  const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2)
  const p = pathKey(path)
  try {
    await navigator.clipboard.writeText(str)
    copiedPath.value = p
    emit('copy', str, p)
    setTimeout(() => {
      if (copiedPath.value === p) copiedPath.value = null
    }, 1200)
  } catch {
    // clipboard unavailable
  }
}

function onHover(path: string | null) {
  hoveredPath.value = path
}

const displayPath = computed(() => {
  if (!props.showPath || !hoveredPath.value) return ''
  if (hoveredPath.value === '$') return props.rootLabel
  return hoveredPath.value
})

const summary = computed(() => {
  const t = typeOf(props.data)
  if (t === 'array') return `Array(${(props.data as JsonValue[]).length})`
  if (t === 'object') return `Object(${Object.keys(props.data as object).length})`
  return t
})

const searchMatchCount = computed(() => {
  if (!search.value) return 0
  let count = 0
  const walk = (v: JsonValue) => {
    if (v === null) { if ('null'.includes(search.value.toLowerCase())) count++; return }
    if (typeof v === 'string') { if (v.toLowerCase().includes(search.value.toLowerCase())) count++; return }
    if (typeof v === 'number' || typeof v === 'boolean') { if (String(v).includes(search.value)) count++; return }
    if (Array.isArray(v)) { v.forEach(walk); return }
    if (typeof v === 'object') { Object.entries(v).forEach(([k, val]) => { if (k.toLowerCase().includes(search.value.toLowerCase())) count++; walk(val) }) }
  }
  walk(props.data)
  return count
})
</script>

<template>
  <div
    data-uipkge
    data-slot="json-tree-view"
    :class="cn('bg-background rounded-lg border font-mono text-sm', props.class)"
  >
    <!-- Toolbar -->
    <div v-if="showToolbar || showSearch" class="border-border flex items-center gap-2 border-b px-3 py-2">
      <div class="flex items-center gap-1.5">
        <Braces class="text-muted-foreground size-4" />
        <span class="text-muted-foreground text-xs">{{ summary }}</span>
      </div>
      <div class="ml-auto flex items-center gap-1">
        <div v-if="showSearch" class="relative">
          <Search class="text-muted-foreground absolute top-1/2 left-2 size-3.5 -translate-y-1/2" />
          <input
            v-model="search"
            type="text"
            placeholder="Filter..."
            aria-label="Filter JSON tree"
            class="border-input bg-muted/40 focus:border-ring focus:ring-ring/30 h-7 w-32 rounded-md pr-2 pl-7 text-xs transition-[width] outline-none focus:w-44 focus:ring-2"
          />
        </div>
        <span v-if="search && searchMatchCount > 0" class="text-muted-foreground text-xs">{{ searchMatchCount }} matches</span>
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md transition-colors"
          title="Expand all"
          aria-label="Expand all"
          @click="expandAll"
        >
          <UnfoldVertical class="size-4" />
        </button>
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md transition-colors"
          title="Collapse all"
          aria-label="Collapse all"
          @click="collapseAll"
        >
          <FoldVertical class="size-4" />
        </button>
      </div>
    </div>

    <!-- Path bar -->
    <div
      v-if="showPath && displayPath"
      class="border-border bg-muted/30 text-muted-foreground truncate border-b px-3 py-1 text-xs"
    >
      {{ displayPath }}
    </div>

    <!-- Tree -->
    <div class="overflow-auto p-2">
      <JsonTreeNode
        :data="data"
        :path="[]"
        :label="rootLabel"
        :is-root="true"
        :search="search"
        :max-depth="maxDepth"
        :matches-search="matchesSearch"
        :is-expanded="isExpanded"
        :toggle="toggle"
        :type-of="typeOf"
        :format-value="formatValue"
        :type-color="typeColor"
        :key-color="keyColor"
        :copied-path="copiedPath"
        @copy="copyValue"
        @hover="onHover"
      />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/json-tree-view/JsonTreeNode.vue`

```vue
<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-vue-next'
import type { JsonValue } from './types'

// Self-reference for recursive rendering — use defineAsyncComponent to avoid circular import
const JsonTreeNode = defineAsyncComponent(() => import('./JsonTreeNode.vue'))

interface Props {
  data: JsonValue
  path: (string | number)[]
  label: string
  isRoot?: boolean
  search?: string
  maxDepth?: number
  matchesSearch: (val: JsonValue) => boolean
  isExpanded: (path: (string | number)[]) => boolean
  toggle: (path: (string | number)[]) => void
  typeOf: (val: JsonValue) => 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
  formatValue: (val: JsonValue) => string
  typeColor: Record<string, string>
  keyColor: string
  copiedPath?: string | null
}

const props = withDefaults(defineProps<Props>(), {
  isRoot: false,
  search: '',
  maxDepth: 100,
  copiedPath: null,
})

const emit = defineEmits<{
  copy: [value: JsonValue, path: (string | number)[]]
  hover: [path: string | null]
}>()

function pathKey(path: (string | number)[]): string {
  return path.length ? path.map((p) => (typeof p === 'number' ? `[${p}]` : `.${p}`)).join('') : '$'
}

const key = computed(() => pathKey(props.path))
const type = computed(() => props.typeOf(props.data))
const open = computed(() => props.isExpanded(props.path))
const isContainer = computed(() => type.value === 'object' || type.value === 'array')
const dimmed = computed(() => !!props.search && !props.matchesSearch(props.data))

const entries = computed<[string | number, JsonValue][]>(() => {
  const val = props.data
  if (Array.isArray(val)) return val.map((v, i) => [i, v] as const)
  if (val !== null && typeof val === 'object') return Object.entries(val) as [string, JsonValue][]
  return []
})

const count = computed(() => entries.value.length)
const indent = computed(() => (props.isRoot ? 0 : 20))

// Collapsed preview: show first few items inline
const collapsedPreview = computed(() => {
  if (open.value || !isContainer.value) return ''
  const items = entries.value.slice(0, 3)
  const parts = items.map(([k, v]) => {
    const vt = props.typeOf(v)
    let valStr: string
    if (vt === 'string') valStr = `"${String(v).slice(0, 20)}"`
    else if (vt === 'array') valStr = '[…]'
    else if (vt === 'object') valStr = '{…}'
    else valStr = props.formatValue(v)
    return `${Array.isArray(props.data) ? '' : `"${k}": `}${valStr}`
  })
  const suffix = count.value > 3 ? ', …' : ''
  const open2 = type.value === 'array' ? '[' : '{'
  const close = type.value === 'array' ? ']' : '}'
  return `${open2}${parts.join(', ')}${suffix}${close}`
})

function onCopy() {
  emit('copy', props.data, props.path)
}

function onHover() {
  emit('hover', key.value)
}

function onLeave() {
  emit('hover', null)
}
</script>

<template>
  <div :data-dimmed="dimmed ? '' : undefined" :class="dimmed ? 'opacity-30' : ''">
    <!-- Container header row (object/array) -->
    <div
      v-if="isContainer"
      class="group hover:bg-accent/40 flex items-center gap-0.5 rounded px-1 -mx-1 py-0.5 transition-colors"
      :style="{ paddingLeft: `${indent}px` }"
    >
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-4 shrink-0 items-center justify-center rounded"
        :aria-expanded="open"
        :aria-label="open ? 'Collapse' : 'Expand'"
        @click="toggle(path)"
      >
        <ChevronDown v-if="open" class="size-3.5" />
        <ChevronRight v-else class="size-3.5" />
      </button>
      <span :class="keyColor" class="select-none" @mouseenter="onHover" @mouseleave="onLeave">
        {{ isRoot ? label : `"${label}"` }}
      </span>
      <span class="text-muted-foreground">:</span>
      <span v-if="open" class="text-muted-foreground select-none">{{ type === 'array' ? '[' : '{' }}</span>
      <span v-else class="text-muted-foreground select-none">{{ collapsedPreview }}</span>
      <span v-if="open" class="text-muted-foreground ml-0.5 text-xs">{{ count }} {{ count === 1 ? 'item' : 'items' }}</span>
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground ml-auto inline-flex size-5 items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100"
        title="Copy value"
        aria-label="Copy value"
        @click.stop="onCopy"
      >
        <Check v-if="copiedPath === key" class="size-3 text-emerald-500" />
        <Copy v-else class="size-3" />
      </button>
    </div>

    <!-- Container children -->
    <template v-if="isContainer && open">
      <JsonTreeNode
        v-for="[k, v] in entries"
        :key="String(k)"
        :data="v"
        :path="[...path, k]"
        :label="String(k)"
        :is-root="false"
        :search="search"
        :max-depth="maxDepth"
        :matches-search="matchesSearch"
        :is-expanded="isExpanded"
        :toggle="toggle"
        :type-of="typeOf"
        :format-value="formatValue"
        :type-color="typeColor"
        :key-color="keyColor"
        :copied-path="copiedPath"
        @copy="(val, p) => emit('copy', val, p)"
        @hover="(p) => emit('hover', p)"
      />
      <div class="text-muted-foreground select-none py-0.5" :style="{ paddingLeft: `${indent}px` }">
        {{ type === 'array' ? ']' : '}' }}
      </div>
    </template>

    <!-- Primitive leaf -->
    <div
      v-if="!isContainer"
      class="group hover:bg-accent/40 flex items-center gap-0.5 rounded px-1 -mx-1 py-0.5 transition-colors"
      :style="{ paddingLeft: `${indent}px` }"
    >
      <span class="inline-flex size-4 shrink-0" />
      <span v-if="isRoot" class="text-muted-foreground select-none">{{ label }}</span>
      <span v-else :class="keyColor" class="select-none">"{{ label }}"</span>
      <span class="text-muted-foreground">:</span>
      <span
        :class="typeColor[type] ?? 'text-foreground'"
        class="cursor-pointer"
        @click="onCopy"
        @mouseenter="onHover"
        @mouseleave="onLeave"
      >
        {{ formatValue(data) }}
      </span>
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground ml-auto inline-flex size-5 items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100"
        title="Copy value"
        aria-label="Copy value"
        @click.stop="onCopy"
      >
        <Check v-if="copiedPath === key" class="size-3 text-emerald-500" />
        <Copy v-else class="size-3" />
      </button>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/json-tree-view/types.ts`

```ts
export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }

```

### `packages/registry-vue/components/json-tree-view/index.ts`

```ts
export { default as JsonTreeView } from './JsonTreeView.vue'
export { default as JsonTreeNode } from './JsonTreeNode.vue'
export type { JsonValue } from './types'

```

## kanban-board

- type: `registry:block`
- description: Full kanban surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 15 Vue files (KanbanBoard + 6 kanban-* views + 7 small badges/lists + link-injection key). Bind with v-model:columns; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Pass linkComponent (NuxtLink / RouterLink) for SPA routing; defaults to a plain <a> so it works in any Vue setup. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).
- npm deps: `lucide-vue-next`, `@internationalized/date`
- registry deps: `use-kanban`, `kanban-data`, `page`, `card`, `button`, `badge`, `input`, `label`, `select`, `sheet`, `dialog`, `popover`, `calendar`, `dropdown-menu`, `tooltip`, `avatar`, `toggle-group`, `rich-text-editor`

### `packages/registry-vue/blocks/kanban-board/KanbanBoard.vue`

```vue
<script setup lang="ts">
import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
import type { Component } from 'vue'
import { Plus } from 'lucide-vue-next'
import { PageHeader, PageHeaderHeading } from '@/components/ui/page'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import KanbanToolbar from './KanbanToolbar.vue'
import KanbanColumn from './KanbanColumn.vue'
import KanbanListView from './KanbanListView.vue'
import KanbanTaskSheet from './KanbanTaskSheet.vue'
import KanbanAddTaskDialog from './KanbanAddTaskDialog.vue'
import type { KanbanColumn as KanbanColumnType, KanbanTask } from '@/composables/useKanban'
import { kanbanLinkKey } from './link-injection'

interface Props {
  columns: KanbanColumnType[]
  title?: string | null
  description?: string | null
  defaultColumnId?: string
  hideHeader?: boolean
  hideToolbar?: boolean
  lockParentScroll?: boolean
  linkComponent?: string | Component
}

const props = withDefaults(defineProps<Props>(), {
  title: 'Kanban Board',
  description: 'Drag tasks across columns to update their status.',
  defaultColumnId: 'backlog',
  hideHeader: false,
  hideToolbar: false,
  lockParentScroll: true,
  linkComponent: 'a',
})

// Provide the link component to all child views (KanbanCard, KanbanListView,
// KanbanTaskSheet, SubtaskList) so they render SPA-aware links without
// hard-coding NuxtLink. Defaults to a plain <a> for framework-agnostic use;
// pass NuxtLink or RouterLink for SPA routing.
provide(
  kanbanLinkKey,
  computed(() => props.linkComponent),
)

const emits = defineEmits<{
  'update:columns': [value: KanbanColumnType[]]
}>()

const columnsRef = computed({
  get: () => props.columns,
  set: (v) => emits('update:columns', v),
})

const kanbanEl = ref<HTMLElement | null>(null)
let parentMain: HTMLElement | null = null

onMounted(() => {
  if (!props.lockParentScroll) return
  parentMain = kanbanEl.value?.closest('main[data-slot="sidebar-inset"]') as HTMLElement | null
  if (parentMain) parentMain.style.overflow = 'hidden'
  document.documentElement.style.overflow = 'hidden'
})

onUnmounted(() => {
  if (parentMain) {
    parentMain.style.overflow = ''
    parentMain = null
  }
  if (props.lockParentScroll) document.documentElement.style.overflow = ''
})

const searchQuery = ref('')
const selectedPriority = ref<string | null>(null)
const selectedAssignee = ref<string | null>(null)
const viewMode = ref<'board' | 'list'>('board')

const filteredColumns = computed(() => {
  return columnsRef.value.map((col) => ({
    ...col,
    tasks: col.tasks.filter((task) => {
      const q = searchQuery.value.toLowerCase()
      const matchesSearch = !q || task.title.toLowerCase().includes(q) || task.id.toLowerCase().includes(q)
      const matchesPriority = !selectedPriority.value || task.priority === selectedPriority.value
      const matchesAssignee = !selectedAssignee.value || task.assignee.name === selectedAssignee.value
      return matchesSearch && matchesPriority && matchesAssignee
    }),
  }))
})

const totalTasks = computed(() => columnsRef.value.reduce((sum, col) => sum + col.tasks.length, 0))

const collapsedColumns = ref<Set<string>>(new Set())

function toggleCollapse(columnId: string) {
  const next = new Set(collapsedColumns.value)
  if (next.has(columnId)) next.delete(columnId)
  else next.add(columnId)
  collapsedColumns.value = next
}

function addComment(task: KanbanTask, text: string) {
  task.commentItems.push({
    id: `c${Date.now()}`,
    author: 'Admin User',
    authorColor: 'bg-chart-1/15 text-chart-1',
    text,
    time: 'Just now',
  })
}

function moveTask(task: KanbanTask, targetColumnId: string) {
  const sourceCol = columnsRef.value.find((c) => c.tasks.some((t) => t.id === task.id))
  const targetCol = columnsRef.value.find((c) => c.id === targetColumnId)
  if (!sourceCol || !targetCol || sourceCol.id === targetColumnId) return
  const taskIndex = sourceCol.tasks.findIndex((t) => t.id === task.id)
  if (taskIndex === -1) return
  const removed = sourceCol.tasks.splice(taskIndex, 1)
  if (removed[0]) targetCol.tasks.push(removed[0])
}

const detailOpen = ref(false)
const detailTask = ref<KanbanTask | null>(null)

function openTaskDetail(task: KanbanTask) {
  detailTask.value = task
  detailOpen.value = true
}

const draggedTask = ref<string | null>(null)
const dragOverColumn = ref<string | null>(null)
const dropTargetIndex = ref<number>(-1)
let lastDragEnd = 0

function onDragStart(event: DragEvent, taskId: string) {
  draggedTask.value = taskId
  if (event.dataTransfer) {
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.setData('text/plain', taskId)
  }
}

function resetDrag() {
  draggedTask.value = null
  dragOverColumn.value = null
  dropTargetIndex.value = -1
  lastDragEnd = Date.now()
}

function onDrop() {
  if (!draggedTask.value || !dragOverColumn.value) {
    resetDrag()
    return
  }

  let sourceColIdx = -1
  let taskIdx = -1
  for (let c = 0; c < columnsRef.value.length; c++) {
    const col = columnsRef.value[c]
    if (!col) continue
    const tIdx = col.tasks.findIndex((t) => t.id === draggedTask.value)
    if (tIdx !== -1) {
      sourceColIdx = c
      taskIdx = tIdx
      break
    }
  }
  const targetColIdx = columnsRef.value.findIndex((c) => c.id === dragOverColumn.value)
  if (sourceColIdx === -1 || targetColIdx === -1) {
    resetDrag()
    return
  }

  const sourceCol = columnsRef.value[sourceColIdx]
  const targetCol = columnsRef.value[targetColIdx]
  if (!sourceCol || !targetCol) {
    resetDrag()
    return
  }

  const [task] = sourceCol.tasks.splice(taskIdx, 1)
  if (!task) {
    resetDrag()
    return
  }

  let insertAt = dropTargetIndex.value
  if (insertAt < 0) insertAt = targetCol.tasks.length
  if (sourceColIdx === targetColIdx && taskIdx < insertAt) insertAt--

  targetCol.tasks.splice(insertAt, 0, task)
  resetDrag()
}

function onCardClick(task: KanbanTask) {
  if (Date.now() - lastDragEnd < 200) return
  openTaskDetail(task)
}

function onCardDragOver(event: DragEvent, columnId: string, taskIndex: number) {
  dragOverColumn.value = columnId
  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
  const midY = rect.top + rect.height / 2
  dropTargetIndex.value = event.clientY < midY ? taskIndex : taskIndex + 1
}

function onLaneDragOver(_event: DragEvent, columnId: string, taskCount: number) {
  dragOverColumn.value = columnId
  dropTargetIndex.value = taskCount
}

const addTaskOpen = ref(false)
const addTaskColumnId = ref(props.defaultColumnId)

function openAddTask(columnId: string) {
  addTaskColumnId.value = columnId
  addTaskOpen.value = true
}

function onCreateTask(columnId: string, tasks: KanbanTask[]) {
  const col = columnsRef.value.find((c) => c.id === columnId)
  if (col) col.tasks.push(...tasks)
}
</script>

<template>
  <div
    ref="kanbanEl"
    data-slot="kanban-board"
    class="kanban-page flex h-[calc(100dvh-3.5rem-3rem)] flex-col overflow-hidden lg:h-[calc(100dvh-3.5rem-3rem)]"
  >
    <div v-if="!hideHeader" class="mb-3 shrink-0">
      <PageHeader>
        <div class="flex items-start justify-between gap-4">
          <PageHeaderHeading :title="title ?? ''" :description="description ?? ''" />
          <div class="flex shrink-0 items-center gap-2">
            <Badge variant="secondary" class="font-mono text-xs tabular-nums">{{ totalTasks }} tasks</Badge>
            <Button size="sm" @click="openAddTask(defaultColumnId)">
              <Plus class="size-4" />
              Add Task
            </Button>
          </div>
        </div>
      </PageHeader>
    </div>

    <KanbanToolbar
      v-if="!hideToolbar"
      v-model:search-query="searchQuery"
      v-model:selected-priority="selectedPriority"
      v-model:selected-assignee="selectedAssignee"
      v-model:view-mode="viewMode"
    />

    <div
      v-if="viewMode === 'board'"
      class="kanban-board relative flex min-h-0 flex-1 items-start gap-3 overflow-auto pb-3"
    >
      <KanbanColumn
        v-for="column in filteredColumns"
        :key="column.id"
        :column="column"
        :columns="columnsRef"
        :collapsed="collapsedColumns.has(column.id)"
        :dragged-task="draggedTask"
        :drag-over-column="dragOverColumn"
        :drop-target-index="dropTargetIndex"
        @toggle-collapse="toggleCollapse"
        @add-task="openAddTask"
        @card-click="onCardClick"
        @card-quick-view="openTaskDetail"
        @drag-start="onDragStart"
        @drag-end="resetDrag"
        @card-drag-over="onCardDragOver"
        @lane-drag-over="onLaneDragOver"
        @drop="onDrop"
      />
    </div>

    <KanbanListView
      v-else
      :columns="filteredColumns"
      :all-columns="columnsRef"
      @task-click="openTaskDetail"
      @move-task="moveTask"
    />

    <KanbanTaskSheet
      v-model:open="detailOpen"
      :task="detailTask"
      :columns="columnsRef"
      @move-task="moveTask"
      @add-comment="addComment"
    />

    <KanbanAddTaskDialog
      v-model:open="addTaskOpen"
      :columns="columnsRef"
      :initial-column-id="addTaskColumnId"
      @create="onCreateTask"
    />
  </div>
</template>

<style scoped>
.kanban-board {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
.kanban-board::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.kanban-board::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border));
  border-radius: 3px;
}
.kanban-board::-webkit-scrollbar-corner {
  background: transparent;
}
</style>

```

### `packages/registry-vue/blocks/kanban-board/KanbanCard.vue`

```vue
<script setup lang="ts">
import { computed, defineEmits, inject } from 'vue'
import { type KanbanTask, type KanbanColumn, priorityConfig, getTaskColumn } from '@/composables/useKanban'
import TagBadge from './TagBadge.vue'
import SubtaskProgress from './SubtaskProgress.vue'
import DueDateBadge from './DueDateBadge.vue'
import UserAvatar from './UserAvatar.vue'
import { kanbanLinkKey } from './link-injection'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { MoreHorizontal, MessageSquare, Paperclip, ExternalLink } from 'lucide-vue-next'

const linkComponent = inject(
  kanbanLinkKey,
  computed(() => 'a' as const),
)

const props = defineProps<{
  task: KanbanTask
  isDone: boolean
  columns: KanbanColumn[]
}>()

const subtasksDone = computed(() => {
  if (!props.columns || !props.task.subtaskIds.length) return 0
  return props.task.subtaskIds.filter((id) => getTaskColumn(props.columns, id)?.id === 'done').length
})

defineEmits<{
  click: [task: KanbanTask]
  'quick-view': [task: KanbanTask]
}>()
</script>

<template>
  <div
    :class="[
      'kanban-card group/card bg-card relative cursor-grab rounded-lg border p-3 transition-all duration-150',
      'hover:border-border hover:shadow-md active:scale-[0.97] active:cursor-grabbing',
      isDone ? 'opacity-75 hover:opacity-100' : '',
    ]"
    @click="$emit('click', task)"
  >
    <div
      :class="[
        'kanban-accent absolute top-3 bottom-3 left-0 w-[1.5px] rounded-full transition-all duration-150',
        priorityConfig[task.priority].bg,
        task.priority === 'low' ? 'opacity-40' : task.priority === 'medium' ? 'opacity-60' : 'opacity-90',
      ]"
    />

    <div class="mb-1 flex items-center justify-between pl-2">
      <span class="text-muted-foreground/70 font-mono text-[11px]">{{ task.id }}</span>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button
            variant="ghost"
            size="icon"
            class="text-muted-foreground -mr-1 size-6 opacity-0 transition-opacity group-hover/card:opacity-100"
            @click.stop
          >
            <MoreHorizontal class="size-3.5" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" class="w-36">
          <DropdownMenuItem @click.stop="$emit('quick-view', task)">Quick view</DropdownMenuItem>
          <DropdownMenuItem as-child>
            <component
              :is="linkComponent"
              :to="`/dashboard/kanban/${task.id}`"
              :href="`/dashboard/kanban/${task.id}`"
              class="gap-2"
            >
              <ExternalLink class="size-3.5" />
              Open detail
            </component>
          </DropdownMenuItem>
          <DropdownMenuItem>Edit</DropdownMenuItem>
          <DropdownMenuItem>Move to...</DropdownMenuItem>
          <DropdownMenuItem>Assign to...</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>

    <p
      :class="[
        'mb-2 pl-2 text-[13px] leading-snug font-medium',
        isDone ? 'decoration-muted-foreground/40 line-through' : '',
      ]"
    >
      {{ task.title }}
    </p>

    <div v-if="task.tags.length" class="mb-2 flex flex-wrap gap-1 pl-2">
      <TagBadge v-for="tag in task.tags" :key="tag.label" :label="tag.label" :color="tag.color" />
    </div>

    <div v-if="task.subtaskIds.length" class="mb-2 pl-2">
      <SubtaskProgress :done="subtasksDone" :total="task.subtaskIds.length" />
    </div>

    <div class="flex items-center gap-2 pl-2">
      <DueDateBadge v-if="task.dueDate" :due-date="task.dueDate" variant="chip" />

      <div v-if="task.commentItems.length" class="text-muted-foreground/70 flex items-center gap-1 text-[11px]">
        <MessageSquare class="size-3" />
        {{ task.commentItems.length }}
      </div>

      <div v-if="task.fileItems.length" class="text-muted-foreground/70 flex items-center gap-1 text-[11px]">
        <Paperclip class="size-3" />
        {{ task.fileItems.length }}
      </div>

      <div class="ml-auto">
        <TooltipProvider :delay-duration="200">
          <Tooltip>
            <TooltipTrigger as-child>
              <UserAvatar :name="task.assignee.name" :color="task.assignee.color" size="xs" />
            </TooltipTrigger>
            <TooltipContent side="bottom" class="text-xs">{{ task.assignee.name }}</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
    </div>
  </div>
</template>

<style scoped>
.kanban-card {
  animation: card-in 0.25s ease-out both;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.kanban-card:hover .kanban-accent {
  box-shadow: 0 0 3px currentColor;
}
</style>

```

### `packages/registry-vue/blocks/kanban-board/KanbanColumn.vue`

```vue
<script setup lang="ts">
import { Plus, MoreHorizontal, ChevronsLeft, ChevronsRight } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import KanbanCard from './KanbanCard.vue'
import type { KanbanColumn as KanbanColumnType, KanbanTask } from '@/composables/useKanban'

defineProps<{
  column: { id: string; title: string; color: string; dotColor: string; tasks: KanbanTask[] }
  columns: KanbanColumnType[]
  collapsed: boolean
  draggedTask: string | null
  dragOverColumn: string | null
  dropTargetIndex: number
}>()

defineEmits<{
  'toggle-collapse': [columnId: string]
  'add-task': [columnId: string]
  'card-click': [task: KanbanTask]
  'card-quick-view': [task: KanbanTask]
  'drag-start': [event: DragEvent, taskId: string]
  'drag-end': []
  'card-drag-over': [event: DragEvent, columnId: string, taskIndex: number]
  'lane-drag-over': [event: DragEvent, columnId: string, taskCount: number]
  drop: []
}>()
</script>

<template>
  <div
    :class="['group/col flex shrink-0 flex-col transition-all duration-200', collapsed ? 'w-12' : 'w-[300px]']"
    @dragover.prevent
    @drop="$emit('drop')"
  >
    <button
      v-if="collapsed"
      class="bg-muted/40 hover:bg-muted/60 flex h-full flex-col items-center gap-2 rounded-xl px-1 pt-3 pb-4 transition-colors"
      @click="$emit('toggle-collapse', column.id)"
    >
      <span :class="['size-2 shrink-0 rounded-full', column.dotColor]" />
      <span
        :class="['text-[11px] font-semibold tracking-tight', column.color, 'rotate-180 [writing-mode:vertical-lr]']"
      >
        {{ column.title }}
      </span>
      <Badge variant="secondary" class="mt-1 h-5 min-w-5 justify-center rounded-md px-1 text-[10px]">
        {{ column.tasks.length }}
      </Badge>
      <ChevronsRight class="text-muted-foreground mt-auto size-3.5" />
    </button>

    <template v-else>
      <div class="bg-background/95 sticky top-0 z-10 mb-2 flex items-center gap-2 px-2 py-1.5 backdrop-blur-sm">
        <button
          class="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors"
          title="Collapse column"
          @click="$emit('toggle-collapse', column.id)"
        >
          <ChevronsLeft class="size-3.5" />
        </button>
        <span :class="['size-2 shrink-0 rounded-full', column.dotColor]" />
        <h3 :class="['text-[13px] font-semibold tracking-tight', column.color]">{{ column.title }}</h3>
        <span class="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums">
          {{ column.tasks.length }}
        </span>
        <div class="ml-auto flex items-center">
          <Button
            variant="ghost"
            size="icon"
            class="text-muted-foreground size-6 opacity-0 transition-opacity group-hover/col:opacity-100"
          >
            <MoreHorizontal class="size-3.5" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            class="text-muted-foreground size-6"
            @click="$emit('add-task', column.id)"
          >
            <Plus class="size-3.5" />
          </Button>
        </div>
      </div>

      <div
        :class="[
          'kanban-lane flex flex-col rounded-xl p-2 transition-all duration-200',
          dragOverColumn === column.id && draggedTask
            ? 'bg-primary/[0.06] ring-primary/25 ring-1 ring-inset'
            : 'bg-muted/40',
        ]"
        @dragover.prevent="$emit('lane-drag-over', $event, column.id, column.tasks.length)"
      >
        <template v-for="(task, taskIndex) in column.tasks" :key="task.id">
          <div
            :class="[
              'drop-indicator mx-1 transition-all duration-150',
              dragOverColumn === column.id && dropTargetIndex === taskIndex && draggedTask && draggedTask !== task.id
                ? 'bg-primary h-0.5 rounded-full'
                : 'h-0',
            ]"
          />
          <div
            :data-task-id="task.id"
            draggable="true"
            :class="['mt-2 first:mt-0', draggedTask === task.id ? 'scale-95 rotate-1 opacity-30' : 'opacity-100']"
            @dragstart="$emit('drag-start', $event, task.id)"
            @dragend="$emit('drag-end')"
            @dragover.stop.prevent="$emit('card-drag-over', $event, column.id, taskIndex)"
          >
            <KanbanCard
              :task="task"
              :columns="columns"
              :is-done="column.id === 'done'"
              @click="$emit('card-click', $event)"
              @quick-view="$emit('card-quick-view', $event)"
            />
          </div>
        </template>

        <div
          v-if="column.tasks.length > 0"
          :class="[
            'drop-indicator mx-1 transition-all duration-150',
            dragOverColumn === column.id && dropTargetIndex === column.tasks.length && draggedTask
              ? 'bg-primary mt-2 h-0.5 rounded-full'
              : 'h-0',
          ]"
        />

        <button
          v-if="column.tasks.length === 0"
          class="text-muted-foreground/50 hover:text-muted-foreground hover:border-muted-foreground/30 flex flex-1 flex-col items-center justify-center rounded-lg border border-dashed py-10 transition-colors"
          @click="$emit('add-task', column.id)"
        >
          <Plus class="mb-1 size-4" />
          <p class="text-xs">No tasks</p>
        </button>
      </div>

      <button
        class="text-muted-foreground hover:text-foreground hover:bg-muted/60 mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed py-2 text-xs transition-colors"
        @click="$emit('add-task', column.id)"
      >
        <Plus class="size-3.5" />
        Add task
      </button>
    </template>
  </div>
</template>

<style scoped>
.kanban-lane {
  min-height: 60px;
}
</style>

```

### `packages/registry-vue/blocks/kanban-board/KanbanListView.vue`

```vue
<script setup lang="ts">
import { ref, computed, inject } from 'vue'
import type { KanbanTask, KanbanColumn } from '@/composables/useKanban'
import { getTaskColumn } from '@/composables/useKanban'
import PriorityBadge from './PriorityBadge.vue'
import TagBadge from './TagBadge.vue'
import DueDateBadge from './DueDateBadge.vue'
import UserAvatar from './UserAvatar.vue'
import SubtaskProgress from './SubtaskProgress.vue'
import { kanbanLinkKey } from './link-injection'
import { Badge } from '@/components/ui/badge'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { MessageSquare, Paperclip, ExternalLink, ArrowUpDown, ChevronDown, ChevronRight } from 'lucide-vue-next'

const linkComponent = inject(
  kanbanLinkKey,
  computed(() => 'a' as const),
)

const props = defineProps<{
  columns: KanbanColumn[]
  allColumns: KanbanColumn[]
}>()

defineEmits<{
  'task-click': [task: KanbanTask]
  'move-task': [task: KanbanTask, targetColumnId: string]
}>()

type SortField = 'id' | 'title' | 'priority' | 'assignee' | 'dueDate' | 'status'
type SortDir = 'asc' | 'desc'

const sortField = ref<SortField>('status')
const sortDir = ref<SortDir>('asc')

const priorityOrder: Record<string, number> = { urgent: 0, high: 1, medium: 2, low: 3 }

function toggleSort(field: SortField) {
  if (sortField.value === field) {
    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortField.value = field
    sortDir.value = 'asc'
  }
}

const groupByStatus = ref(true)
const collapsedGroups = ref<Set<string>>(new Set())

function toggleGroup(columnId: string) {
  const next = new Set(collapsedGroups.value)
  if (next.has(columnId)) next.delete(columnId)
  else next.add(columnId)
  collapsedGroups.value = next
}

interface FlatTask {
  task: KanbanTask
  columnId: string
  columnTitle: string
  dotColor: string
}

function sortTasks(tasks: FlatTask[]): FlatTask[] {
  return [...tasks].sort((a, b) => {
    let cmp = 0
    switch (sortField.value) {
      case 'id': {
        const numA = parseInt(a.task.id.replace(/^[A-Z]+-/, ''), 10)
        const numB = parseInt(b.task.id.replace(/^[A-Z]+-/, ''), 10)
        cmp = numA - numB
        break
      }
      case 'title':
        cmp = a.task.title.localeCompare(b.task.title)
        break
      case 'priority':
        cmp = (priorityOrder[a.task.priority] ?? 99) - (priorityOrder[b.task.priority] ?? 99)
        break
      case 'assignee':
        cmp = a.task.assignee.name.localeCompare(b.task.assignee.name)
        break
      case 'dueDate':
        cmp = (a.task.dueDate ?? '9999').localeCompare(b.task.dueDate ?? '9999')
        break
      case 'status': {
        const colOrder = props.allColumns.map((c) => c.id)
        cmp = colOrder.indexOf(a.columnId) - colOrder.indexOf(b.columnId)
        break
      }
    }
    return sortDir.value === 'desc' ? -cmp : cmp
  })
}

const flatTasks = computed<FlatTask[]>(() => {
  const items: FlatTask[] = []
  for (const col of props.columns) {
    for (const task of col.tasks) {
      items.push({
        task,
        columnId: col.id,
        columnTitle: col.title,
        dotColor: col.dotColor,
      })
    }
  }
  return sortTasks(items)
})

const groupedTasks = computed(() => {
  if (!groupByStatus.value) return null
  const groups: { column: KanbanColumn; tasks: FlatTask[] }[] = []
  for (const col of props.allColumns) {
    const tasks = flatTasks.value.filter((t) => t.columnId === col.id)
    groups.push({ column: col, tasks })
  }
  return groups
})

function subtasksDone(task: KanbanTask): number {
  if (!task.subtaskIds.length) return 0
  return task.subtaskIds.filter((id) => getTaskColumn(props.allColumns, id)?.id === 'done').length
}
</script>

<template>
  <div class="kanban-list flex min-h-0 flex-1 flex-col overflow-auto pb-3">
    <div
      class="bg-muted/50 sticky top-0 z-10 grid grid-cols-[60px_1fr_100px_110px_130px_100px_80px] items-center gap-2 rounded-t-lg border px-3 py-2 text-[11px] font-semibold tracking-wider uppercase"
    >
      <button class="flex items-center gap-1 text-left" @click="toggleSort('id')">
        ID
        <ArrowUpDown :class="['size-3', sortField === 'id' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <button class="flex items-center gap-1 text-left" @click="toggleSort('title')">
        Task
        <ArrowUpDown :class="['size-3', sortField === 'title' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <button class="flex items-center gap-1 text-left" @click="toggleSort('status')">
        Status
        <ArrowUpDown :class="['size-3', sortField === 'status' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <button class="flex items-center gap-1 text-left" @click="toggleSort('priority')">
        Priority
        <ArrowUpDown :class="['size-3', sortField === 'priority' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <button class="flex items-center gap-1 text-left" @click="toggleSort('assignee')">
        Assignee
        <ArrowUpDown :class="['size-3', sortField === 'assignee' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <button class="flex items-center gap-1 text-left" @click="toggleSort('dueDate')">
        Due
        <ArrowUpDown :class="['size-3', sortField === 'dueDate' ? 'text-foreground' : 'text-muted-foreground/50']" />
      </button>
      <span class="text-center">Info</span>
    </div>

    <template v-if="groupedTasks">
      <template v-for="group in groupedTasks" :key="group.column.id">
        <button
          class="bg-muted/30 hover:bg-muted/50 flex items-center gap-2 border-x border-b px-3 py-1.5 text-left transition-colors"
          @click="toggleGroup(group.column.id)"
        >
          <component
            :is="collapsedGroups.has(group.column.id) ? ChevronRight : ChevronDown"
            class="text-muted-foreground size-3.5"
          />
          <span :class="['size-2 rounded-full', group.column.dotColor]" />
          <span class="text-sm font-medium">{{ group.column.title }}</span>
          <Badge variant="secondary" class="ml-1 h-4 px-1.5 text-[10px] tabular-nums">
            {{ group.tasks.length }}
          </Badge>
        </button>

        <template v-if="!collapsedGroups.has(group.column.id)">
          <div
            v-for="item in group.tasks"
            :key="item.task.id"
            class="hover:bg-muted/30 grid cursor-pointer grid-cols-[60px_1fr_100px_110px_130px_100px_80px] items-center gap-2 border-x border-b px-3 py-2 transition-colors"
            @click="$emit('task-click', item.task)"
          >
            <span class="text-muted-foreground font-mono text-[11px]">{{ item.task.id }}</span>

            <div class="min-w-0">
              <div class="flex items-center gap-2">
                <span
                  :class="[
                    'truncate text-[13px] font-medium',
                    item.columnId === 'done' ? 'text-muted-foreground line-through' : '',
                  ]"
                >
                  {{ item.task.title }}
                </span>
                <component
                  :is="linkComponent"
                  :to="`/dashboard/kanban/${item.task.id}`"
                  :href="`/dashboard/kanban/${item.task.id}`"
                  class="text-muted-foreground hover:text-foreground shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100"
                  @click.stop
                >
                  <ExternalLink class="size-3" />
                </component>
              </div>
              <div v-if="item.task.tags.length || item.task.subtaskIds.length" class="mt-0.5 flex items-center gap-1.5">
                <TagBadge
                  v-for="tag in item.task.tags"
                  :key="tag.label"
                  :label="tag.label"
                  :color="tag.color"
                  class="!px-1.5 !py-0 !text-[9px]"
                />
                <SubtaskProgress
                  v-if="item.task.subtaskIds.length"
                  :done="subtasksDone(item.task)"
                  :total="item.task.subtaskIds.length"
                  class="ml-1"
                />
              </div>
            </div>

            <div>
              <Select
                :model-value="item.columnId"
                @update:model-value="(val) => $emit('move-task', item.task, String(val))"
              >
                <SelectTrigger
                  class="hover:bg-muted h-6 w-auto gap-1 rounded-md border-none bg-transparent px-1.5 text-[11px] font-medium shadow-none"
                  @click.stop
                >
                  <span class="flex items-center gap-1.5">
                    <span :class="['size-1.5 rounded-full', item.dotColor]" />
                    <SelectValue />
                  </span>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem v-for="col in allColumns" :key="col.id" :value="col.id">
                    <span class="flex items-center gap-1.5">
                      <span :class="['size-1.5 rounded-full', col.dotColor]" />
                      {{ col.title }}
                    </span>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            <PriorityBadge :priority="item.task.priority" />

            <div class="flex items-center gap-2">
              <UserAvatar :name="item.task.assignee.name" :color="item.task.assignee.color" size="xs" />
              <span class="truncate text-[12px]">{{ item.task.assignee.name }}</span>
            </div>

            <div>
              <DueDateBadge v-if="item.task.dueDate" :due-date="item.task.dueDate" variant="chip" />
              <span v-else class="text-muted-foreground/50 text-[11px]">—</span>
            </div>

            <div class="flex items-center justify-center gap-2">
              <TooltipProvider :delay-duration="200">
                <Tooltip v-if="item.task.commentItems.length">
                  <TooltipTrigger as-child>
                    <span class="text-muted-foreground/70 flex items-center gap-0.5 text-[11px]">
                      <MessageSquare class="size-3" />
                      {{ item.task.commentItems.length }}
                    </span>
                  </TooltipTrigger>
                  <TooltipContent class="text-xs">{{ item.task.commentItems.length }} comments</TooltipContent>
                </Tooltip>
                <Tooltip v-if="item.task.fileItems.length">
                  <TooltipTrigger as-child>
                    <span class="text-muted-foreground/70 flex items-center gap-0.5 text-[11px]">
                      <Paperclip class="size-3" />
                      {{ item.task.fileItems.length }}
                    </span>
                  </TooltipTrigger>
                  <TooltipContent class="text-xs">{{ item.task.fileItems.length }} files</TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
        </template>
      </template>
    </template>

    <div
      v-if="flatTasks.length === 0"
      class="text-muted-foreground flex flex-1 items-center justify-center rounded-b-lg border-x border-b py-12 text-sm"
    >
      No tasks match your filters.
    </div>
  </div>
</template>

<style scoped>
.kanban-list {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
.kanban-list::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.kanban-list::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border));
  border-radius: 3px;
}
</style>

```

### `packages/registry-vue/blocks/kanban-board/KanbanTaskSheet.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import { type KanbanTask, type KanbanColumn, priorityConfig, fileIconMap } from '@/composables/useKanban'
import PriorityBadge from './PriorityBadge.vue'
import TagBadge from './TagBadge.vue'
import DueDateBadge from './DueDateBadge.vue'
import UserAvatar from './UserAvatar.vue'
import CommentList from './CommentList.vue'
import SubtaskList from './SubtaskList.vue'
import { kanbanLinkKey } from './link-injection'
import { Sheet, SheetContent, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@/components/ui/sheet'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Clock, Download, ExternalLink } from 'lucide-vue-next'

const linkComponent = inject(
  kanbanLinkKey,
  computed(() => 'a' as const),
)

const props = defineProps<{
  open: boolean
  task: KanbanTask | null
  columns: KanbanColumn[]
}>()

defineEmits<{
  'update:open': [value: boolean]
  'move-task': [task: KanbanTask, columnId: string]
  'add-comment': [task: KanbanTask, text: string]
}>()

const columnIdForTask = computed(() => {
  if (!props.task) return ''
  return props.columns.find((c) => c.tasks.some((t) => t.id === props.task!.id))?.id ?? ''
})
</script>

<template>
  <Sheet :open="open" @update:open="$emit('update:open', $event)">
    <SheetContent class="flex flex-col gap-0 overflow-hidden p-0 sm:max-w-[420px]">
      <template v-if="task">
        <div :class="['h-1 w-full shrink-0', priorityConfig[task.priority]?.bg]" />

        <div class="shrink-0 px-5 pt-4 pb-3">
          <div class="mb-3 flex items-center gap-2">
            <span class="text-muted-foreground font-mono text-[11px] tracking-tight">{{ task.id }}</span>
            <span class="text-muted-foreground/30">·</span>
            <Select
              :model-value="columnIdForTask"
              @update:model-value="(val) => task && $emit('move-task', task, String(val))"
            >
              <SelectTrigger
                class="hover:bg-secondary h-5 w-auto gap-1 rounded-md border-none bg-transparent px-1.5 text-[11px] font-medium shadow-none"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="col in columns" :key="col.id" :value="col.id">
                  <span class="flex items-center gap-1.5">
                    <span :class="['size-1.5 rounded-full', col.dotColor]" />
                    {{ col.title }}
                  </span>
                </SelectItem>
              </SelectContent>
            </Select>
            <PriorityBadge :priority="task.priority" icon-size="size-3" class="ml-auto" />
          </div>

          <SheetTitle class="text-[15px] leading-snug font-semibold tracking-tight">
            {{ task.title }}
          </SheetTitle>
          <SheetDescription class="sr-only">Task details</SheetDescription>
          <div
            v-if="task.description"
            class="text-muted-foreground rich-text-content prose prose-sm dark:prose-invert mt-1.5 max-w-none text-[13px] leading-relaxed"
            v-html="task.description"
          />
          <p v-else class="text-muted-foreground mt-1.5 text-[13px] leading-relaxed">No description provided.</p>

          <div class="mt-3 flex flex-wrap gap-1.5">
            <template v-if="task.tags.length">
              <TagBadge v-for="tag in task.tags" :key="tag.label" :label="tag.label" :color="tag.color" />
            </template>
            <span v-else class="text-muted-foreground text-[11px]">No tags</span>
          </div>
        </div>

        <div class="bg-border mx-5 h-px" />

        <div class="flex-1 overflow-y-auto">
          <div class="space-y-4 px-5 py-3">
            <div class="flex items-center gap-3">
              <UserAvatar :name="task.assignee.name" :color="task.assignee.color" size="md" />
              <div>
                <p class="text-[13px] leading-tight font-medium">{{ task.assignee.name }}</p>
                <p class="text-muted-foreground text-[11px]">Assignee</p>
              </div>
              <div class="ml-auto text-right">
                <DueDateBadge v-if="task.dueDate" :due-date="task.dueDate" />
                <p v-else class="text-muted-foreground flex items-center gap-1 text-[13px] leading-tight">
                  <Clock class="size-3" />
                  No due date
                </p>
              </div>
            </div>

            <div v-if="task.parentId" class="flex items-center gap-2">
              <span class="text-muted-foreground text-[11px]">Parent:</span>
              <component
                :is="linkComponent"
                :to="`/dashboard/kanban/${task.parentId}`"
                :href="`/dashboard/kanban/${task.parentId}`"
                class="text-primary text-[12px] font-medium hover:underline"
                @click="$emit('update:open', false)"
              >
                {{ task.parentId }}
              </component>
            </div>

            <div>
              <h4 class="mb-2 text-[13px] font-semibold">
                Subtasks
                <span v-if="task.subtaskIds.length" class="text-muted-foreground font-normal">
                  ({{ task.subtaskIds.length }})
                </span>
              </h4>
              <SubtaskList :subtask-ids="task.subtaskIds" :columns="columns" compact />
            </div>

            <div class="bg-border h-px" />

            <div>
              <h4 class="mb-2 text-[13px] font-semibold">
                Comments
                <span v-if="task.commentItems.length" class="text-muted-foreground font-normal">
                  ({{ task.commentItems.length }})
                </span>
              </h4>
              <CommentList
                :comments="task.commentItems"
                compact
                @add="(text) => task && $emit('add-comment', task, text)"
              />
            </div>

            <div class="bg-border h-px" />

            <div>
              <h4 class="mb-2 text-[13px] font-semibold">
                Files
                <span v-if="task.fileItems.length" class="text-muted-foreground font-normal">
                  ({{ task.fileItems.length }})
                </span>
              </h4>
              <div v-if="task.fileItems.length" class="space-y-1">
                <div
                  v-for="file in task.fileItems"
                  :key="file.id"
                  class="hover:bg-muted/50 group/file flex items-center gap-2.5 rounded-md px-1.5 py-1.5 transition-colors"
                >
                  <div class="bg-muted flex size-8 shrink-0 items-center justify-center rounded-md">
                    <component :is="fileIconMap[file.type]" class="text-muted-foreground size-4" />
                  </div>
                  <div class="min-w-0 flex-1">
                    <p class="truncate text-[12px] font-medium">{{ file.name }}</p>
                    <p class="text-muted-foreground text-[10px]">{{ file.size }}</p>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    class="size-7 shrink-0 opacity-0 transition-opacity group-hover/file:opacity-100"
                  >
                    <Download class="size-3.5" />
                  </Button>
                </div>
              </div>
              <p v-else class="text-muted-foreground text-[12px]">No files attached.</p>
            </div>
          </div>
        </div>

        <SheetFooter class="shrink-0 border-t px-5 py-3">
          <div class="flex w-full items-center gap-2">
            <component
              :is="linkComponent"
              :to="`/dashboard/kanban/${task.id}`"
              :href="`/dashboard/kanban/${task.id}`"
              class="flex-1"
              @click="$emit('update:open', false)"
            >
              <Button variant="outline" size="sm" class="w-full gap-1.5">
                <ExternalLink class="size-3.5" />
                View full detail
              </Button>
            </component>
            <SheetClose as-child>
              <Button variant="ghost" size="sm">Close</Button>
            </SheetClose>
          </div>
        </SheetFooter>
      </template>
    </SheetContent>
  </Sheet>
</template>

```

### `packages/registry-vue/blocks/kanban-board/KanbanAddTaskDialog.vue`

```vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { KanbanTask, KanbanColumn } from '@/composables/useKanban'
import { priorityConfig, assignees, tagPresets } from '@/composables/useKanban'
import {
  Dialog,
  DialogScrollContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Calendar } from '@/components/ui/calendar'
import { RichTextEditor } from '@/components/ui/rich-text-editor'
import { Plus, X, CheckCircle2, CalendarIcon } from 'lucide-vue-next'
import { getLocalTimeZone, DateFormatter, type DateValue } from '@internationalized/date'

const props = defineProps<{
  open: boolean
  columns: KanbanColumn[]
  initialColumnId: string
}>()

const emit = defineEmits<{
  'update:open': [value: boolean]
  create: [columnId: string, tasks: KanbanTask[]]
}>()

const df = new DateFormatter('en-US', { dateStyle: 'medium' })

const columnId = ref(props.initialColumnId)
const dueDate = ref<DateValue | undefined>(undefined)
const form = ref({
  title: '',
  description: '',
  priority: 'medium' as KanbanTask['priority'],
  assigneeKey: 'alice' as keyof typeof assignees,
  tagKeys: [] as (keyof typeof tagPresets)[],
  subtaskTexts: [] as string[],
})
const newSubtaskText = ref('')

watch(
  () => props.initialColumnId,
  (val) => {
    columnId.value = val
  },
)

watch(
  () => props.open,
  (val) => {
    if (val) {
      columnId.value = props.initialColumnId
      form.value = {
        title: '',
        description: '',
        priority: 'medium',
        assigneeKey: 'alice',
        tagKeys: [],
        subtaskTexts: [],
      }
      dueDate.value = undefined
      newSubtaskText.value = ''
    }
  },
)

function addSubtask() {
  const text = newSubtaskText.value.trim()
  if (!text) return
  form.value.subtaskTexts.push(text)
  newSubtaskText.value = ''
}

function removeSubtask(index: number) {
  form.value.subtaskTexts.splice(index, 1)
}

function toggleTag(key: keyof typeof tagPresets) {
  const idx = form.value.tagKeys.indexOf(key)
  if (idx >= 0) form.value.tagKeys.splice(idx, 1)
  else form.value.tagKeys.push(key)
}

function submit() {
  if (!form.value.title.trim()) return
  const maxId = props.columns
    .flatMap((c) => c.tasks)
    .reduce((max, t) => {
      const num = parseInt(t.id.replace(/^[A-Z]+-/, ''), 10)
      return num > max ? num : max
    }, 0)
  const idPrefix = props.columns.flatMap((c) => c.tasks)[0]?.id.split('-')[0] ?? 'TASK'
  const parentId = `${idPrefix}-${maxId + 1}`
  const subtaskTasks: KanbanTask[] = form.value.subtaskTexts.map((text, i) => ({
    id: `${idPrefix}-${maxId + 2 + i}`,
    title: text,
    priority: 'medium' as const,
    assignee: assignees[form.value.assigneeKey],
    tags: [],
    parentId,
    subtaskIds: [],
    commentItems: [],
    fileItems: [],
  }))
  const newTask: KanbanTask = {
    id: parentId,
    title: form.value.title.trim(),
    description: form.value.description.trim() || undefined,
    priority: form.value.priority,
    assignee: assignees[form.value.assigneeKey],
    tags: form.value.tagKeys.map((k) => tagPresets[k]),
    dueDate: dueDate.value ? dueDate.value.toString() : undefined,
    subtaskIds: subtaskTasks.map((t) => t.id),
    commentItems: [],
    fileItems: [],
  }
  emit('create', columnId.value, [newTask, ...subtaskTasks])
  emit('update:open', false)
}
</script>

<template>
  <Dialog :open="open" @update:open="$emit('update:open', $event)">
    <DialogScrollContent class="sm:max-w-[680px]">
      <DialogHeader>
        <DialogTitle>New Task</DialogTitle>
        <DialogDescription>
          Adding task to
          {{ columns.find((c) => c.id === columnId)?.title ?? 'column' }}
        </DialogDescription>
      </DialogHeader>

      <div class="grid gap-4 py-2">
        <div class="grid gap-1.5">
          <Label for="task-title">Title</Label>
          <Input id="task-title" v-model="form.title" placeholder="Enter task title" />
        </div>

        <div class="grid gap-1.5">
          <Label>
            Description
            <span class="text-muted-foreground text-xs">(optional)</span>
          </Label>
          <RichTextEditor v-model="form.description" />
        </div>

        <div class="grid grid-cols-3 gap-4">
          <div class="grid gap-1.5">
            <Label for="task-priority">Priority</Label>
            <Select v-model="form.priority">
              <SelectTrigger id="task-priority">
                <SelectValue placeholder="Priority" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="(config, key) in priorityConfig" :key="key" :value="key">
                  {{ config.label }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div class="grid gap-1.5">
            <Label for="task-assignee">Assignee</Label>
            <Select v-model="form.assigneeKey">
              <SelectTrigger id="task-assignee">
                <SelectValue placeholder="Assignee" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="(person, key) in assignees" :key="key" :value="key">
                  {{ person.name }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div class="grid gap-1.5">
            <Label for="task-column">Column</Label>
            <Select v-model="columnId">
              <SelectTrigger id="task-column">
                <SelectValue placeholder="Column" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="col in columns" :key="col.id" :value="col.id">
                  {{ col.title }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <div class="grid gap-1.5">
          <Label>
            Due Date
            <span class="text-muted-foreground text-xs">(optional)</span>
          </Label>
          <Popover>
            <PopoverTrigger as-child>
              <Button
                variant="outline"
                :class="['w-full justify-start text-left font-normal', !dueDate && 'text-muted-foreground']"
              >
                <CalendarIcon class="mr-2 size-4" />
                {{ dueDate ? df.format(dueDate.toDate(getLocalTimeZone())) : 'Pick a date' }}
              </Button>
            </PopoverTrigger>
            <PopoverContent class="w-auto p-0">
              <Calendar v-model="dueDate" initial-focus />
            </PopoverContent>
          </Popover>
        </div>

        <div class="grid gap-1.5">
          <Label>
            Tags
            <span class="text-muted-foreground text-xs">(optional)</span>
          </Label>
          <div class="flex flex-wrap gap-2">
            <button
              v-for="(tag, key) in tagPresets"
              :key="key"
              type="button"
              :class="[
                'inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
                form.tagKeys.includes(key as keyof typeof tagPresets)
                  ? 'bg-primary text-primary-foreground border-transparent'
                  : 'border-border bg-background text-foreground hover:bg-muted',
              ]"
              @click="toggleTag(key as keyof typeof tagPresets)"
            >
              <CheckCircle2 v-if="form.tagKeys.includes(key as keyof typeof tagPresets)" class="size-3" />
              {{ tag.label }}
            </button>
          </div>
        </div>

        <div class="grid gap-1.5">
          <Label>
            Subtasks
            <span class="text-muted-foreground text-xs">(optional)</span>
          </Label>
          <div v-if="form.subtaskTexts.length" class="space-y-2">
            <div v-for="(text, index) in form.subtaskTexts" :key="index" class="flex items-center gap-2">
              <span class="flex-1 text-sm">{{ text }}</span>
              <Button variant="ghost" size="icon" class="size-6" @click="removeSubtask(index)">
                <X class="size-3" />
              </Button>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <Input v-model="newSubtaskText" placeholder="Add a subtask" @keyup.enter="addSubtask" />
            <Button variant="outline" size="icon" @click="addSubtask">
              <Plus class="size-4" />
            </Button>
          </div>
        </div>
      </div>

      <DialogFooter>
        <Button variant="outline" @click="$emit('update:open', false)">Cancel</Button>
        <Button :disabled="!form.title.trim()" @click="submit">Create Task</Button>
      </DialogFooter>
    </DialogScrollContent>
  </Dialog>
</template>

```

### `packages/registry-vue/blocks/kanban-board/KanbanToolbar.vue`

```vue
<script setup lang="ts">
import { Search, Filter, ChevronDown, X, LayoutGrid, List } from 'lucide-vue-next'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { priorityConfig, assignees, getInitials } from '@/composables/useKanban'

defineProps<{
  searchQuery: string
  selectedPriority: string | null
  selectedAssignee: string | null
  viewMode: 'board' | 'list'
}>()

defineEmits<{
  'update:searchQuery': [value: string]
  'update:selectedPriority': [value: string | null]
  'update:selectedAssignee': [value: string | null]
  'update:viewMode': [value: 'board' | 'list']
}>()
</script>

<template>
  <div class="mb-3 flex shrink-0 items-center gap-2">
    <div class="relative w-56">
      <Search class="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
      <Input
        :model-value="searchQuery"
        placeholder="Search tasks..."
        class="h-8 pl-8 text-sm"
        @update:model-value="$emit('update:searchQuery', $event)"
      />
    </div>

    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button variant="outline" size="sm" class="h-8 gap-1.5 text-xs">
          <Filter class="size-3" />
          Priority
          <Badge
            v-if="selectedPriority"
            variant="default"
            class="ml-0.5 h-4 min-w-4 justify-center rounded px-1 text-[10px]"
          >
            1
          </Badge>
          <ChevronDown class="text-muted-foreground size-3" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" class="w-40">
        <DropdownMenuItem
          v-for="(config, key) in priorityConfig"
          :key="key"
          class="gap-2"
          @click="$emit('update:selectedPriority', selectedPriority === key ? null : (key as string))"
        >
          <component :is="config.icon" :class="['size-3.5', config.class]" />
          {{ config.label }}
          <span v-if="selectedPriority === key" class="bg-primary ml-auto size-1.5 rounded-full" />
        </DropdownMenuItem>
        <DropdownMenuSeparator v-if="selectedPriority" />
        <DropdownMenuItem v-if="selectedPriority" @click="$emit('update:selectedPriority', null)">
          Clear filter
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>

    <Badge
      v-if="selectedAssignee"
      variant="secondary"
      class="h-7 cursor-pointer gap-1 pr-1.5 text-xs"
      @click="$emit('update:selectedAssignee', null)"
    >
      {{ selectedAssignee }}
      <X class="size-3 opacity-50" />
    </Badge>

    <ToggleGroup
      type="single"
      size="sm"
      :model-value="viewMode"
      class="bg-muted ml-auto flex items-center gap-0.5 rounded-md p-0.5"
      @update:model-value="(v) => v && $emit('update:viewMode', v as 'board' | 'list')"
    >
      <ToggleGroupItem
        value="board"
        class="data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm"
        title="Board view"
      >
        <LayoutGrid class="size-3.5" />
      </ToggleGroupItem>
      <ToggleGroupItem
        value="list"
        class="data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm"
        title="List view"
      >
        <List class="size-3.5" />
      </ToggleGroupItem>
    </ToggleGroup>

    <div class="flex items-center">
      <TooltipProvider :delay-duration="300">
        <Tooltip v-for="(a, key) in assignees" :key="key">
          <TooltipTrigger as-child>
            <button
              :class="[
                // rounded-full so the selected ring + focus ring trace the
                // Avatar's circular outline instead of the rectangular button.
                'ring-background focus-visible:ring-ring/50 relative -ml-1.5 rounded-full transition-all outline-none first:ml-0 focus-visible:ring-1',
                selectedAssignee === a.name
                  ? 'ring-primary z-20 ring-1'
                  : selectedAssignee && selectedAssignee !== a.name
                    ? 'opacity-40 hover:opacity-70'
                    : 'hover:z-10 hover:scale-110',
              ]"
              @click="$emit('update:selectedAssignee', selectedAssignee === a.name ? null : a.name)"
            >
              <Avatar class="border-background size-7 border-2">
                <AvatarFallback :class="['text-[10px] font-semibold', a.color]">
                  {{ getInitials(a.name) }}
                </AvatarFallback>
              </Avatar>
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" class="text-xs">
            {{ a.name }}
            <span v-if="selectedAssignee === a.name" class="text-muted-foreground ml-1">(filtered)</span>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  </div>
</template>

```

### `packages/registry-vue/blocks/kanban-board/PriorityBadge.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { priorityConfig } from '@/composables/useKanban'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    priority: string
    iconSize?: string
    class?: string
  }>(),
  {
    iconSize: 'size-3.5',
  },
)

const config = computed(() => priorityConfig[props.priority])
</script>

<template>
  <div v-if="config" :class="cn('flex items-center gap-1', props.class)">
    <component :is="config.icon" :class="[iconSize, config.class]" />
    <span :class="['text-[11px] font-semibold', config.class]">{{ config.label }}</span>
  </div>
</template>

```

### `packages/registry-vue/blocks/kanban-board/DueDateBadge.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { Clock } from 'lucide-vue-next'
import { getDueStatus, formatDueDate } from '@/composables/useKanban'
import { cn } from '@/lib/utils'

const props = defineProps<{
  dueDate: string
  variant?: 'chip' | 'inline'
  class?: string
}>()

const status = computed(() => getDueStatus(props.dueDate))
const formatted = computed(() => formatDueDate(props.dueDate))

const chipClasses = computed(() => {
  switch (status.value) {
    case 'overdue':
      return 'bg-destructive/10 text-destructive'
    case 'soon':
      return 'bg-warning/10 text-warning'
    default:
      return 'text-muted-foreground bg-muted'
  }
})

const inlineClasses = computed(() => {
  switch (status.value) {
    case 'overdue':
      return 'text-destructive'
    case 'soon':
      return 'text-warning'
    default:
      return 'text-foreground'
  }
})
</script>

<template>
  <div
    v-if="variant === 'chip'"
    :class="cn('flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium', chipClasses, props.class)"
  >
    <Clock class="size-3" />
    {{ formatted }}
  </div>

  <p v-else :class="cn('flex items-center gap-1 text-[13px] leading-tight font-medium', inlineClasses, props.class)">
    <Clock class="size-3" />
    {{ formatted }}
  </p>
</template>

```

### `packages/registry-vue/blocks/kanban-board/TagBadge.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  label: string
  color: string
  class?: string
}>()
</script>

<template>
  <span :class="cn('rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset', color, $props.class)">
    {{ label }}
  </span>
</template>

```

### `packages/registry-vue/blocks/kanban-board/UserAvatar.vue`

```vue
<script setup lang="ts">
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { getInitials } from '@/composables/useKanban'
import { cn } from '@/lib/utils'

defineProps<{
  name: string
  color: string
  size?: 'xs' | 'sm' | 'md'
  class?: string
}>()

const sizeMap = {
  xs: { avatar: 'size-6', text: 'text-[8px]' },
  sm: { avatar: 'size-7', text: 'text-[9px]' },
  md: { avatar: 'size-8', text: 'text-[11px]' },
}
</script>

<template>
  <Avatar :class="cn(sizeMap[size ?? 'sm'].avatar, 'shrink-0', $props.class)">
    <AvatarFallback :class="[sizeMap[size ?? 'sm'].text, 'font-bold', color]">
      {{ getInitials(name) }}
    </AvatarFallback>
  </Avatar>
</template>

```

### `packages/registry-vue/blocks/kanban-board/SubtaskProgress.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { CheckCircle2 } from 'lucide-vue-next'

const props = defineProps<{
  done: number
  total: number
  barHeight?: string
}>()

const percent = computed(() => (props.total > 0 ? Math.round((props.done / props.total) * 100) : 0))
const isComplete = computed(() => props.done === props.total && props.total > 0)
</script>

<template>
  <div v-if="total > 0">
    <div class="mb-1 flex items-center justify-between">
      <span class="text-muted-foreground text-[11px]">
        <CheckCircle2 v-if="isComplete" class="text-success mr-0.5 inline size-3" />
        {{ done }}/{{ total }} subtasks
      </span>
      <span class="text-muted-foreground text-[11px] font-medium tabular-nums">{{ percent }}%</span>
    </div>
    <div :class="['bg-muted overflow-hidden rounded-full', barHeight ?? 'h-1.5']">
      <div
        :class="['h-full rounded-full transition-all duration-500', isComplete ? 'bg-success' : 'bg-primary']"
        :style="{ width: `${percent}%` }"
      />
    </div>
  </div>
</template>

```

### `packages/registry-vue/blocks/kanban-board/SubtaskList.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { KanbanColumn } from '@/composables/useKanban'
import { findTaskById, getTaskColumn } from '@/composables/useKanban'
import { kanbanLinkKey } from './link-injection'

const props = defineProps<{
  subtaskIds: string[]
  columns: KanbanColumn[]
  compact?: boolean
}>()

const subtasks = computed(() => {
  return props.subtaskIds
    .map((id) => {
      const task = findTaskById(props.columns, id)
      const column = getTaskColumn(props.columns, id)
      return task ? { task, column } : null
    })
    .filter(Boolean) as {
    task: NonNullable<ReturnType<typeof findTaskById>>
    column: ReturnType<typeof getTaskColumn>
  }[]
})

const doneCount = computed(() => subtasks.value.filter((s) => s.column?.id === 'done').length)

const linkComponent = inject(
  kanbanLinkKey,
  computed(() => 'a' as const),
)
</script>

<template>
  <div v-if="subtasks.length">
    <div class="mb-2 flex items-center justify-between">
      <span :class="compact ? 'text-[11px]' : 'text-[13px]'" class="text-muted-foreground tabular-nums">
        {{ doneCount }}/{{ subtasks.length }} done
      </span>
      <span :class="compact ? 'text-[10px]' : 'text-[11px]'" class="text-muted-foreground tabular-nums">
        {{ subtasks.length > 0 ? Math.round((doneCount / subtasks.length) * 100) : 0 }}%
      </span>
    </div>
    <div class="bg-muted mb-3 h-1.5 overflow-hidden rounded-full">
      <div
        :class="[
          'h-full rounded-full transition-all duration-500',
          doneCount === subtasks.length ? 'bg-success' : 'bg-primary',
        ]"
        :style="{ width: `${subtasks.length > 0 ? Math.round((doneCount / subtasks.length) * 100) : 0}%` }"
      />
    </div>

    <div :class="compact ? 'space-y-0.5' : 'space-y-1'">
      <component
        :is="linkComponent"
        v-for="{ task, column } in subtasks"
        :key="task.id"
        :to="`/dashboard/kanban/${task.id}`"
        :href="`/dashboard/kanban/${task.id}`"
        :class="[
          'group/subtask flex items-center gap-2 rounded-md transition-colors',
          compact ? 'px-1 py-1' : 'px-1.5 py-1.5',
          'hover:bg-muted/50',
        ]"
      >
        <span :class="['size-1.5 shrink-0 rounded-full', column?.dotColor ?? 'bg-muted-foreground']" />
        <span :class="['shrink-0 font-mono', compact ? 'text-[10px]' : 'text-[11px]', 'text-muted-foreground/70']">
          {{ task.id }}
        </span>
        <span
          :class="[
            'min-w-0 flex-1 truncate',
            compact ? 'text-[12px]' : 'text-[13px]',
            column?.id === 'done' ? 'text-muted-foreground line-through' : 'text-foreground',
          ]"
        >
          {{ task.title }}
        </span>
        <span
          :class="[
            'shrink-0 rounded-md px-1.5 py-0.5 font-medium',
            compact ? 'text-[9px]' : 'text-[10px]',
            column?.color ?? 'text-muted-foreground',
          ]"
        >
          {{ column?.title ?? 'Unknown' }}
        </span>
      </component>
    </div>
  </div>
  <p v-else :class="compact ? 'text-muted-foreground text-[12px]' : 'text-muted-foreground text-sm'">
    No subtasks yet.
  </p>
</template>

```

### `packages/registry-vue/blocks/kanban-board/CommentList.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Send } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { RichTextEditor } from '@/components/ui/rich-text-editor'
import UserAvatar from './UserAvatar.vue'
import type { CommentItem } from '@/composables/useKanban'

withDefaults(
  defineProps<{
    comments: CommentItem[]
    compact?: boolean
  }>(),
  {
    compact: false,
  },
)

const emit = defineEmits<{
  add: [text: string]
}>()

const newComment = ref('')

function submit() {
  const stripped = newComment.value.replace(/<[^>]*>/g, '').trim()
  if (!stripped) return
  emit('add', newComment.value)
  newComment.value = ''
}
</script>

<template>
  <div v-if="comments.length" :class="compact ? 'space-y-3' : 'space-y-4'">
    <div v-for="comment in comments" :key="comment.id" :class="compact ? 'flex gap-2.5' : 'flex gap-3'">
      <UserAvatar :name="comment.author" :color="comment.authorColor" :size="compact ? 'xs' : 'sm'" />
      <div class="min-w-0 flex-1">
        <div class="flex items-baseline gap-2">
          <span :class="compact ? 'text-[12px] font-semibold' : 'text-[13px] font-semibold'">
            {{ compact ? comment.author.split(' ')[0] : comment.author }}
          </span>
          <span :class="compact ? 'text-muted-foreground text-[10px]' : 'text-muted-foreground text-[11px]'">
            {{ comment.time }}
          </span>
        </div>
        <div
          :class="[
            'rich-text-content prose prose-sm dark:prose-invert mt-0.5 max-w-none',
            compact
              ? 'text-muted-foreground text-[12px] leading-relaxed'
              : 'text-muted-foreground text-[13px] leading-relaxed',
          ]"
          v-html="comment.text"
        />
      </div>
    </div>
  </div>
  <p v-else :class="compact ? 'text-muted-foreground text-[12px]' : 'text-muted-foreground text-sm'">
    No comments yet.
  </p>

  <div :class="compact ? 'mt-3 flex gap-2' : 'mt-4 flex gap-3 border-t pt-4'">
    <div :class="compact ? 'mt-1' : 'mt-1.5'">
      <UserAvatar name="Admin User" color="bg-chart-1/15 text-chart-1" :size="compact ? 'xs' : 'sm'" />
    </div>
    <div class="min-w-0 flex-1 space-y-2">
      <RichTextEditor
        v-model:model-value="newComment"
        placeholder="Write a comment..."
        :min-height="compact ? '60px' : '80px'"
        :class="compact ? 'text-[12px]' : 'text-[13px]'"
      />
      <div class="flex justify-end">
        <Button
          size="sm"
          :class="compact ? 'h-7 gap-1 text-[11px]' : 'h-8 gap-1.5 text-xs'"
          :disabled="!newComment.replace(/<[^>]*>/g, '').trim()"
          @click="submit"
        >
          <Send class="size-3" />
          Comment
        </Button>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/blocks/kanban-board/link-injection.ts`

```ts
import type { InjectionKey, ComputedRef, Component } from 'vue'

// Shared provide/inject key for the kanban-board link component.
// KanbanBoard provides it; KanbanCard, KanbanListView, KanbanTaskSheet,
// and SubtaskList inject it so task links render with the consumer's
// router component (NuxtLink, RouterLink) or a plain <a> by default.
export const kanbanLinkKey: InjectionKey<ComputedRef<string | Component>> = Symbol('kanbanLink')

```

## kanban-data

- type: `registry:lib`
- description: Seed columns for the kanban-board block. Five HR-themed columns (Backlog / To Do / In Progress / In Review / Done) with ~26 tasks across them, complete with assignees, tags, due dates, subtasks, comments, and files. Swap with your own fetcher when wiring to a real backend -- the consumer page just imports `createInitialColumns()` and binds the returned array to `<KanbanBoard v-model:columns>`.
- registry deps: `use-kanban`

### `packages/registry-vue/bootstrap/kanban-data/kanbanData.ts`

```ts
import type { KanbanColumn } from '@/composables/useKanban'
import { assignees, tagPresets } from '@/composables/useKanban'

export function createInitialColumns(): KanbanColumn[] {
  return [
    {
      id: 'backlog',
      title: 'Backlog',
      color: 'text-muted-foreground',
      dotColor: 'bg-muted-foreground/60',
      tasks: [
        {
          id: 'HR-101',
          title: 'Draft updated remote work policy for Q3',
          description: 'Review current policy, benchmark competitors, propose updates',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [tagPresets.policy, tagPresets.compliance],
          dueDate: '2026-03-28',
          subtaskIds: ['HR-115', 'HR-116', 'HR-117'],
          commentItems: [
            {
              id: 'c1',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Should we include a section on co-working space stipends?',
              time: '2h ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Good idea — I'll add it to the draft. Also checking what competitors offer.",
              time: '1h ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Legal flagged we need to update the liability clause for remote injuries.',
              time: '30m ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Current_Remote_Policy_v2.pdf', size: '245 KB', type: 'pdf' }],
        },
        {
          id: 'HR-102',
          title: 'Research employee wellness platforms',
          priority: 'low',
          assignee: assignees.carol,
          tags: [tagPresets.benefits],
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-103',
          title: 'Create training calendar for new hires',
          priority: 'medium',
          assignee: assignees.frank,
          tags: [tagPresets.training, tagPresets.onboarding],
          dueDate: '2026-04-05',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Can we integrate this with the existing LMS?',
              time: '1d ago',
            },
            {
              id: 'c2',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Looking into it — the API supports calendar sync.',
              time: '22h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Training_Modules_List.xlsx', size: '128 KB', type: 'spreadsheet' },
            { id: 'f2', name: 'Onboarding_Flow_Diagram.png', size: '1.2 MB', type: 'image' },
            { id: 'f3', name: 'LMS_Integration_Notes.pdf', size: '89 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-116',
          title: 'Benchmark 5 competitor policies',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-117',
          title: 'Draft proposed changes document',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'todo',
      title: 'To Do',
      color: 'text-blue-600 dark:text-blue-400',
      dotColor: 'bg-blue-500',
      tasks: [
        {
          id: 'HR-104',
          title: 'Set up interviews for Senior Designer role',
          description: 'Coordinate with hiring panel, schedule 4 candidates',
          priority: 'high',
          assignee: assignees.bob,
          tags: [tagPresets.recruitment],
          dueDate: '2026-03-15',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Candidate #3 requested to reschedule to Thursday.',
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Updated. Thursday 2pm works for everyone.',
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Portfolio review links are ready — shared in the hiring channel.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: "Thanks Eva. I'll add those to the scorecards.",
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Can we include a design challenge? 30 min whiteboard session.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Good call — added to the schedule after the panel round.',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "All set. Let's sync after the first two interviews.",
              time: '5h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Interview_Rubric_Sr_Designer.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f2', name: 'Candidate_Profiles.xlsx', size: '342 KB', type: 'spreadsheet' },
          ],
        },
        {
          id: 'HR-105',
          title: 'Process March payroll adjustments',
          priority: 'urgent',
          assignee: assignees.eva,
          tags: [tagPresets.payroll],
          dueDate: '2026-03-12',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Three employees reported incorrect overtime — investigating.',
              time: '4h ago',
            },
          ],
          fileItems: [],
        },
        {
          id: 'HR-106',
          title: 'Update employee handbook — Section 4.2',
          priority: 'medium',
          assignee: assignees.david,
          tags: [tagPresets.compliance, tagPresets.policy],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Section 4.2 needs to reflect the new PTO rollover rules.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Also update the bereavement leave policy — legal sent revisions.',
              time: '1d ago',
            },
            {
              id: 'c3',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'I can review the final draft before publishing.',
              time: '12h ago',
            },
            {
              id: 'c4',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Thanks Frank. Will have it ready by EOD tomorrow.',
              time: '10h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Handbook_Section4.2_Draft.pdf', size: '198 KB', type: 'pdf' }],
        },
        {
          id: 'HR-107',
          title: 'Review benefits enrollment for new joiners',
          priority: 'low',
          assignee: assignees.carol,
          tags: [tagPresets.benefits, tagPresets.onboarding],
          dueDate: '2026-03-20',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'in-progress',
      title: 'In Progress',
      color: 'text-orange-600 dark:text-orange-400',
      dotColor: 'bg-orange-500',
      tasks: [
        {
          id: 'HR-108',
          title: 'Onboard 3 new engineers — Week 2 orientation',
          description: 'Equipment setup, system access, team introductions',
          priority: 'high',
          assignee: assignees.alice,
          tags: [tagPresets.onboarding],
          dueDate: '2026-03-14',
          subtaskIds: ['HR-118', 'HR-119', 'HR-120'],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'All three laptops are configured and ready for pickup.',
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: "GitHub access granted. They're in the eng-new-hires team.",
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Team intro meetings scheduled for Tuesday and Wednesday.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits enrollment forms sent to all three.',
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'One engineer had issues with VPN — IT is looking into it.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'VPN issue resolved — was a firewall config on their end.',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Payroll records created for all three. Direct deposit pending.',
              time: '20h ago',
            },
            {
              id: 'c8',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Assigned buddies: Sarah→James, Mike→Priya, Tom→Alex.',
              time: '16h ago',
            },
            {
              id: 'c9',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Great progress! Just HR paperwork and feedback survey left.',
              time: '8h ago',
            },
            {
              id: 'c10',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Week 1 feedback from all three was very positive.',
              time: '4h ago',
            },
            {
              id: 'c11',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Two out of three have completed benefits enrollment.',
              time: '2h ago',
            },
            {
              id: 'c12',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Following up with the third one today. Should be done by EOD.',
              time: '1h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Onboarding_Checklist_Engineers.pdf', size: '312 KB', type: 'pdf' },
            { id: 'f2', name: 'Equipment_Inventory.xlsx', size: '87 KB', type: 'spreadsheet' },
            { id: 'f3', name: 'Team_Org_Chart.png', size: '456 KB', type: 'image' },
            { id: 'f4', name: 'VPN_Setup_Guide.pdf', size: '1.1 MB', type: 'pdf' },
            { id: 'f5', name: 'Benefits_Enrollment_Form.pdf', size: '234 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-109',
          title: 'Conduct annual compliance training',
          priority: 'high',
          assignee: assignees.frank,
          tags: [tagPresets.training, tagPresets.compliance],
          dueDate: '2026-03-18',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Slide deck updated with new data privacy regulations.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Can we make Session A virtual for remote engineers?',
              time: '1d ago',
            },
            {
              id: 'c3',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Yes — setting up a hybrid session with Zoom link.',
              time: '18h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Compliance_Training_2026.pdf', size: '2.4 MB', type: 'pdf' },
            { id: 'f2', name: 'Acknowledgment_Form_Template.pdf', size: '67 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-110',
          title: 'Prepare performance review templates',
          priority: 'medium',
          assignee: assignees.david,
          tags: [tagPresets.policy],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: "Using last year's template as a starting point. Adding peer review section.",
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Can we add a self-assessment section too?',
              time: '2d ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Good idea — adding it. Also including a goals section for next quarter.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Please share a preview before we roll out. Last year's had confusing rating scales.",
              time: '1d ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Will share draft by Friday. Simplified the scale to 1-5 with clear descriptions.',
              time: '8h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Review_Template_Draft_v3.pdf', size: '178 KB', type: 'pdf' }],
        },
        {
          id: 'HR-120',
          title: 'Complete HR paperwork and benefits enrollment',
          priority: 'medium',
          assignee: assignees.carol,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'in-review',
      title: 'In Review',
      color: 'text-violet-600 dark:text-violet-400',
      dotColor: 'bg-violet-500',
      tasks: [
        {
          id: 'HR-111',
          title: 'Finalize job descriptions for Q2 hiring plan',
          priority: 'high',
          assignee: assignees.bob,
          tags: [tagPresets.recruitment],
          dueDate: '2026-03-13',
          subtaskIds: ['HR-121', 'HR-122', 'HR-123'],
          commentItems: [
            {
              id: 'c1',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'All six JDs are drafted. Sending to hiring managers for review.',
              time: '4d ago',
            },
            {
              id: 'c2',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Salary ranges confirmed for all positions. Updated the comp spreadsheet.',
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'DevOps JD needs to mention Kubernetes experience. Updated.',
              time: '3d ago',
            },
            {
              id: 'c4',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Looks great overall. Let's get legal to sign off.",
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Legal review submitted. ETA is end of day Thursday.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Should we add remote/hybrid designation to each JD?',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Good point — added work location to all six.',
              time: '20h ago',
            },
            {
              id: 'c8',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits section should mention the new wellness stipend.',
              time: '12h ago',
            },
            {
              id: 'c9',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Done! All JDs now include the wellness benefit.',
              time: '6h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Q2_Job_Descriptions_All.pdf', size: '892 KB', type: 'pdf' },
            { id: 'f2', name: 'Salary_Benchmarks_Q2.xlsx', size: '234 KB', type: 'spreadsheet' },
            { id: 'f3', name: 'Hiring_Plan_Timeline.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f4', name: 'Org_Chart_Q2_Projected.png', size: '678 KB', type: 'image' },
          ],
        },
        {
          id: 'HR-112',
          title: 'Audit PTO balances before rollover deadline',
          priority: 'urgent',
          assignee: assignees.eva,
          tags: [tagPresets.payroll, tagPresets.compliance],
          dueDate: '2026-03-11',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Found 12 employees with balances exceeding the rollover cap.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Send them reminders to use or forfeit before the 11th.',
              time: '2d ago',
            },
            {
              id: 'c3',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Reminders sent. 8 have acknowledged so far.',
              time: '1d ago',
            },
            {
              id: 'c4',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Do we need manager approval for the remaining 4?',
              time: '1d ago',
            },
            {
              id: 'c5',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Yes — escalated to their managers. Following up today.',
              time: '6h ago',
            },
            {
              id: 'c6',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Two more responded. Just 2 remaining.',
              time: '2h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'PTO_Audit_Report_March.xlsx', size: '567 KB', type: 'spreadsheet' }],
        },
        {
          id: 'HR-123',
          title: 'Final legal review of all JDs',
          priority: 'high',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'done',
      title: 'Done',
      color: 'text-emerald-600 dark:text-emerald-400',
      dotColor: 'bg-emerald-500',
      tasks: [
        {
          id: 'HR-113',
          title: 'Complete February payroll processing',
          priority: 'high',
          assignee: assignees.eva,
          tags: [tagPresets.payroll],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'All payroll calculations verified. Submitting to bank.',
              time: '5d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Confirmed — all deposits went through successfully.',
              time: '4d ago',
            },
            {
              id: 'c3',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Payslips generated and emailed to all employees.',
              time: '4d ago',
            },
            {
              id: 'c4',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Closing this out — February payroll is fully complete.',
              time: '3d ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Feb_Payroll_Summary.xlsx', size: '445 KB', type: 'spreadsheet' },
            { id: 'f2', name: 'Feb_Tax_Withholdings.pdf', size: '289 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-114',
          title: 'Onboard Marketing Coordinator — Sarah Lin',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [tagPresets.onboarding],
          subtaskIds: ['HR-124', 'HR-125', 'HR-126'],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Welcome packet sent. Sarah starts Monday!',
              time: '3w ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Workstation set up in the marketing pod. Desk 4B.',
              time: '2w ago',
            },
            {
              id: 'c3',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits enrollment complete. She chose Plan B.',
              time: '2w ago',
            },
            {
              id: 'c4',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Marketing tools training done — HubSpot, Figma, Analytics.',
              time: '1w ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Manager check-in went great. Sarah is settling in well.',
              time: '1w ago',
            },
            {
              id: 'c6',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Payroll set up — first paycheck confirmed.',
              time: '5d ago',
            },
            {
              id: 'c7',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: '30-day check-in done. Very positive feedback all around.',
              time: '2d ago',
            },
            {
              id: 'c8',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'All tasks complete — closing this onboarding ticket. \u{1F389}',
              time: '1d ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Offer_Letter_Sarah_Lin.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f2', name: 'Welcome_Packet.pdf', size: '2.3 MB', type: 'pdf' },
            { id: 'f3', name: 'I9_Form_Signed.pdf', size: '89 KB', type: 'pdf' },
            { id: 'f4', name: 'Benefits_Selection.pdf', size: '112 KB', type: 'pdf' },
            { id: 'f5', name: 'Marketing_Tools_Access.xlsx', size: '45 KB', type: 'spreadsheet' },
            { id: 'f6', name: '30Day_Feedback_Survey.pdf', size: '78 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-115',
          title: 'Review current remote work policy document',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-118',
          title: 'Issue laptops and peripherals',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-119',
          title: 'Set up email and Slack accounts',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-121',
          title: 'Senior Backend Engineer JD',
          priority: 'medium',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-122',
          title: 'Product Manager JD',
          priority: 'medium',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-124',
          title: 'Send offer letter and welcome packet',
          priority: 'low',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-125',
          title: 'Set up workstation and equipment',
          priority: 'low',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-126',
          title: 'Benefits enrollment',
          priority: 'low',
          assignee: assignees.carol,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
  ]
}

```

## kbd

- type: `registry:ui`
- description: Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.

### `packages/registry-vue/components/kbd/Kbd.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <kbd
    data-uipkge
    data-slot="kbd"
    :class="
      cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium select-none',
        props.class,
      )
    "
  >
    <slot />
  </kbd>
</template>
```

### `packages/registry-vue/components/kbd/index.ts`

```ts
export { default as Kbd } from './Kbd.vue'
```

## knob

- type: `registry:ui`
- description: Circular dial input. Drag to rotate, keyboard accessible, SVG-rendered. Useful for compact numeric controls (volume, brightness, gauges).

### `packages/registry-vue/components/knob/Knob.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    modelValue?: number
    min?: number
    max?: number
    step?: number
    size?: number
    strokeWidth?: number
    valueColor?: string
    rangeColor?: string
    disabled?: boolean
    readonly?: boolean
    showValue?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    modelValue: 0,
    min: 0,
    max: 100,
    step: 1,
    size: 100,
    strokeWidth: 14,
    valueColor: 'var(--primary)',
    rangeColor: 'var(--muted)',
    disabled: false,
    readonly: false,
    showValue: true,
  },
)

const emits = defineEmits<{
  (e: 'update:modelValue', value: number): void
  (e: 'change', value: number): void
}>()

const svg = ref<SVGSVGElement | null>(null)
const isDragging = ref(false)

const value = computed(() => clamp(props.modelValue, props.min, props.max))
const percent = computed(() => {
  if (props.max === props.min) return 0
  return (value.value - props.min) / (props.max - props.min)
})

const startAngle = -Math.PI * 0.75
const endAngle = Math.PI * 0.75
const sweep = endAngle - startAngle

const rangePath = computed(() => arcPath(50, 50, 40, startAngle, endAngle))
const valuePath = computed(() => arcPath(50, 50, 40, startAngle, startAngle + sweep * percent.value))

function arcPath(cx: number, cy: number, r: number, a1: number, a2: number) {
  const x1 = cx + r * Math.cos(a1)
  const y1 = cy + r * Math.sin(a1)
  const x2 = cx + r * Math.cos(a2)
  const y2 = cy + r * Math.sin(a2)
  const large = a2 - a1 > Math.PI ? 1 : 0
  return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`
}

function clamp(v: number, lo: number, hi: number) {
  return Math.min(hi, Math.max(lo, v))
}

function snap(v: number) {
  const stepped = Math.round((v - props.min) / props.step) * props.step + props.min
  return clamp(stepped, props.min, props.max)
}

function setValue(v: number) {
  if (props.disabled || props.readonly) return
  const next = snap(v)
  if (next === props.modelValue) return
  emits('update:modelValue', next)
  emits('change', next)
}

function angleFromEvent(e: PointerEvent): number {
  const rect = svg.value!.getBoundingClientRect()
  const cx = rect.left + rect.width / 2
  const cy = rect.top + rect.height / 2
  return Math.atan2(e.clientY - cy, e.clientX - cx)
}

function angleToValue(angle: number): number {
  let a = angle - startAngle
  if (a < 0) a += Math.PI * 2
  if (a > sweep) {
    return a < (Math.PI * 2 + sweep) / 2 ? props.max : props.min
  }
  return props.min + (a / sweep) * (props.max - props.min)
}

function onPointerDown(e: PointerEvent) {
  if (props.disabled || props.readonly) return
  ;(e.target as Element).setPointerCapture(e.pointerId)
  isDragging.value = true
  setValue(angleToValue(angleFromEvent(e)))
}

function onPointerMove(e: PointerEvent) {
  if (!isDragging.value) return
  setValue(angleToValue(angleFromEvent(e)))
}

function onPointerUp(e: PointerEvent) {
  if (!isDragging.value) return
  isDragging.value = false
  ;(e.target as Element).releasePointerCapture(e.pointerId)
}

function onKeyDown(e: KeyboardEvent) {
  if (props.disabled || props.readonly) return
  const big = props.step * 10
  switch (e.key) {
    case 'ArrowUp':
    case 'ArrowRight':
      e.preventDefault()
      setValue(value.value + props.step)
      break
    case 'ArrowDown':
    case 'ArrowLeft':
      e.preventDefault()
      setValue(value.value - props.step)
      break
    case 'PageUp':
      e.preventDefault()
      setValue(value.value + big)
      break
    case 'PageDown':
      e.preventDefault()
      setValue(value.value - big)
      break
    case 'Home':
      e.preventDefault()
      setValue(props.min)
      break
    case 'End':
      e.preventDefault()
      setValue(props.max)
      break
  }
}

function onWheel(e: WheelEvent) {
  if (props.disabled || props.readonly) return
  e.preventDefault()
  setValue(value.value + (e.deltaY < 0 ? props.step : -props.step))
}
</script>

<template>
  <svg
    ref="svg"
    data-uipkge
    data-slot="knob"
    :class="
      cn(
        'focus-visible:ring-ring inline-block touch-none rounded-full outline-none select-none focus-visible:ring-2',
        disabled && 'cursor-not-allowed opacity-50',
        !disabled && !readonly && 'cursor-pointer',
        props.class,
      )
    "
    :width="size"
    :height="size"
    viewBox="0 0 100 100"
    role="slider"
    :aria-valuemin="min"
    :aria-valuemax="max"
    :aria-valuenow="value"
    :aria-disabled="disabled || undefined"
    :aria-readonly="readonly || undefined"
    :tabindex="disabled ? -1 : 0"
    @pointerdown="onPointerDown"
    @pointermove="onPointerMove"
    @pointerup="onPointerUp"
    @pointercancel="onPointerUp"
    @keydown="onKeyDown"
    @wheel="onWheel"
  >
    <path :d="rangePath" :stroke="rangeColor" :stroke-width="strokeWidth" fill="none" stroke-linecap="round" />
    <path :d="valuePath" :stroke="valueColor" :stroke-width="strokeWidth" fill="none" stroke-linecap="round" />
    <text v-if="showValue" x="50" y="55" text-anchor="middle" class="fill-foreground text-[18px] font-medium">
      <slot name="value" :value="value">{{ value }}</slot>
    </text>
  </svg>
</template>

```

### `packages/registry-vue/components/knob/index.ts`

```ts
export { default as Knob } from './Knob.vue'

```

## kpi-grid

- type: `registry:ui`
- description: Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.

### `packages/registry-vue/components/kpi-grid/KpiGrid.vue`

```vue
<script setup lang="ts">
withDefaults(defineProps<{ columns?: 2 | 3 | 4 }>(), { columns: 4 })
</script>

<template>
  <div
    :class="[
      'grid gap-4 md:grid-cols-2',
      columns === 3 ? 'lg:grid-cols-3' : columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',
    ]"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/kpi-grid/index.ts`

```ts
export { default as KpiGrid } from './KpiGrid.vue'

```

## label

- type: `registry:ui`
- description: Accessible label primitive — wraps text and binds to its child input via `for`. Disabled-state styling, optional required-asterisk, and proper screen-reader behavior.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/label/Label.vue`

```vue
<script setup lang="ts">
import type { LabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Label } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Label
    data-uipkge
    data-slot="label"
    v-bind="delegatedProps"
    :class="
      cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        props.class,
      )
    "
  >
    <slot />
  </Label>
</template>

```

### `packages/registry-vue/components/label/index.ts`

```ts
export { default as Label } from './Label.vue'

```

## labeled-value

- type: `registry:ui`
- description: Read-only label/value pair for surface details — "Email: jane@…" or "Status: Active". Compose them in a Data List, a Stat Card, or a Section Card detail row.

### `packages/registry-vue/components/labeled-value/LabeledValue.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

const props = defineProps<{
  label: string
  value?: string
  class?: string
}>()
</script>

<template>
  <div :class="cn('flex items-center justify-between text-sm', props.class)">
    <span class="text-muted-foreground">{{ label }}</span>
    <slot>
      <span class="font-medium">{{ value }}</span>
    </slot>
  </div>
</template>

```

### `packages/registry-vue/components/labeled-value/index.ts`

```ts
export { default as LabeledValue } from './LabeledValue.vue'

```

## lazy-image

- type: `registry:ui`
- description: Lazy-loaded image with aspect-ratio reservation, skeleton placeholder, fade-in transition, and error fallback. Composes loading="lazy" with IntersectionObserver for off-viewport hold and pairs with the skeleton primitive for the placeholder state.
- registry deps: `skeleton`

### `packages/registry-vue/components/lazy-image/Img.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'

type Placeholder = 'skeleton' | 'none'

const props = withDefaults(
  defineProps<{
    src: string
    srcset?: string
    sizes?: string
    alt: string
    aspectRatio?: string | number
    width?: string | number
    height?: string | number
    placeholder?: Placeholder
    cover?: boolean
    eager?: boolean
    fallback?: string
    transition?: boolean
    class?: HTMLAttributes['class']
    imgClass?: HTMLAttributes['class']
  }>(),
  {
    placeholder: 'skeleton',
    cover: true,
    eager: false,
    transition: true,
  },
)

const emits = defineEmits<{
  (e: 'load', event: Event): void
  (e: 'error', event: Event): void
}>()

const root = ref<HTMLElement | null>(null)
const state = ref<'idle' | 'loading' | 'loaded' | 'error'>('idle')
const visible = ref(props.eager)

const aspectStyle = computed((): Record<string, string> => {
  const r = props.aspectRatio
  if (r === undefined) return {}
  if (typeof r === 'number') return { aspectRatio: String(r) }
  return { aspectRatio: r }
})

const sizeStyle = computed((): Record<string, string> => {
  const out: Record<string, string> = {}
  if (props.width !== undefined) out.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  if (props.height !== undefined) out.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  return out
})

const containerStyle = computed(() => ({ ...aspectStyle.value, ...sizeStyle.value }))

let observer: IntersectionObserver | null = null

function setupObserver() {
  if (props.eager || typeof IntersectionObserver === 'undefined' || !root.value) {
    visible.value = true
    return
  }
  observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (entry.isIntersecting) {
          visible.value = true
          observer?.disconnect()
          observer = null
          return
        }
      }
    },
    { rootMargin: '200px' },
  )
  observer.observe(root.value)
}

onMounted(() => {
  setupObserver()
})

onBeforeUnmount(() => {
  observer?.disconnect()
  observer = null
})

watch(
  () => props.src,
  () => {
    state.value = 'idle'
    if (!props.eager) {
      visible.value = false
      setupObserver()
    }
  },
)

watch(visible, (v) => {
  if (v && state.value === 'idle') state.value = 'loading'
})

function onLoad(e: Event) {
  state.value = 'loaded'
  emits('load', e)
}

function onError(e: Event) {
  state.value = 'error'
  emits('error', e)
}
</script>

<template>
  <div
    ref="root"
    data-uipkge
    data-slot="lazy-image"
    :class="cn('bg-muted relative overflow-hidden', props.class)"
    :style="containerStyle"
  >
    <Skeleton
      v-if="placeholder === 'skeleton' && state !== 'loaded' && state !== 'error'"
      class="absolute inset-0 size-full rounded-none"
    />

    <img
      v-if="visible && state !== 'error'"
      :src="src"
      :srcset="srcset"
      :sizes="sizes"
      :alt="alt"
      :loading="eager ? 'eager' : 'lazy'"
      :decoding="eager ? 'sync' : 'async'"
      :class="
        cn(
          'block size-full',
          cover ? 'object-cover' : 'object-contain',
          transition && 'transition-opacity duration-300',
          state === 'loaded' ? 'opacity-100' : 'opacity-0',
          imgClass,
        )
      "
      @load="onLoad"
      @error="onError"
    />

    <template v-if="state === 'error'">
      <slot name="fallback">
        <img
          v-if="fallback"
          :src="fallback"
          :alt="alt"
          :class="cn('block size-full', cover ? 'object-cover' : 'object-contain', imgClass)"
        />
        <div
          v-else
          class="text-muted-foreground absolute inset-0 flex items-center justify-center text-xs"
          aria-label="Image failed to load"
        >
          <span>Image unavailable</span>
        </div>
      </slot>
    </template>
  </div>
</template>

```

### `packages/registry-vue/components/lazy-image/index.ts`

```ts
export { default as Img } from './Img.vue'

```

## line-chart

- type: `registry:ui`
- description: Line chart wrapper around Apache ECharts. Smooth/stepped/dashed lines, multi-series, point markers. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/line-chart/LineChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart as EChartsLineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsLineChart, GridComponent, TooltipComponent, LegendComponent])

interface Props {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  xField: 'x',
  yField: 'y',
  height: 300,
})

const mergedOption = computed(() => {
  const fields = Array.isArray(props.yField) ? props.yField : [props.yField]
  const xData = props.data.map((d) => d[props.xField!])

  const series = fields.map((field, i) => ({
    name: field,
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 6,
    lineStyle: { width: 2 },
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: props.data.map((d) => d[field]),
  }))

  // Per-index series merge + 2-level deep merge for axis blocks.
  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    legend: userLegend,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  const baseLegend =
    fields.length > 1
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : undefined

  return {
    color: chartColors.value,
    grid: mergeOptionBlock(
      { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
      userGrid,
    ),
    tooltip: mergeOptionBlock(
      {
        trigger: 'axis',
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend ?? {}, userLegend),
    xAxis: mergeOptionBlock(
      {
        type: 'category',
        data: xData,
        axisLine: { lineStyle: { color: chartAxisColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisTick: { show: false },
      },
      userXAxis,
    ),
    yAxis: mergeOptionBlock(
      {
        type: 'value',
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      userYAxis,
    ),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/line-chart/index.ts`

```ts
export { default as LineChart } from './LineChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## link

- type: `registry:ui`
- description: Styled anchor with router integration. Renders an <a> for href, a router-link for to, and handles external links with target/rel. Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon slots, size variants, and asChild composition.
- npm deps: `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/link/Link.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { linkVariants } from './link.variants'

type Underline = 'none' | 'always' | 'hover'
type Color = 'default' | 'primary' | 'muted'
type Size = 'sm' | 'default' | 'lg'

interface Props {
  /** External URL — renders an <a> with target/rel handling. */
  href?: string
  /** Router destination — renders a router-link when vue-router is present. */
  to?: string | object
  as?: string
  asChild?: boolean
  underline?: Underline
  color?: Color
  size?: Size
  disabled?: boolean
  /** Open external href in a new tab. Defaults to true for http(s) hrefs. */
  external?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  as: 'a',
  underline: 'hover',
  color: 'primary',
  size: 'default',
  external: undefined,
})

const isExternal = computed(() => {
  if (props.external !== undefined) return props.external
  return typeof props.href === 'string' && /^https?:\/\//.test(props.href)
})

const resolvedTag = computed(() => {
  if (props.asChild) return Primitive
  if (props.to) return 'router-link'
  return props.as
})

const resolvedHref = computed(() => props.to ?? props.href)

const externalAttrs = computed(() => (isExternal.value ? { target: '_blank', rel: 'noopener noreferrer' } : {}))
</script>

<template>
  <component
    :is="resolvedTag"
    data-uipkge
    data-slot="link"
    :data-underline="underline"
    :data-color="color"
    :data-size="size"
    :data-disabled="disabled ? '' : undefined"
    :as="asChild ? as : undefined"
    :as-child="asChild"
    :to="to"
    :href="resolvedHref"
    :aria-disabled="disabled ? 'true' : undefined"
    :tabindex="disabled ? -1 : undefined"
    v-bind="externalAttrs"
    :class="cn(linkVariants({ underline, color, size }), disabled && 'pointer-events-none opacity-50', props.class)"
  >
    <slot name="left" />
    <slot />
    <slot name="right" />
  </component>
</template>

```

### `packages/registry-vue/components/link/link.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const linkVariants = cva(
  "inline-flex items-center gap-1.5 font-medium transition-colors duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      underline: {
        none: 'no-underline',
        always: 'underline underline-offset-4',
        hover: 'no-underline hover:underline hover:underline-offset-4',
      },
      color: {
        default: 'text-foreground hover:text-foreground/80',
        primary: 'text-primary hover:text-primary/80',
        muted: 'text-muted-foreground hover:text-foreground',
      },
      size: {
        sm: 'text-xs gap-1',
        default: 'text-sm',
        lg: 'text-base',
      },
    },
    defaultVariants: {
      underline: 'hover',
      color: 'primary',
      size: 'default',
    },
  },
)

export type LinkVariants = VariantProps<typeof linkVariants>

```

### `packages/registry-vue/components/link/index.ts`

```ts
export { default as Link } from './Link.vue'

export { linkVariants, type LinkVariants } from './link.variants'

```

## list

- type: `registry:ui`
- description: Plain content list with `<ul>` / `<li>` semantics and a few preset gap and divider modes. Use for menu items, navigation lists, or any vertical sequence of small rows.

### `packages/registry-vue/components/list/List.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  as?: 'ul' | 'ol' | 'div'
}>()
</script>

<template>
  <component :is="props.as ?? 'ul'" :class="cn('list-none space-y-1', props.class)" v-bind="$attrs">
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/list/ListItem.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  as?: 'li' | 'div' | 'a'
  active?: boolean
  disabled?: boolean
}>()
</script>

<template>
  <component
    :is="props.as ?? 'li'"
    :aria-disabled="disabled"
    :class="
      cn(
        'hover:bg-accent focus-visible:bg-accent cursor-pointer rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none',
        active && 'bg-accent text-accent-foreground',
        disabled && 'pointer-events-none opacity-50',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/list/ListSubheader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
  inset?: boolean
}>()
</script>

<template>
  <li
    :class="
      cn(
        'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase',
        inset && 'pl-8',
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot />
  </li>
</template>

```

### `packages/registry-vue/components/list/index.ts`

```ts
export { default as List } from './List.vue'
export { default as ListItem } from './ListItem.vue'
export { default as ListSubheader } from './ListSubheader.vue'

```

## loading-bar

- type: `registry:ui`
- description: Top-of-viewport NProgress-style progress bar. Drive it imperatively via the useLoadingBar composable (start/finish/error/inc) or with v-model. Supports indeterminate mode, custom color and height, top/bottom anchoring, and an optional trailing spinner.

### `packages/registry-vue/components/loading-bar/LoadingBar.vue`

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    /** 0–100 progress value. Use with v-model or drive via the composable. */
    modelValue?: number
    /** Bar color. Accepts any CSS color value. */
    color?: string
    /** Bar height in px. */
    height?: number
    /** Indeterminate sliding animation (ignores modelValue). */
    indeterminate?: boolean
    /** Anchor the bar to the top or bottom of the viewport. */
    position?: 'top' | 'bottom'
    /** Show a spinner at the trailing edge of the bar. */
    spinner?: boolean
    /** Error state tints the bar. */
    error?: boolean
    /** Hide the bar entirely (e.g. when finished). */
    hidden?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    modelValue: 0,
    color: '',
    height: 3,
    indeterminate: false,
    position: 'top',
    spinner: false,
    error: false,
    hidden: false,
  },
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: number): void
  (e: 'finish'): void
}>()

const internal = ref(props.modelValue)
let raf: number | null = null

watch(
  () => props.modelValue,
  (v) => {
    internal.value = v
  },
)

const pct = computed(() => Math.min(100, Math.max(0, internal.value)))
const barColor = computed(() => props.color || (props.error ? 'var(--destructive)' : 'var(--primary)'))
const visible = computed(() => !props.hidden && (props.indeterminate || internal.value > 0))

function set(v: number) {
  internal.value = v
  emit('update:modelValue', v)
  if (v >= 100) emit('finish')
}

// Imperative API exposed for the composable / parent to drive the bar.
function start(from = 20) {
  set(from)
  tick(from)
}

function tick(target: number) {
  if (raf) cancelAnimationFrame(raf)
  const step = () => {
    if (internal.value >= 100 || internal.value >= target) return
    const next = Math.min(target, internal.value + (100 - internal.value) * 0.02 + 0.5)
    set(next)
    if (next < target) raf = requestAnimationFrame(step)
  }
  raf = requestAnimationFrame(step)
}

function inc(amount = 10) {
  set(Math.min(99, internal.value + amount))
}

function finish() {
  if (raf) cancelAnimationFrame(raf)
  set(100)
}

function fail() {
  if (raf) cancelAnimationFrame(raf)
  internal.value = 100
  // error prop drives the color; emit finish so callers can hide.
  emit('update:modelValue', 100)
  emit('finish')
}

onBeforeUnmount(() => {
  if (raf) cancelAnimationFrame(raf)
})

defineExpose({ start, finish, fail, error: fail, inc, set })
</script>

<template>
  <div
    data-uipkge
    data-slot="loading-bar"
    :data-position="position"
    :data-state="error ? 'error' : indeterminate ? 'indeterminate' : 'determinate'"
    :class="
      cn(
        'pointer-events-none fixed left-0 z-[9999] w-full transition-opacity duration-300',
        position === 'top' ? 'top-0' : 'bottom-0',
        visible ? 'opacity-100' : 'opacity-0',
        props.class,
      )
    "
    :style="{ height: `${height}px` }"
    role="progressbar"
    :aria-valuemin="0"
    :aria-valuemax="100"
    :aria-valuenow="indeterminate ? undefined : pct"
    :aria-hidden="!visible"
  >
    <!-- Track -->
    <div class="absolute inset-0 bg-transparent" />

    <!-- Determinate bar -->
    <div
      v-if="!indeterminate"
      data-slot="loading-bar-fill"
      class="absolute inset-y-0 left-0 transition-[width] duration-200 ease-out"
      :style="{ width: `${pct}%`, backgroundColor: barColor }"
    >
      <div
        v-if="spinner"
        data-slot="loading-bar-spinner"
        class="absolute top-1/2 right-0 size-3 translate-x-1/2 -translate-y-1/2 animate-spin rounded-full border-2 border-current border-t-transparent"
        :style="{ color: barColor }"
      />
    </div>

    <!-- Indeterminate sliding bar -->
    <div
      v-else
      data-slot="loading-bar-indeterminate"
      class="loading-bar-indeterminate absolute inset-y-0 w-1/3"
      :style="{ backgroundColor: barColor }"
    >
      <div
        v-if="spinner"
        data-slot="loading-bar-spinner"
        class="absolute top-1/2 right-0 size-3 translate-x-1/2 -translate-y-1/2 animate-spin rounded-full border-2 border-current border-t-transparent"
        :style="{ color: barColor }"
      />
    </div>
  </div>
</template>

<style scoped>
@media (prefers-reduced-motion: no-preference) {
  .loading-bar-indeterminate {
    animation: loading-bar-slide 1.2s ease-in-out infinite;
  }
}

@keyframes loading-bar-slide {
  0% {
    left: -33%;
  }
  100% {
    left: 100%;
  }
}
</style>

```

### `packages/registry-vue/components/loading-bar/useLoadingBar.ts`

```ts
import { ref, shallowRef } from 'vue'
import type { ComponentPublicInstance } from 'vue'

export interface LoadingBarHandle {
  start: (from?: number) => void
  finish: () => void
  error: () => void
  inc: (amount?: number) => void
  set: (value: number) => void
}

/**
 * Composable that drives a <LoadingBar> instance via a template ref.
 *
 * Usage:
 *   const bar = useLoadingBar()
 *   <LoadingBar :ref="bar.setRef" />
 *   bar.start()
 *   await fetch(...)
 *   bar.finish()
 */
export function useLoadingBar() {
  const refEl = shallowRef<ComponentPublicInstance | null>(null)
  const loading = ref(false)
  const isError = ref(false)

  function setRef(el: Element | ComponentPublicInstance | null) {
    refEl.value = el as ComponentPublicInstance | null
  }

  function getHandle(): LoadingBarHandle | null {
    return (refEl.value as unknown as LoadingBarHandle) ?? null
  }

  function start(from = 20) {
    isError.value = false
    loading.value = true
    const h = getHandle()
    if (h && typeof h.start === 'function') h.start(from)
  }

  function finish() {
    loading.value = false
    const h = getHandle()
    if (h && typeof h.finish === 'function') h.finish()
  }

  function error() {
    isError.value = true
    loading.value = false
    const h = getHandle()
    if (h && typeof h.error === 'function') h.error()
  }

  function inc(amount = 10) {
    const h = getHandle()
    if (h && typeof h.inc === 'function') h.inc(amount)
  }

  function set(value: number) {
    const h = getHandle()
    if (h && typeof h.set === 'function') h.set(value)
  }

  return {
    setRef,
    loading,
    isError,
    start,
    finish,
    error,
    inc,
    set,
  }
}

```

### `packages/registry-vue/components/loading-bar/index.ts`

```ts
export { default as LoadingBar } from './LoadingBar.vue'
export { useLoadingBar, type LoadingBarHandle } from './useLoadingBar'

```

## login-01

- type: `registry:block`
- description: Centered login card. Email + password fields with a "Forgot password?" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `card`, `input`, `label`, `separator`

### `packages/registry-vue/blocks/login-01/Login01.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Github } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

const email = ref('')
const password = ref('')

const emit = defineEmits<{
  (e: 'submit', payload: { email: string; password: string }): void
  (e: 'forgot-password'): void
  (e: 'sign-up'): void
  (e: 'oauth', provider: 'github' | 'google'): void
}>()

function onSubmit() {
  emit('submit', { email: email.value, password: password.value })
}

// ----- Optional: zod validation -----
// HTML5 `type="email"` + `required` already block obviously bad input,
// but for typed parsing + custom rules drop in zod. Add `zod` to your
// project, uncomment, and route `onSubmit` through `loginSchema.parse`.
//
// import { z } from 'zod'
// const loginSchema = z.object({
//   email: z.string().email('Enter a valid email'),
//   password: z.string().min(1, 'Password is required'),
// })
// function onSubmit() {
//   const parsed = loginSchema.safeParse({
//     email: email.value, password: password.value,
//   })
//   if (!parsed.success) {
//     // surface parsed.error.flatten().fieldErrors however you want
//     return
//   }
//   emit('submit', parsed.data)
// }
</script>

<template>
  <div class="bg-muted/30 flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <CardHeader class="text-center">
        <CardTitle class="text-2xl">Welcome back</CardTitle>
        <CardDescription>Sign in to your account to continue.</CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="space-y-2">
            <Label for="email">Email</Label>
            <Input
              id="email"
              v-model="email"
              type="email"
              placeholder="you@example.com"
              autocomplete="email"
              required
            />
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <Label for="password">Password</Label>
              <button
                type="button"
                class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                @click="emit('forgot-password')"
              >
                Forgot password?
              </button>
            </div>
            <Input id="password" v-model="password" type="password" autocomplete="current-password" required />
          </div>
          <Button type="submit" class="w-full">Sign in</Button>
        </form>

        <div class="relative">
          <Separator />
          <span
            class="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase"
          >
            Or continue with
          </span>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <Button type="button" variant="outline" @click="emit('oauth', 'google')">
            <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
              <path
                fill="#4285F4"
                d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
              />
              <path
                fill="#34A853"
                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
              />
              <path
                fill="#FBBC05"
                d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
              />
              <path
                fill="#EA4335"
                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
              />
            </svg>
            Google
          </Button>
          <Button type="button" variant="outline" @click="emit('oauth', 'github')">
            <Github class="size-4" />
            GitHub
          </Button>
        </div>
      </CardContent>
      <CardFooter class="justify-center">
        <p class="text-muted-foreground text-xs">
          Don't have an account?
          <button type="button" class="text-foreground ml-1 font-medium hover:underline" @click="emit('sign-up')">
            Sign up
          </button>
        </p>
      </CardFooter>
    </Card>
  </div>
</template>

```

## login-02

- type: `registry:block`
- description: Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `input`, `label`, `separator`

### `packages/registry-vue/blocks/login-02/Login02.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Github, ShieldCheck, Sparkles, Zap } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

const email = ref('')
const password = ref('')

const emit = defineEmits<{
  (e: 'submit', payload: { email: string; password: string }): void
  (e: 'forgot-password'): void
  (e: 'sign-up'): void
  (e: 'oauth', provider: 'github' | 'google'): void
}>()

function onSubmit() {
  emit('submit', { email: email.value, password: password.value })
}

// ----- Optional: zod validation -----
// HTML5 `type="email"` + `required` already block obviously bad input,
// but for typed parsing + custom rules drop in zod. Add `zod` to your
// project, uncomment, and route `onSubmit` through `loginSchema.parse`.
//
// import { z } from 'zod'
// const loginSchema = z.object({
//   email: z.string().email('Enter a valid email'),
//   password: z.string().min(1, 'Password is required'),
// })
// function onSubmit() {
//   const parsed = loginSchema.safeParse({
//     email: email.value, password: password.value,
//   })
//   if (!parsed.success) {
//     // surface parsed.error.flatten().fieldErrors however you want
//     return
//   }
//   emit('submit', parsed.data)
// }
</script>

<template>
  <div class="grid min-h-svh lg:grid-cols-2">
    <!-- Brand / marketing panel -->
    <aside
      class="border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex"
      style="background: color-mix(in oklch, var(--primary) 6%, var(--card))"
    >
      <div class="text-foreground relative z-[1] flex items-center gap-2.5">
        <div
          class="text-background font-display grid size-8 place-items-center rounded-md font-bold"
          style="background: var(--primary)"
        >
          U
        </div>
        <span class="font-display text-base font-semibold">Your Product</span>
      </div>

      <div class="relative z-[1] max-w-md">
        <p class="text-muted-foreground/80 mb-3 text-[11px] font-medium tracking-[0.14em] uppercase">
          Why teams switch
        </p>
        <h2 class="font-display text-3xl leading-tight font-semibold tracking-tight text-balance">
          Ship features in
          <em class="font-display font-semibold not-italic" style="color: var(--primary)">hours</em>, not sprints.
        </h2>
        <p class="text-muted-foreground mt-4 text-sm leading-relaxed">
          Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead of
          reinventing the same UI.
        </p>

        <ul class="mt-8 space-y-3 text-sm">
          <li class="flex items-start gap-3">
            <Zap class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
            <span class="text-foreground">One-command install, full source ownership</span>
          </li>
          <li class="flex items-start gap-3">
            <ShieldCheck class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
            <span class="text-foreground">SOC 2 compliant, SSO out of the box</span>
          </li>
          <li class="flex items-start gap-3">
            <Sparkles class="mt-0.5 size-4 shrink-0" style="color: var(--primary)" />
            <span class="text-foreground">Themeable tokens, dark mode, RTL ready</span>
          </li>
        </ul>
      </div>

      <p class="text-muted-foreground/70 relative z-[1] text-xs">© {{ new Date().getFullYear() }} Your Product, Inc.</p>
    </aside>

    <!-- Form panel -->
    <div class="flex items-center justify-center p-6 sm:p-12">
      <div class="w-full max-w-sm space-y-6">
        <div class="space-y-1.5 text-center lg:text-left">
          <h1 class="font-display text-3xl font-semibold tracking-tight">Welcome back</h1>
          <p class="text-muted-foreground text-sm">Sign in to continue to your workspace.</p>
        </div>

        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="space-y-2">
            <Label for="email">Email</Label>
            <Input
              id="email"
              v-model="email"
              type="email"
              placeholder="you@example.com"
              autocomplete="email"
              required
            />
          </div>
          <div class="space-y-2">
            <div class="flex items-center justify-between">
              <Label for="password">Password</Label>
              <button
                type="button"
                class="text-muted-foreground hover:text-foreground text-xs transition-colors"
                @click="emit('forgot-password')"
              >
                Forgot?
              </button>
            </div>
            <Input id="password" v-model="password" type="password" autocomplete="current-password" required />
          </div>
          <Button type="submit" class="w-full">Sign in</Button>
        </form>

        <div class="relative">
          <Separator />
          <span
            class="bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase"
          >
            Or
          </span>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <Button type="button" variant="outline" @click="emit('oauth', 'google')">
            <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
              <path
                fill="#4285F4"
                d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
              />
              <path
                fill="#34A853"
                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
              />
              <path
                fill="#FBBC05"
                d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
              />
              <path
                fill="#EA4335"
                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
              />
            </svg>
            Google
          </Button>
          <Button type="button" variant="outline" @click="emit('oauth', 'github')">
            <Github class="size-4" />
            GitHub
          </Button>
        </div>

        <p class="text-muted-foreground text-center text-xs">
          Don't have an account?
          <button type="button" class="text-foreground ml-1 font-medium hover:underline" @click="emit('sign-up')">
            Sign up
          </button>
        </p>
      </div>
    </div>
  </div>
</template>

```

## logos-01

- type: `registry:block`
- description: Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.

### `packages/registry-vue/blocks/logos-01/Logos01.vue`

```vue
<script setup lang="ts">
// Sample logo set sourced from simpleicons.org (MIT). Swap these paths and
// labels for your own customer logos before shipping.
const LOGOS = [
  {
    label: 'Vercel',
    d: 'm12 1.608 12 20.784H0Z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]
</script>

<template>
  <section class="bg-muted/30 border-y">
    <div class="mx-auto max-w-6xl px-6 py-14">
      <p class="text-muted-foreground text-center text-xs font-medium tracking-widest uppercase">Trusted by teams at</p>
      <div
        class="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-6"
      >
        <div
          v-for="logo in LOGOS"
          :key="logo.label"
          class="text-foreground/55 hover:text-foreground inline-flex items-center gap-2 transition-colors"
        >
          <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
            <title>{{ logo.label }}</title>
            <path :d="logo.d" />
          </svg>
          <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
        </div>
      </div>
    </div>
  </section>
</template>

```

## logos-02

- type: `registry:block`
- description: Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.

### `packages/registry-vue/blocks/logos-02/Logos02.vue`

```vue
<script setup lang="ts">
// Single-row infinite marquee. The track is rendered twice back-to-back
// and translated -50% over the duration so the seam between the two
// copies is invisible.
const LOGOS = [
  { label: 'Vercel', d: 'm12 1.608 12 20.784H0Z' },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]
</script>

<template>
  <section class="bg-muted/30 border-y">
    <div class="mx-auto max-w-6xl px-6 py-14">
      <p class="text-muted-foreground mb-10 text-center text-xs font-medium tracking-widest uppercase">
        Trusted by teams at
      </p>

      <!-- Marquee viewport: edges fade out via mask-image so logos appear/disappear softly -->
      <div
        class="group relative overflow-hidden"
        style="
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        "
      >
        <!-- Track: brands rendered twice so the -50% slide loops seamlessly -->
        <div class="logos02-track flex w-max gap-12 will-change-transform">
          <div
            v-for="logo in [...LOGOS, ...LOGOS]"
            :key="logo.label + Math.random()"
            class="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
          >
            <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
              <title>{{ logo.label }}</title>
              <path :d="logo.d" />
            </svg>
            <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style>
@keyframes logos-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.logos02-track {
  animation: logos-marquee 30s linear infinite;
}
.group:hover .logos02-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logos02-track {
    animation: none !important;
  }
}
</style>

```

## logos-03

- type: `registry:block`
- description: Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.

### `packages/registry-vue/blocks/logos-03/Logos03.vue`

```vue
<script setup lang="ts">
// Three rows of customer logos sliding in alternating directions. Each
// row's track is rendered twice and translated by 50% so the loop has no
// visible seam; speeds are slightly offset between rows so the eye
// doesn't lock onto a single rhythm.

const ROW_1 = [
  { label: 'Vercel', d: 'm12 1.608 12 20.784H0Z' },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

const ROW_2 = [
  {
    label: 'React',
    d: 'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z',
  },
  {
    label: 'Next.js',
    d: 'M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z',
  },
  {
    label: 'Vue.js',
    d: 'M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z',
  },
  {
    label: 'Tailwind',
    d: 'M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z',
  },
  {
    label: 'Supabase',
    d: 'M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z',
  },
  {
    label: 'GitHub',
    d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
  },
]

const ROW_3 = [
  {
    label: 'Anthropic',
    d: 'M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z',
  },
  {
    label: 'Sentry',
    d: 'M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z',
  },
  {
    label: 'PlanetScale',
    d: 'M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z',
  },
  {
    label: 'Render',
    d: 'M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507-1.388 0-2.691-.356-3.825-.979a.2024.2024 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75',
  },
  {
    label: 'Railway',
    d: 'M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
]
</script>

<template>
  <section class="bg-muted/30 border-y">
    <div class="mx-auto max-w-6xl px-6 py-14">
      <p class="text-muted-foreground mb-10 text-center text-xs font-medium tracking-widest uppercase">
        Powering teams everywhere
      </p>

      <div
        class="group relative space-y-5 overflow-hidden"
        style="
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        "
      >
        <!-- Row 1: scrolls left, 32s -->
        <div class="logos03-track logos03-left-32 flex w-max gap-12 will-change-transform">
          <div
            v-for="(logo, i) in [...ROW_1, ...ROW_1]"
            :key="`r1-${i}`"
            class="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
          >
            <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
              <title>{{ logo.label }}</title>
              <path :d="logo.d" />
            </svg>
            <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
          </div>
        </div>

        <!-- Row 2: scrolls right, 26s -->
        <div class="logos03-track logos03-right-26 flex w-max gap-12 will-change-transform">
          <div
            v-for="(logo, i) in [...ROW_2, ...ROW_2]"
            :key="`r2-${i}`"
            class="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
          >
            <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
              <title>{{ logo.label }}</title>
              <path :d="logo.d" />
            </svg>
            <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
          </div>
        </div>

        <!-- Row 3: scrolls left, 38s (slowest) -->
        <div class="logos03-track logos03-left-38 flex w-max gap-12 will-change-transform">
          <div
            v-for="(logo, i) in [...ROW_3, ...ROW_3]"
            :key="`r3-${i}`"
            class="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
          >
            <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
              <title>{{ logo.label }}</title>
              <path :d="logo.d" />
            </svg>
            <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style>
@keyframes logos-marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes logos-marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.logos03-left-32 {
  animation: logos-marquee-left 32s linear infinite;
}
.logos03-right-26 {
  animation: logos-marquee-right 26s linear infinite;
}
.logos03-left-38 {
  animation: logos-marquee-left 38s linear infinite;
}
.group:hover .logos03-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logos03-track {
    animation: none !important;
  }
}
</style>

```

## map

- type: `registry:ui`
- description: A thin, theme-aware Mapbox GL JS wrapper (built on @studiometa/vue-mapbox-gl). Pass an access token and drop MapMarker / MapPopup / MapLayer into the slot to build any map — fleet boards, journey maps, store locators. The base style follows light/dark automatically, an opt-in `muted` prop desaturates the basemap so overlaid data is the only colour, and `@created` hands you the raw map instance for custom layers and fitBounds.
- npm deps: `mapbox-gl`, `@studiometa/vue-mapbox-gl`
- registry deps: `use-theme`

### `packages/registry-vue/components/map/Map.vue`

```vue
<script setup lang="ts">
/**
 * Map — a thin, theme-aware wrapper around @studiometa/vue-mapbox-gl's
 * MapboxMap. Pass an `access-token`; drop `<MapMarker>` / `<MapPopup>` /
 * `<MapLayer>` (re-exported from this package) or any @studiometa child into
 * the default slot to build any kind of map.
 *
 * - The base style follows the app theme (light-v11 / dark-v11) unless you pass
 *   an explicit `map-style`.
 * - `muted` repaints the basemap to a quiet, desaturated canvas (graphite in
 *   dark, light-grey in light) so overlaid data is the only colour on the map —
 *   ideal for dashboards, fleet boards and journey maps.
 * - `@created` hands you the raw mapbox-gl Map instance for imperative work
 *   (custom layers, fitBounds, controls).
 *
 * Requires a Mapbox access token (https://account.mapbox.com).
 */
import { computed, onMounted, ref } from 'vue'
import mapboxgl from 'mapbox-gl'
import { MapboxMap } from '@studiometa/vue-mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

const props = withDefaults(
  defineProps<{
    /** Mapbox access token. */
    accessToken: string
    /** Override the base style. Defaults to a theme-aware light/dark style. */
    mapStyle?: string
    /** Initial [lng, lat]. */
    center?: [number, number]
    zoom?: number
    /** 'mercator' (flat) or 'globe'. */
    projection?: string
    /** Show the zoom/compass control. */
    navigation?: boolean
    /** Repaint the basemap to a quiet, desaturated canvas. */
    muted?: boolean
  }>(),
  {
    mapStyle: undefined,
    center: () => [0, 20],
    zoom: 1.4,
    projection: 'mercator',
    navigation: true,
    muted: false,
  },
)

const emit = defineEmits<{ (e: 'created', map: mapboxgl.Map): void }>()

const { theme } = useTheme()
const isDark = () =>
  theme.value === 'dark' ||
  (theme.value === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches)

const resolvedStyle = computed(
  () => props.mapStyle ?? (isDark() ? 'mapbox://styles/mapbox/dark-v11' : 'mapbox://styles/mapbox/light-v11'),
)

// Render the map only on the client — Mapbox needs the DOM, and rendering it on
// the server would hydrate-mismatch. The bg-muted box is the SSR placeholder.
const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})

let map: mapboxgl.Map | null = null

/** Desaturate the basemap to a quiet canvas. Each op is guarded — style layer
 *  ids drift between style versions and the wrong property for a layer type
 *  throws. */
function applyMuted() {
  if (!map) return
  let styleLayers: any[]
  try {
    styleLayers = map.getStyle()?.layers ?? []
  } catch {
    return // style not loaded yet
  }
  const P = isDark()
    ? { land: 'rgb(23,24,29)', water: 'rgb(17,18,22)', use: 'rgb(31,32,38)', road: 'rgb(50,52,60)', label: 'rgb(150,152,165)', halo: 'rgb(23,24,29)', admin: 'rgb(50,52,60)' }
    : { land: 'rgb(246,247,249)', water: 'rgb(226,230,235)', use: 'rgb(238,240,243)', road: 'rgb(221,224,229)', label: 'rgb(120,124,134)', halo: 'rgb(246,247,249)', admin: 'rgb(213,216,221)' }
  for (const l of styleLayers) {
    const id = l.id
    try {
      if (id === 'background' || id === 'land') map.setPaintProperty(id, 'background-color', P.land)
      else if (/water/.test(id) && l.type === 'fill') map.setPaintProperty(id, 'fill-color', P.water)
      else if (/landuse|landcover|national-park/.test(id) && l.type === 'fill') map.setPaintProperty(id, 'fill-color', P.use)
      else if (/^road-(motorway|trunk|primary)/.test(id) && l.type === 'line') {
        map.setPaintProperty(id, 'line-color', P.road)
        map.setPaintProperty(id, 'line-opacity', 0.55)
      } else if (/^road-(secondary|tertiary|street|minor|service|path|pedestrian)/.test(id)) {
        map.setLayoutProperty(id, 'visibility', 'none')
      } else if (/poi|transit|airport|natural-point|water-point|waterway-label|building/.test(id)) {
        map.setLayoutProperty(id, 'visibility', 'none')
      } else if (/road-label|settlement-major-label|settlement-minor-label|state-label/.test(id) && l.type === 'symbol') {
        map.setPaintProperty(id, 'text-color', P.label)
        map.setPaintProperty(id, 'text-halo-color', P.halo)
        map.setPaintProperty(id, 'text-opacity', 0.6)
      } else if (id === 'admin-1-boundary' && l.type === 'line') {
        map.setPaintProperty(id, 'line-color', P.admin)
        map.setPaintProperty(id, 'line-opacity', 0.6)
      } else if (id === 'admin-1-boundary-bg') map.setPaintProperty(id, 'line-opacity', 0)
    } catch {
      /* skip */
    }
  }
}

function onCreated(instance: mapboxgl.Map) {
  map = instance
  try {
    ;(map as any).setProjection(props.projection)
  } catch {
    /* older api */
  }
  if (props.navigation) map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'bottom-right')
  // Emit once the style has loaded so the handler can safely add sources/layers.
  // (A theme restyle wipes custom layers — re-add them in your own
  // `map.on('style.load')` if you need them to survive a theme switch.)
  const ready = () => {
    if (props.muted) applyMuted()
    emit('created', map!)
  }
  if (map.isStyleLoaded()) ready()
  else map.once('load', ready)
  map.on('style.load', () => {
    if (props.muted) applyMuted()
  })
}
</script>

<template>
  <div class="bg-muted size-full overflow-hidden">
    <MapboxMap
      v-if="mounted"
      class="size-full"
      :access-token="accessToken"
      :map-style="resolvedStyle"
      :center="center"
      :zoom="zoom"
      :attribution-control="false"
      @mb-created="onCreated"
    >
      <slot />
    </MapboxMap>
  </div>
</template>

```

### `packages/registry-vue/components/map/index.ts`

```ts
export { default as Map } from './Map.vue'

// Re-exported from @studiometa/vue-mapbox-gl under Map* names so consumers get
// the whole map toolkit from one import. Place these inside <Map>'s slot — they
// inject the map instance from the wrapping MapboxMap.
export {
  MapboxMarker as MapMarker,
  MapboxPopup as MapPopup,
  MapboxLayer as MapLayer,
  MapboxSource as MapSource,
  MapboxNavigationControl as MapNavigationControl,
} from '@studiometa/vue-mapbox-gl'

```

### `packages/registry-vue/components/map/map.css`

```css
/**
 * Map chrome — re-skins Mapbox GL's controls + popups to the design-system
 * tokens so they sit naturally on light and dark surfaces. Global (Mapbox
 * renders this chrome outside the component subtree). Import once, e.g. in your
 * root CSS: `@import './components/ui/map/map.css';`
 */
.mapboxgl-ctrl-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));
}
.mapboxgl-ctrl-group button {
  background: transparent;
}
.mapboxgl-ctrl-group button + button {
  border-top-color: var(--border);
}
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(var(--map-ctrl-invert, 0)) opacity(0.7);
}
.dark .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(1) opacity(0.7);
}
.mapboxgl-ctrl-attrib {
  background: color-mix(in oklab, var(--card) 80%, transparent);
  color: var(--muted-foreground);
}
.mapboxgl-ctrl-attrib a {
  color: var(--muted-foreground);
}
.mapboxgl-popup-content {
  padding: 8px 12px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));
}
.mapboxgl-popup-close-button {
  color: var(--muted-foreground);
}
.mapboxgl-popup-tip {
  border-top-color: var(--popover);
  border-bottom-color: var(--popover);
}

```

## marquee

- type: `registry:ui`
- description: Continuously auto-scrolling content. Scrolls horizontally or vertically in any direction, with configurable speed, gap, repeat count for a seamless loop, pause-on-hover, and a hard pause prop. Respects prefers-reduced-motion.

### `packages/registry-vue/components/marquee/Marquee.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    /** Scroll axis. */
    orientation?: 'horizontal' | 'vertical'
    /** Travel direction. */
    direction?: 'left' | 'right' | 'up' | 'down'
    /** Animation duration in seconds. Lower = faster. */
    speed?: number
    /** Pause the animation on hover. */
    pauseOnHover?: boolean
    /** Gap between repeated content groups (px). */
    gap?: number
    /** Number of times the slot content is duplicated for a seamless loop. */
    repeat?: number
    /** Hard pause the animation. */
    paused?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    orientation: 'horizontal',
    direction: 'left',
    speed: 20,
    pauseOnHover: false,
    gap: 16,
    repeat: 2,
    paused: false,
  },
)

const isVertical = computed(() => props.orientation === 'vertical')
const reverse = computed(() => props.direction === 'right' || props.direction === 'down')

const durationStyle = computed(() => `${props.speed}s`)
const gapStyle = computed(() => `${props.gap}px`)

const containerClass = computed(() =>
  cn(
    'group flex overflow-hidden',
    isVertical.value ? 'flex-col' : 'flex-row',
    props.pauseOnHover ? 'hover:[&>[data-slot=marquee-track]]:[animation-play-state:paused]' : '',
    props.class,
  ),
)

const trackClass = computed(() =>
  cn(
    'flex shrink-0',
    isVertical.value ? 'flex-col' : 'flex-row',
    props.paused ? '![animation-play-state:paused]' : '',
  ),
)
</script>

<template>
  <div
    data-uipkge
    data-slot="marquee"
    :data-orientation="orientation"
    :data-direction="direction"
    :class="containerClass"
    :style="{
      '--marquee-gap': gapStyle,
    }"
  >
    <div
      v-for="i in repeat"
      :key="i"
      data-slot="marquee-track"
      :class="trackClass"
      :style="{
        gap: 'var(--marquee-gap)',
        animationName: isVertical ? 'uipkge-marquee-y' : 'uipkge-marquee-x',
        animationDuration: `${props.speed}s`,
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite',
        animationDirection: reverse ? 'reverse' : 'normal',
      }"
      :aria-hidden="i > 1 ? 'true' : undefined"
    >
      <slot />
    </div>
  </div>
</template>

<style>
/* Global keyframes — must NOT be scoped so the inline animationName can find them */
@keyframes uipkge-marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes uipkge-marquee-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='marquee-track'] {
    animation: none !important;
  }
}
</style>

```

### `packages/registry-vue/components/marquee/index.ts`

```ts
export { default as Marquee } from './Marquee.vue'

```

## masked-input

- type: `registry:ui`
- description: Input with a fixed format mask — phone numbers, credit cards, dates, postal codes. Pass a mask string (e.g. `(###) ###-####`) and the input enforces it as the user types. Customizable placeholder character and replacement marker.

### `packages/registry-vue/components/masked-input/MaskedInput.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch, nextTick } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    mask: string
    replacement?: string
    placeholderChar?: string
    showMask?: boolean
    disabled?: boolean
    readonly?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    replacement: '#',
    placeholderChar: '_',
    showMask: true,
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
  complete: [value: string]
}>()

const inputRef = ref<HTMLInputElement>()

// Positions in the mask that are editable (not separators)
const editablePositions = computed(() => {
  const positions: number[] = []
  for (let i = 0; i < props.mask.length; i++) {
    if (props.mask[i] === props.replacement) positions.push(i)
  }
  return positions
})

// Total number of editable slots
const maxLength = computed(() => editablePositions.value.length)

// Is the input fully filled?
const isComplete = computed(() => {
  const raw = unmask(props.modelValue ?? '')
  return raw.length === maxLength.value
})

// Watch for completion
watch(isComplete, (complete) => {
  if (complete) emit('complete', props.modelValue ?? '')
})

function unmask(value: string): string {
  let result = ''
  for (const char of value) {
    if (char !== props.placeholderChar && char !== ' ' && !isSeparatorChar(char)) {
      result += char
    }
  }
  return result
}

function isSeparatorChar(char: string): boolean {
  // Check if char exists in mask at a non-replacement position
  for (let i = 0; i < props.mask.length; i++) {
    if (props.mask[i] !== props.replacement && props.mask[i] === char) {
      return true
    }
  }
  return false
}

function applyMask(rawValue: string): string {
  const chars = rawValue.split('')
  let result = ''
  let charIndex = 0

  for (let i = 0; i < props.mask.length; i++) {
    if (props.mask[i] === props.replacement) {
      if (charIndex < chars.length) {
        result += chars[charIndex]
        charIndex++
      } else if (props.showMask) {
        result += props.placeholderChar
      } else {
        break
      }
    } else {
      result += props.mask[i]
    }
  }

  return result
}

function getNextEditablePos(currentPos: number): number {
  for (const pos of editablePositions.value) {
    if (pos >= currentPos) return pos
  }
  return editablePositions.value[editablePositions.value.length - 1] ?? props.mask.length
}

function getPrevEditablePos(currentPos: number): number {
  for (let i = editablePositions.value.length - 1; i >= 0; i--) {
    const p = editablePositions.value[i]
    if (p !== undefined && p < currentPos) return p
  }
  return editablePositions.value[0] ?? 0
}

function findRawIndexAtCursor(cursorPos: number): number {
  let rawIndex = 0
  for (let i = 0; i < cursorPos && i < props.mask.length; i++) {
    if (props.mask[i] === props.replacement) rawIndex++
  }
  return rawIndex
}

function findCursorPosFromRaw(rawIndex: number): number {
  let count = 0
  for (let i = 0; i < props.mask.length; i++) {
    if (props.mask[i] === props.replacement) {
      if (count === rawIndex) return i
      count++
    }
  }
  return props.mask.length
}

function handleInput(event: Event) {
  const target = event.target as HTMLInputElement
  const oldValue = props.modelValue ?? ''
  const newValue = target.value
  const cursorPos = target.selectionStart ?? 0

  // Extract raw characters from new value
  const rawNew = unmask(newValue)
  const rawOld = unmask(oldValue)

  // Limit to max length
  const clampedRaw = rawNew.slice(0, maxLength.value)

  // Apply mask
  const masked = applyMask(clampedRaw)

  // Determine new cursor position
  let newCursorPos: number

  if (clampedRaw.length > rawOld.length) {
    // Character added - move to next editable position
    const addedIndex = clampedRaw.length - 1
    newCursorPos = findCursorPosFromRaw(addedIndex) + 1
    newCursorPos = getNextEditablePos(newCursorPos)
  } else if (clampedRaw.length < rawOld.length) {
    // Character removed
    newCursorPos = getPrevEditablePos(cursorPos) + 1
  } else {
    // Same length, try to maintain relative position
    newCursorPos = cursorPos
  }

  emit('update:modelValue', masked)

  nextTick(() => {
    if (inputRef.value) {
      inputRef.value.setSelectionRange(newCursorPos, newCursorPos)
    }
  })
}

function handleKeydown(event: KeyboardEvent) {
  const target = event.target as HTMLInputElement
  const cursorPos = target.selectionStart ?? 0

  if (event.key === 'Backspace') {
    const raw = unmask(props.modelValue ?? '')
    const rawIndex = findRawIndexAtCursor(cursorPos)

    if (rawIndex > 0) {
      const newRaw = raw.slice(0, rawIndex - 1) + raw.slice(rawIndex)
      const masked = applyMask(newRaw)
      emit('update:modelValue', masked)

      const newPos = findCursorPosFromRaw(rawIndex - 1) + 1
      nextTick(() => {
        if (inputRef.value) {
          inputRef.value.setSelectionRange(newPos, newPos)
        }
      })
    }
    event.preventDefault()
  } else if (event.key === 'Delete') {
    const raw = unmask(props.modelValue ?? '')
    const rawIndex = findRawIndexAtCursor(cursorPos)

    if (rawIndex < raw.length) {
      const newRaw = raw.slice(0, rawIndex) + raw.slice(rawIndex + 1)
      const masked = applyMask(newRaw)
      emit('update:modelValue', masked)

      const newPos = findCursorPosFromRaw(rawIndex) + 1
      nextTick(() => {
        if (inputRef.value) {
          inputRef.value.setSelectionRange(newPos, newPos)
        }
      })
    }
    event.preventDefault()
  } else if (event.key === 'ArrowLeft') {
    const newPos = getPrevEditablePos(cursorPos)
    nextTick(() => {
      if (inputRef.value) {
        inputRef.value.setSelectionRange(newPos + 1, newPos + 1)
      }
    })
    event.preventDefault()
  } else if (event.key === 'ArrowRight') {
    const newPos = getNextEditablePos(cursorPos + 1)
    nextTick(() => {
      if (inputRef.value) {
        inputRef.value.setSelectionRange(newPos + 1, newPos + 1)
      }
    })
    event.preventDefault()
  }
}

function handleFocus() {
  if (!props.modelValue && props.showMask) {
    emit('update:modelValue', applyMask(''))
  }
  nextTick(() => {
    if (inputRef.value) {
      const firstEditable = editablePositions.value[0] ?? 0
      inputRef.value.setSelectionRange(firstEditable + 1, firstEditable + 1)
    }
  })
}

function handlePaste(event: ClipboardEvent) {
  event.preventDefault()
  const pasted = event.clipboardData?.getData('text') ?? ''
  const raw = unmask(props.modelValue ?? '')
  const cursorPos = inputRef.value?.selectionStart ?? 0
  const rawIndex = findRawIndexAtCursor(cursorPos)
  const newRaw = raw.slice(0, rawIndex) + unmask(pasted) + raw.slice(rawIndex)
  const clamped = newRaw.slice(0, maxLength.value)
  const masked = applyMask(clamped)
  emit('update:modelValue', masked)

  const newPos = findCursorPosFromRaw(Math.min(rawIndex + unmask(pasted).length, maxLength.value)) + 1
  nextTick(() => {
    if (inputRef.value) {
      inputRef.value.setSelectionRange(newPos, newPos)
    }
  })
}

const displayValue = computed(() => {
  if (!props.modelValue && !props.showMask) return ''
  return props.modelValue ?? ''
})
</script>

<template>
  <input
    ref="inputRef"
    :value="displayValue"
    data-uipkge
    data-slot="masked-input"
    :disabled="disabled"
    :readonly="readonly"
    :class="
      cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        props.class,
      )
    "
    @input="handleInput"
    @keydown="handleKeydown"
    @focus="handleFocus"
    @paste="handlePaste"
  />
</template>

```

### `packages/registry-vue/components/masked-input/index.ts`

```ts
export { default as MaskedInput } from './MaskedInput.vue'

```

## mentions

- type: `registry:ui`
- description: Textarea with trigger-character autocomplete. Type a configured trigger (default @) to open a filtered popover; pick to insert. Static or async options.
- registry deps: `popover`

### `packages/registry-vue/components/mentions/Mentions.vue`

```vue
<script setup lang="ts" generic="O extends MentionOption">
import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
import { getCaretRect, type CaretRect } from './caret-position'
import type { MentionOption } from '.'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    options?: O[]
    triggers?: string[]
    prefix?: string
    rows?: number
    loading?: boolean
    loadOptions?: (query: string, trigger: string) => Promise<O[]>
    format?: (option: O, trigger: string) => string
    placeholder?: string
    disabled?: boolean
    readonly?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    modelValue: '',
    options: () => [] as any,
    triggers: () => ['@'],
    prefix: '@',
    rows: 4,
    loading: false,
    placeholder: '',
    disabled: false,
    readonly: false,
  },
)

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'select', option: O): void
  (e: 'search', payload: { trigger: string; query: string }): void
}>()

const textarea = ref<HTMLTextAreaElement | null>(null)
const open = ref(false)
const activeTrigger = ref('')
const query = ref('')
const triggerIndex = ref(-1)
const highlightedIndex = ref(0)
const asyncResults = ref<O[]>([])
const isAsyncLoading = ref(false)

const caretRect = ref<CaretRect | null>(null)

const filtered = computed((): O[] => {
  if (props.loadOptions) return asyncResults.value as O[]
  if (!query.value) return props.options as O[]
  const q = query.value.toLowerCase()
  return (props.options as O[]).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
})

const totalLoading = computed(() => props.loading || isAsyncLoading.value)

function findActiveMention(value: string, caret: number): { trigger: string; index: number; query: string } | null {
  for (let i = caret - 1; i >= 0; i--) {
    const ch = value[i]!
    if (props.triggers.includes(ch)) {
      const before = i === 0 ? '' : value[i - 1]!
      if (i === 0 || /\s/.test(before)) {
        return { trigger: ch, index: i, query: value.substring(i + 1, caret) }
      }
      return null
    }
    if (/\s/.test(ch)) return null
  }
  return null
}

function updateAnchor() {
  if (!textarea.value) return
  caretRect.value = getCaretRect(textarea.value, textarea.value.selectionStart ?? 0)
}

let asyncToken = 0
async function runAsync(trigger: string, q: string) {
  if (!props.loadOptions) return
  const token = ++asyncToken
  isAsyncLoading.value = true
  try {
    const results = await props.loadOptions(q, trigger)
    if (token === asyncToken) asyncResults.value = results
  } finally {
    if (token === asyncToken) isAsyncLoading.value = false
  }
}

let debounceTimer: ReturnType<typeof setTimeout> | null = null

function scheduleAsync(trigger: string, q: string) {
  if (debounceTimer) clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => runAsync(trigger, q), 200)
}

function onInput(e: Event) {
  const ta = e.target as HTMLTextAreaElement
  emits('update:modelValue', ta.value)

  const match = findActiveMention(ta.value, ta.selectionStart ?? 0)
  if (match) {
    open.value = true
    activeTrigger.value = match.trigger
    triggerIndex.value = match.index
    query.value = match.query
    highlightedIndex.value = 0
    emits('search', { trigger: match.trigger, query: match.query })
    if (props.loadOptions) scheduleAsync(match.trigger, match.query)
    nextTick(updateAnchor)
  } else {
    open.value = false
  }
}

function onKeydown(e: KeyboardEvent) {
  if (!open.value || filtered.value.length === 0) return
  if (e.key === 'ArrowDown') {
    e.preventDefault()
    highlightedIndex.value = (highlightedIndex.value + 1) % filtered.value.length
  } else if (e.key === 'ArrowUp') {
    e.preventDefault()
    highlightedIndex.value = (highlightedIndex.value - 1 + filtered.value.length) % filtered.value.length
  } else if (e.key === 'Enter' || e.key === 'Tab') {
    e.preventDefault()
    const opt = filtered.value[highlightedIndex.value]
    if (opt && !opt.disabled) insert(opt)
  } else if (e.key === 'Escape') {
    e.preventDefault()
    open.value = false
  }
}

function defaultFormat(option: O, _trigger: string) {
  return `${props.prefix}${option.value} `
}

function insert(option: O) {
  const ta = textarea.value
  if (!ta) return
  const value = props.modelValue
  const caret = ta.selectionStart ?? 0
  const before = value.substring(0, triggerIndex.value)
  const after = value.substring(caret)
  const token = (props.format ?? defaultFormat)(option, activeTrigger.value)
  const next = before + token + after
  emits('update:modelValue', next)
  emits('select', option)
  open.value = false
  nextTick(() => {
    const pos = before.length + token.length
    ta.focus()
    ta.setSelectionRange(pos, pos)
  })
}

const anchorStyle = computed(() => {
  if (!caretRect.value) return { display: 'none' }
  return {
    position: 'fixed' as const,
    top: `${caretRect.value.top + caretRect.value.height}px`,
    left: `${caretRect.value.left}px`,
    width: '0px',
    height: '0px',
    pointerEvents: 'none' as const,
  }
})

onBeforeUnmount(() => {
  if (debounceTimer) clearTimeout(debounceTimer)
})
</script>

<template>
  <div :class="cn('relative w-full', props.class)" data-uipkge data-slot="mentions">
    <textarea
      ref="textarea"
      :value="modelValue"
      :rows="rows"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      class="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
      @input="onInput"
      @keydown="onKeydown"
      @scroll="updateAnchor"
    />
    <Popover :open="open" @update:open="open = $event">
      <PopoverAnchor as-child>
        <div :style="anchorStyle" aria-hidden="true" />
      </PopoverAnchor>
      <PopoverContent
        align="start"
        :side-offset="4"
        class="w-64 p-1"
        @open-auto-focus="(e: Event) => e.preventDefault()"
      >
        <div v-if="totalLoading" class="text-muted-foreground px-2 py-3 text-sm">Loading...</div>
        <div v-else-if="filtered.length === 0" class="text-muted-foreground px-2 py-3 text-sm">No matches</div>
        <ul v-else class="max-h-64 overflow-auto" role="listbox">
          <li
            v-for="(opt, i) in filtered"
            :key="opt.value"
            role="option"
            :aria-selected="i === highlightedIndex"
            :class="[
              'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm',
              i === highlightedIndex && !opt.disabled ? 'bg-accent text-accent-foreground' : '',
              opt.disabled ? 'cursor-not-allowed opacity-50' : '',
            ]"
            @mouseenter="highlightedIndex = i"
            @mousedown.prevent="!opt.disabled && insert(opt)"
          >
            <img v-if="opt.avatar" :src="opt.avatar" alt="" class="size-6 rounded-full" />
            <div class="min-w-0 flex-1">
              <div class="truncate">{{ opt.label }}</div>
              <div v-if="opt.description" class="text-muted-foreground truncate text-xs">
                {{ opt.description }}
              </div>
            </div>
          </li>
        </ul>
      </PopoverContent>
    </Popover>
  </div>
</template>

```

### `packages/registry-vue/components/mentions/caret-position.ts`

```ts
const PROPERTIES_TO_COPY = [
  'direction',
  'boxSizing',
  'width',
  'height',
  'overflowX',
  'overflowY',
  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderStyle',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'fontSizeAdjust',
  'lineHeight',
  'fontFamily',
  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',
  'letterSpacing',
  'wordSpacing',
  'tabSize',
  'whiteSpace',
  'wordBreak',
  'wordWrap',
] as const

export interface CaretRect {
  top: number
  left: number
  height: number
}

export function getCaretRect(textarea: HTMLTextAreaElement, position: number): CaretRect {
  const div = document.createElement('div')
  document.body.appendChild(div)

  const style = div.style
  const computed = window.getComputedStyle(textarea)

  style.position = 'absolute'
  style.visibility = 'hidden'
  style.whiteSpace = 'pre-wrap'
  style.wordWrap = 'break-word'
  style.top = '0'
  style.left = '0'

  for (const prop of PROPERTIES_TO_COPY) {
    ;(style as any)[prop] = (computed as any)[prop]
  }

  style.overflow = 'hidden'

  const text = textarea.value.substring(0, position)
  div.textContent = text

  const span = document.createElement('span')
  span.textContent = textarea.value.substring(position) || '.'
  div.appendChild(span)

  const spanRect = span.getBoundingClientRect()
  const divRect = div.getBoundingClientRect()
  const taRect = textarea.getBoundingClientRect()

  const result: CaretRect = {
    top: taRect.top + (spanRect.top - divRect.top) - textarea.scrollTop,
    left: taRect.left + (spanRect.left - divRect.left) - textarea.scrollLeft,
    height: spanRect.height,
  }

  document.body.removeChild(div)
  return result
}

```

### `packages/registry-vue/components/mentions/index.ts`

```ts
export interface MentionOption {
  value: string
  label: string
  description?: string
  avatar?: string
  disabled?: boolean
}

export { default as Mentions } from './Mentions.vue'

```

## menubar

- type: `registry:ui`
- description: Top-level menu bar — File / Edit / View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left/right arrows).
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/menubar/Menubar.vue`

```vue
<script setup lang="ts">
import type { MenubarRootEmits, MenubarRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<MenubarRootEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <MenubarRoot
    v-slot="slotProps"
    data-uipkge
    data-slot="menubar"
    v-bind="forwarded"
    :class="cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', props.class)"
  >
    <slot v-bind="slotProps" />
  </MenubarRoot>
</template>

```

### `packages/registry-vue/components/menubar/MenubarCheckboxItem.vue`

```vue
<script setup lang="ts">
import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Check } from 'lucide-vue-next'
import { MenubarCheckboxItem, MenubarItemIndicator, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<MenubarCheckboxItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <MenubarCheckboxItem
    data-uipkge
    data-slot="menubar-checkbox-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <MenubarItemIndicator>
        <slot name="indicator-icon">
          <Check class="size-4" aria-hidden="true" />
        </slot>
      </MenubarItemIndicator>
    </span>
    <slot />
  </MenubarCheckboxItem>
</template>

```

### `packages/registry-vue/components/menubar/MenubarContent.vue`

```vue
<script setup lang="ts">
import type { MenubarContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarContent, MenubarPortal, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(), {
  align: 'start',
  alignOffset: -4,
  sideOffset: 8,
})

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <MenubarPortal>
    <MenubarContent
      data-uipkge
      data-slot="menubar-content"
      v-bind="{ ...$attrs, ...forwardedProps }"
      :class="
        cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
          props.class,
        )
      "
    >
      <slot />
    </MenubarContent>
  </MenubarPortal>
</template>

```

### `packages/registry-vue/components/menubar/MenubarGroup.vue`

```vue
<script setup lang="ts">
import type { MenubarGroupProps } from 'reka-ui'
import { MenubarGroup } from 'reka-ui'

const props = defineProps<MenubarGroupProps>()
</script>

<template>
  <MenubarGroup data-uipkge data-slot="menubar-group" v-bind="props">
    <slot />
  </MenubarGroup>
</template>

```

### `packages/registry-vue/components/menubar/MenubarItem.vue`

```vue
<script setup lang="ts">
import type { MenubarItemEmits, MenubarItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarItem, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  MenubarItemProps & {
    class?: HTMLAttributes['class']
    inset?: boolean
    variant?: 'default' | 'destructive'
  }
>()

const emits = defineEmits<MenubarItemEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <MenubarItem
    data-uipkge
    data-slot="menubar-item"
    :data-inset="inset ? '' : undefined"
    :data-variant="variant"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <slot />
  </MenubarItem>
</template>

```

### `packages/registry-vue/components/menubar/MenubarLabel.vue`

```vue
<script setup lang="ts">
import type { MenubarLabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarLabel } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
const delegatedProps = reactiveOmit(props, 'class', 'inset')
</script>

<template>
  <MenubarLabel
    :data-inset="inset ? '' : undefined"
    v-bind="delegatedProps"
    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
  >
    <slot />
  </MenubarLabel>
</template>

```

### `packages/registry-vue/components/menubar/MenubarMenu.vue`

```vue
<script setup lang="ts">
import type { MenubarMenuProps } from 'reka-ui'
import { MenubarMenu } from 'reka-ui'

const props = defineProps<MenubarMenuProps>()
</script>

<template>
  <MenubarMenu data-uipkge data-slot="menubar-menu" v-bind="props">
    <slot />
  </MenubarMenu>
</template>

```

### `packages/registry-vue/components/menubar/MenubarRadioGroup.vue`

```vue
<script setup lang="ts">
import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'reka-ui'
import { MenubarRadioGroup, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<MenubarRadioGroupProps>()
const emits = defineEmits<MenubarRadioGroupEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <MenubarRadioGroup data-uipkge data-slot="menubar-radio-group" v-bind="forwarded">
    <slot />
  </MenubarRadioGroup>
</template>

```

### `packages/registry-vue/components/menubar/MenubarRadioItem.vue`

```vue
<script setup lang="ts">
import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Circle } from 'lucide-vue-next'
import { MenubarItemIndicator, MenubarRadioItem, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<MenubarRadioItemEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <MenubarRadioItem
    data-uipkge
    data-slot="menubar-radio-item"
    v-bind="forwarded"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class
      )
    "
  >
    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <MenubarItemIndicator>
        <slot name="indicator-icon">
          <Circle class="size-2 fill-current" />
        </slot>
      </MenubarItemIndicator>
    </span>
    <slot />
  </MenubarRadioItem>
</template>

```

### `packages/registry-vue/components/menubar/MenubarSeparator.vue`

```vue
<script setup lang="ts">
import type { MenubarSeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarSeparator, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <MenubarSeparator
    data-uipkge
    data-slot="menubar-separator"
    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
    v-bind="forwardedProps"
  />
</template>

```

### `packages/registry-vue/components/menubar/MenubarShortcut.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <span
    data-uipkge
    data-slot="menubar-shortcut"
    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
  >
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/menubar/MenubarSub.vue`

```vue
<script setup lang="ts">
import type { MenubarSubEmits } from 'reka-ui'
import { MenubarSub, useForwardPropsEmits } from 'reka-ui'

interface MenubarSubRootProps {
  defaultOpen?: boolean
  open?: boolean
}

const props = defineProps<MenubarSubRootProps>()
const emits = defineEmits<MenubarSubEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <MenubarSub v-slot="slotProps" data-uipkge data-slot="menubar-sub" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </MenubarSub>
</template>

```

### `packages/registry-vue/components/menubar/MenubarSubContent.vue`

```vue
<script setup lang="ts">
import type { MenubarSubContentEmits, MenubarSubContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarPortal, MenubarSubContent, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<MenubarSubContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <MenubarPortal>
    <MenubarSubContent
      data-uipkge
      data-slot="menubar-sub-content"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
          props.class,
        )
      "
    >
      <slot />
    </MenubarSubContent>
  </MenubarPortal>
</template>

```

### `packages/registry-vue/components/menubar/MenubarSubTrigger.vue`

```vue
<script setup lang="ts">
import type { MenubarSubTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import { MenubarSubTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>()

const delegatedProps = reactiveOmit(props, 'class', 'inset')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <MenubarSubTrigger
    data-uipkge
    data-slot="menubar-sub-trigger"
    :data-inset="inset ? '' : undefined"
    v-bind="forwardedProps"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8',
        props.class,
      )
    "
  >
    <slot />
    <ChevronRight class="ml-auto size-4" />
  </MenubarSubTrigger>
</template>

```

### `packages/registry-vue/components/menubar/MenubarTrigger.vue`

```vue
<script setup lang="ts">
import type { MenubarTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { MenubarTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <MenubarTrigger
    data-uipkge
    data-slot="menubar-trigger"
    v-bind="forwardedProps"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
        props.class,
      )
    "
  >
    <slot />
  </MenubarTrigger>
</template>

```

### `packages/registry-vue/components/menubar/index.ts`

```ts
export { default as Menubar } from './Menubar.vue'
export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
export { default as MenubarContent } from './MenubarContent.vue'
export { default as MenubarGroup } from './MenubarGroup.vue'
export { default as MenubarItem } from './MenubarItem.vue'
export { default as MenubarLabel } from './MenubarLabel.vue'
export { default as MenubarMenu } from './MenubarMenu.vue'
export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
export { default as MenubarSeparator } from './MenubarSeparator.vue'
export { default as MenubarShortcut } from './MenubarShortcut.vue'
export { default as MenubarSub } from './MenubarSub.vue'
export { default as MenubarSubContent } from './MenubarSubContent.vue'
export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
export { default as MenubarTrigger } from './MenubarTrigger.vue'

```

## metrics-grid

- type: `registry:block`
- description: Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
- npm deps: `echarts`, `vue-echarts`
- registry deps: `pie-chart`, `bar-chart`

### `packages/registry-vue/blocks/metrics-grid/MetricsGrid.vue`

```vue
<script setup lang="ts">
// Six-tile KPI grid. Each tile renders a labeled KPI header (title +
// big number / percentage / count) above a small chart -- pie or
// horizontal bar -- that gives the breakdown.
//
// Per the registry's primitive-vs-block rule: tile shapes are spelled
// out inline as siblings. Different tiles use different chart types
// (donut, full pie, horizontal bar) -- those differences are the whole
// point of the layout, so they don't hide behind a wrapper.
import { computed } from 'vue'
import { PieChart, BarChart } from '@/components/ui/charts'

// --- KPI 1: status pie (e.g. successful / partially / error) ---
const totalRuns = 770
const runsByStatus = [
  { name: 'Successful', value: 638 },
  { name: 'Partial', value: 0 },
  { name: 'Error / Skipped', value: 132 },
]

// --- KPI 2: disposition split ---
const totalProcessed = 638
const dispositionSplit = [
  { name: 'Non-disputable', value: 168 },
  { name: 'Disputable', value: 470 },
]

// --- KPI 3: classification breakdown ---
const totalClassified = 638
const classification = [
  { name: 'Type A', value: 525 },
  { name: 'Type B', value: 113 },
]

// --- KPI 4: top reasons (horizontal bar) ---
const skipReasons = [
  { reason: 'CREDIT_NOTE', count: 11 },
  { reason: 'CUSTOMS_INSPECT', count: 5 },
  { reason: 'NEGATIVE_COST', count: 8 },
]
const totalSkipped = computed(() => skipReasons.reduce((a, r) => a + r.count, 0))

// --- KPI 5: error reasons (horizontal bar) ---
const errorReasons = [
  { reason: 'INVALID_CUTOFF', count: 3 },
  { reason: 'NO_SHIPMENT_DATA', count: 20 },
  { reason: 'SELF_BILLING', count: 42 },
  { reason: 'MISSING_OBLIGATORY_FIELD', count: 2 },
  { reason: 'MISSING_OBLIGATORY_TIME', count: 4 },
  { reason: 'UNABLE_TO_CLASSIFY', count: 40 },
]
const totalErrors = computed(() => errorReasons.reduce((a, r) => a + r.count, 0))

// --- KPI 6: workflow status ---
const totalProcessed2 = 638
const openShare = 0.7602
const workflowStatus = [
  { name: 'Open', value: 485 },
  { name: 'Pending', value: 151 },
  { name: 'Closed', value: 2 },
]

const pieOption = {
  legend: { show: false },
  series: [
    {
      radius: ['0%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `${p.value}\n(${p.percent}%)`,
        fontSize: 11,
        color: '#fff',
        fontWeight: 600,
      },
      labelLine: { show: false },
    },
  ],
}

const donutOption = {
  legend: { show: false },
  series: [
    {
      radius: ['40%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `${p.value}\n(${p.percent}%)`,
        fontSize: 11,
        color: '#fff',
        fontWeight: 600,
      },
      labelLine: { show: false },
    },
  ],
}

const horizontalBarOption = {
  legend: { show: false },
  xAxis: { type: 'value' as const, axisLabel: { fontSize: 10 } },
  yAxis: { type: 'category' as const, axisLabel: { fontSize: 10 } },
  grid: { left: 16, right: 16, top: 8, bottom: 24, containLabel: true },
  series: [
    {
      type: 'bar' as const,
      barMaxWidth: 18,
      itemStyle: { borderRadius: [0, 3, 3, 0] },
    },
  ],
}

interface TileShape {
  title: string
  big: string
  legend?: { label: string; color: string }[]
}

const tiles: TileShape[] = [
  {
    title: 'Runs by status',
    big: `${totalRuns} runs`,
    legend: [
      { label: 'Successful', color: 'var(--chart-1)' },
      { label: 'Error / Skipped', color: 'var(--chart-4)' },
    ],
  },
  {
    title: 'Disposition split',
    big: `${totalProcessed} processed`,
    legend: [
      { label: 'Non-disputable', color: 'var(--chart-1)' },
      { label: 'Disputable', color: 'var(--chart-3)' },
    ],
  },
  {
    title: 'Classification',
    big: `${totalClassified} classified`,
    legend: [
      { label: 'Type A', color: 'var(--chart-1)' },
      { label: 'Type B', color: 'var(--chart-3)' },
    ],
  },
]
</script>

<template>
  <div class="space-y-4">
    <h2 class="text-primary text-[15px] font-semibold tracking-tight">Results Overview</h2>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <!-- Tile 1: Runs by status (pie) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Runs by status</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ totalRuns }} runs</div>
        <div class="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-1)"></span>Successful</span
          >
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-4)"></span>Error / Skipped</span
          >
        </div>
        <PieChart :data="runsByStatus" :option="pieOption" height="220" />
      </article>

      <!-- Tile 2: Disposition split (pie) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Disposition split</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ totalProcessed }} processed</div>
        <div class="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-1)"></span>Non-disputable</span
          >
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-3)"></span>Disputable</span
          >
        </div>
        <PieChart :data="dispositionSplit" :option="pieOption" height="220" />
      </article>

      <!-- Tile 3: Classification (pie) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Classification</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ totalClassified }} classified</div>
        <div class="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-1)"></span>Type A</span
          >
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-3)"></span>Type B</span
          >
        </div>
        <PieChart :data="classification" :option="pieOption" height="220" />
      </article>

      <!-- Tile 4: Skip reasons (horizontal bar) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Top skip reasons</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ totalSkipped }} skipped</div>
        <div class="text-muted-foreground mb-3 text-[11px]">By trigger</div>
        <BarChart :data="skipReasons" x-field="reason" y-field="count" :option="horizontalBarOption" height="220" />
      </article>

      <!-- Tile 5: Error reasons (horizontal bar) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Top error reasons</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ totalErrors }} errors</div>
        <div class="text-muted-foreground mb-3 text-[11px]">By failure mode</div>
        <BarChart :data="errorReasons" x-field="reason" y-field="count" :option="horizontalBarOption" height="220" />
      </article>

      <!-- Tile 6: Workflow status (donut + highlight) -->
      <article class="bg-card border-border rounded-lg border p-4">
        <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Workflow status</h3>
        <div class="text-primary mt-1 mb-2 text-2xl font-semibold">{{ (openShare * 100).toFixed(2) }}% open</div>
        <div class="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-1)"></span>Open</span
          >
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-5)"></span>Pending</span
          >
          <span class="inline-flex items-center gap-1.5"
            ><span class="size-2 rounded-full" style="background: var(--chart-3)"></span>Closed</span
          >
        </div>
        <PieChart :data="workflowStatus" :option="donutOption" :donut="true" height="220" />
      </article>
    </div>
  </div>
</template>

```

## motion-list

- type: `registry:style`
- description: Drop-in TransitionGroup styles for sortable lists, kanban columns, and reorderable cards. Pairs with `<TransitionGroup name="motion-list" tag="div" class="relative">` — siblings reflow smoothly while items fade-and-scale on enter/leave. Leaving items are taken out of layout flow (position: absolute) so the parent collapses immediately instead of waiting for the leave fade. All four timings and the settle curve are CSS variables (`--motion-list-curve`, `--motion-list-duration-{enter,leave,move}`, `--motion-list-leave-width`) so consumers tune per-context with one line. Consumed by `@uipkge/board` by default; usable standalone for any reorderable list. Tiny — one .css file, zero JS.

### `packages/registry-vue/bootstrap/motion-list/motion-list.css`

```css
/*
 * @uipkge/motion-list — drop-in TransitionGroup styles for sortable
 * lists, kanban columns, reorderable cards.
 *
 * Usage:
 *   <TransitionGroup name="motion-list" tag="div" class="relative">
 *     <YourCard v-for="item in items" :key="item.id" />
 *   </TransitionGroup>
 *
 * The parent <div> must be `position: relative` so leaving items can
 * be taken out of flow without escaping the column. The `enter` and
 * `move` animations share the same settle curve so a card moving
 * between two columns reads as one continuous motion.
 *
 * Tokens are exposed as CSS variables so consumers can per-context
 * override (e.g. quicker move for very short lists, slower for hero
 * boards). Override at any ancestor:
 *
 *   <div style="--motion-list-duration-move: 240ms"> ... </div>
 *
 * Staged in this repo before promotion to the uipkge registry —
 * once published, consume via
 *   `npx shadcn-vue@latest add @uipkge/motion-list -y`.
 */

@theme inline {
  --motion-list-curve: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-list-duration-move: 320ms;
  --motion-list-duration-enter: 220ms;
  --motion-list-duration-leave: 220ms;
}

.motion-list-move,
.motion-list-enter-active,
.motion-list-leave-active {
  transition:
    transform var(--motion-list-duration-move) var(--motion-list-curve),
    opacity var(--motion-list-duration-enter) var(--motion-list-curve);
}

.motion-list-enter-from {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.motion-list-leave-to {
  opacity: 0;
  transform: scale(0.94);
}

/* Take leaving items out of flow so siblings reflow immediately —
 * the parent collapses smoothly while the leave fade completes.
 * Override `--motion-list-leave-width` when the parent has padding
 * that the absolute child would otherwise ignore. */
.motion-list-leave-active {
  position: absolute;
  width: var(--motion-list-leave-width, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .motion-list-move,
  .motion-list-enter-active,
  .motion-list-leave-active {
    transition: none;
  }
  .motion-list-enter-from,
  .motion-list-leave-to {
    opacity: 1;
    transform: none;
  }
}

```

## navigation-menu

- type: `registry:ui`
- description: Top-of-page horizontal navigation with hover/click triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.
- npm deps: `@vueuse/core`, `class-variance-authority`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/navigation-menu/NavigationMenu.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import NavigationMenuViewport from './NavigationMenuViewport.vue'

const props = withDefaults(
  defineProps<
    NavigationMenuRootProps & {
      class?: HTMLAttributes['class']
      viewport?: boolean
    }
  >(),
  {
    viewport: true,
  },
)
const emits = defineEmits<NavigationMenuRootEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'viewport')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuRoot
    v-slot="slotProps"
    data-uipkge
    data-slot="navigation-menu"
    :data-viewport="viewport"
    v-bind="forwarded"
    :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)"
  >
    <slot v-bind="slotProps" />
    <NavigationMenuViewport v-if="viewport" />
  </NavigationMenuRoot>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuContent.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<NavigationMenuContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuContent
    data-uipkge
    data-slot="navigation-menu-content"
    v-bind="forwarded"
    :class="
      cn(
        'data-[motion^=from-]:motion-safe:animate-in data-[motion^=to-]:motion-safe:animate-out data-[motion^=from-]:motion-safe:fade-in data-[motion^=to-]:motion-safe:fade-out data-[motion=from-end]:motion-safe:slide-in-from-right-52 data-[motion=from-start]:motion-safe:slide-in-from-left-52 data-[motion=to-end]:motion-safe:slide-out-to-right-52 data-[motion=to-start]:motion-safe:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
        props.class,
      )
    "
  >
    <slot />
  </NavigationMenuContent>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuIndicator.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuIndicatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuIndicator, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuIndicator
    data-uipkge
    data-slot="navigation-menu-indicator"
    v-bind="forwardedProps"
    :class="
      cn(
        'data-[state=visible]:motion-safe:animate-in data-[state=hidden]:motion-safe:animate-out data-[state=hidden]:motion-safe:fade-out data-[state=visible]:motion-safe:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
        props.class,
      )
    "
  >
    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
  </NavigationMenuIndicator>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuItem.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuItem } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <NavigationMenuItem
    data-uipkge
    data-slot="navigation-menu-item"
    v-bind="delegatedProps"
    :class="cn('relative', props.class)"
  >
    <slot />
  </NavigationMenuItem>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuLink.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<NavigationMenuLinkEmits>()

const delegatedProps = reactiveOmit(props, 'class')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <NavigationMenuLink
    data-uipkge
    data-slot="navigation-menu-link"
    v-bind="forwarded"
    :class="
      cn(
        'data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4',
        props.class,
      )
    "
  >
    <slot />
  </NavigationMenuLink>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuList.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuListProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuList, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuList
    data-uipkge
    data-slot="navigation-menu-list"
    v-bind="forwardedProps"
    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)"
  >
    <slot />
  </NavigationMenuList>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuTrigger.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronDown } from 'lucide-vue-next'
import { NavigationMenuTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { navigationMenuTriggerStyle } from './navigation-menu.variants'

const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <NavigationMenuTrigger
    data-uipkge
    data-slot="navigation-menu-trigger"
    v-bind="forwardedProps"
    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
  >
    <slot />
    <ChevronDown
      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuTrigger>
</template>

```

### `packages/registry-vue/components/navigation-menu/NavigationMenuViewport.vue`

```vue
<script setup lang="ts">
import type { NavigationMenuViewportProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NavigationMenuViewport, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
    <NavigationMenuViewport
      data-uipkge
      data-slot="navigation-menu-viewport"
      v-bind="forwardedProps"
      :class="
        cn(
          'origin-top-center bg-popover text-popover-foreground data-[state=open]:motion-safe:animate-in data-[state=closed]:motion-safe:animate-out data-[state=closed]:motion-safe:zoom-out-95 data-[state=open]:motion-safe:zoom-in-90 relative left-[var(--reka-navigation-menu-viewport-left)] mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',
          props.class,
        )
      "
    />
  </div>
</template>

```

### `packages/registry-vue/components/navigation-menu/navigation-menu.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)

```

### `packages/registry-vue/components/navigation-menu/index.ts`

```ts
export { default as NavigationMenu } from './NavigationMenu.vue'
export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
export { default as NavigationMenuList } from './NavigationMenuList.vue'
export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { navigationMenuTriggerStyle } from './navigation-menu.variants'

```

## notifications-popover

- type: `registry:block`
- description: Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `badge`, `popover`

### `packages/registry-vue/blocks/notifications-popover/NotificationsPopover.vue`

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'
import { UserPlus, Calendar, CreditCard, FileText, GraduationCap, Target, X, BellOff, Archive } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

type NotificationCategory = 'hr' | 'payroll' | 'timeoff' | 'performance' | 'training' | 'system'

interface Notification {
  id: string
  title: string
  body: string
  category: NotificationCategory
  timestamp: Date
  read: boolean
  actionUrl?: string
  actor?: string
}

const categoryConfig: Record<NotificationCategory, { icon: any; accent: string; bg: string }> = {
  hr: {
    icon: UserPlus,
    accent: 'bg-success',
    bg: 'bg-success/10 text-success',
  },
  payroll: {
    icon: CreditCard,
    accent: 'bg-info',
    bg: 'bg-info/10 text-info',
  },
  timeoff: {
    icon: Calendar,
    accent: 'bg-chart-3',
    bg: 'bg-chart-3/10 text-chart-3',
  },
  performance: {
    icon: Target,
    accent: 'bg-warning',
    bg: 'bg-warning/10 text-warning',
  },
  training: {
    icon: GraduationCap,
    accent: 'bg-primary',
    bg: 'bg-primary/10 text-primary',
  },
  system: {
    icon: FileText,
    accent: 'bg-muted-foreground',
    bg: 'bg-muted text-muted-foreground',
  },
}

const now = new Date()

const notifications = ref<Notification[]>([
  {
    id: '1',
    title: 'Time off approved',
    body: 'Your annual leave request for Mar 15-18 has been approved by Sarah Connor.',
    category: 'timeoff',
    timestamp: new Date(now.getTime() - 12 * 60 * 1000),
    read: false,
    actor: 'Sarah Connor',
  },
  {
    id: '2',
    title: 'New employee onboarded',
    body: 'Marcus Rivera has joined the Engineering team as Senior Developer.',
    category: 'hr',
    timestamp: new Date(now.getTime() - 45 * 60 * 1000),
    read: false,
    actor: 'Marcus Rivera',
  },
  {
    id: '3',
    title: 'Performance review due',
    body: 'Annual performance review for 3 direct reports is due by end of this week.',
    category: 'performance',
    timestamp: new Date(now.getTime() - 2 * 60 * 60 * 1000),
    read: false,
  },
  {
    id: '4',
    title: 'Payroll processed',
    body: 'March 2026 payroll has been processed successfully. 103 employees paid.',
    category: 'payroll',
    timestamp: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    read: true,
  },
  {
    id: '5',
    title: 'Training enrollment open',
    body: 'New course available: "Leadership Fundamentals Q2". Enroll before Mar 20.',
    category: 'training',
    timestamp: new Date(now.getTime() - 8 * 60 * 60 * 1000),
    read: true,
  },
  {
    id: '6',
    title: 'Document requires signature',
    body: 'Updated Employee Handbook 2026 needs your acknowledgement.',
    category: 'system',
    timestamp: new Date(now.getTime() - 26 * 60 * 60 * 1000),
    read: true,
    actionUrl: '/documents',
  },
  {
    id: '7',
    title: 'Time off request pending',
    body: 'Alice Johnson requested sick leave for Mar 12. Awaiting your approval.',
    category: 'timeoff',
    timestamp: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    read: true,
    actor: 'Alice Johnson',
  },
  {
    id: '8',
    title: 'Benefits enrollment closing',
    body: "Open enrollment period ends Mar 31. 12 employees haven't enrolled yet.",
    category: 'hr',
    timestamp: new Date(now.getTime() - 48 * 60 * 60 * 1000),
    read: true,
  },
])

const activeFilter = ref<'all' | 'unread'>('all')
const isOpen = ref(false)

const unreadCount = computed(() => notifications.value.filter((n) => !n.read).length)

const filteredNotifications = computed(() => {
  if (activeFilter.value === 'unread') {
    return notifications.value.filter((n) => !n.read)
  }
  return notifications.value
})

const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())

const groupedNotifications = computed(() => {
  const today = filteredNotifications.value.filter((n) => n.timestamp >= todayStart)
  const earlier = filteredNotifications.value.filter((n) => n.timestamp < todayStart)
  return { today, earlier }
})

function formatTime(date: Date): string {
  const diffMs = now.getTime() - date.getTime()
  const diffMin = Math.floor(diffMs / 60000)
  if (diffMin < 1) return 'Just now'
  if (diffMin < 60) return `${diffMin}m ago`
  const diffHrs = Math.floor(diffMin / 60)
  if (diffHrs < 24) return `${diffHrs}h ago`
  const diffDays = Math.floor(diffHrs / 24)
  if (diffDays === 1) return 'Yesterday'
  return `${diffDays}d ago`
}

function markAsRead(id: string) {
  const n = notifications.value.find((n) => n.id === id)
  if (n) n.read = true
}

function markAllRead() {
  notifications.value.forEach((n) => (n.read = true))
}

function dismissNotification(id: string) {
  notifications.value = notifications.value.filter((n) => n.id !== id)
}
</script>

<template>
  <Popover v-model:open="isOpen">
    <PopoverTrigger as-child>
      <slot :unread-count="unreadCount" />
    </PopoverTrigger>
    <PopoverContent
      align="end"
      :side-offset="8"
      class="notification-panel w-[380px] overflow-hidden rounded-lg border p-0 shadow-xl"
    >
      <div class="flex items-center justify-between px-4 pt-4 pb-3">
        <div class="flex items-center gap-2.5">
          <h3 class="text-sm font-semibold tracking-tight">Notifications</h3>
          <Badge
            v-if="unreadCount > 0"
            class="bg-primary/15 text-primary hover:bg-primary/15 h-5 rounded-full px-1.5 text-[10px] font-bold tabular-nums"
          >
            {{ unreadCount }}
          </Badge>
        </div>
        <Button
          v-if="unreadCount > 0"
          variant="ghost"
          size="sm"
          class="text-muted-foreground hover:text-foreground -mr-1 h-7 px-2 text-xs"
          @click="markAllRead"
        >
          Mark all read
        </Button>
      </div>

      <div class="border-b px-4">
        <div class="flex gap-0">
          <button
            :class="[
              'relative px-3 pb-2.5 text-xs font-medium transition-colors',
              activeFilter === 'all' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
            ]"
            @click="activeFilter = 'all'"
          >
            All
            <span
              v-if="activeFilter === 'all'"
              class="bg-primary absolute right-0 bottom-0 left-0 h-[2px] rounded-t-full"
            />
          </button>
          <button
            :class="[
              'relative px-3 pb-2.5 text-xs font-medium transition-colors',
              activeFilter === 'unread' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
            ]"
            @click="activeFilter = 'unread'"
          >
            Unread
            <span
              v-if="activeFilter === 'unread'"
              class="bg-primary absolute right-0 bottom-0 left-0 h-[2px] rounded-t-full"
            />
          </button>
        </div>
      </div>

      <div class="notification-scroll max-h-[420px] overflow-y-auto">
        <div
          v-if="filteredNotifications.length === 0"
          class="flex flex-col items-center justify-center py-14 text-center"
        >
          <div class="bg-muted mb-3 rounded-full p-3">
            <BellOff class="text-muted-foreground size-5" />
          </div>
          <p class="text-sm font-medium">All caught up</p>
          <p class="text-muted-foreground mt-0.5 text-xs">
            No {{ activeFilter === 'unread' ? 'unread ' : '' }}notifications
          </p>
        </div>

        <template v-else>
          <template v-if="groupedNotifications.today.length > 0">
            <div class="px-4 pt-3 pb-1">
              <span class="text-muted-foreground text-[10px] font-semibold tracking-widest uppercase">Today</span>
            </div>
            <div
              v-for="(n, index) in groupedNotifications.today"
              :key="n.id"
              class="notification-item group relative"
              :style="{ animationDelay: `${index * 30}ms` }"
              @click="markAsRead(n.id)"
            >
              <div
                :class="[
                  'absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full transition-opacity',
                  !n.read ? categoryConfig[n.category].accent : 'opacity-0',
                ]"
              />

              <div class="flex gap-3 px-4 py-3">
                <div
                  :class="[
                    'mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg',
                    categoryConfig[n.category].bg,
                  ]"
                >
                  <component :is="categoryConfig[n.category].icon" class="size-4" />
                </div>

                <div class="min-w-0 flex-1">
                  <div class="flex items-start justify-between gap-2">
                    <p :class="['text-[13px] leading-snug', !n.read ? 'font-semibold' : 'font-medium']">
                      {{ n.title }}
                    </p>
                    <div class="flex shrink-0 items-center gap-1.5">
                      <span class="text-muted-foreground text-[10px] whitespace-nowrap tabular-nums">
                        {{ formatTime(n.timestamp) }}
                      </span>
                      <span v-if="!n.read" class="bg-primary size-1.5 shrink-0 rounded-full" />
                    </div>
                  </div>
                  <p class="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">
                    {{ n.body }}
                  </p>
                </div>

                <button
                  class="text-muted-foreground hover:text-foreground mt-0.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
                  title="Dismiss"
                  @click.stop="dismissNotification(n.id)"
                >
                  <X class="size-3.5" />
                </button>
              </div>
            </div>
          </template>

          <template v-if="groupedNotifications.earlier.length > 0">
            <div class="px-4 pt-3 pb-1">
              <span class="text-muted-foreground text-[10px] font-semibold tracking-widest uppercase">Earlier</span>
            </div>
            <div
              v-for="(n, index) in groupedNotifications.earlier"
              :key="n.id"
              class="notification-item group relative"
              :style="{ animationDelay: `${(groupedNotifications.today.length + index) * 30}ms` }"
              @click="markAsRead(n.id)"
            >
              <div
                :class="[
                  'absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full transition-opacity',
                  !n.read ? categoryConfig[n.category].accent : 'opacity-0',
                ]"
              />

              <div class="flex gap-3 px-4 py-3">
                <div
                  :class="[
                    'mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg',
                    categoryConfig[n.category].bg,
                  ]"
                >
                  <component :is="categoryConfig[n.category].icon" class="size-4" />
                </div>

                <div class="min-w-0 flex-1">
                  <div class="flex items-start justify-between gap-2">
                    <p :class="['text-[13px] leading-snug', !n.read ? 'font-semibold' : 'font-medium']">
                      {{ n.title }}
                    </p>
                    <div class="flex shrink-0 items-center gap-1.5">
                      <span class="text-muted-foreground text-[10px] whitespace-nowrap tabular-nums">
                        {{ formatTime(n.timestamp) }}
                      </span>
                      <span v-if="!n.read" class="bg-primary size-1.5 shrink-0 rounded-full" />
                    </div>
                  </div>
                  <p class="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">
                    {{ n.body }}
                  </p>
                </div>

                <button
                  class="text-muted-foreground hover:text-foreground mt-0.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
                  title="Dismiss"
                  @click.stop="dismissNotification(n.id)"
                >
                  <X class="size-3.5" />
                </button>
              </div>
            </div>
          </template>
        </template>
      </div>

      <div class="border-t px-4 py-2.5">
        <a
          href="#"
          class="text-muted-foreground hover:text-foreground flex items-center justify-center gap-1.5 text-xs transition-colors"
          @click="isOpen = false"
        >
          <Archive class="size-3" />
          View all notifications
        </a>
      </div>
    </PopoverContent>
  </Popover>
</template>

<style scoped>
.notification-panel {
  --scrollbar-size: 4px;
}

.notification-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
}

.notification-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.notification-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.notification-item {
  cursor: pointer;
  transition: background-color 0.15s ease;
  animation: notif-slide-in 0.25s ease both;
}

.notification-item:hover {
  background-color: var(--muted);
}

@keyframes notif-slide-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-scroll {
  position: relative;
}

.notification-scroll::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 24px;
  margin-top: -24px;
  background: linear-gradient(to bottom, transparent, var(--popover));
  pointer-events: none;
}
</style>

```

## number-field

- type: `registry:ui`
- description: Numeric input with stepper buttons, min/max bounds, step size, and decimal precision. Use for quantities, prices, and any field that should be a number rather than free text.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/number-field/NumberField.vue`

```vue
<script setup lang="ts">
import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import { provideNumberFieldContext } from './NumberFieldContext'

export type NumberFieldSize = 'small' | 'middle' | 'large'
export type NumberFieldStatus = 'error' | 'warning'
export type NumberFieldControlsPosition = 'default' | 'right'

// Use intersection in defineProps<> instead of `interface Props extends`:
// Vue 3.5+'s SFC compiler has its own mini-resolver for the `extends`
// clause that bails when the external package's package.json lacks
// `exports.types` (true for reka-ui). The defineProps<T & U>() path
// delegates type extraction to the project's installed `typescript`
// package, which is shipped by init.json -- this works reliably.
interface ExtraProps {
  class?: HTMLAttributes['class']
  size?: NumberFieldSize
  status?: NumberFieldStatus
  controlsPosition?: NumberFieldControlsPosition
  keyboard?: boolean
  precision?: number
  formatter?: (value: number | undefined) => string
  parser?: (displayValue: string) => number | undefined
  prefix?: string
  suffix?: string
}

const props = withDefaults(defineProps<NumberFieldRootProps & ExtraProps>(), {
  step: 1,
  keyboard: true,
  controlsPosition: 'default',
})

const emits = defineEmits<NumberFieldRootEmits>()

const delegatedProps = reactiveOmit(
  props,
  'class',
  'size',
  'status',
  'controlsPosition',
  'keyboard',
  'precision',
  'formatter',
  'parser',
  'prefix',
  'suffix',
  'formatOptions',
)

const formatOptions = computed(() => {
  if (props.precision !== undefined) {
    return {
      ...props.formatOptions,
      minimumFractionDigits: props.precision,
      maximumFractionDigits: props.precision,
    }
  }
  return props.formatOptions
})

const forwarded = useForwardPropsEmits(delegatedProps, emits)

provideNumberFieldContext({
  size: computed(() => props.size ?? 'middle'),
  status: computed(() => props.status),
  controlsPosition: computed(() => props.controlsPosition),
  keyboard: computed(() => props.keyboard),
  formatter: computed(() => props.formatter),
  parser: computed(() => props.parser),
  prefix: computed(() => props.prefix),
  suffix: computed(() => props.suffix),
})
</script>

<template>
  <NumberFieldRoot
    v-slot="slotProps"
    v-bind="forwarded"
    :format-options="formatOptions"
    :class="cn('inline-flex', props.class)"
  >
    <slot v-bind="slotProps" />
  </NumberFieldRoot>
</template>

```

### `packages/registry-vue/components/number-field/NumberFieldContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { injectNumberFieldContext } from './NumberFieldContext'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const uiContext = injectNumberFieldContext()

const isRight = computed(() => uiContext.controlsPosition.value === 'right')
</script>

<template>
  <div
    :class="
      cn(
        'relative',
        isRight &&
          'border-input focus-within:ring-ring inline-grid grid-cols-[1fr_auto] grid-rows-[1fr_1fr] items-stretch overflow-hidden rounded-md border focus-within:ring-1',
        !isRight &&
          '[&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5 [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5',
        props.class,
      )
    "
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/number-field/NumberFieldContext.ts`

```ts
import type { InjectionKey, Ref } from 'vue'
import { inject, provide, ref } from 'vue'

export type NumberFieldSize = 'small' | 'middle' | 'large'
export type NumberFieldStatus = 'error' | 'warning'
export type NumberFieldControlsPosition = 'default' | 'right'

export interface NumberFieldContext {
  size: Ref<NumberFieldSize>
  status: Ref<NumberFieldStatus | undefined>
  controlsPosition: Ref<NumberFieldControlsPosition>
  keyboard: Ref<boolean>
  formatter: Ref<((value: number | undefined) => string) | undefined>
  parser: Ref<((displayValue: string) => number | undefined) | undefined>
  prefix: Ref<string | undefined>
  suffix: Ref<string | undefined>
}

export const NumberFieldContextKey: InjectionKey<NumberFieldContext> = Symbol('NumberFieldContext')

export function provideNumberFieldContext(context: NumberFieldContext) {
  provide(NumberFieldContextKey, context)
}

export function injectNumberFieldContext(): NumberFieldContext {
  return inject(NumberFieldContextKey, {
    size: ref('middle'),
    status: ref(undefined),
    controlsPosition: ref('default'),
    keyboard: ref(true),
    formatter: ref(undefined),
    parser: ref(undefined),
    prefix: ref(undefined),
    suffix: ref(undefined),
  })
}

```

### `packages/registry-vue/components/number-field/NumberFieldDecrement.vue`

```vue
<script setup lang="ts">
import type { NumberFieldDecrementProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Minus } from 'lucide-vue-next'
import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { injectNumberFieldContext } from './NumberFieldContext'

const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardProps(delegatedProps)

const uiContext = injectNumberFieldContext()

const isRight = computed(() => uiContext.controlsPosition.value === 'right')

const iconSize = computed(() => {
  switch (uiContext.size.value) {
    case 'small':
      return 'h-3 w-3'
    case 'large':
      return 'h-5 w-5'
    default:
      return 'h-4 w-4'
  }
})
</script>

<template>
  <NumberFieldDecrement
    data-uipkge
    data-slot="decrement"
    v-bind="forwarded"
    :class="
      cn(
        'focus-visible:ring-ring inline-flex shrink-0 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30',
        !isRight && 'absolute top-1/2 left-0 -translate-y-1/2',
        !isRight && uiContext.size.value === 'small' && 'p-1.5',
        !isRight && uiContext.size.value === 'middle' && 'p-3',
        !isRight && uiContext.size.value === 'large' && 'p-4',
        isRight && 'hover:bg-accent col-start-2 row-start-2 h-full w-auto rounded-none border-t border-l p-0 px-2',
        props.class,
      )
    "
  >
    <slot>
      <Minus :class="iconSize" aria-hidden="true" />
    </slot>
  </NumberFieldDecrement>
</template>

```

### `packages/registry-vue/components/number-field/NumberFieldIncrement.vue`

```vue
<script setup lang="ts">
import type { NumberFieldIncrementProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Plus } from 'lucide-vue-next'
import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { injectNumberFieldContext } from './NumberFieldContext'

const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardProps(delegatedProps)

const uiContext = injectNumberFieldContext()

const isRight = computed(() => uiContext.controlsPosition.value === 'right')

const iconSize = computed(() => {
  switch (uiContext.size.value) {
    case 'small':
      return 'h-3 w-3'
    case 'large':
      return 'h-5 w-5'
    default:
      return 'h-4 w-4'
  }
})
</script>

<template>
  <NumberFieldIncrement
    data-uipkge
    data-slot="increment"
    v-bind="forwarded"
    :class="
      cn(
        'focus-visible:ring-ring inline-flex shrink-0 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30',
        !isRight && 'absolute top-1/2 right-0 -translate-y-1/2',
        !isRight && uiContext.size.value === 'small' && 'p-1.5',
        !isRight && uiContext.size.value === 'middle' && 'p-3',
        !isRight && uiContext.size.value === 'large' && 'p-4',
        isRight && 'hover:bg-accent col-start-2 row-start-1 h-full w-auto rounded-none border-l p-0 px-2',
        props.class,
      )
    "
  >
    <slot>
      <Plus :class="iconSize" aria-hidden="true" />
    </slot>
  </NumberFieldIncrement>
</template>

```

### `packages/registry-vue/components/number-field/NumberFieldInput.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { injectNumberFieldRootContext } from 'reka-ui'
import { cn } from '@/lib/utils'
import { injectNumberFieldContext } from './NumberFieldContext'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const rootContext = injectNumberFieldRootContext()
const uiContext = injectNumberFieldContext()

const inputRef = ref<HTMLInputElement>()

onMounted(() => {
  if (inputRef.value) {
    rootContext.onInputElement(inputRef.value)
  }
})

const displayValue = ref('')
const isUserTyping = ref(false)

function updateDisplayValue(val: number | undefined) {
  const formatter = uiContext.formatter.value
  if (formatter) {
    displayValue.value = formatter(val)
  } else {
    displayValue.value = rootContext.textValue.value
  }
}

watch(
  () => rootContext.modelValue.value,
  (val) => {
    if (!isUserTyping.value) {
      updateDisplayValue(val)
    }
  },
  { immediate: true },
)

watch(
  () => rootContext.textValue.value,
  (val) => {
    if (!isUserTyping.value && !uiContext.formatter.value) {
      displayValue.value = val
    }
  },
)

function handleFocus() {
  isUserTyping.value = true
}

function handleInput(event: Event) {
  displayValue.value = (event.target as HTMLInputElement).value
}

function commitValue() {
  isUserTyping.value = false
  const raw = displayValue.value.trim()

  if (raw === '') {
    rootContext.modelValue.value = undefined
  } else {
    const parser = uiContext.parser.value
    let num: number | undefined
    if (parser) {
      num = parser(raw)
    } else {
      num = Number(raw)
    }

    if (num !== undefined && !Number.isNaN(num)) {
      rootContext.applyInputValue(String(num))
    }
  }

  nextTick(() => {
    updateDisplayValue(rootContext.modelValue.value)
  })
}

function handleBlur() {
  commitValue()
}

function handleKeydown(event: KeyboardEvent) {
  if (event.key === 'ArrowUp') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleIncrease()
    }
  } else if (event.key === 'ArrowDown') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleDecrease()
    }
  } else if (event.key === 'PageUp') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleIncrease(10)
    }
  } else if (event.key === 'PageDown') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleDecrease(10)
    }
  } else if (event.key === 'Home') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleMinMaxValue('min')
    }
  } else if (event.key === 'End') {
    if (uiContext.keyboard.value) {
      event.preventDefault()
      rootContext.handleMinMaxValue('max')
    }
  } else if (event.key === 'Enter') {
    commitValue()
  }
}

function handleWheel(event: WheelEvent) {
  if (rootContext.disableWheelChange.value) return
  if (event.target !== document.activeElement) return
  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
  event.preventDefault()
  if (event.deltaY > 0) {
    rootContext.invertWheelChange.value ? rootContext.handleDecrease() : rootContext.handleIncrease()
  } else {
    rootContext.invertWheelChange.value ? rootContext.handleIncrease() : rootContext.handleDecrease()
  }
}

const isRight = computed(() => uiContext.controlsPosition.value === 'right')

const sizeClasses = computed(() => {
  switch (uiContext.size.value) {
    case 'small':
      return 'h-7 text-xs px-2 py-0.5'
    case 'large':
      return 'h-11 text-base px-4 py-2'
    default:
      return 'h-9 text-sm px-3 py-1'
  }
})

const statusClasses = computed(() => {
  switch (uiContext.status.value) {
    case 'error':
      return 'border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 aria-invalid:border-destructive'
    case 'warning':
      return 'border-[var(--warning)] focus-visible:ring-[var(--warning)]/20'
    default:
      return ''
  }
})
</script>

<template>
  <div data-uipkge data-slot="input" :class="cn('relative flex-1', isRight && 'col-span-1 row-span-2', props.class)">
    <span
      v-if="uiContext.prefix.value"
      class="text-muted-foreground pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-sm"
    >
      {{ uiContext.prefix.value }}
    </span>
    <input
      ref="inputRef"
      v-model="displayValue"
      type="text"
      role="spinbutton"
      :aria-valuenow="rootContext.modelValue.value"
      :aria-valuemin="rootContext.min.value"
      :aria-valuemax="rootContext.max.value"
      :inputmode="rootContext.inputMode.value"
      :disabled="rootContext.disabled.value"
      :readonly="rootContext.readonly.value"
      :aria-invalid="uiContext.status.value === 'error' ? true : undefined"
      autocomplete="off"
      autocorrect="off"
      spellcheck="false"
      aria-roledescription="Number field"
      @focus="handleFocus"
      @input="handleInput"
      @blur="handleBlur"
      @keydown="handleKeydown"
      @wheel="handleWheel"
      :class="
        cn(
          'placeholder:text-muted-foreground w-full bg-transparent text-center shadow-sm transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50',
          !isRight && 'border-input focus-visible:ring-ring rounded-md border focus-visible:ring-1',
          isRight && 'rounded-none border-0 focus-visible:ring-0',
          uiContext.prefix.value && 'pl-6',
          uiContext.suffix.value && 'pr-6',
          sizeClasses,
          !isRight && statusClasses,
        )
      "
    />
    <span
      v-if="uiContext.suffix.value"
      class="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm"
    >
      {{ uiContext.suffix.value }}
    </span>
  </div>
</template>

```

### `packages/registry-vue/components/number-field/index.ts`

```ts
export { default as NumberField } from './NumberField.vue'
export { default as NumberFieldContent } from './NumberFieldContent.vue'
export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
export { default as NumberFieldInput } from './NumberFieldInput.vue'
export { injectNumberFieldContext, provideNumberFieldContext } from './NumberFieldContext'
export type { NumberFieldControlsPosition, NumberFieldSize, NumberFieldStatus } from './NumberField.vue'

```

## organization-chart

- type: `registry:ui`
- description: Organization hierarchy visualization with a tree of nodes (name, title, avatar). Expand/collapse branches, top-down or left-right direction, connector lines, optional zoom/pan controls, node click events, and a customizable node slot.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/organization-chart/OrganizationChart.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { cn } from '@/lib/utils'
import { organizationChartVariants } from './organization-chart.variants'
import OrgChartNode from './OrgChartNode.vue'
import type { OrgNode } from './types'

interface Props {
  data: OrgNode
  direction?: 'top-down' | 'left-right'
  defaultExpanded?: boolean
  showConnectors?: boolean
  zoomable?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  direction: 'top-down',
  defaultExpanded: true,
  showConnectors: true,
  zoomable: false,
})

const emit = defineEmits<{
  nodeClick: [node: OrgNode]
  toggle: [node: OrgNode, expanded: boolean]
}>()

const expanded = ref<Set<string>>(new Set())

function collectIds(node: OrgNode, acc: string[] = []): string[] {
  acc.push(node.id)
  if (node.children) for (const c of node.children) collectIds(c, acc)
  return acc
}

function defaultExpand() {
  if (props.defaultExpanded) {
    expanded.value = new Set(collectIds(props.data))
  } else {
    expanded.value = new Set([props.data.id])
  }
}

watch(
  () => [props.data, props.defaultExpanded],
  () => defaultExpand(),
  { immediate: true },
)

function toggleNode(node: OrgNode) {
  const next = new Set(expanded.value)
  if (next.has(node.id)) next.delete(node.id)
  else next.add(node.id)
  expanded.value = next
  emit('toggle', node, next.has(node.id))
}

function isExpanded(node: OrgNode): boolean {
  return expanded.value.has(node.id)
}

function expandAll() {
  expanded.value = new Set(collectIds(props.data))
}

function collapseAll() {
  expanded.value = new Set([props.data.id])
}

const zoom = ref(1)
function zoomIn() {
  zoom.value = Math.min(2, zoom.value + 0.1)
}
function zoomOut() {
  zoom.value = Math.max(0.5, zoom.value - 0.1)
}
function resetZoom() {
  zoom.value = 1
}

const containerStyle = computed(() => ({
  transform: `scale(${zoom.value})`,
  transformOrigin: 'top center',
}))

defineExpose({ expandAll, collapseAll, zoomIn, zoomOut, resetZoom })
</script>

<template>
  <div
    data-uipkge
    data-slot="organization-chart"
    :data-direction="direction"
    :class="cn(organizationChartVariants(), props.class)"
  >
    <div v-if="zoomable" class="border-border flex items-center gap-2 border-b px-3 py-2">
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md text-sm"
        aria-label="Zoom out"
        @click="zoomOut"
      >
        −
      </button>
      <span class="text-muted-foreground w-12 text-center text-xs tabular-nums">{{ Math.round(zoom * 100) }}%</span>
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md text-sm"
        aria-label="Zoom in"
        @click="zoomIn"
      >
        +
      </button>
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground hover:bg-accent ml-1 rounded-md px-2 py-1 text-xs"
        aria-label="Reset zoom"
        @click="resetZoom"
      >
        Reset
      </button>
      <div class="ml-auto flex gap-1">
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md px-2 py-1 text-xs"
          @click="expandAll"
        >
          Expand all
        </button>
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md px-2 py-1 text-xs"
          @click="collapseAll"
        >
          Collapse all
        </button>
      </div>
    </div>
    <div class="overflow-auto p-4">
      <div :style="containerStyle" class="transition-transform duration-200">
        <OrgChartNode
          :node="data"
          :depth="0"
          :is-root="true"
          :direction="direction"
          :show-connectors="showConnectors"
          :is-expanded="isExpanded"
          :toggle="toggleNode"
          @node-click="(n) => emit('nodeClick', n)"
        >
          <template #node="{ node }">
            <slot name="node" :node="node" />
          </template>
        </OrgChartNode>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/organization-chart/OrgChartNode.vue`

```vue
<script setup lang="ts">
import { computed, defineAsyncComponent } from 'vue'
import { ChevronDown, ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { OrgNode } from './types'

// Self-reference for recursive rendering
const OrgChartNode = defineAsyncComponent(() => import('./OrgChartNode.vue'))

interface Props {
  node: OrgNode
  depth: number
  isRoot?: boolean
  direction?: 'top-down' | 'left-right'
  showConnectors?: boolean
  isExpanded: (node: OrgNode) => boolean
  toggle: (node: OrgNode) => void
}

const props = withDefaults(defineProps<Props>(), {
  isRoot: false,
  direction: 'top-down',
  showConnectors: true,
})

const emit = defineEmits<{
  nodeClick: [node: OrgNode]
}>()

const open = computed(() => props.isExpanded(props.node))
const hasChildren = computed(() => !!props.node.children?.length)
const isHorizontal = computed(() => props.direction === 'left-right')
const childCount = computed(() => props.node.children?.length ?? 0)
const isOnlyChild = computed(() => childCount.value <= 1)

function onClick() {
  emit('nodeClick', props.node)
}

function onToggle(e: Event) {
  e.stopPropagation()
  if (hasChildren.value) props.toggle(props.node)
}

function initials(name: string): string {
  return name.split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase()
}
</script>

<template>
  <!-- ══ Top-down (vertical) layout ══ -->
  <div v-if="!isHorizontal" class="org-v" :data-root="isRoot ? '' : undefined">
    <!-- Node card -->
    <div class="org-v-card">
      <div
        class="bg-card hover:bg-accent/50 border-border group relative flex w-52 cursor-pointer flex-col rounded-lg border p-3 shadow-xs transition-colors"
        :class="isRoot ? 'ring-primary/20 ring-2' : ''"
        @click="onClick"
      >
        <div class="flex items-center gap-2.5">
          <img
            v-if="node.avatar"
            :src="node.avatar"
            :alt="node.name"
            class="border-border size-10 shrink-0 rounded-full border object-cover"
          />
          <div
            v-else
            class="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
          >
            {{ initials(node.name) }}
          </div>
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-semibold">{{ node.name }}</p>
            <p v-if="node.title" class="text-muted-foreground truncate text-xs">{{ node.title }}</p>
          </div>
          <button
            v-if="hasChildren"
            type="button"
            class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-5 shrink-0 items-center justify-center rounded"
            :aria-expanded="open"
            :aria-label="open ? 'Collapse' : 'Expand'"
            @click="onToggle"
          >
            <ChevronDown v-if="open" class="size-3.5" />
            <ChevronRight v-else class="size-3.5" />
          </button>
        </div>
        <slot name="node" :node="node" />
      </div>
    </div>

    <!-- Children -->
    <div v-if="hasChildren && open" class="org-v-children">
      <!-- Vertical line from parent to horizontal sibling bar -->
      <div v-if="showConnectors" class="org-v-line-down" />
      <div class="org-v-children-row" :data-single="isOnlyChild ? '' : undefined">
        <!-- Horizontal bar connecting siblings (only for 2+ children) -->
        <div v-if="showConnectors && !isOnlyChild" class="org-v-line-across" />
        <OrgChartNode
          v-for="child in node.children"
          :key="child.id"
          :node="child"
          :depth="depth + 1"
          :is-root="false"
          :direction="direction"
          :show-connectors="showConnectors"
          :is-expanded="isExpanded"
          :toggle="toggle"
          @node-click="(n) => emit('nodeClick', n)"
        >
          <template #node="{ node: n }">
            <slot name="node" :node="n" />
          </template>
        </OrgChartNode>
      </div>
    </div>
  </div>

  <!-- ══ Left-right (horizontal) layout ══ -->
  <div v-else class="org-h" :data-root="isRoot ? '' : undefined">
    <div class="flex items-start">
      <!-- Node card -->
      <div class="org-h-card">
        <div
          class="bg-card hover:bg-accent/50 border-border group relative flex w-52 cursor-pointer flex-col rounded-lg border p-3 shadow-xs transition-colors"
          :class="isRoot ? 'ring-primary/20 ring-2' : ''"
          @click="onClick"
        >
          <div class="flex items-center gap-2.5">
            <img
              v-if="node.avatar"
              :src="node.avatar"
              :alt="node.name"
              class="border-border size-10 shrink-0 rounded-full border object-cover"
            />
            <div
              v-else
              class="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-semibold"
            >
              {{ initials(node.name) }}
            </div>
            <div class="min-w-0 flex-1">
              <p class="truncate text-sm font-semibold">{{ node.name }}</p>
              <p v-if="node.title" class="text-muted-foreground truncate text-xs">{{ node.title }}</p>
            </div>
            <button
              v-if="hasChildren"
              type="button"
              class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-5 shrink-0 items-center justify-center rounded"
              @click="onToggle"
            >
              <ChevronDown v-if="open" class="size-3.5" />
              <ChevronRight v-else class="size-3.5" />
            </button>
          </div>
          <slot name="node" :node="node" />
        </div>
      </div>

      <!-- Children -->
      <template v-if="hasChildren && open">
        <div v-if="showConnectors" class="org-h-line-right" />
        <div class="org-h-children">
          <OrgChartNode
            v-for="child in node.children"
            :key="child.id"
            :node="child"
            :depth="depth + 1"
            :is-root="false"
            :direction="direction"
            :show-connectors="showConnectors"
            :is-expanded="isExpanded"
            :toggle="toggle"
            @node-click="(n) => emit('nodeClick', n)"
          >
            <template #node="{ node: n }">
              <slot name="node" :node="n" />
            </template>
          </OrgChartNode>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
/* ══ Vertical (top-down) layout ══ */
.org-v {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line from horizontal bar up to each child card */
.org-v:not([data-root]) .org-v-card {
  position: relative;
  padding-top: 20px;
}
.org-v:not([data-root]) .org-v-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 20px;
  background: var(--color-border, hsl(var(--border)));
}

.org-v-children {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line from parent down to the sibling bar */
.org-v-line-down {
  width: 1px;
  height: 20px;
  background: var(--color-border, hsl(var(--border)));
}

.org-v-children-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  position: relative;
  padding-top: 20px;
}

/* Horizontal bar: spans from the center of the first child to the center
   of the last child. We use a full-width bar with the first/last child
   vertical lines connecting to it. The bar itself is positioned using
   the half-width of the first and last cards (w-52 = 208px, half = 104px). */
.org-v-line-across {
  position: absolute;
  top: 0;
  left: 104px; /* half of w-52 (208px) — center of first child */
  right: 104px; /* half of w-52 — center of last child */
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
}

/* When single child, no horizontal bar needed — just the vertical line */
.org-v-children-row[data-single] .org-v-line-across {
  display: none;
}

/* ══ Horizontal (left-right) layout ══ */
.org-h {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Horizontal line from parent to children column */
.org-h-line-right {
  width: 20px;
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
  margin-top: 40px;
  flex-shrink: 0;
}

.org-h-children {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Vertical line connecting siblings in horizontal mode */
.org-h-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--color-border, hsl(var(--border)));
}

/* Horizontal line from vertical bar to each child */
.org-h:not([data-root]) .org-h-card {
  position: relative;
  padding-left: 20px;
}
.org-h:not([data-root]) .org-h-card::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
}
</style>

```

### `packages/registry-vue/components/organization-chart/organization-chart.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const organizationChartVariants = cva('bg-background rounded-lg border')

export type OrganizationChartVariants = VariantProps<typeof organizationChartVariants>

```

### `packages/registry-vue/components/organization-chart/types.ts`

```ts
export interface OrgNode {
  id: string
  name: string
  title?: string
  avatar?: string
  department?: string
  children?: OrgNode[]
  [key: string]: unknown
}

```

### `packages/registry-vue/components/organization-chart/index.ts`

```ts
export { default as OrganizationChart } from './OrganizationChart.vue'
export { default as OrgChartNode } from './OrgChartNode.vue'
export { organizationChartVariants, type OrganizationChartVariants } from './organization-chart.variants'
export type { OrgNode } from './types'

```

## overlay-scroll

- type: `registry:ui`
- description: Slack-style overlay scrollbar. Hides the native scrollbar so the scrolled content uses the full container width (no gutter reservation), then draws a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll via Pointer Events covers mouse, touch, and pen. Vertical only. The component does not enforce a height — give it a bounded height via the parent (`flex-1 min-h-0` in a flex column, or a fixed `h-*` / `max-h-*`).

### `packages/registry-vue/components/overlay-scroll/OverlayScroll.vue`

```vue
<script setup lang="ts">
import { onMounted, onScopeDispose, ref } from 'vue'
import { cn } from '@/lib/utils'

// Slack-style overlay scrollbar. Hides the native scrollbar entirely so the
// scrolled content uses the full container width (no reservation), then draws
// a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll on the
// thumb is supported via Pointer Events (mouse + touch + pen). Vertical only.
//
// Give the component a bounded height via the parent (e.g. `flex-1 min-h-0`
// inside a flex column, or a fixed `h-*` / `max-h-*`). Without a bound it
// expands to its content and the thumb is hidden.
const props = withDefaults(
  defineProps<{
    // Thumb width in px when idle. Expands to ~2x on hover / drag.
    thumbWidth?: number
    // Right offset of the thumb from the inner edge, in px.
    thumbOffset?: number
    // ms of scroll inactivity before the thumb fades.
    idleHideMs?: number
    // Allow dragging the thumb to scroll.
    draggable?: boolean
    // Tailwind classes forwarded to the outer wrapper.
    class?: string
  }>(),
  {
    thumbWidth: 4,
    thumbOffset: 2,
    idleHideMs: 800,
    draggable: true,
  },
)

const scrollerEl = ref<HTMLElement | null>(null)
const thumbEl = ref<HTMLElement | null>(null)
const thumbHeight = ref(0)
const thumbTop = ref(0)
const showThumb = ref(false)
const isHovered = ref(false)
const isDragging = ref(false)
let hideTimer: ReturnType<typeof setTimeout> | null = null

const recompute = () => {
  const el = scrollerEl.value
  if (!el) return
  const ratio = el.clientHeight / el.scrollHeight
  if (!Number.isFinite(ratio) || ratio >= 1) {
    thumbHeight.value = 0
    return
  }
  thumbHeight.value = Math.max(24, el.clientHeight * ratio)
  const maxScroll = el.scrollHeight - el.clientHeight
  const maxThumb = el.clientHeight - thumbHeight.value
  thumbTop.value = maxScroll > 0 ? (el.scrollTop / maxScroll) * maxThumb : 0
}

const flashThumb = () => {
  if (thumbHeight.value === 0) return
  showThumb.value = true
  if (hideTimer) clearTimeout(hideTimer)
  hideTimer = setTimeout(() => {
    if (!isHovered.value && !isDragging.value) showThumb.value = false
  }, props.idleHideMs)
}

const onScroll = () => {
  recompute()
  flashThumb()
}

const onEnter = () => {
  isHovered.value = true
  recompute()
  if (thumbHeight.value > 0) showThumb.value = true
}

const onLeave = () => {
  isHovered.value = false
  if (isDragging.value) return
  if (hideTimer) clearTimeout(hideTimer)
  showThumb.value = false
}

// Pointer Events cover mouse + touch + pen on every modern browser
// (Chrome 55+, Firefox 59+, Safari 13+, Edge). setPointerCapture keeps the
// drag alive even if the pointer leaves the thumb, matching native feel.
let activePointerId: number | null = null
let dragStartY = 0
let dragStartScrollTop = 0

const onPointerMove = (e: PointerEvent) => {
  if (activePointerId !== e.pointerId) return
  const el = scrollerEl.value
  if (!el) return
  const maxScroll = el.scrollHeight - el.clientHeight
  const maxThumb = el.clientHeight - thumbHeight.value
  if (maxThumb <= 0) return
  const scrollRatio = maxScroll / maxThumb
  el.scrollTop = dragStartScrollTop + (e.clientY - dragStartY) * scrollRatio
}

const endDrag = (e?: PointerEvent) => {
  if (e && activePointerId !== e.pointerId) return
  isDragging.value = false
  if (thumbEl.value && activePointerId !== null) {
    try {
      thumbEl.value.releasePointerCapture(activePointerId)
    } catch {
      // pointer may already be released; ignore
    }
  }
  activePointerId = null
  thumbEl.value?.removeEventListener('pointermove', onPointerMove)
  thumbEl.value?.removeEventListener('pointerup', endDrag)
  thumbEl.value?.removeEventListener('pointercancel', endDrag)
  if (!isHovered.value) showThumb.value = false
}

const onThumbPointerDown = (e: PointerEvent) => {
  if (!props.draggable || !scrollerEl.value || !thumbEl.value) return
  if (e.pointerType === 'mouse' && e.button !== 0) return
  e.preventDefault()
  isDragging.value = true
  activePointerId = e.pointerId
  dragStartY = e.clientY
  dragStartScrollTop = scrollerEl.value.scrollTop
  thumbEl.value.setPointerCapture(e.pointerId)
  thumbEl.value.addEventListener('pointermove', onPointerMove)
  thumbEl.value.addEventListener('pointerup', endDrag)
  thumbEl.value.addEventListener('pointercancel', endDrag)
}

let resizeObserver: ResizeObserver | null = null
let mutationObserver: MutationObserver | null = null

onMounted(() => {
  recompute()
  if (!scrollerEl.value) return

  resizeObserver = new ResizeObserver(recompute)
  resizeObserver.observe(scrollerEl.value)

  const inner = scrollerEl.value.firstElementChild as HTMLElement | null
  if (inner) {
    resizeObserver.observe(inner)
    mutationObserver = new MutationObserver(recompute)
    mutationObserver.observe(inner, { childList: true, subtree: true })
  }
})

onScopeDispose(() => {
  resizeObserver?.disconnect()
  mutationObserver?.disconnect()
  if (hideTimer) clearTimeout(hideTimer)
  endDrag()
})

defineExpose({
  // Underlying scroller DOM element; call .scrollTo() on it from a parent.
  scrollerEl,
  // Force thumb recalc after a non-DOM size change.
  recompute,
})
</script>

<template>
  <div
    data-uipkge
    data-slot="overlay-scroll"
    :class="cn('overlay-scroll relative', props.class)"
    @mouseenter="onEnter"
    @mouseleave="onLeave"
  >
    <div
      ref="scrollerEl"
      data-slot="overlay-scroll-viewport"
      class="overlay-scroll__inner h-full overflow-x-hidden overflow-y-auto"
      @scroll="onScroll"
    >
      <slot />
    </div>
    <div
      ref="thumbEl"
      data-slot="overlay-scroll-thumb"
      class="overlay-scroll__thumb"
      :class="{
        'overlay-scroll__thumb--visible': showThumb,
        'overlay-scroll__thumb--dragging': isDragging,
        'overlay-scroll__thumb--draggable': draggable,
      }"
      :style="{
        width: `${thumbWidth}px`,
        /* Read the right offset from --ovs-thumb-right when an ancestor
           sets it (e.g. Sidebar pushes the thumb away from SidebarRail),
           otherwise fall back to the prop. Lets the same primitive sit
           flush in a card AND clear a rail without per-call config. */
        right: `var(--ovs-thumb-right, ${thumbOffset}px)`,
        height: `${thumbHeight}px`,
        transform: `translateY(${thumbTop}px)`,
      }"
      @pointerdown="onThumbPointerDown"
    />
  </div>
</template>

<style scoped>
.overlay-scroll__inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Stop wheel events from chaining to the page once the inner scroller
     hits its top/bottom. Without this, scrolling a long activity feed
     past its last item keeps scrolling the surrounding page — confusing
     when the inner region is a clearly bounded card. */
  overscroll-behavior: contain;
}
.overlay-scroll__inner::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.overlay-scroll__thumb {
  position: absolute;
  top: 0;
  border-radius: 2px;
  background: var(--muted-foreground);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    opacity 0.2s ease,
    background-color 0.15s,
    width 0.12s ease;
  will-change: transform, opacity;
}
.overlay-scroll__thumb--draggable {
  cursor: pointer;
}
.overlay-scroll__thumb--visible {
  opacity: 0.4;
  pointer-events: auto;
}
.overlay-scroll:hover .overlay-scroll__thumb--visible {
  opacity: 0.6;
}
.overlay-scroll:hover .overlay-scroll__thumb--draggable:hover {
  opacity: 0.8;
  width: 8px !important;
  background: var(--foreground);
}
.overlay-scroll__thumb--dragging {
  opacity: 1 !important;
  background: var(--foreground) !important;
  width: 8px !important;
}
</style>

```

### `packages/registry-vue/components/overlay-scroll/index.ts`

```ts
export { default as OverlayScroll } from './OverlayScroll.vue'

```

## page

- type: `registry:ui`
- description: Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes/*.vue` pages so every screen looks consistent.

### `packages/registry-vue/components/page/Page.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :class="cn('space-y-6', $props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/page/PageBody.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :class="cn('', $props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/page/PageHeader.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :class="cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', $props.class)">
    <div class="flex-1">
      <slot />
    </div>
    <slot name="actions" />
  </div>
</template>

```

### `packages/registry-vue/components/page/PageHeaderHeading.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  title: string
  description?: string
  class?: string
}>()
</script>

<template>
  <div :class="cn('', $props.class)">
    <h2 class="text-xl font-bold tracking-tight">{{ title }}</h2>
    <p v-if="description" class="text-muted-foreground mt-1 text-sm leading-relaxed">{{ description }}</p>
  </div>
</template>

```

### `packages/registry-vue/components/page/index.ts`

```ts
export { default as Page } from './Page.vue'
export { default as PageHeader } from './PageHeader.vue'
export { default as PageHeaderHeading } from './PageHeaderHeading.vue'
export { default as PageBody } from './PageBody.vue'

```

## pagination

- type: `registry:ui`
- description: Page-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/pagination/Pagination.vue`

```vue
<script setup lang="ts">
import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PaginationRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<PaginationRootProps & { class?: HTMLAttributes['class']; ariaLabel?: string }>()
const emits = defineEmits<PaginationRootEmits>()

const delegated = reactiveOmit(props, 'class')
const forwarded = useForwardPropsEmits(delegated, emits)
</script>

<template>
  <PaginationRoot
    v-slot="slotProps"
    as="nav"
    :aria-label="props.ariaLabel ?? 'Pagination'"
    data-uipkge
    data-slot="pagination"
    v-bind="forwarded"
    :class="cn('flex items-center gap-1', props.class)"
  >
    <slot v-bind="slotProps" />
  </PaginationRoot>
</template>

```

### `packages/registry-vue/components/pagination/PaginationEllipsis.vue`

```vue
<script setup lang="ts">
import { PaginationEllipsis as RkPaginationEllipsis } from 'reka-ui'
</script>
<template>
  <RkPaginationEllipsis aria-hidden="true"><slot /></RkPaginationEllipsis>
</template>

```

### `packages/registry-vue/components/pagination/PaginationFirst.vue`

```vue
<script setup lang="ts">
import { PaginationFirst as RkPaginationFirst } from 'reka-ui'
import { ChevronsLeft } from 'lucide-vue-next'
</script>
<template>
  <RkPaginationFirst aria-label="Go to first page"
    ><slot><ChevronsLeft class="size-4" aria-hidden="true" /></slot
  ></RkPaginationFirst>
</template>

```

### `packages/registry-vue/components/pagination/PaginationLast.vue`

```vue
<script setup lang="ts">
import { PaginationLast as RkPaginationLast } from 'reka-ui'
import { ChevronsRight } from 'lucide-vue-next'
</script>
<template>
  <RkPaginationLast aria-label="Go to last page"
    ><slot><ChevronsRight class="size-4" aria-hidden="true" /></slot
  ></RkPaginationLast>
</template>

```

### `packages/registry-vue/components/pagination/PaginationList.vue`

```vue
<script setup lang="ts">
import type { PaginationListProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { PaginationList as RkPaginationList } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <RkPaginationList
    v-slot="slotProps"
    data-uipkge
    data-slot="pagination-list"
    v-bind="props"
    :class="cn('flex items-center gap-1', props.class)"
  >
    <slot v-bind="slotProps" />
  </RkPaginationList>
</template>

```

### `packages/registry-vue/components/pagination/PaginationListItem.vue`

```vue
<script setup lang="ts">
import type { PaginationListItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PaginationListItem as RkPaginationListItem } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<PaginationListItemProps & { class?: HTMLAttributes['class'] }>()
const delegated = reactiveOmit(props, 'class')
</script>

<template>
  <RkPaginationListItem
    data-uipkge
    data-slot="pagination-list-item"
    v-bind="delegated"
    :class="cn('shrink-0', props.class)"
  >
    <slot />
  </RkPaginationListItem>
</template>

```

### `packages/registry-vue/components/pagination/PaginationNext.vue`

```vue
<script setup lang="ts">
import { PaginationNext as RkPaginationNext } from 'reka-ui'
import { ChevronRight } from 'lucide-vue-next'
</script>
<template>
  <RkPaginationNext aria-label="Go to next page"
    ><slot><ChevronRight class="size-4" aria-hidden="true" /></slot
  ></RkPaginationNext>
</template>

```

### `packages/registry-vue/components/pagination/PaginationPrev.vue`

```vue
<script setup lang="ts">
import { PaginationPrev as RkPaginationPrev } from 'reka-ui'
import { ChevronLeft } from 'lucide-vue-next'
</script>
<template>
  <RkPaginationPrev aria-label="Go to previous page"
    ><slot><ChevronLeft class="size-4" aria-hidden="true" /></slot
  ></RkPaginationPrev>
</template>

```

### `packages/registry-vue/components/pagination/index.ts`

```ts
export { default as Pagination } from './Pagination.vue'
export { default as PaginationList } from './PaginationList.vue'
export { default as PaginationListItem } from './PaginationListItem.vue'
export { default as PaginationFirst } from './PaginationFirst.vue'
export { default as PaginationPrev } from './PaginationPrev.vue'
export { default as PaginationNext } from './PaginationNext.vue'
export { default as PaginationLast } from './PaginationLast.vue'
export { default as PaginationEllipsis } from './PaginationEllipsis.vue'

```

## parallel-chart

- type: `registry:ui`
- description: Parallel coordinates wrapper around Apache ECharts. Plots high-dimensional rows as polylines across N axes — useful for spotting correlations and outlier clusters.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/parallel-chart/ParallelChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ParallelChart as EChartsParallelChart } from 'echarts/charts'
import { ParallelComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
} from '../useChartTheme'

use([CanvasRenderer, EChartsParallelChart, ParallelComponent, TooltipComponent, LegendComponent])

interface Axis {
  name: string
  /** Set explicitly for fixed scales, otherwise computed from data. */
  min?: number
  max?: number
}
interface Row {
  /** One value per axis, in the same order as `axes`. */
  values: number[]
  /** Optional name shown in the tooltip. */
  name?: string
  /** Optional series grouping (index → chart-N colour). */
  group?: number
}

interface Props {
  axes: Axis[]
  data: Row[]
  /** Optional group labels (shown in legend). */
  groups?: string[]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 360,
})

const mergedOption = computed(() => {
  // Build one series per group so the legend can toggle them.
  const groups = props.groups ?? ['series']
  const series = groups.map((name, gi) => ({
    name,
    type: 'parallel' as const,
    lineStyle: { width: 1, opacity: 0.6 },
    data: props.data
      .filter((r) => (typeof r.group === 'number' ? r.group === gi : gi === 0))
      .map((r) => ({ value: r.values, name: r.name })),
  }))

  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: props.groups?.length
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : undefined,
    parallelAxis: props.axes.map((a, dim) => ({
      dim,
      name: a.name,
      min: a.min,
      max: a.max,
      nameTextStyle: { fontSize: 11, color: chartTextColor.value },
      axisLine: { lineStyle: { color: chartAxisColor.value } },
      axisLabel: { color: chartTextColor.value, fontSize: 11 },
    })),
    parallel: {
      left: 36,
      right: 24,
      top: 36,
      bottom: props.groups?.length ? 36 : 24,
      parallelAxisDefault: { axisLine: { lineStyle: { color: chartAxisColor.value } } },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/parallel-chart/index.ts`

```ts
export { default as ParallelChart } from './ParallelChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## password-input

- type: `registry:ui`
- description: Password input with show/hide toggle (Eye/EyeOff) and optional strength meter (weak/fair/good/strong with colored bar). Supports min length display, disabled, placeholder, and size variants.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/password-input/PasswordInput.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref } from 'vue'
import { Eye, EyeOff } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { passwordInputVariants } from './password-input.variants'

interface Props {
  modelValue?: string
  defaultValue?: string
  placeholder?: string
  size?: 'sm' | 'default' | 'lg'
  variant?: 'outlined' | 'filled' | 'borderless'
  disabled?: boolean
  readonly?: boolean
  showStrength?: boolean
  showToggle?: boolean
  minLength?: number
  maxlength?: number
  id?: string
  name?: string
  autocomplete?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: 'Enter password',
  size: 'default',
  variant: 'outlined',
  disabled: false,
  readonly: false,
  showStrength: false,
  showToggle: true,
  minLength: 0,
  autocomplete: 'current-password',
})

const emits = defineEmits<{
  'update:modelValue': [value: string]
  focus: [event: FocusEvent]
  blur: [event: FocusEvent]
}>()

const passwordVisible = ref(false)

const computedType = computed(() => (passwordVisible.value ? 'text' : 'password'))

const inputValue = computed({
  get: () => props.modelValue ?? '',
  set: (val: string) => emits('update:modelValue', val),
})

interface StrengthResult {
  score: number
  label: 'weak' | 'fair' | 'good' | 'strong'
  color: string
  barColor: string
  percent: number
}

const strength = computed<StrengthResult>(() => {
  const pwd = inputValue.value
  if (!pwd) return { score: 0, label: 'weak', color: '', barColor: 'bg-transparent', percent: 0 }

  let score = 0
  if (pwd.length >= 6) score++
  if (pwd.length >= 10) score++
  if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score++
  if (/\d/.test(pwd)) score++
  if (/[^A-Za-z0-9]/.test(pwd)) score++

  if (score <= 1) {
    return { score, label: 'weak', color: 'text-destructive', barColor: 'bg-destructive', percent: 25 }
  }
  if (score <= 2) {
    return {
      score,
      label: 'fair',
      color: 'text-[var(--warning)]',
      barColor: 'bg-[var(--warning)]',
      percent: 50,
    }
  }
  if (score <= 3) {
    return {
      score,
      label: 'good',
      color: 'text-[var(--info)]',
      barColor: 'bg-[var(--info)]',
      percent: 75,
    }
  }
  return {
    score,
    label: 'strong',
    color: 'text-[var(--success)]',
    barColor: 'bg-[var(--success)]',
    percent: 100,
  }
})

const meetsMinLength = computed(() => inputValue.value.length >= props.minLength)

function toggleVisibility() {
  if (props.disabled || props.readonly) return
  passwordVisible.value = !passwordVisible.value
}

const wrapperClasses = computed(() =>
  cn(
    passwordInputVariants({ size: props.size, variant: props.variant }),
    'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
    props.disabled && 'pointer-events-none opacity-50 cursor-not-allowed bg-muted/30',
    props.class,
  ),
)

const inputPadding = computed(() => {
  if (props.size === 'sm') return 'px-2.5'
  if (props.size === 'lg') return 'px-4'
  return 'px-3'
})

const togglePadding = computed(() => {
  if (props.size === 'sm') return 'pr-2'
  if (props.size === 'lg') return 'pr-3'
  return 'pr-2.5'
})
</script>

<template>
  <div class="flex w-full flex-col gap-2">
    <div :class="wrapperClasses" data-uipkge data-slot="password-input" :data-size="size" :data-variant="variant">
      <input
        :id="id"
        v-model="inputValue"
        :type="computedType"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
        :placeholder="placeholder"
        :name="name"
        :autocomplete="autocomplete"
        :class="cn('placeholder:text-muted-foreground w-full min-w-0 flex-1 bg-transparent outline-none', inputPadding)"
        @focus="emits('focus', $event)"
        @blur="emits('blur', $event)"
      />
      <div v-if="showToggle" class="flex shrink-0 items-center" :class="togglePadding">
        <button
          type="button"
          :aria-label="passwordVisible ? 'Hide password' : 'Show password'"
          :aria-pressed="passwordVisible"
          :disabled="disabled || readonly"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed"
          @mousedown.prevent
          @click="toggleVisibility"
        >
          <Eye v-if="passwordVisible" class="size-4" aria-hidden="true" />
          <EyeOff v-else class="size-4" aria-hidden="true" />
        </button>
      </div>
    </div>

    <div v-if="showStrength && inputValue" class="flex flex-col gap-1.5">
      <div class="bg-muted h-1.5 w-full overflow-hidden rounded-full">
        <div
          class="h-full rounded-full transition-all duration-300"
          :class="strength.barColor"
          :style="{ width: `${strength.percent}%` }"
        />
      </div>
      <div class="flex items-center justify-between text-xs">
        <span :class="strength.color" class="font-medium capitalize">{{ strength.label }}</span>
        <span v-if="minLength > 0" :class="meetsMinLength ? 'text-[var(--success)]' : 'text-muted-foreground'">
          {{ inputValue.length }} / {{ minLength }} chars
        </span>
      </div>
    </div>

    <p v-if="minLength > 0 && !showStrength && inputValue" class="text-muted-foreground text-xs">
      Minimum {{ minLength }} characters
    </p>
  </div>
</template>

```

### `packages/registry-vue/components/password-input/password-input.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const passwordInputVariants = cva(
  'flex w-full items-center gap-1.5 overflow-hidden border transition-[color,box-shadow] outline-none rounded-md',
  {
    variants: {
      size: {
        sm: 'h-8 text-xs',
        default: 'h-9 text-base md:text-sm',
        lg: 'h-11 text-base',
      },
      variant: {
        outlined: 'border-input bg-transparent shadow-xs',
        filled: 'border-transparent bg-muted/50 shadow-none',
        borderless: 'border-transparent bg-transparent shadow-none',
      },
    },
    defaultVariants: {
      size: 'default',
      variant: 'outlined',
    },
  },
)

export type PasswordInputVariants = VariantProps<typeof passwordInputVariants>

```

### `packages/registry-vue/components/password-input/index.ts`

```ts
export { default as PasswordInput } from './PasswordInput.vue'
export { passwordInputVariants } from './password-input.variants'
export type { PasswordInputVariants } from './password-input.variants'

```

## payment-card

- type: `registry:ui`
- description: Animated 3D credit-card visual. Auto-detects brand (Visa, Mastercard, Amex, Discover) from the card number, flips between front and back, and supports opt-in mouse-parallax tilt and a shimmering gradient sweep. Pure presentational — pass typed values in via props.

### `packages/registry-vue/components/payment-card/PaymentCard.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { cn } from '@/lib/utils'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'

// Brand wordmark paths (from simpleicons.org, MIT-licensed). Single-path SVGs
// drawn against a 24x24 viewBox. Fill is set to currentColor so the parent
// controls color (white on the dark card gradient).
const BRAND_PATHS: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: 'M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z',
  mastercard:
    'M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z',
  amex: 'M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507',
  discover:
    'M14.58 12a2.023 2.023 0 1 1-2.025-2.023h.002c1.118 0 2.023.906 2.023 2.023zm-5.2-2.001c-1.124 0-2.025.884-2.025 1.99 0 1.118.878 1.984 2.007 1.984.319 0 .593-.063.93-.221v-.873c-.296.297-.559.416-.895.416-.747 0-1.277-.542-1.277-1.312 0-.73.547-1.306 1.243-1.306.354 0 .622.126.93.428v-.873a1.898 1.898 0 0 0-.913-.233zm-3.352 1.545c-.445-.165-.576-.273-.576-.479 0-.239.233-.422.553-.422.222 0 .405.091.598.308l.388-.508a1.665 1.665 0 0 0-1.117-.422c-.673 0-1.186.467-1.186 1.089 0 .524.239.792.936 1.043.291.103.438.171.513.217a.456.456 0 0 1 .222.394c0 .308-.245.536-.576.536-.354 0-.639-.177-.809-.507l-.479.461c.342.502.752.724 1.317.724.771 0 1.311-.513 1.311-1.249-.002-.603-.252-.876-1.095-1.185zM24 10.3a.29.29 0 0 1-.288.291.29.29 0 0 1-.291-.291v-.003A.29.29 0 1 1 24 10.3zm-.059.001a.235.235 0 0 0-.231-.239.234.234 0 0 0-.232.239c0 .132.104.239.232.239a.235.235 0 0 0 .231-.239zM3.472 13.887h.742v-3.803h-.742v3.803zm12.702-1.248l-1.014-2.554h-.81l1.614 3.9h.399l1.643-3.9h-.804l-1.028 2.554zm2.166 1.248h2.104v-.644h-1.362v-1.027h1.312v-.644h-1.312v-.844h1.362v-.644H18.34v3.803zm5.409-3.557l.11.138h-.097l-.094-.13v.13h-.08v-.334h.107c.081 0 .126.036.126.103.001.046-.025.08-.072.093zm-.006-.092c0-.029-.021-.043-.06-.043h-.014v.087h.014c.039 0 .06-.014.06-.044zm-1.228 2.047l1.197 1.602H22.8l-1.027-1.528h-.097v1.528h-.741v-3.803h1.1c.855 0 1.346.411 1.346 1.123 0 .583-.308.965-.866 1.078zm.103-1.038c0-.37-.251-.563-.713-.563h-.228v1.152h.217c.473-.001.724-.207.724-.589zm-19.487.742a1.91 1.91 0 0 1-.69 1.46c-.365.303-.781.439-1.357.439H.001v-3.803H1.09c1.202 0 2.041.781 2.041 1.904zm-.764-.006c0-.364-.154-.718-.411-.947-.245-.222-.536-.308-1.015-.308H.742v2.515h.199c.479 0 .782-.092 1.015-.302.256-.228.411-.593.411-.958z',
}

// Tight viewBox per brand so the visible glyph fills its slot. The default
// simpleicons 24x24 canvas leaves a lot of empty space around wordmarks like
// Visa and Discover, which made them render visibly smaller than the
// Mastercard / Amex marks at the same nominal size.
const BRAND_VIEWBOX: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: '0 7 24 10',
  mastercard: '0 4 24 16',
  amex: '0 0 24 24',
  discover: '0 8 24 8',
}

const props = withDefaults(
  defineProps<{
    number?: string
    name?: string
    expiry?: string
    cvc?: string
    brand?: 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' | 'auto'
    flipped?: boolean
    variant?: 'default' | 'compact'
    tilt?: boolean
    shimmer?: boolean
    flip?: boolean
    size?: 'sm' | 'md' | 'lg'
    class?: string
  }>(),
  {
    number: '',
    name: '',
    expiry: '',
    cvc: '',
    brand: 'auto',
    flipped: false,
    variant: 'default',
    tilt: false,
    shimmer: false,
    flip: true,
    size: 'md',
  },
)

function detectBrand(raw: string): CardBrand {
  const n = raw.replace(/\D/g, '')
  if (!n) return 'unknown'
  if (/^4/.test(n)) return 'visa'
  if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'
  if (/^3[47]/.test(n)) return 'amex'
  if (/^(6011|65|64[4-9])/.test(n)) return 'discover'
  return 'unknown'
}

const detectedBrand = computed<CardBrand>(() =>
  props.brand === 'auto' ? detectBrand(props.number) : (props.brand as CardBrand),
)

function maskedNumber(raw: string, brand: CardBrand): string {
  const digits = raw.replace(/\D/g, '').slice(0, brand === 'amex' ? 15 : 16)
  const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]
  const total = groups.reduce((a, b) => a + b, 0)
  const padded = (digits + '•'.repeat(total)).slice(0, total)
  let i = 0
  return groups
    .map((g) => {
      const slice = padded.slice(i, i + g)
      i += g
      return slice
    })
    .join(' ')
}

const displayNumber = computed(() => maskedNumber(props.number, detectedBrand.value))
const displayName = computed(() => {
  const fallback = props.variant === 'compact' ? '' : 'CARDHOLDER NAME'
  return (props.name || fallback).toUpperCase()
})
const displayExpiry = computed(() => props.expiry || 'MM/YY')
const displayCvc = computed(() => {
  const want = detectedBrand.value === 'amex' ? 4 : 3
  const v = (props.cvc || '').replace(/\D/g, '').slice(0, want)
  return v.padEnd(want, '•')
})

const brandGradient = computed(() => {
  switch (detectedBrand.value) {
    case 'visa':
      return 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900'
    case 'mastercard':
      return 'bg-gradient-to-br from-orange-500 via-red-500 to-red-700'
    case 'amex':
      return 'bg-gradient-to-br from-teal-500 via-teal-600 to-teal-800'
    case 'discover':
      return 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-700'
    default:
      return 'bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900'
  }
})

const sizeClass = computed(() => {
  if (props.variant === 'compact') return 'w-[120px]'
  return { sm: 'w-[280px]', md: 'w-[340px]', lg: 'w-[400px]' }[props.size]
})

const fontClass = computed(() => {
  if (props.variant === 'compact') return 'text-[7px]'
  return { sm: 'text-xs', md: 'text-sm', lg: 'text-base' }[props.size]
})

const numberFontClass = computed(() => {
  if (props.variant === 'compact') return 'text-[7px] tracking-tight'
  return { sm: 'text-base tracking-wider', md: 'text-lg tracking-wider', lg: 'text-xl tracking-widest' }[props.size]
})

const brandHeightClass = computed(() => {
  if (props.variant === 'compact') return 'h-2.5'
  return { sm: 'h-4', md: 'h-5', lg: 'h-6' }[props.size]
})

// Tilt — mouse-parallax
const cardRef = ref<HTMLDivElement | null>(null)
const tiltX = ref(0)
const tiltY = ref(0)
let rafId: number | null = null

function onMove(e: MouseEvent) {
  if (!props.tilt || !cardRef.value) return
  if (rafId) cancelAnimationFrame(rafId)
  rafId = requestAnimationFrame(() => {
    if (!cardRef.value) return
    const rect = cardRef.value.getBoundingClientRect()
    const dx = (e.clientX - rect.left) / rect.width - 0.5
    const dy = (e.clientY - rect.top) / rect.height - 0.5
    tiltY.value = dx * 16
    tiltX.value = -dy * 16
  })
}
function onLeave() {
  tiltX.value = 0
  tiltY.value = 0
}

const innerTransform = computed(() => {
  const flipDeg = props.flipped ? 180 : 0
  return `rotateX(${tiltX.value}deg) rotateY(${tiltY.value + flipDeg}deg)`
})
</script>

<template>
  <div
    ref="cardRef"
    data-uipkge
    data-slot="payment-card"
    :class="cn('group relative inline-block select-none [perspective:1200px]', sizeClass, props.class)"
    @mousemove="onMove"
    @mouseleave="onLeave"
  >
    <div
      class="relative aspect-[1.586/1] w-full transition-transform [transform-style:preserve-3d]"
      :class="flip ? 'duration-[600ms] ease-[cubic-bezier(0.4,0,0.2,1)]' : 'duration-300'"
      :style="{ transform: innerTransform }"
    >
      <!-- FRONT -->
      <div
        :class="
          cn(
            'absolute inset-0 overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
            'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
            brandGradient,
          )
        "
      >
        <!-- Lighting overlay: subtle radial highlight top-left -->
        <div
          class="pointer-events-none absolute inset-0"
          style="background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)"
        />
        <!-- Subtle bottom-right darkening -->
        <div
          class="pointer-events-none absolute inset-0"
          style="background: radial-gradient(80% 60% at 100% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 60%)"
        />
        <!-- Shimmer sweep -->
        <div
          v-if="shimmer"
          class="pointer-events-none absolute -inset-x-full inset-y-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
          style="animation: payment-card-shimmer 2.5s linear infinite"
        />

        <div :class="cn('absolute inset-0 flex flex-col', variant === 'compact' ? 'p-2' : 'p-4')">
          <!-- Brand top-right -->
          <div class="flex h-auto justify-end text-white">
            <Transition name="brand-fade" mode="out-in">
              <svg
                v-if="detectedBrand !== 'unknown'"
                :key="detectedBrand"
                :viewBox="BRAND_VIEWBOX[detectedBrand]"
                :class="[brandHeightClass, 'w-auto']"
                fill="currentColor"
                preserveAspectRatio="xMidYMid meet"
                aria-hidden="true"
              >
                <path :d="BRAND_PATHS[detectedBrand]" />
              </svg>
              <span
                v-else
                key="unknown"
                class="font-semibold tracking-wider opacity-60"
                :class="variant === 'compact' ? 'text-[8px]' : 'text-xs'"
                >CARD</span
              >
            </Transition>
          </div>

          <!-- Chip + contactless NFC, below brand on left -->
          <div :class="cn('flex items-center gap-2', variant === 'compact' ? 'mt-1' : 'mt-3')">
            <!-- EMV chip with 8-contact layout -->
            <div
              :class="
                cn(
                  'relative rounded-[4px] bg-gradient-to-br from-amber-100 via-yellow-300 to-yellow-600 shadow-[inset_0_0_4px_rgba(0,0,0,0.25)]',
                  variant === 'compact' ? 'h-3 w-4' : 'h-7 w-10',
                )
              "
            >
              <!-- Outer ring -->
              <div class="absolute inset-[2px] rounded-[2px] border border-yellow-700/30" />
              <!-- Horizontal divider -->
              <div class="absolute inset-x-[2px] top-1/2 h-px -translate-y-px bg-yellow-700/40" />
              <!-- Vertical dividers -->
              <div class="absolute inset-y-[2px] left-1/3 w-px bg-yellow-700/40" />
              <div class="absolute inset-y-[2px] left-2/3 w-px bg-yellow-700/40" />
            </div>

            <!-- Contactless NFC waves -->
            <svg
              v-if="variant !== 'compact'"
              viewBox="0 0 24 24"
              class="h-6 w-auto opacity-80"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              aria-hidden="true"
            >
              <path d="M7 8.5a6 6 0 0 1 0 7" />
              <path d="M10 6a9.5 9.5 0 0 1 0 12" />
              <path d="M13 4a13 13 0 0 1 0 16" />
            </svg>
          </div>

          <!-- spacer to push number+bottom down -->
          <div class="flex-1" />

          <!-- Number — embossed look via subtle text shadow -->
          <div
            :class="
              cn(
                'overflow-hidden font-mono font-semibold whitespace-nowrap',
                variant === 'compact' ? 'mb-1' : 'mb-3',
                numberFontClass,
              )
            "
            style="
              text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.18),
                0 -1px 0 rgba(255, 255, 255, 0.08);
            "
          >
            {{ displayNumber }}
          </div>

          <!-- Bottom row: name + expiry -->
          <div class="flex items-end justify-between gap-2">
            <div class="min-w-0 flex-1">
              <div v-if="variant !== 'compact'" class="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">
                Cardholder
              </div>
              <div :class="cn('truncate font-semibold tracking-wide whitespace-nowrap uppercase', fontClass)">
                {{ displayName }}
              </div>
            </div>
            <div class="shrink-0 text-right">
              <div v-if="variant !== 'compact'" class="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">
                Expires
              </div>
              <div :class="cn('font-mono font-semibold tracking-wide whitespace-nowrap', fontClass)">
                {{ displayExpiry }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- BACK -->
      <div
        :class="
          cn(
            'absolute inset-0 [transform:rotateY(180deg)] overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
            'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
            brandGradient,
          )
        "
      >
        <!-- Lighting overlay -->
        <div
          class="pointer-events-none absolute inset-0"
          style="background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)"
        />
        <!-- Magstripe -->
        <div
          :class="
            cn(
              'w-full bg-gradient-to-b from-black via-neutral-900 to-black/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.5)]',
              variant === 'compact' ? 'mt-3 h-5' : 'mt-6 h-10',
            )
          "
        />

        <div :class="cn('relative', variant === 'compact' ? 'p-2' : 'p-4')">
          <!-- Signature strip + CVC -->
          <div :class="cn('flex items-stretch gap-2', variant === 'compact' ? 'mt-1' : 'mt-2')">
            <!-- Signature strip with diagonal hatching -->
            <div
              :class="
                cn(
                  'relative flex-1 overflow-hidden rounded bg-white/95 px-2 py-1.5',
                  variant === 'compact' ? 'h-5' : 'h-9',
                )
              "
              style="
                background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px);
                background-color: rgba(248, 248, 248, 0.95);
              "
            >
              <div
                v-if="variant !== 'compact'"
                class="absolute top-1 right-1.5 text-[7px] tracking-wider text-slate-500/80 uppercase"
              >
                Signature
              </div>
            </div>
            <!-- CVC pill -->
            <div
              :class="
                cn(
                  'flex flex-col items-center justify-center rounded bg-white font-mono text-slate-900 shadow-sm',
                  variant === 'compact' ? 'px-1 text-[9px]' : 'px-2.5 text-sm',
                )
              "
            >
              <span v-if="variant !== 'compact'" class="text-[7px] font-medium tracking-wider text-slate-500 uppercase"
                >CVC</span
              >
              <span class="leading-none font-semibold">{{ displayCvc }}</span>
            </div>
          </div>

          <div v-if="variant !== 'compact'" class="mt-3 text-[9px] tracking-wide opacity-50">
            Authorized signature. Not valid unless signed. For customer service, see your card issuer.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@keyframes payment-card-shimmer {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(150%);
  }
}

.brand-fade-enter-active,
.brand-fade-leave-active {
  transition: opacity 200ms ease;
}
.brand-fade-enter-from,
.brand-fade-leave-to {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='payment-card'] [class*='transition-'] {
    transition-duration: 0ms !important;
  }
  [data-slot='payment-card'] [style*='payment-card-shimmer'] {
    animation: none !important;
  }
}
</style>

```

### `packages/registry-vue/components/payment-card/index.ts`

```ts
export { default as PaymentCard } from './PaymentCard.vue'

```

## payment-form

- type: `registry:block`
- description: Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons emit a `wallet` event so the consumer wires the actual SDK; the card form emits `success` / `error` after the consumer-provided `onSubmit` settles.
- npm deps: `lucide-vue-next`
- registry deps: `payment-card`, `input`, `label`, `button`

### `packages/registry-vue/blocks/payment-form/PaymentForm.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Loader2 } from 'lucide-vue-next'
import { PaymentCard } from '@/components/ui/payment-card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'
type Wallet = 'apple' | 'google' | 'paypal'

interface PaymentPayload {
  number: string
  name: string
  expiry: string
  cvc: string
  brand: CardBrand
}

const props = withDefaults(
  defineProps<{
    amount: number
    currency?: string
    showWallets?: boolean
    wallets?: Wallet[]
    onSubmit?: (data: PaymentPayload) => Promise<void>
  }>(),
  {
    currency: 'USD',
    showWallets: true,
    wallets: () => ['apple', 'google', 'paypal'],
  },
)

const emit = defineEmits<{
  success: []
  error: [err: Error]
  'brand-change': [brand: CardBrand]
  wallet: [kind: Wallet]
}>()

const number = ref('')
const name = ref('')
const expiry = ref('')
const cvc = ref('')
const cvcFocused = ref(false)

const submitting = ref(false)
const succeeded = ref(false)
const errors = ref<Record<string, string | null>>({
  number: null,
  name: null,
  expiry: null,
  cvc: null,
})
const shakeKey = ref(0)

function detectBrand(raw: string): CardBrand {
  const n = raw.replace(/\D/g, '')
  if (!n) return 'unknown'
  if (/^4/.test(n)) return 'visa'
  if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'
  if (/^3[47]/.test(n)) return 'amex'
  if (/^(6011|65|64[4-9])/.test(n)) return 'discover'
  return 'unknown'
}

const brand = computed<CardBrand>(() => detectBrand(number.value))

let lastBrand: CardBrand = 'unknown'
function onBrandMaybeChanged() {
  if (brand.value !== lastBrand) {
    lastBrand = brand.value
    emit('brand-change', brand.value)
  }
}

function formatNumber(raw: string): string {
  const digits = raw.replace(/\D/g, '').slice(0, brand.value === 'amex' ? 15 : 16)
  if (brand.value === 'amex') {
    return digits.replace(/^(\d{0,4})(\d{0,6})(\d{0,5}).*$/, (_m, a, b, c) => [a, b, c].filter(Boolean).join(' '))
  }
  return digits.replace(/(.{4})/g, '$1 ').trim()
}

function onNumberInput(e: Event) {
  const t = e.target as HTMLInputElement
  number.value = formatNumber(t.value)
  t.value = number.value
  errors.value.number = null
  onBrandMaybeChanged()
}

function formatExpiry(raw: string): string {
  const d = raw.replace(/\D/g, '').slice(0, 4)
  if (d.length <= 2) return d
  return `${d.slice(0, 2)}/${d.slice(2)}`
}

function onExpiryInput(e: Event) {
  const t = e.target as HTMLInputElement
  expiry.value = formatExpiry(t.value)
  t.value = expiry.value
  errors.value.expiry = null
}

function onCvcInput(e: Event) {
  const t = e.target as HTMLInputElement
  const max = brand.value === 'amex' ? 4 : 3
  cvc.value = t.value.replace(/\D/g, '').slice(0, max)
  t.value = cvc.value
  errors.value.cvc = null
}

function luhn(digits: string): boolean {
  let sum = 0
  let alt = false
  for (let i = digits.length - 1; i >= 0; i--) {
    let d = Number(digits[i])
    if (alt) {
      d *= 2
      if (d > 9) d -= 9
    }
    sum += d
    alt = !alt
  }
  return sum % 10 === 0 && digits.length >= 13
}

function validate(): boolean {
  const digits = number.value.replace(/\D/g, '')
  const expectedLen = brand.value === 'amex' ? 15 : 16
  errors.value.number = !digits
    ? 'Card number required'
    : digits.length !== expectedLen
      ? `Card number must be ${expectedLen} digits`
      : !luhn(digits)
        ? 'Card number is invalid'
        : null

  errors.value.name = !name.value.trim() ? 'Name required' : name.value.trim().length < 2 ? 'Name too short' : null

  const expOk = /^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry.value)
  if (!expOk) {
    errors.value.expiry = 'Use MM/YY'
  } else {
    const [m, y] = expiry.value.split('/').map(Number)
    const now = new Date()
    const expDate = new Date(2000 + y, m - 1, 1)
    expDate.setMonth(expDate.getMonth() + 1)
    errors.value.expiry = expDate <= now ? 'Card has expired' : null
  }

  const cvcLen = brand.value === 'amex' ? 4 : 3
  errors.value.cvc = cvc.value.length !== cvcLen ? `CVC must be ${cvcLen} digits` : null

  const ok = Object.values(errors.value).every((e) => !e)
  if (!ok) shakeKey.value++
  return ok
}

async function submit() {
  if (submitting.value || succeeded.value) return
  if (!validate()) return

  submitting.value = true
  try {
    const payload: PaymentPayload = {
      number: number.value.replace(/\D/g, ''),
      name: name.value.trim(),
      expiry: expiry.value,
      cvc: cvc.value,
      brand: brand.value,
    }
    if (props.onSubmit) await props.onSubmit(payload)
    succeeded.value = true
    emit('success')
  } catch (err) {
    emit('error', err instanceof Error ? err : new Error(String(err)))
    shakeKey.value++
  } finally {
    submitting.value = false
  }
}

const formattedAmount = computed(() => {
  try {
    return new Intl.NumberFormat(undefined, { style: 'currency', currency: props.currency }).format(props.amount)
  } catch {
    return `${props.currency} ${props.amount.toFixed(2)}`
  }
})

const walletList = computed(() => props.wallets.filter((w) => ['apple', 'google', 'paypal'].includes(w)))

// Wallet brand wordmark paths (from simpleicons.org, MIT-licensed).
const APPLE_PAY_PATH =
  'M2.15 4.318a42.16 42.16 0 0 0-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43-.028.148-.037.3-.04.45A10.2 10.2 0 0 0 0 6.222v11.557c0 .07.002.138.003.207.004.15.013.303.04.452.027.15.072.291.142.429a1.436 1.436 0 0 0 .63.63c.138.07.278.115.43.142.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04.15-.027.291-.071.428-.141a1.432 1.432 0 0 0 .631-.631c.07-.138.115-.278.141-.43.027-.148.036-.3.04-.45.002-.07.003-.138.003-.208l.001-.246V6.221c0-.07-.002-.138-.004-.207a2.995 2.995 0 0 0-.04-.452 1.446 1.446 0 0 0-1.2-1.201 3.022 3.022 0 0 0-.452-.04 10.448 10.448 0 0 0-.453-.003zm0 .512h19.942c.066 0 .131.002.197.003.115.004.25.01.375.032.109.02.2.05.287.094a.927.927 0 0 1 .407.407.997.997 0 0 1 .094.288c.022.123.028.258.031.374.002.065.003.13.003.197v11.552c0 .065 0 .13-.003.196-.003.115-.009.25-.032.375a.927.927 0 0 1-.5.693 1.002 1.002 0 0 1-.286.094 2.598 2.598 0 0 1-.373.032l-.2.003H1.906c-.066 0-.133-.002-.196-.003a2.61 2.61 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.918.918 0 0 1-.406-.407 1.006 1.006 0 0 1-.094-.288 2.531 2.531 0 0 1-.032-.373 9.588 9.588 0 0 1-.002-.197V6.224c0-.065 0-.131.002-.197.004-.114.01-.248.032-.375.02-.108.05-.199.094-.287a.925.925 0 0 1 .407-.406 1.03 1.03 0 0 1 .287-.094c.125-.022.26-.029.375-.032.065-.002.131-.002.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456-.191.22-.36.58-.316.918.338.03.675-.169.888-.418.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812 0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089 0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28-.235 0-.593-.264-.981-.257a1.446 1.446 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995.249.366.549.769.944.754.373-.014.52-.242.973-.242.454 0 .586.242.98.235.41-.007.667-.366.915-.733.286-.417.403-.82.41-.841-.007-.008-.79-.308-.797-1.209-.008-.754.615-1.113.644-1.135-.352-.52-.9-.578-1.09-.593a1.123 1.123 0 0 0-.092-.002zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184 0 .72.548 1.207 1.332 1.207.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317zm1.94.072l1.446 4.009c0 .003-.073.24-.073.247-.125.41-.33.571-.711.571-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917-.442 0-.731-.228-.731-.579 0-.342.278-.56.769-.593z'
const GOOGLE_PAY_PATH =
  'M3.963 7.235A3.963 3.963 0 00.422 9.419a3.963 3.963 0 000 3.559 3.963 3.963 0 003.541 2.184c1.07 0 1.97-.352 2.627-.957.748-.69 1.18-1.71 1.18-2.916a4.722 4.722 0 00-.07-.806H3.964v1.526h2.14a1.835 1.835 0 01-.79 1.205c-.356.241-.814.379-1.35.379-1.034 0-1.911-.697-2.225-1.636a2.375 2.375 0 010-1.517c.314-.94 1.191-1.636 2.225-1.636a2.152 2.152 0 011.52.594l1.132-1.13a3.808 3.808 0 00-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465c.603 0 1.11-.196 1.522-.588a1.911 1.911 0 00.635-1.464 1.92 1.92 0 00-.635-1.456 2.125 2.125 0 00-1.522-.598zm2.427.85a1.156 1.156 0 01.823.365 1.176 1.176 0 010 1.686 1.171 1.171 0 01-.877.357H11.35V8.635h1.487a1.156 1.156 0 01.054 0zm4.124 1.175c-.842 0-1.477.308-1.907.925l.781.491c.288-.417.68-.626 1.175-.626a1.255 1.255 0 01.856.323 1.009 1.009 0 01.366.785v.202c-.34-.193-.774-.289-1.3-.289-.617 0-1.11.145-1.479.434-.37.288-.554.677-.554 1.165a1.476 1.476 0 00.525 1.156c.35.308.785.463 1.305.463.61 0 1.098-.27 1.465-.81h.038v.655h.848v-2.909c0-.61-.19-1.09-.568-1.44-.38-.35-.896-.525-1.551-.525zm2.263.154l1.946 4.422-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368c.494 0 .88.11 1.156.33 0 .372-.147.696-.44.973a1.413 1.413 0 01-.997.414 1.081 1.081 0 01-.69-.232.708.708 0 01-.293-.578c0-.257.12-.47.363-.647.24-.173.54-.26.9-.26Z'
const PAYPAL_PATH =
  'M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z'
</script>

<template>
  <div class="bg-card text-card-foreground mx-auto w-full max-w-md rounded-xl border p-6 shadow-sm">
    <div class="mb-4 flex items-baseline justify-between">
      <h3 class="text-lg font-semibold">Pay {{ formattedAmount }}</h3>
      <span class="text-muted-foreground text-xs tracking-wider uppercase">Secure checkout</span>
    </div>

    <!-- Wallets row -->
    <div v-if="showWallets && walletList.length" class="mb-4 space-y-3">
      <div
        class="grid gap-2"
        :class="walletList.length === 1 ? '' : walletList.length === 2 ? 'grid-cols-2' : 'grid-cols-3'"
      >
        <button
          v-if="walletList.includes('apple')"
          type="button"
          aria-label="Pay with Apple Pay"
          class="flex h-11 items-center justify-center rounded-md bg-black px-3 text-white transition-transform hover:scale-[1.02] active:scale-100"
          @click="emit('wallet', 'apple')"
        >
          <svg viewBox="0 0 24 24" class="h-7 w-auto" fill="currentColor" aria-hidden="true">
            <path :d="APPLE_PAY_PATH" />
          </svg>
        </button>
        <button
          v-if="walletList.includes('google')"
          type="button"
          aria-label="Pay with Google Pay"
          class="flex h-11 items-center justify-center rounded-md border bg-white px-3 text-slate-800 shadow-sm transition-transform hover:scale-[1.02] active:scale-100"
          @click="emit('wallet', 'google')"
        >
          <svg viewBox="0 0 24 24" class="h-6 w-auto" fill="currentColor" aria-hidden="true">
            <path :d="GOOGLE_PAY_PATH" />
          </svg>
        </button>
        <button
          v-if="walletList.includes('paypal')"
          type="button"
          aria-label="Pay with PayPal"
          class="flex h-11 items-center justify-center rounded-md bg-[#003087] px-3 text-white transition-transform hover:scale-[1.02] active:scale-100"
          @click="emit('wallet', 'paypal')"
        >
          <svg viewBox="0 0 24 24" class="h-6 w-auto" fill="currentColor" aria-hidden="true">
            <path :d="PAYPAL_PATH" />
          </svg>
        </button>
      </div>

      <div class="flex items-center gap-3">
        <div class="bg-border h-px flex-1" />
        <span class="text-muted-foreground text-[10px] tracking-widest uppercase">or pay with card</span>
        <div class="bg-border h-px flex-1" />
      </div>
    </div>

    <!-- Live preview card -->
    <div aria-hidden="true" class="mb-5 flex justify-center">
      <PaymentCard :number="number" :name="name" :expiry="expiry" :cvc="cvc" :flipped="cvcFocused" size="md" />
    </div>

    <!-- Form -->
    <form class="space-y-3" :data-shake="shakeKey" @submit.prevent="submit">
      <div class="grid gap-1.5">
        <Label for="cc-number">Card number</Label>
        <Input
          id="cc-number"
          inputmode="numeric"
          autocomplete="cc-number"
          placeholder="1234 5678 9012 3456"
          :value="number"
          :aria-invalid="!!errors.number"
          aria-describedby="cc-number-err"
          :class="errors.number ? 'border-destructive shake' : ''"
          @input="onNumberInput"
        />
        <p v-if="errors.number" id="cc-number-err" class="text-destructive text-xs" role="alert">{{ errors.number }}</p>
      </div>

      <div class="grid gap-1.5">
        <Label for="cc-name">Name on card</Label>
        <Input
          id="cc-name"
          v-model="name"
          autocomplete="cc-name"
          placeholder="Jane Doe"
          :aria-invalid="!!errors.name"
          aria-describedby="cc-name-err"
          :class="errors.name ? 'border-destructive shake' : ''"
        />
        <p v-if="errors.name" id="cc-name-err" class="text-destructive text-xs" role="alert">{{ errors.name }}</p>
      </div>

      <div class="grid grid-cols-2 gap-3">
        <div class="grid gap-1.5">
          <Label for="cc-exp">Expiry</Label>
          <Input
            id="cc-exp"
            inputmode="numeric"
            autocomplete="cc-exp"
            placeholder="MM/YY"
            :value="expiry"
            :aria-invalid="!!errors.expiry"
            aria-describedby="cc-exp-err"
            :class="errors.expiry ? 'border-destructive shake' : ''"
            @input="onExpiryInput"
          />
          <p v-if="errors.expiry" id="cc-exp-err" class="text-destructive text-xs" role="alert">{{ errors.expiry }}</p>
        </div>
        <div class="grid gap-1.5">
          <Label for="cc-cvc">CVC</Label>
          <Input
            id="cc-cvc"
            inputmode="numeric"
            autocomplete="cc-csc"
            :placeholder="brand === 'amex' ? '1234' : '123'"
            :value="cvc"
            :aria-invalid="!!errors.cvc"
            aria-describedby="cc-cvc-err"
            :class="errors.cvc ? 'border-destructive shake' : ''"
            @input="onCvcInput"
            @focus="cvcFocused = true"
            @blur="cvcFocused = false"
          />
          <p v-if="errors.cvc" id="cc-cvc-err" class="text-destructive text-xs" role="alert">{{ errors.cvc }}</p>
        </div>
      </div>

      <Button type="submit" class="mt-2 h-11 w-full text-base" :disabled="submitting || succeeded">
        <Loader2 v-if="submitting" class="mr-2 size-4 animate-spin" />
        <span v-if="succeeded">Paid ✓</span>
        <span v-else-if="submitting">Processing…</span>
        <span v-else>Pay {{ formattedAmount }}</span>
      </Button>
    </form>
  </div>
</template>

<style scoped>
@keyframes payment-form-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(2px);
  }
}
.shake {
  animation: payment-form-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@media (prefers-reduced-motion: reduce) {
  .shake {
    animation: none;
  }
}
</style>

```

## pie-chart

- type: `registry:ui`
- description: Pie chart wrapper around Apache ECharts. Full pie, donut, rose (Nightingale), and labeled variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/pie-chart/PieChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart as EChartsPieChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsPieChart, TooltipComponent, LegendComponent])

interface Props {
  data: Record<string, any>[]
  nameField?: string
  valueField?: string
  height?: number | string
  donut?: boolean
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  nameField: 'name',
  valueField: 'value',
  height: 300,
  donut: false,
})

const mergedOption = computed(() => {
  const chartData = props.data.map((d) => ({
    name: d[props.nameField!],
    value: d[props.valueField!],
  }))

  const series = [
    {
      type: 'pie',
      radius: props.donut ? ['45%', '70%'] : '65%',
      center: ['50%', '45%'],
      itemStyle: { borderWidth: 0 },
      label: { show: false },
      data: chartData,
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
      formatter: '{b}: {c} ({d}%)',
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { fontSize: 11 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/pie-chart/index.ts`

```ts
export { default as PieChart } from './PieChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## pin-input

- type: `registry:ui`
- description: One-time-code input — N separate boxes that auto-advance and accept paste. Use for SMS verification, 2FA, and short numeric codes. Length, masking, and per-slot status all configurable.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/pin-input/PinInput.vue`

```vue
<script setup lang="ts" generic="Type extends 'text' | 'number' = 'text'">
import { computed, provide, toRef } from 'vue'
import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PinInputRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

type PinInputStatus = 'error' | 'warning' | 'success' | 'default'
type PinInputSize = 'sm' | 'md' | 'lg'

const props = withDefaults(
  defineProps<
    PinInputRootProps<Type> & {
      class?: HTMLAttributes['class']
      mask?: boolean
      autoSubmit?: boolean
      status?: PinInputStatus
      size?: PinInputSize
    }
  >(),
  {
    otp: true,
    mask: false,
    autoSubmit: false,
    status: 'default',
    size: 'md',
  },
)

const emits = defineEmits<
  Omit<PinInputRootEmits<Type>, 'complete'> & {
    complete: [value: string]
  }
>()

const delegatedProps = reactiveOmit(props, 'class', 'mask', 'autoSubmit', 'status', 'size')
const forwarded = useForwardPropsEmits(delegatedProps, emits)

provide('pinInputContext', {
  mask: toRef(props, 'mask'),
  status: toRef(props, 'status'),
  size: toRef(props, 'size'),
})

function handleComplete(value: string[]) {
  const joined = value.join('')
  emits('complete', joined)
  if (props.autoSubmit) {
    const event = new CustomEvent('pin-submit', { detail: joined, bubbles: true })
    document.dispatchEvent(event)
  }
}
</script>

<template>
  <PinInputRoot
    :otp="props.otp"
    data-uipkge
    data-slot="pin-input"
    v-bind="forwarded"
    :class="cn('flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50', props.class)"
    @complete="handleComplete"
  >
    <slot />
  </PinInputRoot>
</template>

```

### `packages/registry-vue/components/pin-input/PinInputGroup.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Primitive, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
const delegatedProps = reactiveOmit(props, 'class')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="pin-input-group"
    v-bind="forwardedProps"
    :class="cn('flex items-center', props.class)"
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/pin-input/PinInputSeparator.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Minus } from 'lucide-vue-next'
import { Primitive, useForwardProps } from 'reka-ui'

const props = defineProps<PrimitiveProps>()
const forwardedProps = useForwardProps(props)
</script>

<template>
  <Primitive data-uipkge data-slot="pin-input-separator" v-bind="forwardedProps">
    <slot>
      <Minus />
    </slot>
  </Primitive>
</template>

```

### `packages/registry-vue/components/pin-input/PinInputSlot.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { PinInputInputProps } from 'reka-ui'
import type { HTMLAttributes, Ref } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PinInputInput, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

type PinInputStatus = 'error' | 'warning' | 'success' | 'default'
type PinInputSize = 'sm' | 'md' | 'lg'

interface PinInputContext {
  mask: Ref<boolean>
  status: Ref<PinInputStatus>
  size: Ref<PinInputSize>
}

const props = defineProps<
  PinInputInputProps & {
    class?: HTMLAttributes['class']
    /** Override the inherited mask flag for this slot. */
    mask?: boolean
  }
>()

const ctx = inject<PinInputContext | null>('pinInputContext', null)
const forwarded = useForwardProps(reactiveOmit(props, 'class', 'mask'))

const effectiveMask = computed(() => props.mask ?? ctx?.mask.value ?? false)
const status = computed(() => ctx?.status.value ?? 'default')
const size = computed(() => ctx?.size.value ?? 'md')

const inputType = computed(() => (effectiveMask.value ? 'password' : 'text'))

const sizeClasses = computed(() => {
  switch (size.value) {
    case 'sm':
      return 'h-8 w-8 text-sm'
    case 'lg':
      return 'h-12 w-12 text-xl'
    default:
      return 'h-10 w-10 text-base'
  }
})

const statusClasses = computed(() => {
  switch (status.value) {
    case 'error':
      return 'border-destructive focus:border-destructive focus:ring-destructive/40 text-destructive'
    case 'warning':
      return 'border-warning focus:border-warning focus:ring-warning/40 text-warning'
    case 'success':
      return 'border-success focus:border-success focus:ring-success/40 text-success'
    default:
      return ''
  }
})
</script>

<template>
  <PinInputInput
    :type="inputType"
    data-uipkge
    data-slot="pin-input-slot"
    v-bind="forwarded"
    :class="
      cn(
        'border-input bg-background text-foreground relative -ml-px flex items-center justify-center border text-center shadow-xs transition-[border-color,box-shadow] outline-none first:ml-0 first:rounded-l-md last:rounded-r-md',
        'focus:border-ring focus:ring-ring/40 focus:relative focus:z-10 focus:ring-2',
        'disabled:cursor-not-allowed disabled:opacity-50',
        sizeClasses,
        statusClasses,
        props.class,
      )
    "
  />
</template>

```

### `packages/registry-vue/components/pin-input/index.ts`

```ts
export { default as PinInput } from './PinInput.vue'
export { default as PinInputGroup } from './PinInputGroup.vue'
export { default as PinInputSeparator } from './PinInputSeparator.vue'
export { default as PinInputSlot } from './PinInputSlot.vue'

```

## popover

- type: `registry:ui`
- description: Click-triggered floating panel anchored to a trigger element. Supports optional localStorage persistence and configurable dismissal (click-outside, escape, manual). Built on reka-ui with collision detection.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/popover/Popover.vue`

```vue
<script setup lang="ts">
import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
import { computed, onMounted, provide, ref, toRef, useId, watch } from 'vue'
import { POPOVER_INJECTION_KEY, type PopoverCloseBehavior } from './context'

const props = withDefaults(
  defineProps<
    PopoverRootProps & {
      persist?: string | boolean
      closeBehavior?: PopoverCloseBehavior
    }
  >(),
  {
    persist: false,
    closeBehavior: 'auto',
  },
)

const emits = defineEmits<PopoverRootEmits>()

provide(POPOVER_INJECTION_KEY, {
  closeBehavior: toRef(props, 'closeBehavior'),
})

const autoId = useId()
const storageKey = computed(() => {
  if (props.persist === false) return null
  if (props.persist === true) return `uipkge-popover-${autoId}`
  return props.persist
})

const localOpen = ref<boolean>(props.defaultOpen ?? false)

onMounted(() => {
  if (!storageKey.value || typeof localStorage === 'undefined') return
  if (localStorage.getItem(storageKey.value) === '1') {
    localOpen.value = true
    if (props.open === undefined) {
      emits('update:open', true)
    }
  }
})

watch(
  () => (props.open === undefined ? localOpen.value : props.open),
  (v) => {
    if (!storageKey.value || typeof localStorage === 'undefined') return
    if (v) localStorage.setItem(storageKey.value, '1')
    else localStorage.removeItem(storageKey.value)
  },
)

const forwarded = useForwardPropsEmits(
  computed(() => ({
    open: props.open,
    defaultOpen: props.defaultOpen,
    modal: props.modal,
  })),
  emits,
)

function onUpdateOpen(value: boolean) {
  localOpen.value = value
  emits('update:open', value)
}
</script>

<template>
  <PopoverRoot v-slot="slotProps" data-uipkge data-slot="popover" v-bind="forwarded" @update:open="onUpdateOpen">
    <slot v-bind="slotProps" />
  </PopoverRoot>
</template>

```

### `packages/registry-vue/components/popover/PopoverAnchor.vue`

```vue
<script setup lang="ts">
import type { PopoverAnchorProps } from 'reka-ui'
import { PopoverAnchor } from 'reka-ui'

const props = defineProps<PopoverAnchorProps>()
</script>

<template>
  <PopoverAnchor data-uipkge data-slot="popover-anchor" v-bind="props">
    <slot />
  </PopoverAnchor>
</template>

```

### `packages/registry-vue/components/popover/PopoverContent.vue`

```vue
<script setup lang="ts">
import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
import { inject } from 'vue'
import { cn } from '@/lib/utils'
import { POPOVER_INJECTION_KEY } from './context'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
  align: 'center',
  sideOffset: 4,
})
const emits = defineEmits<PopoverContentEmits>()

const ctx = inject(POPOVER_INJECTION_KEY, null)

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)

function onPointerDownOutside(e: Event) {
  const mode = ctx?.closeBehavior.value ?? 'auto'
  if (mode === 'esc' || mode === 'manual' || mode === 'none') {
    e.preventDefault()
  }
}

function onEscapeKeyDown(e: KeyboardEvent) {
  const mode = ctx?.closeBehavior.value ?? 'auto'
  if (mode === 'click-outside' || mode === 'manual' || mode === 'none') {
    e.preventDefault()
  }
}
</script>

<template>
  <PopoverPortal>
    <PopoverContent
      data-uipkge
      data-slot="popover-content"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          props.class,
        )
      "
      @pointer-down-outside="onPointerDownOutside"
      @escape-key-down="onEscapeKeyDown"
    >
      <slot />
    </PopoverContent>
  </PopoverPortal>
</template>

```

### `packages/registry-vue/components/popover/PopoverTrigger.vue`

```vue
<script setup lang="ts">
import type { PopoverTriggerProps } from 'reka-ui'
import { PopoverTrigger } from 'reka-ui'

const props = defineProps<PopoverTriggerProps>()
</script>

<template>
  <PopoverTrigger data-uipkge data-slot="popover-trigger" v-bind="props">
    <slot />
  </PopoverTrigger>
</template>

```

### `packages/registry-vue/components/popover/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'

export type PopoverCloseBehavior = 'auto' | 'click-outside' | 'esc' | 'manual' | 'none'

export interface PopoverContext {
  closeBehavior: Ref<PopoverCloseBehavior>
}

export const POPOVER_INJECTION_KEY: InjectionKey<PopoverContext> = Symbol('uipkge-popover')

```

### `packages/registry-vue/components/popover/index.ts`

```ts
export { default as Popover } from './Popover.vue'
export { default as PopoverAnchor } from './PopoverAnchor.vue'
export { default as PopoverContent } from './PopoverContent.vue'
export { default as PopoverTrigger } from './PopoverTrigger.vue'

```

## pricing-01

- type: `registry:block`
- description: Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + "Most popular" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.
- npm deps: `lucide-vue-next`
- registry deps: `badge`, `button`, `card`, `toggle-group`

### `packages/registry-vue/blocks/pricing-01/Pricing01.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Check, Sparkles } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

type Cycle = 'monthly' | 'yearly'
const cycle = ref<Cycle>('monthly')
</script>

<template>
  <section class="bg-background">
    <div class="mx-auto max-w-6xl px-6 py-24">
      <div class="mb-10 text-center">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">Pricing</p>
        <h2 class="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Plans for teams of every size</h2>
        <p class="text-muted-foreground mx-auto mt-3 max-w-xl text-lg">
          No hidden fees. Cancel anytime. Save 20% with annual billing.
        </p>

        <div class="mt-6 inline-flex">
          <ToggleGroup type="single" :model-value="cycle" @update:model-value="(v) => v && (cycle = v as Cycle)">
            <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
            <ToggleGroupItem value="yearly">
              Yearly
              <Badge variant="secondary" class="ml-2">−20%</Badge>
            </ToggleGroupItem>
          </ToggleGroup>
        </div>
      </div>

      <div class="grid gap-6 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle class="text-xl">Starter</CardTitle>
            <CardDescription>For small teams trying things out.</CardDescription>
            <div class="mt-4 flex items-baseline gap-1">
              <span class="text-4xl font-semibold tracking-tight"> ${{ cycle === 'monthly' ? 9 : 7 }} </span>
              <span class="text-muted-foreground text-sm">/ user / month</span>
            </div>
          </CardHeader>
          <CardContent>
            <ul class="space-y-3 text-sm">
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Up to 10 employees</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Core HR + directory</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Time off + holidays</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Email support</span>
              </li>
            </ul>
          </CardContent>
          <CardFooter>
            <Button class="w-full" variant="outline">Start free</Button>
          </CardFooter>
        </Card>

        <div class="relative">
          <Badge class="absolute -top-3 left-1/2 z-10 -translate-x-1/2 gap-1 shadow-sm">
            <Sparkles class="size-3" /> Most popular
          </Badge>
          <Card class="border-primary ring-primary/10 shadow-lg ring-1">
            <CardHeader>
              <CardTitle class="text-xl">Team</CardTitle>
              <CardDescription>For growing companies scaling people ops.</CardDescription>
              <div class="mt-4 flex items-baseline gap-1">
                <span class="text-4xl font-semibold tracking-tight"> ${{ cycle === 'monthly' ? 29 : 24 }} </span>
                <span class="text-muted-foreground text-sm">/ user / month</span>
              </div>
            </CardHeader>
            <CardContent>
              <ul class="space-y-3 text-sm">
                <li class="flex items-start gap-2">
                  <Check class="text-success mt-0.5 size-4 shrink-0" />
                  <span>Unlimited employees</span>
                </li>
                <li class="flex items-start gap-2">
                  <Check class="text-success mt-0.5 size-4 shrink-0" />
                  <span>Payroll + tax filing</span>
                </li>
                <li class="flex items-start gap-2">
                  <Check class="text-success mt-0.5 size-4 shrink-0" />
                  <span>Onboarding workflows</span>
                </li>
                <li class="flex items-start gap-2">
                  <Check class="text-success mt-0.5 size-4 shrink-0" />
                  <span>Performance reviews</span>
                </li>
                <li class="flex items-start gap-2">
                  <Check class="text-success mt-0.5 size-4 shrink-0" />
                  <span>Slack + priority support</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button class="w-full">Start 14-day trial</Button>
            </CardFooter>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle class="text-xl">Enterprise</CardTitle>
            <CardDescription>Custom controls for regulated industries.</CardDescription>
            <div class="mt-4 flex items-baseline gap-1">
              <span class="text-3xl font-semibold tracking-tight">Custom</span>
            </div>
          </CardHeader>
          <CardContent>
            <ul class="space-y-3 text-sm">
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Everything in Team</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>SSO + SCIM provisioning</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Audit logs + role policies</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>Dedicated success manager</span>
              </li>
              <li class="flex items-start gap-2">
                <Check class="text-success mt-0.5 size-4 shrink-0" />
                <span>99.99% SLA</span>
              </li>
            </ul>
          </CardContent>
          <CardFooter>
            <Button class="w-full" variant="outline">Talk to sales</Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  </section>
</template>

```

## profile-menu

- type: `registry:block`
- description: Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `dropdown-menu`

### `packages/registry-vue/blocks/profile-menu/ProfileMenu.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles, Settings } from 'lucide-vue-next'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

interface User {
  name: string
  email: string
  avatar?: string
}

const props = withDefaults(
  defineProps<{
    user?: User
  }>(),
  {
    user: () => ({ name: 'Alex Morgan', email: 'alex@example.com', avatar: '' }),
  },
)

const emit = defineEmits<{
  (e: 'select', key: 'upgrade' | 'account' | 'billing' | 'notifications' | 'settings' | 'logout'): void
}>()

const initials = computed(() => {
  const parts = props.user.name.trim().split(/\s+/).slice(0, 2)
  return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'
})
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <slot :user="user" :initials="initials">
        <button
          type="button"
          class="hover:bg-accent focus-visible:ring-ring flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-1 focus-visible:outline-none"
          aria-label="Open profile menu"
        >
          <Avatar class="size-7">
            <AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
            <AvatarFallback class="bg-primary/10 text-primary text-[11px] font-semibold">
              {{ initials }}
            </AvatarFallback>
          </Avatar>
        </button>
      </slot>
    </DropdownMenuTrigger>
    <DropdownMenuContent class="w-60 rounded-lg" align="end" :side-offset="8">
      <DropdownMenuLabel class="p-0 font-normal">
        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
          <Avatar class="size-9 rounded-lg">
            <AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
            <AvatarFallback class="bg-primary/10 text-primary rounded-lg text-xs font-semibold">
              {{ initials }}
            </AvatarFallback>
          </Avatar>
          <div class="grid flex-1 text-left leading-tight">
            <span class="truncate text-sm font-semibold">{{ user.name }}</span>
            <span class="text-muted-foreground truncate text-xs">{{ user.email }}</span>
          </div>
        </div>
      </DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem @select="emit('select', 'upgrade')">
          <Sparkles class="size-4" />
          Upgrade to Pro
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuGroup>
        <DropdownMenuItem @select="emit('select', 'account')">
          <BadgeCheck class="size-4" />
          Account
        </DropdownMenuItem>
        <DropdownMenuItem @select="emit('select', 'billing')">
          <CreditCard class="size-4" />
          Billing
        </DropdownMenuItem>
        <DropdownMenuItem @select="emit('select', 'notifications')">
          <Bell class="size-4" />
          Notifications
        </DropdownMenuItem>
        <DropdownMenuItem @select="emit('select', 'settings')">
          <Settings class="size-4" />
          Settings
        </DropdownMenuItem>
      </DropdownMenuGroup>
      <DropdownMenuSeparator />
      <DropdownMenuItem @select="emit('select', 'logout')">
        <LogOut class="size-4" />
        Log out
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

```

## progress

- type: `registry:ui`
- description: Linear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/progress/Progress.vue`

```vue
<script setup lang="ts">
import type { ProgressRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ProgressIndicator, ProgressRoot } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), {
  modelValue: 0,
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <ProgressRoot
    data-uipkge
    data-slot="progress"
    v-bind="delegatedProps"
    :class="cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', props.class)"
  >
    <ProgressIndicator
      data-uipkge
      data-slot="progress-indicator"
      class="bg-primary h-full w-full flex-1 transition-colors duration-200"
      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
    />
  </ProgressRoot>
</template>

```

### `packages/registry-vue/components/progress/index.ts`

```ts
export { default as Progress } from './Progress.vue'

```

## progress-breakdown

- type: `registry:block`
- description: Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.
- npm deps: `lucide-vue-next`
- registry deps: `section-card`, `progress-item`

### `packages/registry-vue/blocks/progress-breakdown/ProgressBreakdown.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'
import { ProgressItem } from '@/components/ui/progress-item'

interface BreakdownItem {
  name: string
  value: number
  secondaryLabel?: string
}

defineProps<{
  title?: string
  description?: string
  items: BreakdownItem[]
  headerIcon?: Component
  class?: string
}>()
</script>

<template>
  <SectionCard :title="title ?? 'Breakdown'" :description="description" :class="$props.class" content-class="space-y-4">
    <template v-if="headerIcon" #header-action>
      <component :is="headerIcon" class="text-muted-foreground size-5" />
    </template>
    <ProgressItem
      v-for="(item, index) in items"
      :key="item.name"
      :label="item.name"
      :value="item.value"
      :secondary-label="item.secondaryLabel"
      :color-index="index"
    />
  </SectionCard>
</template>

```

## progress-item

- type: `registry:ui`
- description: Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.
- registry deps: `progress`

### `packages/registry-vue/components/progress-item/ProgressItem.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { Progress } from '@/components/ui/progress'

const props = defineProps<{
  label: string
  value: number
  secondaryLabel?: string
  barClass?: string
  class?: string
  colorIndex?: number
}>()

// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.
const barColors = [
  '[&_[data-slot=progress-indicator]]:bg-primary',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',
]

const colorClass = computed(() =>
  props.colorIndex !== undefined ? barColors[props.colorIndex % barColors.length] : '',
)
</script>

<template>
  <div :class="cn('group/progress space-y-1.5', props.class)">
    <div class="flex items-center justify-between text-sm">
      <span class="font-medium">{{ label }}</span>
      <span class="text-muted-foreground text-xs tabular-nums">{{ secondaryLabel ?? `${value}%` }}</span>
    </div>
    <Progress :model-value="value" :class="cn('h-2 transition-colors duration-200', colorClass, barClass)" />
  </div>
</template>

```

### `packages/registry-vue/components/progress-item/index.ts`

```ts
export { default as ProgressItem } from './ProgressItem.vue'

```

## progress-linear

- type: `registry:ui`
- description: Top-of-screen page-loading bar (à la NProgress / nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/progress-linear/ProgressLinear.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { progressLinearVariants } from './progress-linear.variants'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    modelValue?: number
    bgColor?: string
    buffer?: number
    color?: string
    height?: number | string
    indeterminate?: boolean
    reverse?: boolean
    rounded?: 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'full'
    stream?: boolean
    striped?: boolean
    active?: boolean
  }>(),
  {
    modelValue: 0,
    indeterminate: false,
    reverse: false,
    stream: false,
    striped: false,
    active: true,
  },
)

const normalizedValue = computed(() => {
  return Math.min(100, Math.max(0, props.modelValue))
})

const normalizedBuffer = computed(() => {
  return Math.min(100, Math.max(0, props.buffer || 0))
})

const heightValue = computed(() => {
  if (typeof props.height === 'number') return `${props.height}px`
  if (typeof props.height === 'string') return props.height
  return '4px'
})

const bgColorValue = computed(() => props.bgColor || 'currentColor')

const progressColorValue = computed(() => props.color || 'currentColor')

const containerClasses = computed(() => cn(progressLinearVariants({ rounded: props.rounded }), props.class))
</script>

<template>
  <div
    data-uipkge
    data-slot="progress-linear"
    role="progressbar"
    :aria-valuemin="0"
    :aria-valuemax="100"
    :aria-valuenow="indeterminate ? undefined : normalizedValue"
    :class="containerClasses"
    :style="{ height: heightValue }"
  >
    <!-- Background -->
    <div
      class="absolute inset-0 transition-colors duration-300"
      :class="[
        striped
          ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.1)_8px,rgba(255,255,255,0.1)_16px)]'
          : '',
        !indeterminate && normalizedBuffer > 0 ? 'opacity-30' : 'opacity-100',
      ]"
      :style="{
        backgroundColor: bgColorValue,
        width: normalizedBuffer > 0 ? `${normalizedBuffer}%` : '100%',
      }"
    />

    <!-- Buffer (if buffer > 0) -->
    <div
      v-if="!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100"
      class="absolute inset-0 transition-colors duration-300"
      :class="[
        reverse ? 'right-0 left-auto' : 'right-auto left-0',
        striped
          ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.15)_8px,rgba(255,255,255,0.15)_16px)]'
          : '',
      ]"
      :style="{
        backgroundColor: bgColorValue,
        width: `${normalizedBuffer}%`,
        opacity: 0.3,
      }"
    />

    <!-- Stream lines (when stream is true) -->
    <div
      v-if="stream && !indeterminate && active"
      class="absolute inset-0 overflow-hidden"
      :class="reverse ? 'right-0 left-auto' : 'right-auto left-0'"
    >
      <div
        class="animate-stream absolute inset-0 bg-[repeating-linear-gradient(90deg,transparent,transparent_10px,rgba(255,255,255,0.2)_10px,rgba(255,255,255,0.2)_20px)] bg-[length:40px_40px]"
        :style="{ width: `${normalizedBuffer || 100}%` }"
      />
    </div>

    <!-- Progress bar -->
    <div
      class="absolute inset-y-0 transition-colors duration-300"
      :class="[
        reverse ? 'right-0 left-auto' : 'right-auto left-0',
        indeterminate ? 'motion-safe:animate-indeterminate' : '',
        striped && !indeterminate
          ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.25)_8px,rgba(255,255,255,0.25)_16px)]'
          : '',
      ]"
      :style="{
        width: indeterminate ? '100%' : `${normalizedValue}%`,
        backgroundColor: indeterminate ? undefined : progressColorValue,
      }"
    >
      <!-- Indeterminate animations -->
      <template v-if="indeterminate">
        <div
          class="motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit"
          :style="{ backgroundColor: progressColorValue }"
        />
        <div
          class="motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit"
          :style="{ backgroundColor: progressColorValue }"
        />
      </template>
    </div>
  </div>
</template>

<style scoped>
@media (prefers-reduced-motion: no-preference) {
  .animate-indeterminate {
    animation: indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-indeterminate1 {
    animation: indeterminate1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-indeterminate2 {
    animation: indeterminate2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

.animate-stream {
  animation: stream 1s linear infinite;
}

@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@keyframes indeterminate1 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@keyframes indeterminate2 {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(400%);
    opacity: 0;
  }
}

@keyframes stream {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(40px);
  }
}
</style>

```

### `packages/registry-vue/components/progress-linear/progress-linear.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than inline in the
 * SFC) so `ProgressLinear.vue` can import them without the cva runtime
 * coupling that breaks SSR when several `<ProgressLinear>` instances
 * render before the module graph fully resolves. Sibling pattern to
 * `card/card.variants.ts`.
 */
export const progressLinearVariants = cva('relative overflow-hidden w-full', {
  variants: {
    rounded: {
      none: 'rounded-none',
      sm: 'rounded-sm',
      default: 'rounded-full',
      md: 'rounded-md',
      lg: 'rounded-lg',
      xl: 'rounded-xl',
      full: 'rounded-full',
    },
    color: {
      default: 'bg-primary',
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      destructive: 'bg-destructive',
      success: 'bg-[var(--success)]',
      warning: 'bg-[var(--warning)]',
      info: 'bg-[var(--info)]',
      error: 'bg-destructive',
    },
  },
  defaultVariants: {
    rounded: 'default',
    color: 'default',
  },
})

export type ProgressLinearVariants = VariantProps<typeof progressLinearVariants>

```

### `packages/registry-vue/components/progress-linear/index.ts`

```ts
export { default as ProgressLinear } from './ProgressLinear.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// ProgressLinear.vue <-> index.ts circular import that broke dev SSR).
export { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'

```

## qr-code

- type: `registry:ui`
- description: Static QR code renderer — pass `value` and a size, get an SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. No dependencies on a heavy QR library.
- npm deps: `qrcode`, `lucide-vue-next`

### `packages/registry-vue/components/qr-code/QRCode.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
// @ts-expect-error -- qrcode ships no type declarations; consumers may install @types/qrcode optionally
import QRCodeLib from 'qrcode'
import { Loader2, RotateCcw, Check, ScanLine } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

export type QRCodeType = 'canvas' | 'svg'
export type QRCodeStatus = 'active' | 'expired' | 'loading' | 'scanned'
export type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'

const props = withDefaults(
  defineProps<{
    value: string
    type?: QRCodeType
    size?: number
    color?: string
    bgColor?: string
    icon?: string
    iconSize?: number | { width: number; height: number }
    errorLevel?: QRCodeErrorLevel
    bordered?: boolean
    status?: QRCodeStatus
    marginSize?: number
    class?: HTMLAttributes['class']
  }>(),
  {
    type: 'canvas',
    size: 160,
    color: '#000000',
    bgColor: '#ffffff',
    errorLevel: 'M',
    bordered: true,
    status: 'active',
    marginSize: 0,
  },
)

const emit = defineEmits<{
  refresh: []
}>()

const qrDataUrl = ref('')
const qrSvg = ref('')
const isGenerating = ref(false)

const iconDimensions = computed(() => {
  if (typeof props.iconSize === 'number') {
    return { width: props.iconSize, height: props.iconSize }
  }
  return props.iconSize ?? { width: 40, height: 40 }
})

const errorCorrectionLevel = computed(() => props.errorLevel)

async function generateQR() {
  if (!props.value || props.status === 'loading') return

  isGenerating.value = true
  try {
    const options = {
      width: props.size,
      margin: props.marginSize,
      color: {
        dark: props.color,
        light: props.bgColor,
      },
      errorCorrectionLevel: errorCorrectionLevel.value,
    }

    if (props.type === 'svg') {
      qrSvg.value = await QRCodeLib.toString(props.value, {
        type: 'svg',
        ...options,
      })
    } else {
      qrDataUrl.value = await QRCodeLib.toDataURL(props.value, options)
    }
  } catch (e) {
    console.error('QR Code generation failed:', e)
  } finally {
    isGenerating.value = false
  }
}

watch(
  () => [
    props.value,
    props.type,
    props.size,
    props.color,
    props.bgColor,
    props.errorLevel,
    props.marginSize,
    props.status,
  ],
  () => generateQR(),
  { immediate: true },
)

function downloadQR() {
  const link = document.createElement('a')
  link.download = `qrcode-${props.value.slice(0, 20)}.png`
  link.href = qrDataUrl.value
  link.click()
}

function handleRefresh() {
  emit('refresh')
}

const statusOverlay = computed(() => {
  switch (props.status) {
    case 'expired':
      return {
        icon: RotateCcw,
        text: 'Expired',
        action: handleRefresh,
      }
    case 'scanned':
      return {
        icon: Check,
        text: 'Scanned',
        action: null,
      }
    case 'loading':
      return {
        icon: Loader2,
        text: 'Loading...',
        action: null,
      }
    default:
      return null
  }
})
</script>

<template>
  <div
    data-uipkge
    data-slot="qr-code"
    :class="
      cn('inline-flex flex-col items-center gap-2', bordered && 'bg-background rounded-lg border p-4', props.class)
    "
  >
    <div
      class="relative inline-flex items-center justify-center overflow-hidden"
      :style="{ width: `${size}px`, height: `${size}px` }"
    >
      <!-- QR Code -->
      <template v-if="type === 'svg' && qrSvg">
        <div v-html="qrSvg" class="size-full" />
      </template>
      <template v-else-if="qrDataUrl">
        <img :src="qrDataUrl" :alt="`QR Code for ${value}`" class="size-full" />
      </template>

      <!-- Icon overlay -->
      <div v-if="icon && status === 'active'" class="absolute inset-0 flex items-center justify-center">
        <div
          class="overflow-hidden rounded-md bg-white shadow-sm"
          :style="{
            width: `${iconDimensions.width}px`,
            height: `${iconDimensions.height}px`,
          }"
        >
          <img :src="icon" alt="" class="size-full object-cover" />
        </div>
      </div>

      <!-- Status overlay -->
      <div
        v-if="statusOverlay"
        class="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-white/90 backdrop-blur-sm"
      >
        <component :is="statusOverlay.icon" class="size-8" :class="status === 'loading' && 'animate-spin'" />
        <span class="text-foreground text-sm font-medium">{{ statusOverlay.text }}</span>
        <button
          v-if="statusOverlay.action"
          type="button"
          class="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-3 py-1 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
          @click="statusOverlay.action"
        >
          <ScanLine class="size-3" />
          Refresh
        </button>
      </div>
    </div>

    <!-- Download button -->
    <slot name="extra">
      <button
        v-if="type === 'canvas' && status === 'active' && qrDataUrl"
        type="button"
        class="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:outline-none"
        @click="downloadQR"
      >
        Download
      </button>
    </slot>
  </div>
</template>

```

### `packages/registry-vue/components/qr-code/index.ts`

```ts
export { default as QRCode } from './QRCode.vue'
export type { QRCodeType, QRCodeStatus, QRCodeErrorLevel } from './QRCode.vue'

```

## quick-actions

- type: `registry:block`
- description: Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (NuxtLink or RouterLink) for SPA routing.
- npm deps: `lucide-vue-next`
- registry deps: `section-card`, `icon-box`

### `packages/registry-vue/blocks/quick-actions/QuickActions.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import { ArrowUpRight } from 'lucide-vue-next'
import { SectionCard } from '@/components/ui/section-card'
import { IconBox } from '@/components/ui/icon-box'

interface QuickAction {
  id: string | number
  label: string
  icon?: Component
  route: string
}

withDefaults(
  defineProps<{
    title?: string
    description?: string
    actions: QuickAction[]
    linkComponent?: string | Component
    class?: string
  }>(),
  { linkComponent: 'a' },
)
</script>

<template>
  <SectionCard
    :title="title ?? 'Quick Actions'"
    :description="description"
    content-class="flex flex-col gap-2"
    :class="$props.class"
  >
    <component
      :is="linkComponent"
      v-for="action in actions"
      :key="action.id"
      :to="action.route"
      :href="action.route"
      class="hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-all duration-200"
    >
      <IconBox v-if="action.icon" :icon="action.icon" />
      <span class="flex-1 text-sm font-medium">{{ action.label }}</span>
      <ArrowUpRight
        class="text-muted-foreground size-4 opacity-0 transition-all duration-200 group-hover:opacity-100"
      />
    </component>
  </SectionCard>
</template>

```

## radar-chart

- type: `registry:ui`
- description: Radar (spider) chart wrapper around Apache ECharts. Multi-series with optional fill. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/radar-chart/RadarChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { RadarChart as EChartsRadarChart } from 'echarts/charts'
import { RadarComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsRadarChart, RadarComponent, TooltipComponent, LegendComponent])

interface Props {
  indicators: { name: string; max: number }[]
  data: { name: string; value: number[] }[]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 300,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'radar',
      data: props.data.map((d, i) => ({
        ...d,
        itemStyle: { color: chartColors.value[i % chartColors.value.length] },
        areaStyle: { opacity: 0.15 },
        lineStyle: { width: 2 },
      })),
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { fontSize: 11 },
    },
    radar: {
      indicator: props.indicators,
      radius: '60%',
      center: ['50%', '45%'],
      axisName: { fontSize: 11 },
      splitArea: { areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.05)'] } },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/radar-chart/index.ts`

```ts
export { default as RadarChart } from './RadarChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## radio-group

- type: `registry:ui`
- description: Single-selection group of radio inputs. Vertical or horizontal layout, optional descriptions per item, and full keyboard navigation. Pair with Form for validation messages.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/radio-group/RadioGroup.vue`

```vue
<script setup lang="ts">
import type { RadioGroupRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, getCurrentInstance, provide } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

export type RadioOption = string | { label: string; value: string; disabled?: boolean }

// CLAUDE.md mandate: avoid `interface extends ReakUiX` (SFC compiler bails
// in Vue 3.5+ because reka-ui has no exports.types). The intersection form
// `defineProps<External & Extra>()` delegates type extraction to TS.
export type RadioGroupProps = Omit<RadioGroupRootProps, 'defaultValue' | 'modelValue'> & {
  class?: HTMLAttributes['class']
  /** The controlled value of the radio items to check. Can be binded with v-model. */
  modelValue?: any
  /** The value of the radio items that should be checked when initially rendered. */
  defaultValue?: any
  /** When `true`, prevents the user from interacting with the radio group */
  disabled?: boolean
  /** The orientation of the radio items */
  orientation?: 'horizontal' | 'vertical'
  /** When `true`, keyboard navigation will loop from last item to first, and vice versa */
  loop?: boolean
  /** Label for the radio group */
  label?: string
  /** Hint text for the radio group */
  hint?: string
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Density of the radio items */
  density?: 'compact' | 'default' | 'comfortable'
  /** Whether the radio group appears flat */
  flat?: boolean
  /** Whether to show a border around the group */
  bordered?: boolean
  /** The reading direction */
  dir?: 'ltr' | 'rtl'
  /** Array of options to render automatically */
  options?: RadioOption[]
  /** Size of button-style radios */
  size?: 'small' | 'middle' | 'large'
  /** Type of options to render */
  optionType?: 'default' | 'button'
  /** Visual variant for button-style radios */
  buttonVariant?: 'outline' | 'solid'
}

const props = withDefaults(defineProps<RadioGroupProps>(), {
  orientation: 'vertical',
  density: 'default',
  flat: false,
  bordered: false,
  loop: true,
  disabled: false,
  size: 'middle',
  optionType: 'default',
  buttonVariant: 'outline',
})

const emits = defineEmits<{
  'update:modelValue': [value: any]
}>()

provide('radioGroup', {
  disabled: props.disabled,
  size: props.size,
  optionType: props.optionType,
  buttonVariant: props.buttonVariant,
  orientation: props.orientation,
})

const delegatedProps = reactiveOmit(
  props,
  'class',
  'label',
  'hint',
  'errorMessages',
  'error',
  'density',
  'flat',
  'bordered',
  'defaultValue',
  'modelValue',
  'options',
  'size',
  'optionType',
  'buttonVariant',
)

const forwarded = useForwardPropsEmits(delegatedProps, emits)

const instance = getCurrentInstance()
const isControlled = computed(() => Boolean(instance?.vnode?.props?.['onUpdate:modelValue']))
const userPassedModelValue = computed(() => {
  const raw = instance?.vnode?.props
  return Boolean(raw && ('modelValue' in raw || 'model-value' in raw))
})

const radioStateBindings = computed(() => {
  if (isControlled.value) return { 'model-value': props.modelValue }
  // Uncontrolled — seed default-value from explicit modelValue or defaultValue prop.
  if (props.defaultValue !== undefined) return { 'default-value': props.defaultValue }
  if (userPassedModelValue.value) return { 'default-value': props.modelValue }
  return {}
})

// Density classes
const densityClasses = {
  compact: 'gap-1',
  default: 'gap-3',
  comfortable: 'gap-4',
}

// Build error state
const hasError = computed(() => {
  if (props.error) return true
  if (
    props.errorMessages &&
    (typeof props.errorMessages === 'string' ? props.errorMessages : props.errorMessages.length > 0)
  )
    return true
  return false
})

function normalizeOption(option: RadioOption): { label: string; value: string; disabled?: boolean } {
  if (typeof option === 'string') {
    return { label: option, value: option }
  }
  return option
}
</script>

<template>
  <!--
    `props.class` is forwarded ONLY to RadioGroupRoot below (per shadcn
    convention). Applying it on the outer wrapper as well caused grid-*
    utilities to fight the wrapper's `flex flex-col`, so consumers had
    to fall back to column-count hacks. Forwarding to one element keeps
    layout intent unambiguous.
  -->
  <div class="flex flex-col gap-2">
    <label v-if="label" class="text-sm font-medium">
      {{ label }}
    </label>

    <p v-if="hint && !hasError" class="text-muted-foreground text-xs">
      {{ hint }}
    </p>

    <RadioGroupRoot
      v-slot="slotProps"
      v-bind="{ 'data-slot': 'radio-group', ...forwarded, ...radioStateBindings }"
      :class="
        cn(
          'grid gap-3',
          orientation === 'horizontal' && 'flex flex-row items-center gap-4',
          optionType === 'button' && orientation === 'horizontal' && 'flex flex-row items-stretch gap-0',
          optionType === 'button' && orientation === 'vertical' && 'flex flex-col items-stretch gap-0',
          optionType !== 'button' && densityClasses[density],
          bordered && 'rounded-lg border p-4',
          props.class,
        )
      "
      @update:model-value="(val: any) => emits('update:modelValue', val)"
    >
      <template v-if="options && options.length > 0">
        <template v-if="optionType === 'button'">
          <RadioButton
            v-for="option in options"
            :key="normalizeOption(option).value"
            :value="normalizeOption(option).value"
            :disabled="normalizeOption(option).disabled"
            :label="normalizeOption(option).label"
          />
        </template>
        <template v-else>
          <div v-for="option in options" :key="normalizeOption(option).value" class="flex items-center gap-2">
            <RadioGroupItem
              :id="normalizeOption(option).value"
              :value="normalizeOption(option).value"
              :disabled="normalizeOption(option).disabled"
            />
            <label
              :for="normalizeOption(option).value"
              class="cursor-pointer text-sm font-medium select-none"
              :class="normalizeOption(option).disabled && 'cursor-not-allowed opacity-50'"
            >
              {{ normalizeOption(option).label }}
            </label>
          </div>
        </template>
      </template>

      <slot v-bind="slotProps" />
    </RadioGroupRoot>

    <div v-if="hasError" class="flex flex-col gap-0.5">
      <p v-if="typeof errorMessages === 'string'" class="text-destructive text-xs">
        {{ errorMessages }}
      </p>
      <template v-else>
        <p v-for="(msg, i) in errorMessages" :key="i" class="text-destructive text-xs">
          {{ msg }}
        </p>
      </template>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/radio-group/RadioGroupItem.vue`

```vue
<script setup lang="ts">
import type { RadioGroupItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, inject } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Circle } from 'lucide-vue-next'
import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

// CLAUDE.md mandate: avoid `interface extends ReakUiX` (SFC compiler bails
// in Vue 3.5+ because reka-ui has no exports.types). Intersection form below.
export type RadioGroupItemPropsExtended = Omit<RadioGroupItemProps, 'defaultChecked'> & {
  class?: HTMLAttributes['class']
  /** Size of the radio item */
  size?: 'sm' | 'md' | 'lg'
  /** Custom color for the checked state */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Label text displayed next to the radio item */
  label?: string
  /** Hint text shown below the radio item */
  hint?: string
  /** Error message to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Density of the radio item */
  density?: 'compact' | 'default' | 'comfortable'
  /** Label position - before or after the radio */
  labelPosition?: 'before' | 'after'
  /** Loading state */
  loading?: boolean
  /** Hide the indicator icon */
  hideIcon?: boolean
}

const props = withDefaults(defineProps<RadioGroupItemPropsExtended>(), {
  size: 'md',
  density: 'default',
  color: 'primary',
  labelPosition: 'after',
  hideIcon: false,
})

const delegatedProps = reactiveOmit(
  props,
  'class',
  'size',
  'color',
  'label',
  'hint',
  'errorMessages',
  'error',
  'density',
  'labelPosition',
  'loading',
  'hideIcon',
)

const forwardedProps = useForwardProps(delegatedProps)

const groupContext = inject<{
  disabled?: boolean
  size?: 'small' | 'middle' | 'large'
  optionType?: 'default' | 'button'
  buttonVariant?: 'outline' | 'solid'
  orientation?: 'horizontal' | 'vertical'
}>('radioGroup', {})

const effectiveDisabled = computed(() => props.disabled ?? groupContext.disabled ?? false)

// Size classes
const sizeClasses = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-5',
}

const indicatorSizes = {
  sm: 'size-1.5',
  md: 'size-2',
  lg: 'size-2.5',
}

// Color classes
const colorClasses: Record<string, string> = {
  primary: 'data-[state=checked]:border-primary',
  secondary: 'data-[state=checked]:border-secondary',
  success: 'data-[state=checked]:border-[var(--success)] data-[state=checked]:text-[var(--success)]',
  warning: 'data-[state=checked]:border-[var(--warning)] data-[state=checked]:text-[var(--warning)]',
  error: 'data-[state=checked]:border-destructive data-[state=checked]:text-destructive',
  info: 'data-[state=checked]:border-[var(--info)] data-[state=checked]:text-[var(--info)]',
}

// Density classes
const densityClasses = {
  compact: 'gap-1',
  default: 'gap-2',
  comfortable: 'gap-3',
}

// Build error state
const hasError = computed(() => {
  if (props.error) return true
  if (
    props.errorMessages &&
    (typeof props.errorMessages === 'string' ? props.errorMessages : props.errorMessages.length > 0)
  )
    return true
  return false
})
</script>

<template>
  <div class="flex items-start" :class="[densityClasses[density]]">
    <label
      v-if="label && labelPosition === 'before'"
      :for="id"
      class="mr-2 cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      :class="[hasError ? 'text-destructive' : '', effectiveDisabled && 'cursor-not-allowed opacity-50']"
    >
      {{ label }}
    </label>

    <div class="flex items-center">
      <RadioGroupItem
        v-bind="forwardedProps"
        :id="id"
        data-uipkge
        data-slot="radio-group-item"
        :value="value"
        :disabled="effectiveDisabled"
        :class="
          cn(
            'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square shrink-0 rounded-full border shadow-sm transition-colors duration-200 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
            sizeClasses[size],
            colorClasses[color] || colorClasses.primary,
            hasError && 'border-destructive',
            props.class,
          )
        "
      >
        <RadioGroupIndicator
          data-uipkge
          data-slot="radio-group-indicator"
          class="relative flex items-center justify-center"
        >
          <slot>
            <Circle
              v-if="!hideIcon"
              :class="
                cn(
                  'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-current text-current',
                  indicatorSizes[size],
                )
              "
            />
          </slot>
        </RadioGroupIndicator>
      </RadioGroupItem>

      <label
        v-if="label && labelPosition === 'after'"
        :for="id"
        class="ml-2 cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        :class="[hasError ? 'text-destructive' : '', effectiveDisabled && 'cursor-not-allowed opacity-50']"
      >
        {{ label }}
      </label>
    </div>

    <p v-if="hint && !hasError" class="text-muted-foreground mt-1 ml-6 text-xs">
      {{ hint }}
    </p>

    <div v-if="hasError" class="mt-1 ml-6 flex flex-col gap-0.5">
      <p v-if="typeof errorMessages === 'string'" class="text-destructive text-xs">
        {{ errorMessages }}
      </p>
      <template v-else>
        <p v-for="(msg, i) in errorMessages" :key="i" class="text-destructive text-xs">
          {{ msg }}
        </p>
      </template>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/radio-group/RadioButton.vue`

```vue
<script setup lang="ts">
import type { RadioGroupItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, inject } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RadioGroupItem, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

// CLAUDE.md mandate: avoid `interface extends ReakUiX` (SFC compiler bails
// in Vue 3.5+ because reka-ui has no exports.types). Intersection form below.
export type RadioButtonProps = Omit<RadioGroupItemProps, 'defaultChecked'> & {
  class?: HTMLAttributes['class']
  /** Size of the button radio */
  size?: 'small' | 'middle' | 'large'
  /** Visual variant */
  variant?: 'outline' | 'solid'
  /** Label text */
  label?: string
}

const props = withDefaults(defineProps<RadioButtonProps>(), {
  size: undefined,
  variant: undefined,
})

const context = inject<{
  disabled?: boolean
  size?: 'small' | 'middle' | 'large'
  optionType?: 'default' | 'button'
  buttonVariant?: 'outline' | 'solid'
  orientation?: 'horizontal' | 'vertical'
}>('radioGroup', {})

const effectiveSize = computed(() => props.size ?? context.size ?? 'middle')
const effectiveVariant = computed(() => props.variant ?? context.buttonVariant ?? 'outline')
const effectiveDisabled = computed(() => props.disabled ?? context.disabled ?? false)

const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant', 'label')
const forwardedProps = useForwardProps(delegatedProps)

const sizeClasses = {
  small: 'h-7 px-2.5 text-xs',
  middle: 'h-8 px-4 text-sm',
  large: 'h-10 px-4.5 text-base',
}

const variantClasses = {
  outline: cn(
    'border border-input bg-transparent text-foreground hover:text-foreground hover:bg-muted/50',
    'data-[state=checked]:border-primary data-[state=checked]:text-primary',
    'disabled:hover:bg-transparent',
  ),
  solid: cn(
    'border border-input bg-transparent text-foreground hover:text-foreground hover:bg-muted/50',
    'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
    'disabled:hover:bg-transparent',
  ),
}

const groupClasses = computed(() => {
  if (context.orientation === 'vertical') {
    return 'rounded-md w-full justify-start'
  }
  return cn('rounded-none first:rounded-l-md last:rounded-r-md', 'border-l-0 first:border-l', '-ml-px first:ml-0')
})
</script>

<template>
  <RadioGroupItem
    v-bind="forwardedProps"
    data-uipkge
    data-slot="radio-button"
    :value="value"
    :disabled="effectiveDisabled"
    :class="
      cn(
        'inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-colors duration-200',
        'focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
        'disabled:cursor-not-allowed disabled:opacity-50',
        sizeClasses[effectiveSize],
        variantClasses[effectiveVariant],
        groupClasses,
        props.class,
      )
    "
  >
    <slot>
      {{ label ?? value }}
    </slot>
  </RadioGroupItem>
</template>

```

### `packages/registry-vue/components/radio-group/index.ts`

```ts
export { default as RadioGroup } from './RadioGroup.vue'
export { default as RadioGroupItem } from './RadioGroupItem.vue'
export { default as RadioButton } from './RadioButton.vue'

```

## range-calendar

- type: `registry:ui`
- description: Calendar variant for from/to date selection — click two dates and the range fills in between. Same min/max and disabled-date support as the single-date Calendar.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `button`

### `packages/registry-vue/components/range-calendar/RangeCalendar.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import {
  RangeCalendarCell,
  RangeCalendarCellTrigger,
  RangeCalendarGrid,
  RangeCalendarGridBody,
  RangeCalendarGridHead,
  RangeCalendarGridRow,
  RangeCalendarHeadCell,
  RangeCalendarHeader,
  RangeCalendarHeading,
  RangeCalendarNextButton,
  RangeCalendarPrevButton,
} from '.'

const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()

const emits = defineEmits<RangeCalendarRootEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <RangeCalendarRoot
    v-slot="{ grid, weekDays }"
    data-uipkge
    data-slot="range-calendar"
    :class="cn('p-3', props.class)"
    v-bind="forwarded"
  >
    <RangeCalendarHeader>
      <RangeCalendarHeading />

      <div class="flex items-center gap-1">
        <RangeCalendarPrevButton />
        <RangeCalendarNextButton />
      </div>
    </RangeCalendarHeader>

    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
        <RangeCalendarGridHead>
          <RangeCalendarGridRow>
            <RangeCalendarHeadCell v-for="day in weekDays" :key="day">
              {{ day }}
            </RangeCalendarHeadCell>
          </RangeCalendarGridRow>
        </RangeCalendarGridHead>
        <RangeCalendarGridBody>
          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
            <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
              <RangeCalendarCellTrigger :day="weekDate" :month="month.value" />
            </RangeCalendarCell>
          </RangeCalendarGridRow>
        </RangeCalendarGridBody>
      </RangeCalendarGrid>
    </div>
  </RangeCalendarRoot>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarCell.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarCellProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarCell, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarCell
    data-uipkge
    data-slot="range-calendar-cell"
    :class="
      cn(
        '[&:has([data-selected])]:bg-accent [&:has([data-highlighted])]:bg-accent relative p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarCell>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarCellTrigger.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarCellTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = withDefaults(defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
  as: 'button',
})

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarCellTrigger
    data-uipkge
    data-slot="range-calendar-trigger"
    :class="
      cn(
        buttonVariants({ variant: 'ghost' }),
        'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
        // Selection Start
        'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
        // Selection End
        'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
        // Outside months
        'data-[outside-view]:text-muted-foreground',
        // Disabled
        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
        // Unavailable
        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarCellTrigger>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarGrid.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarGridProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarGrid, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarGrid
    data-uipkge
    data-slot="range-calendar-grid"
    :class="cn('w-full border-collapse space-x-1', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarGrid>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarGridBody.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarGridBodyProps } from 'reka-ui'
import { RangeCalendarGridBody } from 'reka-ui'

const props = defineProps<RangeCalendarGridBodyProps>()
</script>

<template>
  <RangeCalendarGridBody data-uipkge data-slot="range-calendar-grid-body" v-bind="props">
    <slot />
  </RangeCalendarGridBody>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarGridHead.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarGridHeadProps } from 'reka-ui'
import { RangeCalendarGridHead } from 'reka-ui'

const props = defineProps<RangeCalendarGridHeadProps>()
</script>

<template>
  <RangeCalendarGridHead data-uipkge data-slot="range-calendar-grid-head" v-bind="props">
    <slot />
  </RangeCalendarGridHead>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarGridRow.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarGridRowProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarGridRow, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarGridRow
    data-uipkge
    data-slot="range-calendar-grid-row"
    :class="cn('flex', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarGridRow>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarHeadCell.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarHeadCellProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarHeadCell, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarHeadCell
    data-uipkge
    data-slot="range-calendar-head-cell"
    :class="cn('text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarHeadCell>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarHeader.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarHeaderProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarHeader, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarHeader
    data-uipkge
    data-slot="range-calendar-header"
    :class="cn('relative flex w-full items-center justify-center pt-1', props.class)"
    v-bind="forwardedProps"
  >
    <slot />
  </RangeCalendarHeader>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarHeading.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarHeadingProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { RangeCalendarHeading, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()

defineSlots<{
  default: (props: { headingValue: string }) => any
}>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarHeading
    v-slot="{ headingValue }"
    data-uipkge
    data-slot="range-calendar-heading"
    :class="cn('text-sm font-medium', props.class)"
    v-bind="forwardedProps"
  >
    <slot :heading-value>
      {{ headingValue }}
    </slot>
  </RangeCalendarHeading>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarNextButton.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarNextProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronRight } from 'lucide-vue-next'
import { RangeCalendarNext, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarNext
    data-uipkge
    data-slot="range-calendar-next-button"
    :class="
      cn(
        buttonVariants({ variant: 'outline' }),
        'absolute right-1',
        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot>
      <ChevronRight class="size-4" aria-hidden="true" />
    </slot>
  </RangeCalendarNext>
</template>

```

### `packages/registry-vue/components/range-calendar/RangeCalendarPrevButton.vue`

```vue
<script lang="ts" setup>
import type { RangeCalendarPrevProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronLeft } from 'lucide-vue-next'
import { RangeCalendarPrev, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <RangeCalendarPrev
    data-uipkge
    data-slot="range-calendar-prev-button"
    :class="
      cn(
        buttonVariants({ variant: 'outline' }),
        'absolute left-1',
        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
        props.class,
      )
    "
    v-bind="forwardedProps"
  >
    <slot>
      <ChevronLeft class="size-4" aria-hidden="true" />
    </slot>
  </RangeCalendarPrev>
</template>

```

### `packages/registry-vue/components/range-calendar/index.ts`

```ts
export { default as RangeCalendar } from './RangeCalendar.vue'
export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'

```

## range-slider

- type: `registry:ui`
- description: Two-thumb range slider for "between X and Y" inputs — price filters, age ranges, time windows. Built on reka-ui with proper keyboard handling and aria-valuetext.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/range-slider/RangeSlider.vue`

```vue
<script setup lang="ts">
import type { SliderRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

// CLAUDE.md mandate: avoid `interface extends ReakUiX` (SFC compiler bails
// in Vue 3.5+ because reka-ui has no exports.types). Intersection form below.
export type RangeSliderProps = Omit<SliderRootProps, 'defaultValue'> & {
  class?: HTMLAttributes['class']
  /** The controlled value of the range slider. Can be binded with v-model. */
  modelValue?: [number, number]
  /** The value of the range slider that should be checked when initially rendered. */
  defaultValue?: [number, number]
  /** When `true`, prevents the user from interacting with the range slider */
  disabled?: boolean
  /** Minimum value */
  min?: number
  /** Maximum value */
  max?: number
  /** Step value */
  step?: number
  /** Label for the range slider */
  label?: string
  /** Hint text for the range slider */
  hint?: string
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Custom color for the track fill */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Thumb size */
  thumbSize?: 'sm' | 'md' | 'lg'
  /** Track height */
  trackHeight?: 'sm' | 'md' | 'lg'
  /** Show ticks */
  showTicks?: boolean
  /** Tick interval */
  tickInterval?: number
  /** Show thumb labels */
  thumbLabel?: boolean
  /** Always show dirty state */
  alwaysDirty?: boolean
  /** Invert the slider */
  inverted?: boolean
  /** Density of the slider */
  density?: 'compact' | 'default' | 'comfortable'
  /** Hide thumb labels (deprecated, use thumbLabel instead) */
  hideThumbLabel?: boolean
  /** Format thumb label */
  thumbLabelFormat?: (value: number) => string
  /** Strict range (thumbs cannot cross) */
  strict?: boolean
}

const props = withDefaults(defineProps<RangeSliderProps>(), {
  min: 0,
  max: 100,
  step: 1,
  density: 'default',
  thumbSize: 'md',
  trackHeight: 'md',
})

const emits = defineEmits<{
  'update:modelValue': [value: [number, number]]
}>()

const delegatedProps = reactiveOmit(
  props,
  'class',
  'label',
  'hint',
  'errorMessages',
  'error',
  'color',
  'thumbSize',
  'trackHeight',
  'showTicks',
  'tickInterval',
  'thumbLabel',
  'thumbLabelFormat',
  'alwaysDirty',
  'inverted',
  'density',
  'hideThumbLabel',
  'strict',
)

const forwarded = useForwardPropsEmits(delegatedProps, emits)

// Color classes
const colorClasses: Record<string, string> = {
  primary: 'bg-primary',
  secondary: 'bg-secondary',
  success: 'bg-[var(--success)]',
  warning: 'bg-[var(--warning)]',
  error: 'bg-destructive',
  info: 'bg-[var(--info)]',
}

// Track height classes
const trackHeightClasses = {
  sm: 'h-1',
  md: 'h-1.5',
  lg: 'h-2',
}

// Thumb size classes
const thumbSizeClasses = {
  sm: 'size-3',
  md: 'size-4',
  lg: 'size-5',
}

// Generate ticks
const ticks = computed(() => {
  if (!props.showTicks || !props.tickInterval) return []
  const result: number[] = []
  for (let i = props.min; i <= props.max; i += props.tickInterval) {
    result.push(i)
  }
  return result
})

// Build error state
const hasError = computed(() => {
  if (props.error) return true
  if (
    props.errorMessages &&
    (typeof props.errorMessages === 'string' ? props.errorMessages : props.errorMessages.length > 0)
  )
    return true
  return false
})

// Calculate positions for ticks and labels
const tickPositions = computed(() => {
  return ticks.value.map((tick) => ({
    value: tick,
    position: ((tick - props.min) / (props.max - props.min)) * 100,
  }))
})
</script>

<template>
  <div class="flex flex-col gap-2">
    <label v-if="label" class="text-sm font-medium">
      {{ label }}
    </label>

    <p v-if="hint && !hasError" class="text-muted-foreground text-xs">
      {{ hint }}
    </p>

    <div class="flex items-center gap-4">
      <!-- Min value display -->
      <div class="text-muted-foreground min-w-[3rem] text-sm">
        {{ modelValue?.[0] ?? min }}
      </div>

      <SliderRoot
        v-slot="{ modelValue }"
        v-bind="{ 'data-slot': 'range-slider', ...forwarded }"
        class="relative flex w-full touch-none items-center select-none"
        @update:model-value="(val) => emits('update:modelValue', val as [number, number])"
      >
        <SliderTrack
          data-uipkge
          data-slot="slider-track"
          :class="cn('bg-muted relative w-full overflow-hidden rounded-full', trackHeightClasses[trackHeight])"
        >
          <SliderRange
            data-uipkge
            data-slot="slider-range"
            :class="cn('absolute h-full', colorClasses[color as string] || colorClasses.primary)"
          />
        </SliderTrack>

        <!-- Ticks -->
        <div
          v-if="showTicks && ticks.length > 0"
          class="pointer-events-none absolute top-1/2 right-0 left-0 flex -translate-y-1/2 justify-between"
        >
          <div v-for="tick in ticks" :key="tick" class="bg-muted-foreground/30 h-2 w-0.5 rounded-full" />
        </div>

        <!-- Start Thumb (Min) -->
        <SliderThumb
          data-uipkge
          data-slot="slider-thumb"
          :index="0"
          :class="
            cn(
              'border-primary ring-ring/50 bg-background block rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
              thumbSizeClasses[thumbSize],
              hasError && 'border-destructive',
            )
          "
        >
          <span
            v-if="thumbLabel"
            class="bg-background absolute -top-6 left-1/2 -translate-x-1/2 rounded px-1 text-xs whitespace-nowrap"
          >
            {{ thumbLabelFormat ? thumbLabelFormat(modelValue?.[0] ?? 0) : (modelValue?.[0] ?? 0) }}
          </span>
        </SliderThumb>

        <!-- End Thumb (Max) -->
        <SliderThumb
          data-uipkge
          data-slot="slider-thumb"
          :index="1"
          :class="
            cn(
              'border-primary ring-ring/50 bg-background block rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
              thumbSizeClasses[thumbSize],
              hasError && 'border-destructive',
            )
          "
        >
          <span
            v-if="thumbLabel"
            class="bg-background absolute -top-6 left-1/2 -translate-x-1/2 rounded px-1 text-xs whitespace-nowrap"
          >
            {{ thumbLabelFormat ? thumbLabelFormat(modelValue?.[1] ?? 0) : (modelValue?.[1] ?? 0) }}
          </span>
        </SliderThumb>
      </SliderRoot>

      <!-- Max value display -->
      <div class="text-muted-foreground min-w-[3rem] text-sm">
        {{ modelValue?.[1] ?? max }}
      </div>
    </div>

    <!-- Tick labels -->
    <div v-if="showTicks && ticks.length > 0" class="text-muted-foreground flex justify-between px-1 text-xs">
      <span>{{ min }}</span>
      <span>{{ max }}</span>
    </div>

    <div v-if="hasError" class="flex flex-col gap-0.5">
      <p v-if="typeof errorMessages === 'string'" class="text-destructive text-xs">
        {{ errorMessages }}
      </p>
      <template v-else>
        <p v-for="(msg, i) in errorMessages" :key="i" class="text-destructive text-xs">
          {{ msg }}
        </p>
      </template>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/range-slider/index.ts`

```ts
export { default as RangeSlider } from './RangeSlider.vue'

export interface RangeSliderProps {
  /** The controlled value of the range slider. Can be binded with v-model. */
  modelValue?: [number, number]
  /** The value of the range slider that should be checked when initially rendered. */
  defaultValue?: [number, number]
  /** When `true`, prevents the user from interacting with the range slider */
  disabled?: boolean
  /** Minimum value */
  min?: number
  /** Maximum value */
  max?: number
  /** Step value */
  step?: number
  /** Label for the range slider */
  label?: string
  /** Hint text for the range slider */
  hint?: string
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Custom color for the track fill */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Thumb size */
  thumbSize?: 'sm' | 'md' | 'lg'
  /** Track height */
  trackHeight?: 'sm' | 'md' | 'lg'
  /** Show ticks */
  showTicks?: boolean
  /** Tick interval */
  tickInterval?: number
  /** Show thumb labels */
  thumbLabel?: boolean
  /** Always show dirty state */
  alwaysDirty?: boolean
  /** Invert the slider */
  inverted?: boolean
  /** Density of the slider */
  density?: 'compact' | 'default' | 'comfortable'
}

```

## rating

- type: `registry:ui`
- description: Star (or custom icon) rating control — pick a value from 1 to N. Read-only mode for displaying review averages, with half-step support.

### `packages/registry-vue/components/rating/Rating.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export interface RatingProps {
  /** Currently selected value */
  modelValue?: number
  /** Maximum rating value */
  max?: number
  /** If true, prevents user interaction */
  readonly?: boolean
  /** If true, disables the rating */
  disabled?: boolean
  /** Density of the component */
  density?: 'compact' | 'default' | 'comfortable'
  /** Color of the selected stars */
  color?: string
  /** If true, clicking the same value clears the rating */
  clearable?: boolean
  /** If true, stars grow on hover */
  hover?: boolean
  /** ARIA label for each rating item */
  itemAriaLabel?: string
  /** Icon shown for empty stars */
  emptyIcon?: string
  /** Icon shown for full stars */
  fullIcon?: string
  /** Icon shown for half stars */
  halfIcon?: string
  /** If true, allows fractional values */
  float?: boolean
  /** Size of the stars */
  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
  /** Custom class for the component */
  class?: HTMLAttributes['class']
  /** Show rating count (placeholder for future) */
  showValue?: boolean
  /** Card variant styling */
  variant?: 'outlined' | 'filled' | 'soft'
  /** If true, creates a half star at 0.5 */
  halfIncrements?: boolean
  /** If true, displays tooltips on hover */
  tooltips?: string[]
  /** Icon set to use ('mdi' | 'heroicons' | 'lucide') */
  iconSet?: 'mdi' | 'heroicons' | 'lucide'
}

const props = withDefaults(defineProps<RatingProps>(), {
  modelValue: 0,
  max: 5,
  readonly: false,
  disabled: false,
  density: 'default',
  color: 'var(--warning)',
  clearable: false,
  hover: false,
  itemAriaLabel: 'rating',
  emptyIcon: 'mdi-star-outline',
  fullIcon: 'mdi-star',
  halfIcon: 'mdi-star-half-full',
  float: false,
  size: 'medium',
  showValue: false,
  variant: 'outlined',
  halfIncrements: false,
  iconSet: 'mdi',
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const densityClasses = {
  compact: 'rating-density-compact',
  default: 'rating-density-default',
  comfortable: 'rating-density-comfortable',
}

const variantClasses = {
  outlined: 'rating-variant-outlined',
  filled: 'rating-variant-filled',
  soft: 'rating-variant-soft',
}

const sizeClasses = {
  'x-small': 'rating-size-xs',
  small: 'rating-size-sm',
  medium: 'rating-size-md',
  large: 'rating-size-lg',
  'x-large': 'rating-size-xl',
}

const componentClasses = computed(() => [
  'rating',
  densityClasses[props.density],
  variantClasses[props.variant],
  sizeClasses[props.size],
  {
    'rating-readonly': props.readonly,
    'rating-disabled': props.disabled,
    'rating-hover': props.hover,
    'rating-clearable': props.clearable,
    'rating-show-value': props.showValue,
  },
  props.class,
])

function handleClick(value: number) {
  if (props.disabled || props.readonly) return
  if (props.clearable && value === props.modelValue) {
    emit('update:modelValue', 0)
  } else {
    emit('update:modelValue', value)
  }
}

function handleKeydown(event: KeyboardEvent, value: number) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault()
    handleClick(value)
  } else if (event.key === 'ArrowRight' && value < props.max) {
    emit('update:modelValue', value + 1)
  } else if (event.key === 'ArrowLeft' && value > 1) {
    emit('update:modelValue', value - 1)
  }
}

function getStarClass(index: number): string[] {
  const value = props.modelValue
  const classes = ['rating-star']

  if (value >= index + 1) {
    classes.push('rating-star-full')
  } else if (value >= index + 0.5 && props.halfIncrements) {
    classes.push('rating-star-half')
  } else {
    classes.push('rating-star-empty')
  }

  return classes
}
</script>

<template>
  <div
    data-uipkge
    data-slot="rating"
    :class="cn(...componentClasses)"
    role="radiogroup"
    :aria-valuenow="modelValue"
    :aria-valuemin="0"
    :aria-valuemax="max"
    :aria-label="`Rating: ${modelValue} of ${max}`"
  >
    <button
      v-for="n in max"
      :key="n"
      type="button"
      class="focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
      :class="getStarClass(n - 1)"
      :disabled="disabled || readonly"
      :aria-label="`${itemAriaLabel} ${n} of ${max}`"
      :tabindex="readonly || disabled ? -1 : 0"
      @click="handleClick(n)"
      @keydown="handleKeydown($event, n)"
    >
      <!-- Full Star Icon -->
      <svg
        v-if="modelValue >= n"
        class="star-icon"
        viewBox="0 0 24 24"
        fill="currentColor"
        :style="{ color: props.color }"
      >
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
      </svg>
      <!-- Half Star Icon -->
      <svg
        v-else-if="modelValue >= n - 0.5 && halfIncrements"
        class="star-icon star-half"
        viewBox="0 0 24 24"
        :style="{ color: props.color }"
      >
        <defs>
          <linearGradient :id="`half-${n}`">
            <stop offset="50%" stop-color="currentColor" />
            <stop offset="50%" stop-color="transparent" />
          </linearGradient>
        </defs>
        <path
          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
          :fill="`url(#half-${n})`"
          stroke="currentColor"
          stroke-width="1"
        />
      </svg>
      <!-- Empty Star Icon -->
      <svg v-else class="star-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
      </svg>
    </button>
    <span v-if="showValue" class="rating-value">{{ modelValue }}</span>
  </div>
</template>

<style scoped>
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}

.rating-readonly {
  cursor: default;
}

.rating-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rating-hover .rating-star:hover {
  transform: scale(1.15);
}

.rating-hover .rating-star {
  transition: transform 0.15s ease-in-out;
}

.rating-clearable .rating-star {
  cursor: pointer;
}

.rating-variant-filled {
  background: var(--muted);
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.rating-variant-soft {
  background: var(--accent);
  padding: 0.25rem;
  border-radius: 0.5rem;
}

.rating-star {
  background: none;
  border: none;
  padding: 0.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rating-star:focus-visible {
  outline: 2px solid v-bind(color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Density */
.rating-density-compact .rating-star {
  padding: 0;
}

.rating-density-default .rating-star {
  padding: 0.0625rem;
}

.rating-density-comfortable .rating-star {
  padding: 0.125rem;
}

/* Sizes */
.rating-size-xs .star-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.rating-size-sm .star-icon {
  width: 1.125rem;
  height: 1.125rem;
}

.rating-size-md .star-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.rating-size-lg .star-icon {
  width: 1.625rem;
  height: 1.625rem;
}

.rating-size-xl .star-icon {
  width: 2rem;
  height: 2rem;
}

.rating-star-empty {
  color: var(--muted-foreground);
}

.rating-star-full {
  color: v-bind(color);
}

.rating-star-half .star-icon {
  position: relative;
}

.rating-value {
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--foreground);
}

.rating-show-value {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
</style>

```

### `packages/registry-vue/components/rating/index.ts`

```ts
export { default as Rating } from './Rating.vue'

```

## raw-chart

- type: `registry:ui`
- description: Escape-hatch wrapper that takes a full ECharts option object. Lets you build any ECharts type (sankey, sunburst, candlestick, graph, boxplot, parallel, themeRiver, custom) with full customization. Theme-aware exports available via useChartTheme.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/raw-chart/RawChart.vue`

```vue
<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'

// Raw escape hatch. The opinionated wrappers (AreaChart, BarChart,
// FunnelChart, ...) cover the common cases with sensible defaults +
// a `data` prop. When you need a chart type they don't wrap
// (Sankey, Sunburst, Graph, Candlestick, ThemeRiver, Tree, Parallel,
// Custom) -- or when you need a level of customisation the wrappers
// can't expose without leaking ECharts internals -- reach for this
// component and pass a complete ECharts option object.
//
// You're responsible for `use()`-registering the chart types and
// components you need before this component renders. The canvas
// renderer is registered here so you don't have to:
//
//   import { use } from 'echarts/core'
//   import { SankeyChart } from 'echarts/charts'
//   import { TooltipComponent, LegendComponent } from 'echarts/components'
//   import { RawChart } from '@/components/ui/charts'
//
//   use([SankeyChart, TooltipComponent, LegendComponent])
//
//   const option = { /* full ECharts option for sankey */ }
//
//   <RawChart :option="option" :height="400" />
//
// Theme tokens (chartColors, chartTextColor, chartTooltipBg, etc.)
// are exported from `useChartTheme.ts` -- import and weave them into
// your option for visual consistency with the rest of the registry's
// charts.

use([CanvasRenderer])

withDefaults(
  defineProps<{
    option: any
    height?: number | string
    /** Auto-resize on container width change. Default true. */
    autoresize?: boolean
    class?: string
  }>(),
  { height: 300, autoresize: true },
)
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', $props.class)"
  >
    <VChart :option="option" :autoresize="autoresize" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/raw-chart/index.ts`

```ts
export { default as RawChart } from './RawChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## register-01

- type: `registry:block`
- description: Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.
- registry deps: `button`, `card`, `checkbox`, `input`, `label`, `separator`

### `packages/registry-vue/blocks/register-01/Register01.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Github } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

const name = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const acceptTerms = ref(false)

const passwordsMatch = computed(() => !confirmPassword.value || password.value === confirmPassword.value)

const canSubmit = computed(
  () =>
    name.value.length > 0 &&
    email.value.length > 0 &&
    password.value.length >= 8 &&
    passwordsMatch.value &&
    acceptTerms.value,
)

const emit = defineEmits<{
  (e: 'submit', payload: { name: string; email: string; password: string }): void
  (e: 'sign-in'): void
  (e: 'oauth', provider: 'github' | 'google'): void
  (e: 'view-terms'): void
  (e: 'view-privacy'): void
}>()

function onSubmit() {
  if (!canSubmit.value) return
  emit('submit', { name: name.value, email: email.value, password: password.value })
}

// ----- Optional: zod validation -----
// The `canSubmit` computed already guards basic shape (lengths +
// matching passwords + terms checked), but for typed parsing,
// regex-driven password rules, or shared schema with the backend,
// drop in zod. Add `zod` to your project and uncomment below.
//
// import { z } from 'zod'
// const registerSchema = z
//   .object({
//     name: z.string().min(1, 'Name is required'),
//     email: z.string().email('Enter a valid email'),
//     password: z
//       .string()
//       .min(8, 'At least 8 characters')
//       .regex(/[A-Z]/, 'One uppercase letter')
//       .regex(/[0-9]/, 'One number'),
//     confirmPassword: z.string(),
//     acceptTerms: z.literal(true, { errorMap: () => ({ message: 'Required' }) }),
//   })
//   .refine((d) => d.password === d.confirmPassword, {
//     path: ['confirmPassword'],
//     message: "Passwords don't match",
//   })
// function onSubmit() {
//   const parsed = registerSchema.safeParse({
//     name: name.value,
//     email: email.value,
//     password: password.value,
//     confirmPassword: confirmPassword.value,
//     acceptTerms: acceptTerms.value,
//   })
//   if (!parsed.success) {
//     // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... }
//     return
//   }
//   emit('submit', {
//     name: parsed.data.name,
//     email: parsed.data.email,
//     password: parsed.data.password,
//   })
// }
</script>

<template>
  <div class="bg-muted/30 flex min-h-svh items-center justify-center p-6">
    <Card class="w-full max-w-sm">
      <CardHeader class="text-center">
        <CardTitle class="text-2xl">Create your account</CardTitle>
        <CardDescription>Free for personal projects. No credit card.</CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <form class="space-y-4" @submit.prevent="onSubmit">
          <div class="space-y-2">
            <Label for="r-name">Full name</Label>
            <Input id="r-name" v-model="name" type="text" placeholder="Ada Lovelace" autocomplete="name" required />
          </div>
          <div class="space-y-2">
            <Label for="r-email">Email</Label>
            <Input
              id="r-email"
              v-model="email"
              type="email"
              placeholder="you@example.com"
              autocomplete="email"
              required
            />
          </div>
          <div class="space-y-2">
            <Label for="r-password">Password</Label>
            <Input
              id="r-password"
              v-model="password"
              type="password"
              autocomplete="new-password"
              minlength="8"
              required
            />
            <p class="text-muted-foreground text-xs">Minimum 8 characters.</p>
          </div>
          <div class="space-y-2">
            <Label for="r-confirm">Confirm password</Label>
            <Input id="r-confirm" v-model="confirmPassword" type="password" autocomplete="new-password" required />
            <p v-if="!passwordsMatch" class="text-destructive text-xs" role="alert">Passwords don't match.</p>
          </div>

          <div class="flex items-start gap-2.5 pt-1">
            <Checkbox id="r-terms" :model-value="acceptTerms" @update:model-value="acceptTerms = $event === true" />
            <Label for="r-terms" class="text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal">
              I agree to the
              <button type="button" class="text-foreground mx-0.5 hover:underline" @click="emit('view-terms')">
                Terms of Service
              </button>
              and
              <button type="button" class="text-foreground mx-0.5 hover:underline" @click="emit('view-privacy')">
                Privacy Policy</button
              >.
            </Label>
          </div>

          <Button type="submit" class="w-full" :disabled="!canSubmit">Create account</Button>
        </form>

        <div class="relative">
          <Separator />
          <span
            class="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase"
          >
            Or continue with
          </span>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <Button type="button" variant="outline" @click="emit('oauth', 'google')">
            <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
              <path
                fill="#4285F4"
                d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
              />
              <path
                fill="#34A853"
                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
              />
              <path
                fill="#FBBC05"
                d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
              />
              <path
                fill="#EA4335"
                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
              />
            </svg>
            Google
          </Button>
          <Button type="button" variant="outline" @click="emit('oauth', 'github')">
            <Github class="size-4" />
            GitHub
          </Button>
        </div>
      </CardContent>
      <CardFooter class="justify-center">
        <p class="text-muted-foreground text-xs">
          Already have an account?
          <button type="button" class="text-foreground ml-1 font-medium hover:underline" @click="emit('sign-in')">
            Sign in
          </button>
        </p>
      </CardFooter>
    </Card>
  </div>
</template>

```

## resizable

- type: `registry:ui`
- description: Drag-to-resize panel layout — horizontal or vertical splits with persistent sizes. Use for IDE-style sidebars, split views, and any layout the user should be able to reshape.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/resizable/ResizableHandle.vue`

```vue
<script setup lang="ts">
import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { GripVertical } from 'lucide-vue-next'
import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class']; withHandle?: boolean }>()
const emits = defineEmits<SplitterResizeHandleEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'withHandle')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <SplitterResizeHandle
    data-uipkge
    data-slot="resizable-handle"
    v-bind="forwarded"
    :class="
      cn(
        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90',
        props.class,
      )
    "
  >
    <template v-if="props.withHandle">
      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
        <slot>
          <GripVertical class="size-2.5" />
        </slot>
      </div>
    </template>
  </SplitterResizeHandle>
</template>

```

### `packages/registry-vue/components/resizable/ResizablePanel.vue`

```vue
<script setup lang="ts">
import type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui'
import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<SplitterPanelProps>()
const emits = defineEmits<SplitterPanelEmits>()

const forwarded = useForwardPropsEmits(props, emits)
const { forwardRef } = useForwardExpose()
</script>

<template>
  <SplitterPanel :ref="forwardRef" v-slot="slotProps" data-uipkge data-slot="resizable-panel" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </SplitterPanel>
</template>

```

### `packages/registry-vue/components/resizable/ResizablePanelGroup.vue`

```vue
<script setup lang="ts">
import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { SplitterGroup, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<SplitterGroupEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <SplitterGroup
    v-slot="slotProps"
    data-uipkge
    data-slot="resizable-panel-group"
    v-bind="forwarded"
    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
  >
    <slot v-bind="slotProps" />
  </SplitterGroup>
</template>

```

### `packages/registry-vue/components/resizable/index.ts`

```ts
export { default as ResizableHandle } from './ResizableHandle.vue'
export { default as ResizablePanel } from './ResizablePanel.vue'
export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'

```

## rich-text-editor

- type: `registry:ui`
- description: WYSIWYG editor wrapped around TipTap — bold/italic/links/lists/headings/blockquote/code, plus a configurable toolbar. Drop into forms where Markdown is too low-level.
- npm deps: `@tiptap/extension-link`, `@tiptap/extension-placeholder`, `@tiptap/extension-task-item`, `@tiptap/extension-task-list`, `@tiptap/extension-text-align`, `@tiptap/extension-underline`, `@tiptap/starter-kit`, `@tiptap/vue-3`, `lucide-vue-next`
- registry deps: `separator`, `toggle`

### `packages/registry-vue/components/rich-text-editor/RichTextEditor.vue`

```vue
<script setup lang="ts">
import { computed, watch, onBeforeUnmount, ref } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import Underline from '@tiptap/extension-underline'
import Link from '@tiptap/extension-link'
import TextAlign from '@tiptap/extension-text-align'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import {
  Bold,
  Italic,
  Underline as UnderlineIcon,
  Strikethrough,
  List,
  ListOrdered,
  ListChecks,
  AlignLeft,
  AlignCenter,
  AlignRight,
  Link as LinkIcon,
  Heading1,
  Heading2,
  Quote,
  Minus,
  Undo2,
  Redo2,
  Code,
  RemoveFormatting,
  ChevronDown,
} from 'lucide-vue-next'
import { Toggle } from '@/components/ui/toggle'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    modelValue?: string
    placeholder?: string
    class?: string
    editorClass?: string
    minHeight?: string
  }>(),
  {
    modelValue: '',
    placeholder: 'Start writing...',
    minHeight: '120px',
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit.configure({
      heading: { levels: [1, 2, 3] },
      // StarterKit ships its own link + underline since v3 — disable them so
      // we can register the standalone packages with our own configuration
      // without TipTap warning about duplicate extension names.
      link: false,
      underline: false,
    }),
    Placeholder.configure({ placeholder: props.placeholder }),
    Underline,
    Link.configure({
      openOnClick: false,
      HTMLAttributes: { class: 'text-primary underline cursor-pointer' },
    }),
    TextAlign.configure({ types: ['heading', 'paragraph'] }),
    TaskList,
    TaskItem.configure({ nested: true }),
  ],
  editorProps: {
    attributes: {
      class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none',
    },
  },
  onUpdate: ({ editor: e }) => {
    emit('update:modelValue', e.getHTML())
  },
})

watch(
  () => props.modelValue,
  (val) => {
    if (editor.value && editor.value.getHTML() !== val) {
      editor.value.commands.setContent(val || '', { emitUpdate: false })
    }
  },
)

onBeforeUnmount(() => {
  editor.value?.destroy()
})

function toggleLink() {
  if (!editor.value) return
  if (editor.value.isActive('link')) {
    editor.value.chain().focus().unsetLink().run()
  } else {
    const url = window.prompt('Enter URL')
    if (url) {
      editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
    }
  }
}

interface ToolbarItem {
  type: 'button' | 'separator'
  icon?: any
  action?: () => void
  isActive?: () => boolean
  title?: string
}

const showExtended = ref(false)

const essentialItems = computed<ToolbarItem[]>(() => {
  if (!editor.value) return []
  const e = editor.value
  return [
    {
      type: 'button',
      icon: Bold,
      action: () => e.chain().focus().toggleBold().run(),
      isActive: () => e.isActive('bold'),
      title: 'Bold',
    },
    {
      type: 'button',
      icon: Italic,
      action: () => e.chain().focus().toggleItalic().run(),
      isActive: () => e.isActive('italic'),
      title: 'Italic',
    },
    {
      type: 'button',
      icon: UnderlineIcon,
      action: () => e.chain().focus().toggleUnderline().run(),
      isActive: () => e.isActive('underline'),
      title: 'Underline',
    },
    {
      type: 'button',
      icon: Strikethrough,
      action: () => e.chain().focus().toggleStrike().run(),
      isActive: () => e.isActive('strike'),
      title: 'Strikethrough',
    },
    { type: 'separator' },
    {
      type: 'button',
      icon: List,
      action: () => e.chain().focus().toggleBulletList().run(),
      isActive: () => e.isActive('bulletList'),
      title: 'Bullet list',
    },
    {
      type: 'button',
      icon: ListOrdered,
      action: () => e.chain().focus().toggleOrderedList().run(),
      isActive: () => e.isActive('orderedList'),
      title: 'Numbered list',
    },
    { type: 'separator' },
    { type: 'button', icon: LinkIcon, action: toggleLink, isActive: () => e.isActive('link'), title: 'Link' },
    { type: 'separator' },
    { type: 'button', icon: Undo2, action: () => e.chain().focus().undo().run(), isActive: () => false, title: 'Undo' },
    { type: 'button', icon: Redo2, action: () => e.chain().focus().redo().run(), isActive: () => false, title: 'Redo' },
  ]
})

const extendedItems = computed<ToolbarItem[]>(() => {
  if (!editor.value) return []
  const e = editor.value
  return [
    {
      type: 'button',
      icon: Heading1,
      action: () => e.chain().focus().toggleHeading({ level: 1 }).run(),
      isActive: () => e.isActive('heading', { level: 1 }),
      title: 'Heading 1',
    },
    {
      type: 'button',
      icon: Heading2,
      action: () => e.chain().focus().toggleHeading({ level: 2 }).run(),
      isActive: () => e.isActive('heading', { level: 2 }),
      title: 'Heading 2',
    },
    { type: 'separator' },
    {
      type: 'button',
      icon: Code,
      action: () => e.chain().focus().toggleCode().run(),
      isActive: () => e.isActive('code'),
      title: 'Inline code',
    },
    {
      type: 'button',
      icon: Quote,
      action: () => e.chain().focus().toggleBlockquote().run(),
      isActive: () => e.isActive('blockquote'),
      title: 'Blockquote',
    },
    {
      type: 'button',
      icon: Minus,
      action: () => e.chain().focus().setHorizontalRule().run(),
      isActive: () => false,
      title: 'Divider',
    },
    {
      type: 'button',
      icon: ListChecks,
      action: () => e.chain().focus().toggleTaskList().run(),
      isActive: () => e.isActive('taskList'),
      title: 'Task list',
    },
    { type: 'separator' },
    {
      type: 'button',
      icon: AlignLeft,
      action: () => e.chain().focus().setTextAlign('left').run(),
      isActive: () => e.isActive({ textAlign: 'left' }),
      title: 'Align left',
    },
    {
      type: 'button',
      icon: AlignCenter,
      action: () => e.chain().focus().setTextAlign('center').run(),
      isActive: () => e.isActive({ textAlign: 'center' }),
      title: 'Align center',
    },
    {
      type: 'button',
      icon: AlignRight,
      action: () => e.chain().focus().setTextAlign('right').run(),
      isActive: () => e.isActive({ textAlign: 'right' }),
      title: 'Align right',
    },
    { type: 'separator' },
    {
      type: 'button',
      icon: RemoveFormatting,
      action: () => e.chain().focus().clearNodes().unsetAllMarks().run(),
      isActive: () => false,
      title: 'Clear formatting',
    },
  ]
})
</script>

<template>
  <div :class="cn('rich-text-editor rounded-lg border', props.class)">
    <!-- Toolbar -->
    <div v-if="editor" class="border-b">
      <!-- Essential row -->
      <div class="flex items-center gap-0.5 px-2 py-1.5">
        <template v-for="(item, i) in essentialItems" :key="'e' + i">
          <Separator v-if="item.type === 'separator'" orientation="vertical" class="mx-1 h-5" />
          <Toggle
            v-else
            size="sm"
            :pressed="item.isActive?.()"
            :title="item.title"
            class="focus-visible:ring-ring size-7 p-0 focus-visible:ring-2 focus-visible:outline-none"
            @click="item.action?.()"
          >
            <component :is="item.icon" class="size-3.5" />
          </Toggle>
        </template>

        <Separator orientation="vertical" class="mx-1 h-5" />

        <!-- Expand toggle -->
        <button
          type="button"
          :title="showExtended ? 'Hide more options' : 'Show more options'"
          :class="[
            'text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring inline-flex size-7 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:outline-none',
            showExtended && 'bg-muted text-foreground',
          ]"
          @click="showExtended = !showExtended"
        >
          <ChevronDown :class="['size-3.5 transition-transform duration-200', showExtended && 'rotate-180']" />
        </button>
      </div>

      <!-- Extended row (collapsible) -->
      <div
        :class="[
          'grid transition-colors duration-200 ease-in-out',
          showExtended ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
        ]"
      >
        <div class="overflow-hidden">
          <div class="flex items-center gap-0.5 border-t px-2 py-1.5">
            <template v-for="(item, i) in extendedItems" :key="'x' + i">
              <Separator v-if="item.type === 'separator'" orientation="vertical" class="mx-1 h-5" />
              <Toggle
                v-else
                size="sm"
                :pressed="item.isActive?.()"
                :title="item.title"
                class="focus-visible:ring-ring size-7 p-0 focus-visible:ring-2 focus-visible:outline-none"
                @click="item.action?.()"
              >
                <component :is="item.icon" class="size-3.5" />
              </Toggle>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- Editor -->
    <EditorContent
      :editor="editor"
      :class="cn('rich-text-content overflow-y-auto px-3 py-2', props.editorClass)"
      :style="{ minHeight: props.minHeight }"
    />
  </div>
</template>

<style>
/* Editor placeholder */
.rich-text-editor .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--muted-foreground);
  opacity: 0.5;
  pointer-events: none;
  height: 0;
}

/* Prose overrides for compact styling */
.rich-text-content .tiptap {
  min-height: inherit;
}

.rich-text-content .tiptap > *:first-child {
  margin-top: 0;
}

.rich-text-content .tiptap > *:last-child {
  margin-bottom: 0;
}

.rich-text-content .tiptap h1 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.rich-text-content .tiptap h2 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.75rem;
  margin-bottom: 0.375rem;
}

.rich-text-content .tiptap p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.rich-text-content .tiptap ul,
.rich-text-content .tiptap ol {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.rich-text-content .tiptap li {
  font-size: 0.875rem;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.rich-text-content .tiptap blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted-foreground);
  font-style: italic;
}

.rich-text-content .tiptap code {
  background: var(--muted);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
}

.rich-text-content .tiptap pre {
  background: var(--muted);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.rich-text-content .tiptap pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
}

.rich-text-content .tiptap hr {
  border-color: var(--border);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Task list styling */
.rich-text-content .tiptap ul[data-type='taskList'] {
  list-style: none;
  padding-left: 0;
}

.rich-text-content .tiptap ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > label {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > label input[type='checkbox'] {
  accent-color: var(--primary);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > div {
  flex: 1;
}

/* Link styling */
.rich-text-content .tiptap a {
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
</style>

```

### `packages/registry-vue/components/rich-text-editor/index.ts`

```ts
export { default as RichTextEditor } from './RichTextEditor.vue'

```

## sankey-chart

- type: `registry:ui`
- description: Sankey flow diagram wrapper around Apache ECharts. Visualizes value flows between named nodes (channels, stages, sources). Gradient links + theme-aware tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/sankey-chart/SankeyChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { SankeyChart as EChartsSankeyChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsSankeyChart, TooltipComponent, LegendComponent])

interface SankeyLink {
  source: string
  target: string
  value: number
}

interface Props {
  /** Node names. If omitted, derived from the union of link sources + targets. */
  nodes?: string[]
  /** `{ source, target, value }` edges between nodes. */
  links: SankeyLink[]
  height?: number | string
  /** Curvature of the link ribbons. 0 = straight, 1 = max curve. */
  curveness?: number
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 360,
  curveness: 0.5,
})

const mergedOption = computed(() => {
  const nodeNames = props.nodes ?? Array.from(new Set(props.links.flatMap((l) => [l.source, l.target])))

  const series = [
    {
      type: 'sankey',
      left: 16,
      right: 72,
      top: 12,
      bottom: 12,
      data: nodeNames.map((name) => ({ name })),
      links: props.links,
      lineStyle: { color: 'gradient', curveness: props.curveness },
      label: { fontSize: 11, color: chartTooltipText.value },
      emphasis: { focus: 'adjacency' },
      itemStyle: { borderWidth: 0 },
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/sankey-chart/index.ts`

```ts
export { default as SankeyChart } from './SankeyChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## saved-cards-list

- type: `registry:block`
- description: List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
- npm deps: `lucide-vue-next`
- registry deps: `payment-card`, `payment-form`, `button`, `badge`, `dialog`

### `packages/registry-vue/blocks/saved-cards-list/SavedCardsList.vue`

```vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { CheckCircle2, Plus, Trash2 } from 'lucide-vue-next'
import { PaymentCard } from '@/components/ui/payment-card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import PaymentForm from '@/components/blocks/PaymentForm.vue'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'

interface SavedCard {
  id: string
  brand: CardBrand
  last4: string
  expiry: string
  holder: string
}

const props = defineProps<{
  cards: SavedCard[]
  defaultId?: string
}>()

const emit = defineEmits<{
  add: [
    payload: {
      number: string
      name: string
      expiry: string
      cvc: string
      brand: CardBrand
    },
  ]
  remove: [id: string]
  'set-default': [id: string]
}>()

const showAdd = ref(false)
const removeTarget = ref<SavedCard | null>(null)

function brandLabel(b: CardBrand) {
  return { visa: 'Visa', mastercard: 'Mastercard', amex: 'Amex', discover: 'Discover', unknown: 'Card' }[b]
}

function maskedNumberFromLast4(last4: string, brand: CardBrand): string {
  if (brand === 'amex') return `•••• •••••• •${last4}`
  return `•••• •••• •••• ${last4}`
}

const confirmOpen = computed({
  get: () => !!removeTarget.value,
  set: (v) => {
    if (!v) removeTarget.value = null
  },
})

function confirmRemove() {
  if (!removeTarget.value) return
  emit('remove', removeTarget.value.id)
  removeTarget.value = null
}
</script>

<template>
  <div class="bg-card text-card-foreground mx-auto w-full max-w-2xl rounded-xl border shadow-sm">
    <div class="flex items-center justify-between border-b px-5 py-4">
      <div>
        <h3 class="text-base font-semibold">Saved cards</h3>
        <p class="text-muted-foreground text-xs">Manage the cards used for billing.</p>
      </div>
      <Button size="sm" @click="showAdd = !showAdd"><Plus class="size-4" /> Add card</Button>
    </div>

    <!-- Add form (collapses inline) -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      leave-active-class="transition-all duration-200 ease-in"
      enter-from-class="max-h-0 opacity-0"
      enter-to-class="max-h-[1000px] opacity-100"
      leave-from-class="max-h-[1000px] opacity-100"
      leave-to-class="max-h-0 opacity-0"
    >
      <div v-if="showAdd" class="bg-muted/30 overflow-hidden border-b p-4">
        <PaymentForm
          :amount="0"
          :show-wallets="false"
          :on-submit="
            async (p) => {
              emit('add', p)
              showAdd = false
            }
          "
        />
      </div>
    </Transition>

    <!-- Empty state -->
    <div v-if="cards.length === 0 && !showAdd" class="px-6 py-14 text-center">
      <div class="bg-muted text-muted-foreground mx-auto grid size-12 place-items-center rounded-full">
        <Plus class="size-5" />
      </div>
      <h4 class="mt-3 text-sm font-medium">No cards saved</h4>
      <p class="text-muted-foreground text-xs">Add a card to use it for future payments.</p>
      <Button size="sm" class="mt-4" @click="showAdd = true">Add your first card</Button>
    </div>

    <!-- List -->
    <ul v-else class="divide-border divide-y">
      <li
        v-for="card in cards"
        :key="card.id"
        class="hover:bg-muted/30 flex items-center gap-4 px-5 py-4 transition-colors"
      >
        <PaymentCard
          :number="maskedNumberFromLast4(card.last4, card.brand)"
          :name="card.holder"
          :expiry="card.expiry"
          :brand="card.brand"
          variant="compact"
          :flip="false"
        />
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <p class="text-sm font-medium">{{ brandLabel(card.brand) }} ending {{ card.last4 }}</p>
            <Badge v-if="card.id === defaultId" variant="secondary"><CheckCircle2 class="size-3" /> Default</Badge>
          </div>
          <p class="text-muted-foreground text-xs">Expires {{ card.expiry }} · {{ card.holder }}</p>
        </div>
        <div class="flex gap-1">
          <Button v-if="card.id !== defaultId" variant="ghost" size="sm" @click="emit('set-default', card.id)">
            Set default
          </Button>
          <Button variant="ghost" size="icon-sm" aria-label="Remove card" @click="removeTarget = card">
            <Trash2 class="text-muted-foreground size-4" />
          </Button>
        </div>
      </li>
    </ul>

    <!-- Remove confirmation -->
    <Dialog v-model:open="confirmOpen">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Remove this card?</DialogTitle>
          <DialogDescription>
            {{ removeTarget && brandLabel(removeTarget.brand) }} ending {{ removeTarget?.last4 }} will no longer be
            available for payments.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" @click="removeTarget = null">Cancel</Button>
          <Button variant="destructive" @click="confirmRemove">Remove</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </div>
</template>

```

## scatter-chart

- type: `registry:ui`
- description: Scatter / bubble chart wrapper around Apache ECharts. Optional point sizing and categorical coloring. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/scatter-chart/ScatterChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ScatterChart as EChartsScatterChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartSplitLineColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, EChartsScatterChart, GridComponent, TooltipComponent, LegendComponent])

interface Props {
  data: Record<string, any>[]
  xField?: string
  yField?: string
  sizeField?: string
  categoryField?: string
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  xField: 'x',
  yField: 'y',
  height: 300,
})

const mergedOption = computed(() => {
  const categories = props.categoryField ? [...new Set(props.data.map((d) => d[props.categoryField!]))] : ['default']

  const series = categories.map((cat, i) => ({
    name: cat,
    type: 'scatter',
    symbolSize: (val: any[]) => (props.sizeField ? Math.sqrt(val[2]) * 3 + 4 : 10),
    itemStyle: { color: chartColors.value[i % chartColors.value.length] },
    data: props.categoryField
      ? props.data
          .filter((d) => d[props.categoryField!] === cat)
          .map((d) => [d[props.xField!], d[props.yField!], props.sizeField ? d[props.sizeField] : 0])
      : props.data.map((d) => [d[props.xField!], d[props.yField!], props.sizeField ? d[props.sizeField] : 0]),
  }))

  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    xAxis: userXAxis,
    yAxis: userYAxis,
    grid: userGrid,
    tooltip: userTooltip,
    legend: userLegend,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  const baseLegend =
    categories.length > 1
      ? {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11, color: chartTextColor.value },
        }
      : undefined

  return {
    color: chartColors.value,
    grid: mergeOptionBlock(
      { left: 16, right: 16, top: 24, bottom: categories.length > 1 ? 32 : 24, containLabel: true },
      userGrid,
    ),
    tooltip: mergeOptionBlock(
      {
        trigger: 'item',
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
        formatter: (params: any) =>
          `${params.seriesName}<br/>${props.xField}: ${params.value[0]}<br/>${props.yField}: ${params.value[1]}`,
      },
      userTooltip,
    ),
    legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend ?? {}, userLegend),
    xAxis: mergeOptionBlock(
      {
        type: 'value',
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { lineStyle: { color: chartAxisColor.value } },
        axisTick: { show: false },
        scale: true,
      },
      userXAxis,
    ),
    yAxis: mergeOptionBlock(
      {
        type: 'value',
        splitLine: { lineStyle: { color: chartSplitLineColor.value } },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
        scale: true,
      },
      userYAxis,
    ),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/scatter-chart/index.ts`

```ts
export { default as ScatterChart } from './ScatterChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## scroll-area

- type: `registry:ui`
- description: Custom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/scroll-area/ScrollArea.vue`

```vue
<script setup lang="ts">
import type { ScrollAreaRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
import { cn } from '@/lib/utils'
import ScrollBar from './ScrollBar.vue'

const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <ScrollAreaRoot data-uipkge data-slot="scroll-area" v-bind="delegatedProps" :class="cn('relative', props.class)">
    <ScrollAreaViewport
      data-uipkge
      data-slot="scroll-area-viewport"
      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
    >
      <slot />
    </ScrollAreaViewport>
    <ScrollBar />
    <ScrollAreaCorner />
  </ScrollAreaRoot>
</template>

```

### `packages/registry-vue/components/scroll-area/ScrollBar.vue`

```vue
<script setup lang="ts">
import type { ScrollAreaScrollbarProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
  orientation: 'vertical',
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <ScrollAreaScrollbar
    data-uipkge
    data-slot="scroll-area-scrollbar"
    v-bind="delegatedProps"
    :class="
      cn(
        'flex touch-none p-px transition-colors select-none',
        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
        props.class,
      )
    "
  >
    <ScrollAreaThumb data-uipkge data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
  </ScrollAreaScrollbar>
</template>

```

### `packages/registry-vue/components/scroll-area/index.ts`

```ts
export { default as ScrollArea } from './ScrollArea.vue'
export { default as ScrollBar } from './ScrollBar.vue'

```

## section-card

- type: `registry:ui`
- description: Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.
- registry deps: `card`

### `packages/registry-vue/components/section-card/SectionCard.vue`

```vue
<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'

const props = defineProps<{
  title: string
  description?: string
  class?: string
  contentClass?: string
}>()
</script>

<template>
  <Card :class="cn('flex flex-col', props.class)">
    <CardHeader class="pb-4">
      <div class="flex items-center justify-between">
        <div>
          <CardTitle class="text-base font-semibold">{{ title }}</CardTitle>
          <CardDescription v-if="description" class="mt-0.5">{{ description }}</CardDescription>
        </div>
        <slot name="header-action" />
      </div>
    </CardHeader>
    <CardContent :class="cn('flex-1', props.contentClass)">
      <slot />
    </CardContent>
    <slot name="footer" />
  </Card>
</template>

```

### `packages/registry-vue/components/section-card/index.ts`

```ts
export { default as SectionCard } from './SectionCard.vue'

```

## segmented-gauge

- type: `registry:ui`
- description: Semicircular SVG gauge split into colored segments by relative value. Pure SVG (no ECharts). Rounded line caps + an angular gap between segments produce the pill-shaped look; a center slot lets consumers drop a KPI value + label into the dish.

### `packages/registry-vue/components/charts/segmented-gauge/SegmentedGauge.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface GaugeSegment {
  /** Relative size of the segment. Segments are normalised by their sum. */
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
  /** Optional label, surfaced via the default slot for consumers that
   *  want to render their own legend. */
  label?: string
}

interface Props {
  segments: GaugeSegment[]
  /** Container height (px when numeric, raw CSS when string). Default 200. */
  height?: number | string
  /** Stroke width of the arc in SVG units. Default 18. */
  stroke?: number
  /** Angular gap between segments, in degrees. Default 4. */
  gap?: number
  /** Optional fallback palette when `color` is omitted on a segment. */
  colors?: string[]
  /** Show a faint background track behind the arc. Default true. */
  showTrack?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  height: 200,
  stroke: 18,
  gap: 4,
  showTrack: true,
  colors: () => ['#3b82f6', '#0ea5e9', '#34d399', '#facc15', '#fb7185', '#a855f7'],
})

// SVG geometry. The viewBox uses the centre + radius + stroke so the
// canvas grows with the stroke width and the labels in the default slot
// can sit underneath without overlapping the arc.
const cx = 140
const cy = 124
const r = 100

function polar(angleDeg: number) {
  const a = ((angleDeg - 90) * Math.PI) / 180
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)] as const
}

function arcPath(startA: number, endA: number) {
  const [sx, sy] = polar(startA)
  const [ex, ey] = polar(endA)
  const largeArc = endA - startA > 180 ? 1 : 0
  return `M ${sx.toFixed(2)} ${sy.toFixed(2)} A ${r} ${r} 0 ${largeArc} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`
}

const startAngle = 180
const sweep = 180

const arcs = computed(() => {
  const total = props.segments.reduce((acc, s) => acc + s.value, 0) || 1
  let cursor = startAngle
  return props.segments.map((s, i) => {
    const span = (s.value / total) * sweep
    const isLast = i === props.segments.length - 1
    const segEnd = cursor + span - (isLast ? 0 : props.gap)
    const arc = { d: arcPath(cursor, segEnd), color: s.color ?? props.colors[i % props.colors.length] }
    cursor = cursor + span
    return arc
  })
})

const trackPath = computed(() => arcPath(startAngle, startAngle + sweep))

const heightStyle = computed(() => (/^\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))
</script>

<template>
  <div
    data-uipkge
    data-slot="segmented-gauge"
    tabindex="0"
    :style="{ height: heightStyle }"
    :class="cn('focus-visible:ring-ring relative w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <svg
      :viewBox="`0 0 ${cx * 2} ${cy + stroke}`"
      class="block h-full w-full"
      preserveAspectRatio="xMidYMid meet"
      role="img"
    >
      <path
        v-if="showTrack"
        :d="trackPath"
        fill="none"
        stroke="currentColor"
        :stroke-width="stroke"
        stroke-linecap="round"
        class="text-muted/40"
        opacity="0.35"
      />
      <path
        v-for="(a, i) in arcs"
        :key="i"
        :d="a.d"
        fill="none"
        :stroke="a.color"
        :stroke-width="stroke"
        stroke-linecap="round"
      />
    </svg>
    <div v-if="$slots.center" class="pointer-events-none absolute inset-x-0 bottom-[8%] flex flex-col items-center">
      <slot name="center" />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/charts/segmented-gauge/index.ts`

```ts
export { default as SegmentedGauge } from './SegmentedGauge.vue'

```

## select

- type: `registry:ui`
- description: Dropdown select primitive — single-select, with optional groups, descriptions per item, and a search input via the AdvanceSelect variant. Built on reka-ui.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/select/Select.vue`

```vue
<script setup lang="ts">
import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
import { SelectRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<SelectRootProps>()
const emits = defineEmits<SelectRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <SelectRoot v-slot="slotProps" data-uipkge data-slot="select" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </SelectRoot>
</template>

```

### `packages/registry-vue/components/select/SelectContent.vue`

```vue
<script setup lang="ts">
import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import { SelectScrollDownButton, SelectScrollUpButton } from '.'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
  position: 'popper',
})
const emits = defineEmits<SelectContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <SelectPortal>
    <SelectContent
      data-uipkge
      data-slot="select-content"
      v-bind="{ ...$attrs, ...forwarded }"
      :class="
        cn(
          'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          props.class,
        )
      "
    >
      <SelectScrollUpButton />
      <SelectViewport
        :class="
          cn(
            'p-1',
            position === 'popper' &&
              'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
          )
        "
      >
        <slot />
      </SelectViewport>
      <SelectScrollDownButton />
    </SelectContent>
  </SelectPortal>
</template>

```

### `packages/registry-vue/components/select/SelectGroup.vue`

```vue
<script setup lang="ts">
import type { SelectGroupProps } from 'reka-ui'
import { SelectGroup } from 'reka-ui'

const props = defineProps<SelectGroupProps>()
</script>

<template>
  <SelectGroup data-uipkge data-slot="select-group" v-bind="props">
    <slot />
  </SelectGroup>
</template>

```

### `packages/registry-vue/components/select/SelectItem.vue`

```vue
<script setup lang="ts">
import type { SelectItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Check } from 'lucide-vue-next'
import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectItem
    data-uipkge
    data-slot="select-item"
    v-bind="forwardedProps"
    :class="
      cn(
        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
        props.class,
      )
    "
  >
    <span class="absolute right-2 flex size-3.5 items-center justify-center">
      <SelectItemIndicator>
        <slot name="indicator-icon">
          <Check class="size-4" aria-hidden="true" />
        </slot>
      </SelectItemIndicator>
    </span>

    <SelectItemText>
      <slot />
    </SelectItemText>
  </SelectItem>
</template>

```

### `packages/registry-vue/components/select/SelectItemText.vue`

```vue
<script setup lang="ts">
import type { SelectItemTextProps } from 'reka-ui'
import { SelectItemText } from 'reka-ui'

const props = defineProps<SelectItemTextProps>()
</script>

<template>
  <SelectItemText data-uipkge data-slot="select-item-text" v-bind="props">
    <slot />
  </SelectItemText>
</template>

```

### `packages/registry-vue/components/select/SelectLabel.vue`

```vue
<script setup lang="ts">
import type { SelectLabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { SelectLabel } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
</script>

<template>
  <SelectLabel
    data-uipkge
    data-slot="select-label"
    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
  >
    <slot />
  </SelectLabel>
</template>

```

### `packages/registry-vue/components/select/SelectScrollDownButton.vue`

```vue
<script setup lang="ts">
import type { SelectScrollDownButtonProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronDown } from 'lucide-vue-next'
import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectScrollDownButton
    data-uipkge
    data-slot="select-scroll-down-button"
    v-bind="forwardedProps"
    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
  >
    <slot>
      <ChevronDown class="size-4" aria-hidden="true" />
    </slot>
  </SelectScrollDownButton>
</template>

```

### `packages/registry-vue/components/select/SelectScrollUpButton.vue`

```vue
<script setup lang="ts">
import type { SelectScrollUpButtonProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronUp } from 'lucide-vue-next'
import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <SelectScrollUpButton
    data-uipkge
    data-slot="select-scroll-up-button"
    v-bind="forwardedProps"
    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
  >
    <slot>
      <ChevronUp class="size-4" aria-hidden="true" />
    </slot>
  </SelectScrollUpButton>
</template>

```

### `packages/registry-vue/components/select/SelectSeparator.vue`

```vue
<script setup lang="ts">
import type { SelectSeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { SelectSeparator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <SelectSeparator
    data-uipkge
    data-slot="select-separator"
    v-bind="delegatedProps"
    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
  />
</template>

```

### `packages/registry-vue/components/select/SelectTrigger.vue`

```vue
<script setup lang="ts">
import type { SelectTriggerProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ChevronDown, Loader } from 'lucide-vue-next'
import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<
    SelectTriggerProps & {
      class?: HTMLAttributes['class']
      size?: 'sm' | 'default' | 'lg'
      state?: 'default' | 'error' | 'success'
      loading?: boolean
    }
  >(),
  { size: 'default', state: 'default', loading: false },
)

const delegatedProps = reactiveOmit(props, 'class', 'size', 'state', 'loading')
const forwardedProps = useForwardProps(delegatedProps)

const sizeClasses = {
  sm: 'h-8 text-sm px-2.5 py-1.5',
  default: 'h-9 text-sm px-3 py-2',
  lg: 'h-11 text-base px-4 py-2.5',
}

const stateClasses = {
  default: 'border-input dark:hover:bg-input/50',
  error:
    'border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
  success: 'border-[var(--success)] focus-visible:border-[var(--success)]',
}
</script>

<template>
  <SelectTrigger
    data-uipkge
    data-slot="select-trigger"
    :data-size="size"
    :data-state-value="state"
    v-bind="forwardedProps"
    :disabled="disabled || loading"
    :aria-busy="loading"
    :class="
      cn(
        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        sizeClasses[size],
        stateClasses[state],
        props.class,
      )
    "
  >
    <slot />
    <SelectIcon v-if="!loading" as-child>
      <ChevronDown class="size-4 opacity-50" aria-hidden="true" />
    </SelectIcon>
    <Loader v-else class="size-4 animate-spin opacity-50" />
  </SelectTrigger>
</template>

```

### `packages/registry-vue/components/select/SelectValue.vue`

```vue
<script setup lang="ts">
import type { SelectValueProps } from 'reka-ui'
import { SelectValue } from 'reka-ui'

const props = defineProps<SelectValueProps>()
</script>

<template>
  <SelectValue data-uipkge data-slot="select-value" v-bind="props">
    <slot />
  </SelectValue>
</template>

```

### `packages/registry-vue/components/select/index.ts`

```ts
export { default as Select } from './Select.vue'
export { default as SelectContent } from './SelectContent.vue'
export { default as SelectGroup } from './SelectGroup.vue'
export { default as SelectItem } from './SelectItem.vue'
export { default as SelectItemText } from './SelectItemText.vue'
export { default as SelectLabel } from './SelectLabel.vue'
export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
export { default as SelectSeparator } from './SelectSeparator.vue'
export { default as SelectTrigger } from './SelectTrigger.vue'
export { default as SelectValue } from './SelectValue.vue'
export { type SelectOption, readKey } from './option-types'

```

### `packages/registry-vue/components/select/option-types.ts`

```ts
/**
 * Shared option shape for `AdvanceSelect` and any future options-driven select.
 * Components accept this canonical shape OR any object shape if `value-key` /
 * `label-key` are provided.
 */
export interface SelectOption<V = string> {
  label: string
  value: V
  disabled?: boolean
  /** Items sharing this key render under one heading. */
  group?: string
}

/**
 * Resolve `option[key]` with a default fallback. Used by AdvanceSelect so every
 * accessor obeys `value-key` / `label-key`.
 */
export function readKey<T>(option: T, key: string, fallback?: unknown): unknown {
  if (option == null || typeof option !== 'object') return fallback
  const v = (option as Record<string, unknown>)[key]
  return v === undefined ? fallback : v
}

```

## separator

- type: `registry:ui`
- description: Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/separator/Separator.vue`

```vue
<script setup lang="ts">
import type { SeparatorProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Separator } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(), {
  orientation: 'horizontal',
  decorative: true,
})

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Separator
    data-uipkge
    data-slot="separator"
    v-bind="delegatedProps"
    :class="
      cn(
        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
        props.class,
      )
    "
  />
</template>

```

### `packages/registry-vue/components/separator/index.ts`

```ts
export { default as Separator } from './Separator.vue'

```

## sheet

- type: `registry:ui`
- description: Side-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/sheet/Sheet.vue`

```vue
<script setup lang="ts">
import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
import { DialogRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<DialogRootProps>()
const emits = defineEmits<DialogRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DialogRoot v-slot="slotProps" data-uipkge data-slot="sheet" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </DialogRoot>
</template>

```

### `packages/registry-vue/components/sheet/SheetClose.vue`

```vue
<script setup lang="ts">
import type { DialogCloseProps } from 'reka-ui'
import { DialogClose } from 'reka-ui'

const props = defineProps<DialogCloseProps>()
</script>

<template>
  <DialogClose data-uipkge data-slot="sheet-close" v-bind="props">
    <slot />
  </DialogClose>
</template>

```

### `packages/registry-vue/components/sheet/SheetContent.vue`

```vue
<script setup lang="ts">
import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import SheetOverlay from './SheetOverlay.vue'

// SFC compiler quirk: when the extension type is a *named* interface
// in an intersection (`DialogContentProps & ExtraProps`), the runtime
// extractor occasionally drops fields from the named interface --
// `side` then warns "accessed during render but not defined on
// instance" every time the FilterSheet mounts. Inlining the literal
// keeps the extractor happy. DialogContentProps stays in the
// intersection so reka-ui's typed props (asChild, trapFocus, etc.)
// flow through useForwardPropsEmits below.
defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<
    DialogContentProps & {
      class?: HTMLAttributes['class']
      side?: 'top' | 'right' | 'bottom' | 'left'
    }
  >(),
  { side: 'right' },
)
const emits = defineEmits<DialogContentEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'side')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <DialogPortal>
    <SheetOverlay />
    <DialogContent
      data-uipkge
      data-slot="sheet-content"
      :class="
        cn(
          'bg-background motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out motion-safe:data-[state=closed]:duration-200 motion-safe:data-[state=open]:duration-300',
          side === 'right' &&
            'motion-safe:data-[state=closed]:slide-out-to-right motion-safe:data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'motion-safe:data-[state=closed]:slide-out-to-left motion-safe:data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'motion-safe:data-[state=closed]:slide-out-to-top motion-safe:data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'motion-safe:data-[state=closed]:slide-out-to-bottom motion-safe:data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          props.class,
        )
      "
      v-bind="{ ...$attrs, ...forwarded }"
    >
      <slot />

      <DialogClose
        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
      >
        <X class="size-4" aria-hidden="true" />
        <span class="sr-only">Close</span>
      </DialogClose>
    </DialogContent>
  </DialogPortal>
</template>

```

### `packages/registry-vue/components/sheet/SheetDescription.vue`

```vue
<script setup lang="ts">
import type { DialogDescriptionProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogDescription } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <DialogDescription
    data-uipkge
    data-slot="sheet-description"
    :class="cn('text-muted-foreground text-sm', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </DialogDescription>
</template>

```

### `packages/registry-vue/components/sheet/SheetFooter.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
  <div data-uipkge data-slot="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sheet/SheetHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
</script>

<template>
  <div data-uipkge data-slot="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sheet/SheetOverlay.vue`

```vue
<script setup lang="ts">
import type { DialogOverlayProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogOverlay } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <DialogOverlay
    data-uipkge
    data-slot="sheet-overlay"
    :class="
      cn(
        'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',
        props.class,
      )
    "
    v-bind="delegatedProps"
  >
    <slot />
  </DialogOverlay>
</template>

```

### `packages/registry-vue/components/sheet/SheetTitle.vue`

```vue
<script setup lang="ts">
import type { DialogTitleProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { DialogTitle } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <DialogTitle
    data-uipkge
    data-slot="sheet-title"
    :class="cn('text-foreground font-semibold', props.class)"
    v-bind="delegatedProps"
  >
    <slot />
  </DialogTitle>
</template>

```

### `packages/registry-vue/components/sheet/SheetTrigger.vue`

```vue
<script setup lang="ts">
import type { DialogTriggerProps } from 'reka-ui'
import { DialogTrigger } from 'reka-ui'

const props = defineProps<DialogTriggerProps>()
</script>

<template>
  <DialogTrigger data-uipkge data-slot="sheet-trigger" v-bind="props">
    <slot />
  </DialogTrigger>
</template>

```

### `packages/registry-vue/components/sheet/index.ts`

```ts
export { default as Sheet } from './Sheet.vue'
export { default as SheetClose } from './SheetClose.vue'
export { default as SheetContent } from './SheetContent.vue'
export { default as SheetDescription } from './SheetDescription.vue'
export { default as SheetFooter } from './SheetFooter.vue'
export { default as SheetHeader } from './SheetHeader.vue'
export { default as SheetTitle } from './SheetTitle.vue'
export { default as SheetTrigger } from './SheetTrigger.vue'

```

## sidebar

- type: `registry:ui`
- description: Full-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.
- npm deps: `@vueuse/core`, `class-variance-authority`, `lucide-vue-next`, `reka-ui`
- registry deps: `button`, `input`, `separator`, `sheet`, `skeleton`, `tooltip`

### `packages/registry-vue/components/sidebar/Sidebar.vue`

```vue
<script setup lang="ts">
import type { SidebarProps } from '.'
import { cn } from '@/lib/utils'
import { Sheet, SheetContent } from '@/components/ui/sheet'
import SheetDescription from '@/components/ui/sheet/SheetDescription.vue'
import SheetHeader from '@/components/ui/sheet/SheetHeader.vue'
import SheetTitle from '@/components/ui/sheet/SheetTitle.vue'
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<SidebarProps>(), {
  side: 'left',
  variant: 'sidebar',
  collapsible: 'offcanvas',
})

const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
</script>

<template>
  <div
    v-if="collapsible === 'none'"
    data-uipkge
    data-slot="sidebar"
    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </div>

  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
    <SheetContent
      data-sidebar="sidebar"
      data-uipkge
      data-slot="sidebar"
      data-mobile="true"
      :side="side"
      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
      }"
    >
      <SheetHeader class="sr-only">
        <SheetTitle>Sidebar</SheetTitle>
        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
      </SheetHeader>
      <div class="flex h-full w-full flex-col">
        <slot />
      </div>
    </SheetContent>
  </Sheet>

  <div
    v-else
    class="group peer text-sidebar-foreground hidden md:block"
    data-uipkge
    data-slot="sidebar"
    :data-state="state"
    :data-collapsible="state === 'collapsed' ? collapsible : ''"
    :data-variant="variant"
    :data-side="side"
  >
    <!-- This is what handles the sidebar gap on desktop  -->
    <div
      :class="
        cn(
          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
          'group-data-[collapsible=offcanvas]:w-0',
          'group-data-[side=right]:rotate-180',
          variant === 'floating' || variant === 'inset'
            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
        )
      "
    />
    <div
      :class="
        cn(
          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
          side === 'left'
            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
          // Adjust the padding for floating and inset variants.
          variant === 'floating' || variant === 'inset'
            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
          props.class,
        )
      "
      v-bind="$attrs"
    >
      <div
        data-sidebar="sidebar"
        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
      >
        <slot />
      </div>
    </div>
  </div>
</template>

<style>
/* Push any OverlayScroll thumb inside a sidebar 10px in from the right
   edge so it clears SidebarRail's 8px inside-zone. The CSS variable
   cascades to every descendant, so consumers wrapping their nav in
   OverlayScroll (a common pattern when nav items overflow viewport
   height) get this for free -- no per-call thumb-offset config. */
[data-slot='sidebar'] {
  --ovs-thumb-right: 10px;
}
</style>

```

### `packages/registry-vue/components/sidebar/SidebarContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="sidebar-content"
    data-sidebar="content"
    :class="
      cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)
    "
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarFooter.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarGroup.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="sidebar-group"
    data-sidebar="group"
    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarGroupAction.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  PrimitiveProps & {
    class?: HTMLAttributes['class']
  }
>()
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="sidebar-group-action"
    data-sidebar="group-action"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        props.class,
      )
    "
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarGroupContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="sidebar-group-content"
    data-sidebar="group-content"
    :class="cn('w-full text-sm', props.class)"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarGroupLabel.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  PrimitiveProps & {
    class?: HTMLAttributes['class']
  }
>()
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="sidebar-group-label"
    data-sidebar="group-label"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'text-sidebar-foreground/70 ring-sidebar-ring mt-2 mb-1 flex h-8 shrink-0 items-center rounded-md px-2 text-[13px] font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        props.class,
      )
    "
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarInput.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Input } from '@/components/ui/input'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <!-- Sidebar-tuned wrapper over the kit's <Input>. Forwards every slot so
       consumers can pass prefix (search icon) / suffix (kbd hint) / default
       slot content without losing the sidebar height + bg defaults. -->
  <Input
    data-uipkge
    data-slot="sidebar-input"
    data-sidebar="input"
    :class="cn('bg-background h-8 w-full shadow-none', props.class)"
  >
    <template v-for="(_, name) in $slots" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps" />
    </template>
  </Input>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarInset.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <main
    data-uipkge
    data-slot="sidebar-inset"
    :class="
      cn(
        // min-w-0 is load-bearing: a flex-1 child without it inherits min-width: auto,
        // which means any single wide descendant (chart, table, code block) blows the
        // inset's width past its grid track. The upstream shadcn-ui sidebar omits this.
        'bg-background relative flex w-full min-w-0 flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        props.class,
      )
    "
  >
    <slot />
  </main>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenu.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ul
    data-uipkge
    data-slot="sidebar-menu"
    data-sidebar="menu"
    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
  >
    <slot />
  </ul>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuAction.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      showOnHover?: boolean
      class?: HTMLAttributes['class']
    }
  >(),
  {
    as: 'button',
  },
)
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="sidebar-menu-action"
    data-sidebar="menu-action"
    :class="
      cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        props.class,
      )
    "
    :as="as"
    :as-child="asChild"
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuBadge.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="sidebar-menu-badge"
    data-sidebar="menu-badge"
    :class="
      cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        props.class,
      )
    "
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuButton.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
import { reactiveOmit } from '@vueuse/core'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
import { useSidebar } from './utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<
    SidebarMenuButtonProps & {
      tooltip?: string | Component
    }
  >(),
  {
    as: 'button',
    variant: 'default',
    size: 'default',
  },
)

const { isMobile, state } = useSidebar()

const delegatedProps = reactiveOmit(props, 'tooltip')
</script>

<template>
  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
    <slot />
  </SidebarMenuButtonChild>

  <Tooltip v-else>
    <TooltipTrigger as-child>
      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
        <slot />
      </SidebarMenuButtonChild>
    </TooltipTrigger>
    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
      <template v-if="typeof tooltip === 'string'">
        {{ tooltip }}
      </template>
      <component :is="tooltip" v-else />
    </TooltipContent>
  </Tooltip>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuButtonChild.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'
import { sidebarMenuButtonVariants } from './sidebar.variants'

// Inline `as`/`asChild` from PrimitiveProps -- see Button.vue for why
// `extends /* @vue-ignore */ PrimitiveProps` was wrong: the annotation
// drops every interface field from runtime props, not just the
// extended ones, so variant/size/isActive silently become attrs.
//
// Same goes for variant/size: the SFC compiler can't extract them
// from `SidebarMenuButtonVariants['variant']` indexed-access types,
// so the unions are inlined explicitly.
export interface SidebarMenuButtonProps {
  as?: string
  asChild?: boolean
  variant?: 'default' | 'outline'
  size?: 'default' | 'sm' | 'lg'
  isActive?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
  as: 'button',
  variant: 'default',
  size: 'default',
})
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="sidebar-menu-button"
    data-sidebar="menu-button"
    :data-size="size"
    :data-active="isActive"
    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
    :as="as"
    :as-child="asChild"
    v-bind="$attrs"
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuItem.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-uipkge
    data-slot="sidebar-menu-item"
    data-sidebar="menu-item"
    :class="cn('group/menu-item relative', props.class)"
  >
    <slot />
  </li>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuSkeleton.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'

const props = defineProps<{
  showIcon?: boolean
  class?: HTMLAttributes['class']
}>()

const width = computed(() => {
  return `${Math.floor(Math.random() * 40) + 50}%`
})
</script>

<template>
  <div
    data-uipkge
    data-slot="sidebar-menu-skeleton"
    data-sidebar="menu-skeleton"
    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
  >
    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />

    <Skeleton
      class="h-4 max-w-(--skeleton-width) flex-1"
      data-sidebar="menu-skeleton-text"
      :style="{ '--skeleton-width': width }"
    />
  </div>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuSub.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <ul
    data-uipkge
    data-slot="sidebar-menu-sub"
    data-sidebar="menu-badge"
    :class="
      cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        props.class,
      )
    "
  >
    <slot />
  </ul>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuSubButton.vue`

```vue
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { Primitive } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<
    PrimitiveProps & {
      size?: 'sm' | 'md'
      isActive?: boolean
      class?: HTMLAttributes['class']
    }
  >(),
  {
    as: 'a',
    size: 'md',
  },
)
</script>

<template>
  <Primitive
    data-uipkge
    data-slot="sidebar-menu-sub-button"
    data-sidebar="menu-sub-button"
    :as="as"
    :as-child="asChild"
    :data-size="size"
    :data-active="isActive"
    :class="
      cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        props.class,
      )
    "
  >
    <slot />
  </Primitive>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarMenuSubItem.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <li
    data-uipkge
    data-slot="sidebar-menu-sub-item"
    data-sidebar="menu-sub-item"
    :class="cn('group/menu-sub-item relative', props.class)"
  >
    <slot />
  </li>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarProvider.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { useEventListener, useMediaQuery } from '@vueuse/core'
import { TooltipProvider } from 'reka-ui'
import { computed, onMounted, ref } from 'vue'
import { cn } from '@/lib/utils'
import {
  provideSidebarContext,
  SIDEBAR_COOKIE_MAX_AGE,
  SIDEBAR_COOKIE_NAME,
  SIDEBAR_KEYBOARD_SHORTCUT,
  SIDEBAR_WIDTH,
  SIDEBAR_WIDTH_ICON,
} from './utils'

const props = defineProps<{
  defaultOpen?: boolean
  open?: boolean
  class?: HTMLAttributes['class']
}>()

const emits = defineEmits<{
  'update:open': [open: boolean]
}>()

// `useMediaQuery` returns `false` during SSR (no matchMedia) and
// re-evaluates synchronously on the client's first render. If the
// viewport is < 768px, SSR HTML has the desktop branch but the
// client wants the mobile <Sheet> branch -- Vue throws a hydration
// mismatch and the Sheet renders without its overlay (the desktop
// sidebar's div is the parent the diff lands against).
//
// Gating on `mounted` makes both the server and the client's first
// synchronous render produce the desktop branch unconditionally;
// `onMounted` then flips the flag and `Sidebar.vue`'s v-else-if
// re-runs against the real matchMedia signal. Cost: a brief
// desktop-layout flash for mobile users on first paint. That's the
// universal tradeoff for SSR-without-viewport-detection -- there is
// no clean way to know the viewport on the server.
const mediaMobile = useMediaQuery('(max-width: 768px)')
const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})
const isMobile = computed(() => mounted.value && mediaMobile.value)
const openMobile = ref(false)

// useVModel with passive:true returns a ref that appears writable but
// doesn't actually update when no parent v-model is bound. Fall back to
// a plain ref so toggleSidebar / setOpen work reliably.
const open = ref<boolean>(true)

function setOpen(value: boolean) {
  open.value = value // emits('update:open', value)

  // This sets the cookie to keep the sidebar state.
  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
}

function setOpenMobile(value: boolean) {
  openMobile.value = value
}

// Helper to toggle the sidebar.
function toggleSidebar() {
  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
}

useEventListener('keydown', (event: KeyboardEvent) => {
  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
    event.preventDefault()
    toggleSidebar()
  }
})

// We add a state so that we can do data-state="expanded" or "collapsed".
// This makes it easier to style the sidebar with Tailwind classes.
const state = computed(() => (open.value ? 'expanded' : 'collapsed'))

provideSidebarContext({
  state,
  open,
  setOpen,
  isMobile,
  openMobile,
  setOpenMobile,
  toggleSidebar,
})
</script>

<template>
  <TooltipProvider :delay-duration="0">
    <div
      data-uipkge
      data-slot="sidebar-wrapper"
      :style="{
        '--sidebar-width': SIDEBAR_WIDTH,
        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
      }"
      :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
      v-bind="$attrs"
    >
      <slot />
    </div>
  </TooltipProvider>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarRail.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { useSidebar } from './utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { toggleSidebar } = useSidebar()
</script>

<template>
  <button
    type="button"
    data-sidebar="rail"
    data-uipkge
    data-slot="sidebar-rail"
    aria-label="Toggle Sidebar"
    :tabindex="-1"
    title="Toggle Sidebar"
    :class="
      cn(
        'hover:after:bg-sidebar-border focus-visible:ring-ring absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-colors duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] focus-visible:ring-2 focus-visible:outline-none sm:flex',
        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
        props.class,
      )
    "
    @click="toggleSidebar"
  >
    <slot />
  </button>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarSeparator.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { Separator } from '@/components/ui/separator'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <Separator
    data-uipkge
    data-slot="sidebar-separator"
    data-sidebar="separator"
    :class="cn('bg-sidebar-border mx-2 w-auto', props.class)"
  >
    <slot />
  </Separator>
</template>

```

### `packages/registry-vue/components/sidebar/SidebarTrigger.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { PanelLeft } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { useSidebar } from './utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const { toggleSidebar } = useSidebar()
</script>

<template>
  <Button
    data-sidebar="trigger"
    data-uipkge
    data-slot="sidebar-trigger"
    variant="ghost"
    size="icon"
    :class="cn('focus-visible:ring-ring h-7 w-7 focus-visible:ring-2 focus-visible:outline-none', props.class)"
    @click="toggleSidebar"
  >
    <PanelLeft />
    <span class="sr-only">Toggle Sidebar</span>
  </Button>
</template>

```

### `packages/registry-vue/components/sidebar/sidebar.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-muted-foreground outline-hidden ring-sidebar-ring transition-[width,height,padding,color,background-color] hover:bg-sidebar-accent/50 hover:text-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/10 data-[active=true]:font-medium data-[active=true]:text-primary data-[state=open]:hover:bg-sidebar-accent/50 data-[state=open]:hover:text-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
      },
      size: {
        default: 'h-11 text-sm',
        sm: 'h-10 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

```

### `packages/registry-vue/components/sidebar/index.ts`

```ts
import type { HTMLAttributes } from 'vue'
export interface SidebarProps {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
  class?: HTMLAttributes['class']
}

export { default as Sidebar } from './Sidebar.vue'
export { default as SidebarContent } from './SidebarContent.vue'
export { default as SidebarFooter } from './SidebarFooter.vue'
export { default as SidebarGroup } from './SidebarGroup.vue'
export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
export { default as SidebarHeader } from './SidebarHeader.vue'
export { default as SidebarInput } from './SidebarInput.vue'
export { default as SidebarInset } from './SidebarInset.vue'
export { default as SidebarMenu } from './SidebarMenu.vue'
export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
export { default as SidebarProvider } from './SidebarProvider.vue'
export { default as SidebarRail } from './SidebarRail.vue'
export { default as SidebarSeparator } from './SidebarSeparator.vue'
export { default as SidebarTrigger } from './SidebarTrigger.vue'

export { useSidebar } from './utils'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from './sidebar.variants'

```

### `packages/registry-vue/components/sidebar/utils.ts`

```ts
import type { ComputedRef, Ref } from 'vue'
import { createContext } from 'reka-ui'

export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem'
export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

export const [useSidebar, provideSidebarContext] = createContext<{
  state: ComputedRef<'expanded' | 'collapsed'>
  open: Ref<boolean>
  setOpen: (value: boolean) => void
  isMobile: Ref<boolean>
  openMobile: Ref<boolean>
  setOpenMobile: (value: boolean) => void
  toggleSidebar: () => void
}>('Sidebar')

```

## sidebar-01

- type: `registry:block`
- description: Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.vue to change routes and NavUser.vue to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-vue/blocks/sidebar-01/Sidebar01.vue`

```vue
<script setup lang="ts">
// Edit this file to change brand, navigation, and the user dropdown.
// Every menu item is spelled out below -- copy, remove, or rename rows directly.

import { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from 'lucide-vue-next'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from '@/components/ui/sidebar'
import NavUser from './NavUser.vue'
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" tooltip="uipkge" class="group-data-[collapsible=icon]:!justify-center">
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6"
            >
              <svg
                viewBox="0 0 24 24"
                class="size-4 group-data-[collapsible=icon]:size-3.5"
                fill="currentColor"
                aria-hidden="true"
              >
                <rect x="2" y="2" width="9" height="9" rx="1.5" />
                <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="13" y="13" width="9" height="9" rx="1.5" />
              </svg>
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="font-display truncate font-bold">uipkge</span>
              <span class="text-muted-foreground truncate text-xs">uipkge.dev</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <!-- TODO: wrap in NuxtLink / RouterLink and bind :is-active to your route -->
              <SidebarMenuButton is-active tooltip="Dashboard">
                <LayoutDashboard class="size-4" />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Data tables">
                <TableIcon class="size-4" />
                <span>Data tables</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Forms">
                <FileText class="size-4" />
                <span>Forms</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Charts">
                <BarChart3 class="size-4" />
                <span>Charts</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Pages">
                <Files class="size-4" />
                <span>Pages</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarGroup>
        <SidebarGroupLabel>Resources</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Docs">
                <BookOpen class="size-4" />
                <span>Docs</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Changelog">
                <History class="size-4" />
                <span>Changelog</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <NavUser />
    </SidebarFooter>

    <SidebarRail />
  </Sidebar>
</template>

```

### `packages/registry-vue/blocks/sidebar-01/NavUser.vue`

```vue
<script setup lang="ts">
// Edit this file to change the user dropdown content, avatar, and logout handler.
// The user details are inlined below -- wire them to your auth session in place.

import { BadgeCheck, ChevronsUpDown, LogOut, Monitor, Moon, Palette, Settings, Sun } from 'lucide-vue-next'
import { useTheme } from '~/composables/useTheme'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

const { isMobile } = useSidebar()
const { theme, setTheme } = useTheme()

// Replace these with your auth session.
const user = {
  name: 'Test User',
  email: 'you@example.com',
  initials: 'TU',
}

function handleLogout() {
  // TODO: call your /api/auth/logout endpoint, then redirect.
  console.warn('NavUser: wire handleLogout() to your auth backend')
}
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
          >
            <Avatar class="h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6">
              <AvatarFallback class="rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">{{
                user.initials
              }}</AvatarFallback>
            </Avatar>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="truncate font-medium">{{ user.name }}</span>
              <span class="truncate text-xs">{{ user.email }}</span>
            </div>
            <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
          :side="isMobile ? 'bottom' : 'right'"
          align="end"
          :side-offset="4"
        >
          <DropdownMenuLabel class="p-0 font-normal">
            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
              <Avatar class="h-8 w-8 rounded-lg">
                <AvatarFallback class="rounded-lg">{{ user.initials }}</AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">{{ user.name }}</span>
                <span class="truncate text-xs">{{ user.email }}</span>
              </div>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem> <BadgeCheck class="size-4" /> Profile </DropdownMenuItem>
            <DropdownMenuItem> <Settings class="size-4" /> Settings </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <Palette class="size-4" />
              Theme
              <span class="text-muted-foreground ml-auto text-xs capitalize">{{ theme }}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent class="min-w-36">
              <DropdownMenuRadioGroup
                :model-value="theme"
                @update:model-value="(v) => setTheme(v as 'light' | 'dark' | 'system')"
              >
                <DropdownMenuRadioItem value="light"> <Sun class="size-4" /> Light </DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="dark"> <Moon class="size-4" /> Dark </DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="system"> <Monitor class="size-4" /> System </DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem @click="handleLogout">
            <LogOut class="size-4" />
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>

```

## sidebar-02

- type: `registry:block`
- description: Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `avatar`, `collapsible`, `dropdown-menu`, `use-theme`

### `packages/registry-vue/blocks/sidebar-02/Sidebar02.vue`

```vue
<script setup lang="ts">
import { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal } from 'lucide-vue-next'

import NavMain from './NavMain.vue'
import NavProjects from './NavProjects.vue'
import NavSecondary from './NavSecondary.vue'
import NavUser from './NavUser.vue'
import TeamSwitcher from './TeamSwitcher.vue'
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '@/components/ui/sidebar'

const data = {
  user: {
    name: 'shadcn',
    email: 'm@example.com',
  },
  navMain: [
    {
      title: 'Playground',
      url: '#',
      icon: SquareTerminal,
      isActive: true,
      items: [
        {
          title: 'History',
          url: '#',
        },
        {
          title: 'Starred',
          url: '#',
        },
        {
          title: 'Settings',
          url: '#',
        },
      ],
    },
    {
      title: 'Models',
      url: '#',
      icon: Bot,
      items: [
        {
          title: 'Genesis',
          url: '#',
        },
        {
          title: 'Explorer',
          url: '#',
        },
        {
          title: 'Quantum',
          url: '#',
        },
      ],
    },
    {
      title: 'Documentation',
      url: '#',
      icon: BookOpen,
      items: [
        {
          title: 'Introduction',
          url: '#',
        },
        {
          title: 'Get Started',
          url: '#',
        },
        {
          title: 'Tutorials',
          url: '#',
        },
        {
          title: 'Changelog',
          url: '#',
        },
      ],
    },
    {
      title: 'Settings',
      url: '#',
      icon: Settings2,
      items: [
        {
          title: 'General',
          url: '#',
        },
        {
          title: 'Team',
          url: '#',
        },
        {
          title: 'Billing',
          url: '#',
        },
        {
          title: 'Limits',
          url: '#',
        },
      ],
    },
  ],
  navSecondary: [
    {
      title: 'Support',
      url: '#',
      icon: LifeBuoy,
    },
    {
      title: 'Feedback',
      url: '#',
      icon: Send,
    },
  ],
  projects: [
    {
      name: 'Design Engineering',
      url: '#',
      icon: Frame,
    },
    {
      name: 'Sales & Marketing',
      url: '#',
      icon: PieChart,
    },
    {
      name: 'Travel',
      url: '#',
      icon: Map,
    },
  ],
}
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <TeamSwitcher />
    </SidebarHeader>
    <SidebarContent>
      <NavMain :items="data.navMain" />
      <NavProjects :projects="data.projects" />
      <NavSecondary :items="data.navSecondary" class="mt-auto" />
    </SidebarContent>
    <SidebarFooter>
      <NavUser :user="data.user" />
    </SidebarFooter>
    <SidebarRail />
  </Sidebar>
</template>

```

### `packages/registry-vue/blocks/sidebar-02/TeamSwitcher.vue`

```vue
<script setup lang="ts">
// Edit teams + activeTeam below to match your tenant model. The dropdown
// is the full team switcher pattern -- avatar tile, label, kbd shortcut,
// and a "Add team" footer row. Wire setActive() to your tenant API.
import { h, ref } from 'vue'
import { AudioWaveform, Check, ChevronsUpDown, Command, Plus } from 'lucide-vue-next'

// 4-quadrant uipkge logo. Inline functional component so it can sit
// next to Lucide icons in the teams array without an extra file.
const UipkgeMark = (props: { class?: string }) =>
  h('svg', { viewBox: '0 0 24 24', class: props.class, fill: 'currentColor', 'aria-hidden': 'true' }, [
    h('rect', { x: 2, y: 2, width: 9, height: 9, rx: 1.5 }),
    h('rect', { x: 13, y: 2, width: 9, height: 9, rx: 1.5, opacity: 0.55 }),
    h('rect', { x: 2, y: 13, width: 9, height: 9, rx: 1.5, opacity: 0.55 }),
    h('rect', { x: 13, y: 13, width: 9, height: 9, rx: 1.5 }),
  ])
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

const teams = [
  { name: 'uipkge', logo: UipkgeMark, plan: 'UI registry' },
  { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },
  { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },
]

const { isMobile } = useSidebar()
const activeTeam = ref(teams[0]!)
function setActive(team: (typeof teams)[number]) {
  activeTeam.value = team
}
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
          >
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6"
            >
              <component :is="activeTeam.logo" class="size-4 group-data-[collapsible=icon]:size-3.5" />
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="font-display truncate font-bold">{{ activeTeam.name }}</span>
              <span class="text-muted-foreground truncate text-xs">{{ activeTeam.plan }}</span>
            </div>
            <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
          :side="isMobile ? 'bottom' : 'right'"
          align="start"
          :side-offset="4"
        >
          <DropdownMenuLabel class="text-muted-foreground text-xs">Teams</DropdownMenuLabel>
          <DropdownMenuItem v-for="(team, i) in teams" :key="team.name" class="gap-2 p-2" @select="setActive(team)">
            <div class="flex size-6 items-center justify-center rounded-sm border">
              <component :is="team.logo" class="size-3.5 shrink-0" />
            </div>
            {{ team.name }}
            <Check v-if="activeTeam === team" class="ml-auto size-4" />
            <DropdownMenuShortcut v-else>⌘{{ i + 1 }}</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem class="gap-2 p-2">
            <div class="bg-background flex size-6 items-center justify-center rounded-md border">
              <Plus class="size-4" />
            </div>
            <div class="text-muted-foreground font-medium">Add team</div>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>

```

### `packages/registry-vue/blocks/sidebar-02/NavMain.vue`

```vue
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import { ChevronRight } from 'lucide-vue-next'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from '@/components/ui/sidebar'

defineProps<{
  items: {
    title: string
    url: string
    icon: LucideIcon
    isActive?: boolean
    items?: {
      title: string
      url: string
      isActive?: boolean
    }[]
  }[]
}>()
</script>

<template>
  <SidebarGroup>
    <SidebarGroupLabel>Platform</SidebarGroupLabel>
    <SidebarMenu>
      <Collapsible v-for="item in items" :key="item.title" as-child :default-open="item.isActive">
        <SidebarMenuItem>
          <SidebarMenuButton as-child :tooltip="item.title" :is-active="item.isActive">
            <a :href="item.url">
              <component :is="item.icon" />
              <span>{{ item.title }}</span>
            </a>
          </SidebarMenuButton>
          <template v-if="item.items?.length">
            <CollapsibleTrigger as-child>
              <SidebarMenuAction class="data-[state=open]:rotate-90">
                <ChevronRight />
                <span class="sr-only">Toggle</span>
              </SidebarMenuAction>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarMenuSub>
                <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
                  <SidebarMenuSubButton as-child :is-active="subItem.isActive">
                    <a :href="subItem.url">
                      <span>{{ subItem.title }}</span>
                    </a>
                  </SidebarMenuSubButton>
                </SidebarMenuSubItem>
              </SidebarMenuSub>
            </CollapsibleContent>
          </template>
        </SidebarMenuItem>
      </Collapsible>
    </SidebarMenu>
  </SidebarGroup>
</template>

```

### `packages/registry-vue/blocks/sidebar-02/NavProjects.vue`

```vue
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'
import { Folder, Forward, MoreHorizontal, Trash2 } from 'lucide-vue-next'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'

defineProps<{
  projects: {
    name: string
    url: string
    icon: LucideIcon
  }[]
}>()

const { isMobile } = useSidebar()
</script>

<template>
  <!-- Upstream shadcn-vue hides this entire group on icon-mode collapse
       with `group-data-[collapsible=icon]:hidden`. We keep it visible so
       the project icons stay reachable in the narrow column; the
       SidebarGroupLabel below and the `<span>` children of each
       SidebarMenuButton already self-hide on collapse, leaving an
       icon-only column that lines up with NavMain. -->
  <SidebarGroup>
    <SidebarGroupLabel>Projects</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem v-for="item in projects" :key="item.name">
        <SidebarMenuButton as-child>
          <a :href="item.url">
            <component :is="item.icon" />
            <span>{{ item.name }}</span>
          </a>
        </SidebarMenuButton>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <SidebarMenuAction show-on-hover>
              <MoreHorizontal />
              <span class="sr-only">More</span>
            </SidebarMenuAction>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            class="w-48 rounded-lg"
            :side="isMobile ? 'bottom' : 'right'"
            :align="isMobile ? 'end' : 'start'"
          >
            <DropdownMenuItem>
              <Folder class="text-muted-foreground" />
              <span>View Project</span>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Forward class="text-muted-foreground" />
              <span>Share Project</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <Trash2 class="text-muted-foreground" />
              <span>Delete Project</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton>
          <MoreHorizontal />
          <span>More</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</template>

```

### `packages/registry-vue/blocks/sidebar-02/NavSecondary.vue`

```vue
<script setup lang="ts">
import type { LucideIcon } from 'lucide-vue-next'

import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'

const props = defineProps<{
  items: {
    title: string
    url: string
    icon: LucideIcon
  }[]
}>()
</script>

<template>
  <SidebarGroup>
    <SidebarGroupContent>
      <SidebarMenu>
        <SidebarMenuItem v-for="item in items" :key="item.title">
          <SidebarMenuButton as-child size="sm" :is-active="item.isActive">
            <a :href="item.url">
              <component :is="item.icon" />
              <span>{{ item.title }}</span>
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroupContent>
  </SidebarGroup>
</template>

```

### `packages/registry-vue/blocks/sidebar-02/NavUser.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import {
  BadgeCheck,
  Bell,
  ChevronsUpDown,
  CreditCard,
  LogOut,
  Monitor,
  Moon,
  Palette,
  Sparkles,
  Sun,
} from 'lucide-vue-next'
import { useTheme } from '~/composables/useTheme'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

const props = defineProps<{
  user: {
    name: string
    email: string
  }
}>()

const { isMobile } = useSidebar()
const { theme, setTheme } = useTheme()

const initials = computed(() => {
  const parts = props.user.name.trim().split(/\s+/).slice(0, 2)
  return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'
})
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
          >
            <Avatar class="h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6">
              <AvatarFallback class="rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">{{
                initials
              }}</AvatarFallback>
            </Avatar>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="truncate font-medium">{{ user.name }}</span>
              <span class="truncate text-xs">{{ user.email }}</span>
            </div>
            <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
          :side="isMobile ? 'bottom' : 'right'"
          align="end"
          :side-offset="4"
        >
          <DropdownMenuLabel class="p-0 font-normal">
            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
              <Avatar class="h-8 w-8 rounded-lg">
                <AvatarFallback class="rounded-lg text-xs">{{ initials }}</AvatarFallback>
              </Avatar>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">{{ user.name }}</span>
                <span class="truncate text-xs">{{ user.email }}</span>
              </div>
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <Sparkles />
              Upgrade to Pro
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <BadgeCheck />
              Account
            </DropdownMenuItem>
            <DropdownMenuItem>
              <CreditCard />
              Billing
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Bell />
              Notifications
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <Palette />
              Theme
              <span class="text-muted-foreground ml-auto text-xs capitalize">{{ theme }}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent class="min-w-36">
              <DropdownMenuRadioGroup
                :model-value="theme"
                @update:model-value="(v) => setTheme(v as 'light' | 'dark' | 'system')"
              >
                <DropdownMenuRadioItem value="light"> <Sun /> Light </DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="dark"> <Moon /> Dark </DropdownMenuRadioItem>
                <DropdownMenuRadioItem value="system"> <Monitor /> System </DropdownMenuRadioItem>
              </DropdownMenuRadioGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <LogOut />
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>

```

## sidebar-03

- type: `registry:block`
- description: Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `collapsible`, `dropdown-menu`, `label`

### `packages/registry-vue/blocks/sidebar-03/Sidebar03.vue`

```vue
<script setup lang="ts">
import { ChevronRight } from 'lucide-vue-next'
import SearchForm from './SearchForm.vue'
import VersionSwitcher from './VersionSwitcher.vue'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from '@/components/ui/sidebar'

// This is sample data.
const data = {
  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        {
          title: 'Installation',
          url: '#',
        },
        {
          title: 'Project Structure',
          url: '#',
        },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        {
          title: 'Routing',
          url: '#',
        },
        {
          title: 'Data Fetching',
          url: '#',
          isActive: true,
        },
        {
          title: 'Rendering',
          url: '#',
        },
        {
          title: 'Caching',
          url: '#',
        },
        {
          title: 'Styling',
          url: '#',
        },
        {
          title: 'Optimizing',
          url: '#',
        },
        {
          title: 'Configuring',
          url: '#',
        },
        {
          title: 'Testing',
          url: '#',
        },
        {
          title: 'Authentication',
          url: '#',
        },
        {
          title: 'Deploying',
          url: '#',
        },
        {
          title: 'Upgrading',
          url: '#',
        },
        {
          title: 'Examples',
          url: '#',
        },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        {
          title: 'Components',
          url: '#',
        },
        {
          title: 'File Conventions',
          url: '#',
        },
        {
          title: 'Functions',
          url: '#',
        },
        {
          title: 'next.config.js Options',
          url: '#',
        },
        {
          title: 'CLI',
          url: '#',
        },
        {
          title: 'Edge Runtime',
          url: '#',
        },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        {
          title: 'Accessibility',
          url: '#',
        },
        {
          title: 'Fast Refresh',
          url: '#',
        },
        {
          title: 'Next.js Compiler',
          url: '#',
        },
        {
          title: 'Supported Browsers',
          url: '#',
        },
        {
          title: 'Turbopack',
          url: '#',
        },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [
        {
          title: 'Contribution Guide',
          url: '#',
        },
      ],
    },
  ],
}
</script>

<template>
  <Sidebar>
    <SidebarHeader>
      <VersionSwitcher :versions="data.versions" :default-version="data.versions[0]!" />
      <SearchForm />
    </SidebarHeader>
    <SidebarContent class="gap-0">
      <Collapsible
        v-for="item in data.navMain"
        :key="item.title"
        :title="item.title"
        default-open
        class="group/collapsible"
      >
        <SidebarGroup>
          <SidebarGroupLabel
            as-child
            class="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
          >
            <CollapsibleTrigger>
              {{ item.title }}
              <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
            </CollapsibleTrigger>
          </SidebarGroupLabel>
          <CollapsibleContent>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
                  <SidebarMenuButton as-child :is-active="childItem.isActive">
                    <a :href="item.url">{{ childItem.title }}</a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </CollapsibleContent>
        </SidebarGroup>
      </Collapsible>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>
</template>

```

### `packages/registry-vue/blocks/sidebar-03/SearchForm.vue`

```vue
<script setup lang="ts">
import { Search } from 'lucide-vue-next'
import { Label } from '@/components/ui/label'
import { SidebarGroup, SidebarGroupContent, SidebarInput } from '@/components/ui/sidebar'
</script>

<template>
  <form>
    <SidebarGroup class="py-0">
      <SidebarGroupContent>
        <Label for="search" class="sr-only">Search</Label>
        <SidebarInput id="search" type="text" placeholder="Search the docs..." :allow-clear="true">
          <template #prefix>
            <Search class="text-muted-foreground size-3.5" />
          </template>
        </SidebarInput>
      </SidebarGroupContent>
    </SidebarGroup>
  </form>
</template>

```

### `packages/registry-vue/blocks/sidebar-03/VersionSwitcher.vue`

```vue
<script setup lang="ts">
import { Check, ChevronsUpDown } from 'lucide-vue-next'

import { ref } from 'vue'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'

const props = defineProps<{
  versions: string[]
  defaultVersion: string
}>()

const selectedVersion = ref(props.defaultVersion)
</script>

<template>
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <SidebarMenuButton
            size="lg"
            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
          >
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
            >
              <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
                <rect x="2" y="2" width="9" height="9" rx="1.5" />
                <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="13" y="13" width="9" height="9" rx="1.5" />
              </svg>
            </div>
            <div class="flex flex-col gap-0.5 leading-none">
              <span class="font-medium">uipkge</span>
              <span class="">v{{ selectedVersion }}</span>
            </div>
            <ChevronsUpDown class="ml-auto" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent class="w-(--reka-dropdown-menu-trigger-width)" align="start">
          <DropdownMenuItem v-for="version in versions" :key="version" @select="selectedVersion = version">
            v{{ version }}
            <Check v-if="selectedVersion === version" class="ml-auto" />
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SidebarMenuItem>
  </SidebarMenu>
</template>

```

## sidebar-04

- type: `registry:block`
- description: Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`

### `packages/registry-vue/blocks/sidebar-04/Sidebar04.vue`

```vue
<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from '@/components/ui/sidebar'

// This is sample data.
const data = {
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        {
          title: 'Installation',
          url: '#',
        },
        {
          title: 'Project Structure',
          url: '#',
        },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        {
          title: 'Routing',
          url: '#',
        },
        {
          title: 'Data Fetching',
          url: '#',
          isActive: true,
        },
        {
          title: 'Rendering',
          url: '#',
        },
        {
          title: 'Caching',
          url: '#',
        },
        {
          title: 'Styling',
          url: '#',
        },
        {
          title: 'Optimizing',
          url: '#',
        },
        {
          title: 'Configuring',
          url: '#',
        },
        {
          title: 'Testing',
          url: '#',
        },
        {
          title: 'Authentication',
          url: '#',
        },
        {
          title: 'Deploying',
          url: '#',
        },
        {
          title: 'Upgrading',
          url: '#',
        },
        {
          title: 'Examples',
          url: '#',
        },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        {
          title: 'Components',
          url: '#',
        },
        {
          title: 'File Conventions',
          url: '#',
        },
        {
          title: 'Functions',
          url: '#',
        },
        {
          title: 'next.config.js Options',
          url: '#',
        },
        {
          title: 'CLI',
          url: '#',
        },
        {
          title: 'Edge Runtime',
          url: '#',
        },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        {
          title: 'Accessibility',
          url: '#',
        },
        {
          title: 'Fast Refresh',
          url: '#',
        },
        {
          title: 'Next.js Compiler',
          url: '#',
        },
        {
          title: 'Supported Browsers',
          url: '#',
        },
        {
          title: 'Turbopack',
          url: '#',
        },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [
        {
          title: 'Contribution Guide',
          url: '#',
        },
      ],
    },
  ],
}
</script>

<template>
  <Sidebar variant="floating">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" as-child>
            <a href="#">
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
              >
                <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div class="flex flex-col gap-0.5 leading-none">
                <span class="font-medium">uipkge</span>
                <span class="">v1.0.0</span>
              </div>
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu class="gap-2">
          <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
            <SidebarMenuButton as-child :is-active="item.isActive">
              <a :href="item.url" class="font-medium">
                {{ item.title }}
              </a>
            </SidebarMenuButton>
            <SidebarMenuSub v-if="item.items.length" class="ml-0 border-l-0 px-1.5">
              <SidebarMenuSubItem v-for="childItem in item.items" :key="childItem.title">
                <SidebarMenuSubButton as-child :is-active="childItem.isActive">
                  <a :href="childItem.url">{{ childItem.title }}</a>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            </SidebarMenuSub>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
</template>

```

## sidebar-05

- type: `registry:block`
- description: Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible="icon": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: :style="{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }". Modeled on the GR8R HRMS admin shell.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-vue/blocks/sidebar-05/Sidebar05.vue`

```vue
<script setup lang="ts">
// Dual-rail sidebar with master/detail behavior. The thin rail picks the
// section; the main panel renders the rows for the active section. One
// <Sidebar collapsible="icon"> contains rail + panel as inline flex siblings.
//
// Desktop: when collapsed (toggle clicked), the kit shrinks the sidebar to
// --sidebar-width-icon. We set that to 3.5rem so only the rail stays.
// The panel is hidden via group-data-[collapsible=icon] which only fires
// on the desktop branch of <Sidebar> (the mobile <Sheet> has no `group`
// ancestor with that attr, so mobile sheet always shows rail+panel).
//
// IMPORTANT: the parent <SidebarProvider> must set BOTH custom widths,
// e.g. <SidebarProvider :style="{ '--sidebar-width': '19.5rem',
//                                  '--sidebar-width-icon': '3.5rem' }">
// The vars set on <Sidebar> itself are too deep -- the layout-allocating
// wrapper sits above it and reads the provider's vars.
//
// To wire to your router, replace the ref-based switch with route matches
// (e.g. set active = 'projects' on /projects/*).

import { computed, onMounted, ref } from 'vue'
import { useTheme } from '~/composables/useTheme'
import {
  Bell,
  Briefcase,
  Calendar,
  ChartLine,
  ChevronsUpDown,
  ClipboardList,
  CreditCard,
  FileText,
  Folder,
  Gauge,
  Headphones,
  HelpCircle,
  Home,
  Inbox,
  LayoutDashboard,
  Lock,
  Mail,
  MessageSquare,
  Moon,
  Search,
  Send,
  Settings as SettingsIcon,
  Star,
  Sun,
  Users,
} from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'

const { isMobile, state, setOpen } = useSidebar()
const { theme, setTheme } = useTheme()
// `mounted` stays false during SSR + the client's first synchronous
// render, so isDark is also false on both sides -- no hydration
// mismatch on the Sun/Moon icon. Once hydration settles `onMounted`
// flips the flag and the computed re-runs against the real
// matchMedia/system signal. The transition reads as a fast icon
// swap instead of a Vue hydration warning.
const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})
const isDark = computed(
  () =>
    mounted.value &&
    (theme.value === 'dark' || (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)),
)

type RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'

const active = ref<RailId>('home')

const rail = [
  { id: 'home' as const, icon: Home, label: 'Home' },
  { id: 'projects' as const, icon: Folder, label: 'Projects' },
  { id: 'inbox' as const, icon: Bell, label: 'Inbox' },
  { id: 'messages' as const, icon: MessageSquare, label: 'Messages' },
]
const railLower = [
  { id: 'support' as const, icon: Headphones, label: 'Support' },
  { id: 'settings' as const, icon: SettingsIcon, label: 'Settings' },
]

// Slack-style rail click: expand the panel if collapsed, or collapse if
// the user clicks the already-active icon while expanded. On mobile the
// sheet open/close is owned by the inset trigger, so we just swap active.
function selectRail(id: RailId) {
  if (isMobile.value) {
    active.value = id
    return
  }
  if (state.value === 'expanded' && active.value === id) {
    setOpen(false)
    return
  }
  active.value = id
  setOpen(true)
}

const titles: Record<RailId, string> = {
  home: 'Workspace',
  projects: 'Projects',
  inbox: 'Inbox',
  messages: 'Messages',
  support: 'Support',
  settings: 'Settings',
}
</script>

<template>
  <!-- Single Sidebar primitive containing BOTH rails inline. On desktop the
       rail (56px) stays visible when the sidebar is collapsed thanks to
       collapsible="icon" + --sidebar-width-icon: 3.5rem; the panel is
       hidden only when state=collapsed. On mobile the kit's <Sheet>
       renders the entire dual rail inside a single sheet pane. -->
  <Sidebar collapsible="icon">
    <div class="flex h-full w-full">
      <!-- Thin icon rail -- 56px wide. Clicking an icon updates `active`
           which swaps the main panel content below. -->
      <aside class="border-sidebar-border flex w-14 shrink-0 flex-col items-center gap-0.5 border-r py-2">
        <button
          type="button"
          aria-label="uipkge"
          class="bg-sidebar-primary text-sidebar-primary-foreground mb-1 flex aspect-square size-9 items-center justify-center rounded-lg shadow-sm ring-1 ring-white/10 transition-transform ring-inset hover:scale-105"
        >
          <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
            <rect x="2" y="2" width="9" height="9" rx="1.5" />
            <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
            <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
            <rect x="13" y="13" width="9" height="9" rx="1.5" />
          </svg>
        </button>

        <button
          v-for="item in rail"
          :key="item.id"
          type="button"
          :aria-label="item.label"
          :aria-current="active === item.id ? 'page' : undefined"
          :class="[
            'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',
            active === item.id
              ? 'bg-sidebar-accent text-foreground'
              : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',
          ]"
          @click="selectRail(item.id)"
        >
          <span
            v-if="active === item.id"
            class="bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full"
          />
          <component :is="item.icon" class="size-4" />
        </button>

        <div class="bg-sidebar-border/70 my-2 h-px w-7" />

        <button
          v-for="item in railLower"
          :key="item.id"
          type="button"
          :aria-label="item.label"
          :aria-current="active === item.id ? 'page' : undefined"
          :class="[
            'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',
            active === item.id
              ? 'bg-sidebar-accent text-foreground'
              : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',
          ]"
          @click="selectRail(item.id)"
        >
          <span
            v-if="active === item.id"
            class="bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full"
          />
          <component :is="item.icon" class="size-4" />
        </button>

        <div class="mt-auto flex flex-col items-center gap-1.5">
          <button
            type="button"
            :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
            class="text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground flex aspect-square size-9 items-center justify-center rounded-lg transition-colors"
            @click="setTheme(isDark ? 'light' : 'dark')"
          >
            <Sun v-if="isDark" class="size-4" />
            <Moon v-else class="size-4" />
          </button>

          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <button
                type="button"
                aria-label="James Carter"
                class="ring-offset-sidebar focus-visible:ring-ring data-[state=open]:ring-ring rounded-full transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-[state=open]:ring-2"
              >
                <Avatar class="size-8">
                  <AvatarFallback class="bg-sidebar-accent text-sidebar-accent-foreground text-xs">JC</AvatarFallback>
                </Avatar>
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              class="min-w-56 rounded-lg"
              :side="isMobile ? 'top' : 'right'"
              align="end"
              :side-offset="8"
            >
              <DropdownMenuLabel class="p-0 font-normal">
                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                  <Avatar class="size-8 rounded-lg">
                    <AvatarFallback class="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs"
                      >JC</AvatarFallback
                    >
                  </Avatar>
                  <div class="grid flex-1 leading-tight">
                    <span class="truncate font-medium">James Carter</span>
                    <span class="text-muted-foreground truncate text-xs">Admin</span>
                  </div>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem> <Send class="size-4" /> Invite teammates </DropdownMenuItem>
              <DropdownMenuItem> <SettingsIcon class="size-4" /> Workspace settings </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      <!-- Main panel -- header is the same for every section; the content
           area swaps based on `active`. Each section's rows are spelled out
           inline so consumers can edit them in place.
           Hidden on desktop when state=collapsed (rail stays). The mobile
           <Sheet> branch in <Sidebar> has no data-collapsible group, so this
           rule never applies on mobile -- the sheet always shows rail + panel. -->
      <div class="flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg">
                <div
                  class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg"
                >
                  <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true">
                    <rect x="2" y="2" width="9" height="9" rx="1.5" />
                    <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                    <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                    <rect x="13" y="13" width="9" height="9" rx="1.5" />
                  </svg>
                </div>
                <div class="grid flex-1 text-left text-sm leading-tight">
                  <span class="font-display truncate font-bold">uipkge</span>
                  <span class="text-muted-foreground truncate text-xs">{{ titles[active] }}</span>
                </div>
                <ChevronsUpDown class="ml-auto size-4" />
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>

          <div class="px-1 pt-1">
            <SidebarInput type="text" placeholder="Search..." :allow-clear="true">
              <template #prefix>
                <Search class="text-muted-foreground size-3.5" />
              </template>
              <template #suffix>
                <kbd
                  class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none"
                >
                  <span>&#8984;</span>F
                </kbd>
              </template>
            </SidebarInput>
          </div>
        </SidebarHeader>

        <SidebarContent>
          <!-- HOME: full workspace nav -->
          <template v-if="active === 'home'">
            <SidebarGroup>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton is-active>
                      <LayoutDashboard class="size-4" />
                      <span>Dashboard</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Users class="size-4" />
                      <span>Employees</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Briefcase class="size-4" />
                      <span>Clients</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Folder class="size-4" />
                      <span>Projects</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup>
              <SidebarGroupLabel>Workforce</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Calendar class="size-4" />
                      <span>Calendar</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <ClipboardList class="size-4" />
                      <span>Attendance</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Mail class="size-4" />
                      <span>Mail</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <ChartLine class="size-4" />
                      <span>Analytics</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>

          <!-- PROJECTS: pinned and recent projects -->
          <template v-else-if="active === 'projects'">
            <SidebarGroup>
              <SidebarGroupLabel>Pinned</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <div
                        class="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                      >
                        <Folder class="size-3" />
                      </div>
                      <span>Shift Planner</span>
                      <Star class="text-warning ml-auto size-3.5 fill-current" />
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <div
                        class="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                      >
                        <Folder class="size-3" />
                      </div>
                      <span>Training Portal</span>
                      <Star class="text-warning ml-auto size-3.5 fill-current" />
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <div
                        class="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                      >
                        <Folder class="size-3" />
                      </div>
                      <span>Performance Hub</span>
                      <Star class="text-warning ml-auto size-3.5 fill-current" />
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <div
                        class="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                      >
                        <Folder class="size-3" />
                      </div>
                      <span>Expense Claims</span>
                      <Star class="text-warning ml-auto size-3.5 fill-current" />
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup>
              <SidebarGroupLabel>Recent</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Folder class="size-4" />
                      <span>Onboarding 2026</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Folder class="size-4" />
                      <span>Q1 hiring plan</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Folder class="size-4" />
                      <span>Compliance refresh</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>

          <!-- INBOX: notifications list -->
          <template v-else-if="active === 'inbox'">
            <SidebarGroup>
              <SidebarGroupLabel>Today</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Inbox class="size-4" />
                      <span>3 PTO requests pending</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Bell class="size-4" />
                      <span>Payroll cycle closes today</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup>
              <SidebarGroupLabel>This week</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <FileText class="size-4" />
                      <span>5 contracts awaiting sign-off</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Users class="size-4" />
                      <span>2 new hires start Monday</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>

          <!-- MESSAGES: conversations -->
          <template v-else-if="active === 'messages'">
            <SidebarGroup>
              <SidebarGroupLabel>Direct messages</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Avatar class="size-5">
                        <AvatarFallback class="bg-chart-1/15 text-foreground text-[10px]">OB</AvatarFallback>
                      </Avatar>
                      <span>Olivia Bennett</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Avatar class="size-5">
                        <AvatarFallback class="bg-chart-2/15 text-foreground text-[10px]">DM</AvatarFallback>
                      </Avatar>
                      <span>Daniel Morgan</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Avatar class="size-5">
                        <AvatarFallback class="bg-chart-3/15 text-foreground text-[10px]">ER</AvatarFallback>
                      </Avatar>
                      <span>Ethan Reynolds</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup>
              <SidebarGroupLabel>Channels</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <MessageSquare class="size-4" />
                      <span># announcements</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <MessageSquare class="size-4" />
                      <span># hiring</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>

          <!-- SUPPORT: help links -->
          <template v-else-if="active === 'support'">
            <SidebarGroup>
              <SidebarGroupLabel>Help center</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <HelpCircle class="size-4" />
                      <span>Getting started</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <FileText class="size-4" />
                      <span>Onboarding guide</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Send class="size-4" />
                      <span>Contact support</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>

          <!-- SETTINGS: workspace settings -->
          <template v-else-if="active === 'settings'">
            <SidebarGroup>
              <SidebarGroupLabel>Workspace</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <SettingsIcon class="size-4" />
                      <span>General</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Users class="size-4" />
                      <span>Members</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <CreditCard class="size-4" />
                      <span>Billing</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Gauge class="size-4" />
                      <span>Limits</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup>
              <SidebarGroupLabel>Account</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Lock class="size-4" />
                      <span>Security</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <Bell class="size-4" />
                      <span>Notifications</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </template>
        </SidebarContent>
      </div>
    </div>
  </Sidebar>
</template>

```

## sidebar-06

- type: `registry:block`
- description: Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-vue/blocks/sidebar-06/Sidebar06.vue`

```vue
<script setup lang="ts">
// Colorful, customised HRMS-style sidebar -- branded project tiles, badges,
// status dots, and a user pill footer. Every row is spelled out inline so
// you can swap colors and labels in place.

import {
  Briefcase,
  Calendar,
  ChartLine,
  ChevronsUpDown,
  ClipboardList,
  Folder,
  GraduationCap,
  HeartPulse,
  HelpCircle,
  Inbox,
  LayoutDashboard,
  Monitor,
  Moon,
  Palette,
  Search,
  Send,
  Settings as SettingsIcon,
  Star,
  Sun,
  Users,
} from 'lucide-vue-next'
import { useTheme } from '~/composables/useTheme'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
  useSidebar,
} from '@/components/ui/sidebar'

const { isMobile } = useSidebar()
const { theme, setTheme } = useTheme()
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" tooltip="uipkge" class="group-data-[collapsible=icon]:!justify-center">
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg shadow-sm group-data-[collapsible=icon]:size-6"
            >
              <svg
                viewBox="0 0 24 24"
                class="size-4 group-data-[collapsible=icon]:size-3.5"
                fill="currentColor"
                aria-hidden="true"
              >
                <rect x="2" y="2" width="9" height="9" rx="1.5" />
                <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="13" y="13" width="9" height="9" rx="1.5" />
              </svg>
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="font-display truncate font-bold">uipkge</span>
              <span class="text-muted-foreground truncate text-xs">uipkge.dev</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>

      <div class="px-1 pt-1 group-data-[collapsible=icon]:hidden">
        <SidebarInput type="text" placeholder="Search..." :allow-clear="true">
          <template #prefix>
            <Search class="text-muted-foreground size-3.5" />
          </template>
          <template #suffix>
            <kbd
              class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none"
            >
              <span>&#8984;</span>F
            </kbd>
          </template>
        </SidebarInput>
      </div>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton is-active tooltip="Dashboard">
                <LayoutDashboard class="size-4" />
                <span>Dashboard</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Employees">
                <Users class="size-4" />
                <span>Employees</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Clients">
                <Briefcase class="size-4" />
                <span>Clients</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Projects">
                <Folder class="size-4" />
                <span>Projects</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarSeparator />

      <SidebarGroup>
        <SidebarGroupLabel>Workforce</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Calendar">
                <Calendar class="size-4" />
                <span>Calendar</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Attendance">
                <ClipboardList class="size-4" />
                <span>Attendance</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Inbox">
                <Inbox class="size-4" />
                <span>Inbox</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="bg-destructive text-white">6</SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Analytics">
                <ChartLine class="size-4" />
                <span>Analytics</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarSeparator />

      <SidebarGroup>
        <SidebarGroupLabel>Projects</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Shift Planner">
                <div
                  class="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                >
                  <Folder class="size-3" />
                </div>
                <span>Shift Planner</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="text-warning">
                <Star class="size-3.5 fill-current" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Training Portal">
                <div
                  class="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                >
                  <GraduationCap class="size-3" />
                </div>
                <span>Training Portal</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="text-warning">
                <Star class="size-3.5 fill-current" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Performance Hub">
                <div
                  class="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                >
                  <HeartPulse class="size-3" />
                </div>
                <span>Performance Hub</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="text-warning">
                <Star class="size-3.5 fill-current" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Expense Claims">
                <div
                  class="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white"
                >
                  <ChartLine class="size-3" />
                </div>
                <span>Expense Claims</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="text-warning">
                <Star class="size-3.5 fill-current" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarSeparator />

      <SidebarGroup>
        <SidebarGroupLabel>My team</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Olivia Bennett">
                <Avatar class="size-5">
                  <AvatarFallback class="bg-chart-1/15 text-foreground text-[10px]">OB</AvatarFallback>
                </Avatar>
                <span>Olivia Bennett</span>
              </SidebarMenuButton>
              <SidebarMenuBadge>
                <span class="bg-destructive size-1.5 rounded-full" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Daniel Morgan">
                <Avatar class="size-5">
                  <AvatarFallback class="bg-chart-2/15 text-foreground text-[10px]">DM</AvatarFallback>
                </Avatar>
                <span>Daniel Morgan</span>
              </SidebarMenuButton>
              <SidebarMenuBadge>
                <span class="bg-warning size-1.5 rounded-full" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Ethan Reynolds">
                <Avatar class="size-5">
                  <AvatarFallback class="bg-chart-3/15 text-foreground text-[10px]">ER</AvatarFallback>
                </Avatar>
                <span>Ethan Reynolds</span>
              </SidebarMenuButton>
              <SidebarMenuBadge>
                <span class="bg-success size-1.5 rounded-full" />
              </SidebarMenuBadge>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarSeparator />

      <SidebarGroup>
        <SidebarGroupLabel>Administration</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Settings">
                <SettingsIcon class="size-4" />
                <span>Settings</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Help center">
                <HelpCircle class="size-4" />
                <span>Help center</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>
          <DropdownMenu>
            <DropdownMenuTrigger as-child>
              <SidebarMenuButton
                size="lg"
                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
              >
                <div class="relative shrink-0">
                  <Avatar class="h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6">
                    <AvatarFallback
                      class="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]"
                      >JC</AvatarFallback
                    >
                  </Avatar>
                  <span
                    class="bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2"
                  />
                </div>
                <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                  <span class="truncate font-medium">James Carter</span>
                  <span class="text-muted-foreground truncate text-xs">Admin</span>
                </div>
                <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
              </SidebarMenuButton>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
              :side="isMobile ? 'bottom' : 'right'"
              align="end"
              :side-offset="4"
            >
              <DropdownMenuLabel>James Carter</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem> <Send class="size-4" /> Invite teammates </DropdownMenuItem>
              <DropdownMenuItem> <SettingsIcon class="size-4" /> Workspace settings </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>
                  <Palette class="size-4" />
                  Theme
                  <span class="text-muted-foreground ml-auto text-xs capitalize">{{ theme }}</span>
                </DropdownMenuSubTrigger>
                <DropdownMenuSubContent class="min-w-36">
                  <DropdownMenuRadioGroup
                    :model-value="theme"
                    @update:model-value="(v) => setTheme(v as 'light' | 'dark' | 'system')"
                  >
                    <DropdownMenuRadioItem value="light"> <Sun class="size-4" /> Light </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="dark"> <Moon class="size-4" /> Dark </DropdownMenuRadioItem>
                    <DropdownMenuRadioItem value="system"> <Monitor class="size-4" /> System </DropdownMenuRadioItem>
                  </DropdownMenuRadioGroup>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuContent>
          </DropdownMenu>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>

    <SidebarRail />
  </Sidebar>
</template>

```

## sidebar-07

- type: `registry:block`
- description: App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.
- npm deps: `lucide-vue-next`
- registry deps: `sidebar`, `avatar`, `use-theme`

### `packages/registry-vue/blocks/sidebar-07/Sidebar07.vue`

```vue
<script setup lang="ts">
// App sidebar with a bottom action bar. Workspace pill + search at the top,
// three grouped nav sections, user pill above an icon toolbar (Settings,
// Help, Notifications, Command palette, Log out) anchored at the very
// bottom. Every row is spelled out inline so you can edit in place.

import { computed, ref, onMounted } from 'vue'
import { useTheme } from '~/composables/useTheme'
import {
  Bell,
  ChartBar,
  ChevronsUpDown,
  Command,
  CreditCard,
  FileText,
  HelpCircle,
  LineChart,
  Mail,
  Moon,
  Package,
  Plus,
  Search,
  Settings as SettingsIcon,
  ShoppingCart,
  Sun,
  Users,
} from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
} from '@/components/ui/sidebar'

const { state } = useSidebar()
const { theme, setTheme } = useTheme()
// `mounted` stays false during SSR + the client's first synchronous
// render, so isDark is also false on both sides -- no hydration
// mismatch on the Sun/Moon icon. Once hydration settles `onMounted`
// flips the flag and the computed re-runs against the real
// matchMedia/system signal. Mirrors the sidebar-05 pattern.
const mounted = ref(false)
onMounted(() => {
  mounted.value = true
})
const isDark = computed(
  () =>
    mounted.value &&
    (theme.value === 'dark' || (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)),
)
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" tooltip="uipkge" class="group-data-[collapsible=icon]:!justify-center">
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6"
            >
              <svg
                viewBox="0 0 24 24"
                class="size-4 group-data-[collapsible=icon]:size-3.5"
                fill="currentColor"
                aria-hidden="true"
              >
                <rect x="2" y="2" width="9" height="9" rx="1.5" />
                <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                <rect x="13" y="13" width="9" height="9" rx="1.5" />
              </svg>
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="font-display truncate font-semibold">uipkge</span>
              <span class="text-muted-foreground truncate text-xs">uipkge.dev</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>

      <div class="px-1 pt-1 group-data-[collapsible=icon]:hidden">
        <SidebarInput type="text" placeholder="Search..." :allow-clear="true">
          <template #prefix>
            <Search class="text-muted-foreground size-3.5" />
          </template>
          <template #suffix>
            <kbd
              class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none"
            >
              <span>&#8984;</span>K
            </kbd>
          </template>
        </SidebarInput>
      </div>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <!-- Active row gets a subtle success-tinted gradient to mark it
                   without competing with the rest of the nav. -->
              <SidebarMenuButton
                is-active
                tooltip="Analytics"
                class="data-[active=true]:!bg-success/20 data-[active=true]:!text-foreground"
              >
                <ChartBar class="size-4" />
                <span>Analytics</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Performance">
                <LineChart class="size-4" />
                <span>Performance</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarGroup>
        <SidebarGroupLabel>Management</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Products">
                <Package class="size-4" />
                <span>Products</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Orders">
                <ShoppingCart class="size-4" />
                <span>Orders</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Subscribers">
                <Users class="size-4" />
                <span>Subscribers</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Transactions">
                <CreditCard class="size-4" />
                <span>Transactions</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarGroup>
        <SidebarGroupLabel>Content</SidebarGroupLabel>
        <SidebarGroupAction aria-label="Add content">
          <Plus class="size-4" />
        </SidebarGroupAction>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Posts">
                <FileText class="size-4" />
                <span>Posts</span>
              </SidebarMenuButton>
              <SidebarMenuBadge class="bg-destructive text-white">10</SidebarMenuBadge>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip="Pages">
                <Mail class="size-4" />
                <span>Pages</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" class="group-data-[collapsible=icon]:!justify-center">
            <Avatar class="size-8 rounded-lg group-data-[collapsible=icon]:size-6">
              <AvatarFallback
                class="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]"
                >SW</AvatarFallback
              >
            </Avatar>
            <div class="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span class="truncate font-medium">Sarah Wilson</span>
              <span class="text-muted-foreground truncate text-xs">Admin Account</span>
            </div>
            <ChevronsUpDown class="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>

      <template v-if="state === 'expanded'">
        <SidebarSeparator class="my-1" />

        <!-- Action toolbar -- evenly spaced quick icons. Last button is the
             SidebarTrigger collapse toggle. Replace others with
             <NuxtLink> / <button @click="..."> as needed. -->
        <div class="flex items-center justify-between px-1 pb-1">
          <button
            type="button"
            aria-label="Settings"
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
          >
            <SettingsIcon class="size-4" />
          </button>
          <button
            type="button"
            aria-label="Help"
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
          >
            <HelpCircle class="size-4" />
          </button>
          <button
            type="button"
            aria-label="Notifications"
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
          >
            <Bell class="size-4" />
          </button>
          <button
            type="button"
            aria-label="Command palette"
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
          >
            <Command class="size-4" />
          </button>
          <button
            type="button"
            :aria-label="isDark ? 'Switch to light theme' : 'Switch to dark theme'"
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
            @click="setTheme(isDark ? 'light' : 'dark')"
          >
            <Sun v-if="isDark" class="size-4" />
            <Moon v-else class="size-4" />
          </button>
          <SidebarTrigger
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md"
          />
        </div>
      </template>

      <!-- Collapsed-state: surface the trigger on its own so the rail always
           has an expand affordance. -->
      <template v-else>
        <div class="flex items-center justify-center pb-1">
          <SidebarTrigger
            class="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md"
          />
        </div>
      </template>
    </SidebarFooter>

    <SidebarRail />
  </Sidebar>
</template>

```

## signature-pad

- type: `registry:ui`
- description: Canvas-based digital signature capture with pointer events (mouse + touch). v-model emits a PNG data URL, with pen color/thickness, background, clear method, disabled/readonly states, and a live point count.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/signature-pad/SignaturePad.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Eraser } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { signaturePadVariants } from './signature-pad.variants'

interface Props {
  modelValue?: string | null
  width?: number
  height?: number
  penColor?: string
  penThickness?: number
  backgroundColor?: string
  exportFormat?: string
  disabled?: boolean
  readonly?: boolean
  showClearButton?: boolean
  clearLabel?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  width: 400,
  height: 200,
  penColor: '#0a0a0a',
  penThickness: 2,
  backgroundColor: '#ffffff',
  exportFormat: 'image/png',
  disabled: false,
  readonly: false,
  showClearButton: true,
  clearLabel: 'Clear',
})

const emit = defineEmits<{
  'update:modelValue': [value: string | null]
  begin: []
  end: []
  change: [value: string | null]
}>()

const canvasRef = ref<HTMLCanvasElement | null>(null)
const isDrawing = ref(false)
const pointCount = ref(0)
const hasInk = ref(false)
const ctx = ref<CanvasRenderingContext2D | null>(null)
let lastX = 0
let lastY = 0

const isInteractive = computed(() => !props.disabled && !props.readonly)

function setupCanvas() {
  const canvas = canvasRef.value
  if (!canvas) return
  const dpr = window.devicePixelRatio || 1
  canvas.width = props.width * dpr
  canvas.height = props.height * dpr
  canvas.style.width = `${props.width}px`
  canvas.style.height = `${props.height}px`
  const context = canvas.getContext('2d')
  if (!context) return
  context.scale(dpr, dpr)
  context.lineCap = 'round'
  context.lineJoin = 'round'
  context.strokeStyle = props.penColor
  context.lineWidth = props.penThickness
  context.fillStyle = props.backgroundColor
  context.fillRect(0, 0, props.width, props.height)
  ctx.value = context
  pointCount.value = 0
  hasInk.value = false
}

function getPointerPos(e: PointerEvent): { x: number; y: number } {
  const canvas = canvasRef.value
  if (!canvas) return { x: 0, y: 0 }
  const rect = canvas.getBoundingClientRect()
  return {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top,
  }
}

function startDraw(e: PointerEvent) {
  if (!isInteractive.value || !ctx.value) return
  e.preventDefault()
  isDrawing.value = true
  const { x, y } = getPointerPos(e)
  lastX = x
  lastY = y
  ctx.value.beginPath()
  ctx.value.moveTo(x, y)
  pointCount.value += 1
  hasInk.value = true
  emit('begin')
  canvasRef.value?.setPointerCapture(e.pointerId)
}

function draw(e: PointerEvent) {
  if (!isDrawing.value || !ctx.value) return
  e.preventDefault()
  const { x, y } = getPointerPos(e)
  ctx.value.beginPath()
  ctx.value.moveTo(lastX, lastY)
  ctx.value.lineTo(x, y)
  ctx.value.stroke()
  lastX = x
  lastY = y
  pointCount.value += 1
}

function endDraw(e: PointerEvent) {
  if (!isDrawing.value) return
  isDrawing.value = false
  if (ctx.value) ctx.value.closePath()
  canvasRef.value?.releasePointerCapture(e.pointerId)
  exportSignature()
  emit('end')
}

function exportSignature() {
  const canvas = canvasRef.value
  if (!canvas) return
  if (!hasInk.value) {
    emit('update:modelValue', null)
    emit('change', null)
    return
  }
  const dataUrl = canvas.toDataURL(props.exportFormat)
  emit('update:modelValue', dataUrl)
  emit('change', dataUrl)
}

function clear() {
  const canvas = canvasRef.value
  const context = ctx.value
  if (!canvas || !context) return
  context.fillStyle = props.backgroundColor
  context.fillRect(0, 0, props.width, props.height)
  pointCount.value = 0
  hasInk.value = false
  emit('update:modelValue', null)
  emit('change', null)
}

defineExpose({
  clear,
  exportSignature,
  toDataURL: exportSignature,
  pointCount: computed(() => pointCount.value),
  isEmpty: computed(() => !hasInk.value),
})

onMounted(() => {
  setupCanvas()
})

onBeforeUnmount(() => {
  ctx.value = null
})

watch(
  () => [props.penColor, props.penThickness, props.backgroundColor, props.width, props.height],
  () => {
    setupCanvas()
  },
)
</script>

<template>
  <div
    data-uipkge
    data-slot="signature-pad"
    :data-disabled="disabled ? '' : undefined"
    :data-readonly="readonly ? '' : undefined"
    :class="cn(signaturePadVariants(), props.class)"
  >
    <canvas
      ref="canvasRef"
      :class="cn('block touch-none rounded-md', !isInteractive && 'pointer-events-none')"
      :style="{ touchAction: 'none' }"
      :aria-label="'Signature pad' + (disabled ? ' (disabled)' : '')"
      role="img"
      @pointerdown="startDraw"
      @pointermove="draw"
      @pointerup="endDraw"
      @pointercancel="endDraw"
      @pointerleave="endDraw"
    />
    <div v-if="showClearButton && isInteractive" class="flex items-center justify-between gap-2 pt-2">
      <span class="text-muted-foreground text-xs tabular-nums">{{ pointCount }} points</span>
      <button
        type="button"
        class="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex items-center gap-1 rounded-md text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
        :disabled="!hasInk"
        @click="clear"
      >
        <Eraser class="size-3.5" />
        {{ clearLabel }}
      </button>
    </div>
    <slot name="actions" :clear="clear" :export="exportSignature" :empty="!hasInk" />
  </div>
</template>

```

### `packages/registry-vue/components/signature-pad/signature-pad.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const signaturePadVariants = cva(
  'border-input bg-background inline-flex flex-col gap-1 rounded-lg border p-2 shadow-xs',
)

export type SignaturePadVariants = VariantProps<typeof signaturePadVariants>

```

### `packages/registry-vue/components/signature-pad/index.ts`

```ts
export { default as SignaturePad } from './SignaturePad.vue'
export { signaturePadVariants, type SignaturePadVariants } from './signature-pad.variants'

```

## skeleton

- type: `registry:ui`
- description: Animated placeholder rectangles for loading states — drop one in shape of the content that’s about to render. Variants for text lines, avatars, rounded rectangles, and circles.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/skeleton/Skeleton.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  variant?: 'rectangular' | 'rounded' | 'circular' | 'text' | 'avatar' | 'image' | 'card' | 'table-row'
  width?: string
  height?: string
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'rectangular',
  loading: true,
})

const variantClasses = {
  rectangular: '',
  rounded: 'rounded-md',
  circular: 'rounded-full',
  text: 'rounded h-4 w-full',
  avatar: 'rounded-full size-10',
  image: 'rounded-lg size-24',
  card: 'rounded-xl size-full min-h-[120px]',
  'table-row': 'rounded h-10 w-full',
}

const variantStyles = computed(() => {
  const base: Record<string, string> = {}
  if (props.width) base.width = props.width
  if (props.height) base.height = props.height
  return Object.keys(base).length > 0 ? base : undefined
})
</script>

<template>
  <div
    v-if="loading"
    data-uipkge
    data-slot="skeleton"
    :class="cn('skeleton-shimmer', variantClasses[variant || 'rectangular'], props.class)"
    :style="variantStyles"
  />
  <slot v-else />
</template>

<style scoped>
/* Slow left-to-right gradient sweep. Per NN/g, slow shimmer reads as
   faster loading than a pulse. 1.8s loop is the documented sweet spot. */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 100%, transparent) 0%,
    color-mix(in srgb, var(--muted) 60%, var(--foreground) 8%) 50%,
    color-mix(in srgb, var(--muted) 100%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s linear infinite;
}
@keyframes skeleton-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer {
    animation: none;
    background: var(--muted);
  }
}
</style>

```

### `packages/registry-vue/components/skeleton/SkeletonGroup.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  tag?: string
}

const props = withDefaults(defineProps<Props>(), {
  tag: 'div',
})
</script>

<template>
  <component :is="props.tag" data-uipkge data-slot="skeleton-group" :class="cn('space-y-2', props.class)">
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/skeleton/SkeletonLoader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { skeletonLoaderVariants } from './skeleton.variants'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    variant?:
      | 'text'
      | 'chip'
      | 'chip-icon'
      | 'article'
      | 'avatar'
      | 'avatar-small'
      | 'avatar-large'
      | 'heading'
      | 'heading-medium'
      | 'heading-small'
      | 'image'
      | 'image-small'
      | 'image-large'
      | 'card'
      | 'card-avatar'
      | 'actions'
      | 'table'
      | 'table-row'
      | 'button'
      | 'button-icon'
      | 'badge'
      | 'tab'
      | 'date-picker'
      | 'list-item'
      | 'list-item-two-line'
      | 'list-item-three-line'
    loading?: boolean
    rows?: number
    boilerplate?: boolean
  }>(),
  {
    variant: 'text',
    loading: true,
    rows: 1,
    boilerplate: false,
  },
)
</script>

<template>
  <div data-uipkge data-slot="skeleton-loader" class="space-y-2">
    <!-- Single item -->
    <template v-if="rows === 1">
      <div v-if="loading" :class="cn(skeletonLoaderVariants({ variant }), props.class)" />
      <slot v-else />
    </template>

    <!-- Multiple rows -->
    <template v-else>
      <template v-if="loading">
        <!-- Article variant with multiple elements -->
        <template v-if="variant === 'article'">
          <div :class="cn(skeletonLoaderVariants({ variant: 'heading' }), 'mb-4')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'w-3/4')" />
        </template>

        <!-- Card variant -->
        <template v-else-if="variant === 'card'">
          <div :class="cn(skeletonLoaderVariants({ variant: 'image-large' }), 'mb-4')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'heading-small' }), 'mb-2')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')" />
          <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'w-1/2')" />
        </template>

        <!-- Card avatar variant -->
        <template v-else-if="variant === 'card-avatar'">
          <div class="mb-4 flex items-center gap-4">
            <div :class="cn(skeletonLoaderVariants({ variant: 'avatar-large' }))" />
            <div class="flex-1 space-y-2">
              <div :class="cn(skeletonLoaderVariants({ variant: 'heading-small' }))" />
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'w-1/2')" />
            </div>
          </div>
        </template>

        <!-- Actions variant -->
        <template v-else-if="variant === 'actions'">
          <div class="flex gap-2">
            <div :class="cn(skeletonLoaderVariants({ variant: 'button' }))" />
            <div :class="cn(skeletonLoaderVariants({ variant: 'button' }))" />
          </div>
        </template>

        <!-- Table variant -->
        <template v-else-if="variant === 'table'">
          <div v-for="i in rows" :key="i" :class="cn(skeletonLoaderVariants({ variant: 'table-row' }), 'mb-2')" />
        </template>

        <!-- List item variants -->
        <template v-else-if="variant === 'list-item'">
          <div v-for="i in rows" :key="i" class="mb-2 flex items-center gap-3">
            <div :class="cn(skeletonLoaderVariants({ variant: 'avatar-small' }))" />
            <div class="flex-1">
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }))" />
            </div>
          </div>
        </template>

        <!-- List item two line -->
        <template v-else-if="variant === 'list-item-two-line'">
          <div v-for="i in rows" :key="i" class="mb-2 flex items-center gap-3">
            <div :class="cn(skeletonLoaderVariants({ variant: 'avatar' }))" />
            <div class="flex-1 space-y-2">
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }))" />
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'w-3/4')" />
            </div>
          </div>
        </template>

        <!-- List item three line -->
        <template v-else-if="variant === 'list-item-three-line'">
          <div v-for="i in rows" :key="i" class="mb-2 flex items-start gap-3">
            <div :class="cn(skeletonLoaderVariants({ variant: 'avatar' }))" />
            <div class="flex-1 space-y-2">
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }))" />
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }))" />
              <div :class="cn(skeletonLoaderVariants({ variant: 'text' }), 'w-2/3')" />
            </div>
          </div>
        </template>

        <!-- Default: repeat rows -->
        <template v-else>
          <div v-for="i in rows" :key="i" :class="cn(skeletonLoaderVariants({ variant }), 'mb-2')" />
        </template>
      </template>
      <slot v-else />
    </template>

    <!-- Boilerplate mode: dim the content -->
    <div v-if="boilerplate && !loading" class="bg-muted/50 absolute inset-0" />
  </div>
</template>

```

### `packages/registry-vue/components/skeleton/SkeletonText.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  lines?: number
  lastLineWidth?: string
  firstLineWidth?: string
}

const props = withDefaults(defineProps<Props>(), {
  lines: 3,
  lastLineWidth: '80%',
  firstLineWidth: '100%',
})

const lineWidths = computed(() => {
  return Array.from({ length: props.lines }, (_, i) => {
    if (i === 0) return props.firstLineWidth
    if (i === props.lines - 1) return props.lastLineWidth
    return '100%'
  })
})
</script>

<template>
  <div data-uipkge data-slot="skeleton-text" :class="cn('space-y-2', props.class)">
    <div v-for="(width, i) in lineWidths" :key="i" class="bg-primary/10 h-4 animate-pulse rounded" :style="{ width }" />
  </div>
</template>

```

### `packages/registry-vue/components/skeleton/skeleton.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than inline in the
 * SFC) so `SkeletonLoader.vue` can import them without the cva runtime
 * coupling that breaks SSR when several `<SkeletonLoader>` instances
 * render before the module graph fully resolves. Sibling pattern to
 * `card/card.variants.ts`.
 */
export const skeletonLoaderVariants = cva('bg-muted animate-pulse rounded', {
  variants: {
    variant: {
      text: 'h-4 w-full',
      chip: 'h-8 w-24 rounded-full',
      'chip-icon': 'h-8 w-8 rounded-full',
      article: '',
      avatar: 'size-12 rounded-full',
      'avatar-small': 'size-8 rounded-full',
      'avatar-large': 'size-16 rounded-full',
      heading: 'h-6 w-3/4',
      'heading-medium': 'h-5 w-1/2',
      'heading-small': 'h-4 w-1/3',
      image: 'aspect-video w-full rounded-lg',
      'image-small': 'h-32 w-32 rounded-lg',
      'image-large': 'h-64 w-full rounded-lg',
      card: '',
      'card-avatar': '',
      actions: '',
      table: 'h-4 w-full',
      'table-row': 'h-12 w-full',
      button: 'h-10 w-24 rounded-md',
      'button-icon': 'h-10 w-10 rounded-md',
      badge: 'h-6 w-16 rounded-full',
      tab: 'h-8 w-24 rounded-md',
      'date-picker': 'h-10 w-full',
      'list-item': 'h-16 w-full',
      'list-item-two-line': 'h-20 w-full',
      'list-item-three-line': 'h-24 w-full',
    },
  },
  defaultVariants: {
    variant: 'text',
  },
})

export type SkeletonLoaderVariants = VariantProps<typeof skeletonLoaderVariants>

```

### `packages/registry-vue/components/skeleton/index.ts`

```ts
export { default as Skeleton } from './Skeleton.vue'
export { default as SkeletonText } from './SkeletonText.vue'
export { default as SkeletonGroup } from './SkeletonGroup.vue'
export { default as SkeletonLoader } from './SkeletonLoader.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// SkeletonLoader.vue <-> index.ts circular import that broke dev SSR).
export { skeletonLoaderVariants, type SkeletonLoaderVariants } from './skeleton.variants'

```

## slider

- type: `registry:ui`
- description: Single-thumb slider — pick a value within a range. Optional tick marks, step size, and inline value display.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/slider/Slider.vue`

```vue
<script setup lang="ts">
import type { SliderRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import {
  SliderRange,
  SliderRoot,
  SliderThumb,
  SliderTrack,
  TooltipArrow,
  TooltipContent,
  TooltipPortal,
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
} from 'reka-ui'
import { cn } from '@/lib/utils'

export interface SliderMark {
  label: string
  style?: Record<string, string>
}

type ModelValue = number | number[] | [number, number] | null | undefined

const props = withDefaults(
  defineProps<
    Omit<SliderRootProps, 'modelValue' | 'defaultValue' | 'inverted'> & {
      class?: HTMLAttributes['class']
      modelValue?: ModelValue
      defaultValue?: ModelValue
      /** Enable dual-thumb range selection */
      range?: boolean
      /** Vertical orientation */
      vertical?: boolean
      /** Height when vertical (px or css value) */
      height?: string | number
      /** Tick marks with labels */
      marks?: Record<number, string | SliderMark>
      /** Show tooltip on drag/focus. Boolean or formatter function */
      tooltip?: boolean | ((value: number) => string)
      /** Show dots at each step */
      dots?: boolean
      /** Reverse direction (right-to-left or bottom-to-top) */
      reverse?: boolean
      /** Highlight the track between thumbs/min (default true) */
      included?: boolean
      /** Size variant */
      size?: 'small' | 'default'
    }
  >(),
  {
    min: 0,
    max: 100,
    step: 1,
    included: true,
    size: 'default',
    tooltip: true,
  },
)

const emits = defineEmits<{
  'update:modelValue': [value: number | number[] | [number, number]]
  valueCommit: [payload: number | number[] | [number, number]]
}>()

/* ── normalize value to number[] for Reka UI ── */
const innerValue = ref<number[]>([])

watch(
  () => props.modelValue,
  (v) => {
    const dflt = props.range ? [props.min, props.max] : [props.min]
    if (v == null) {
      innerValue.value = dflt
      return
    }
    if (props.range) {
      const arr = Array.isArray(v) ? v : [v, props.max]
      innerValue.value = [arr[0] ?? props.min, arr[1] ?? props.max]
    } else {
      innerValue.value = Array.isArray(v) ? v : [v]
    }
  },
  { immediate: true },
)

function handleUpdate(val: number[] | undefined) {
  if (!val) return
  innerValue.value = val
  if (props.range) {
    emits('update:modelValue', [val[0], val[1]] as [number, number])
  } else if (Array.isArray(props.modelValue)) {
    // backward-compat: consumer passed an array, emit an array
    emits('update:modelValue', val)
  } else {
    emits('update:modelValue', val[0] ?? props.min)
  }
}

function handleCommit(val: number[] | undefined) {
  if (!val) return
  if (props.range) {
    emits('valueCommit', [val[0], val[1]] as [number, number])
  } else if (Array.isArray(props.modelValue)) {
    emits('valueCommit', val)
  } else {
    emits('valueCommit', val[0] ?? props.min)
  }
}

/* ── layout helpers ── */
const orientation = computed(() => {
  if (props.vertical) return 'vertical'
  return props.orientation ?? 'horizontal'
})

const isHorizontal = computed(() => orientation.value === 'horizontal')

const trackSize = computed(() =>
  props.size === 'small' ? (isHorizontal.value ? 'h-1' : 'w-1') : isHorizontal.value ? 'h-1.5' : 'w-1.5',
)

const thumbSize = computed(() => (props.size === 'small' ? 'size-3' : 'size-4'))

/* ── marks ── */
const markList = computed(() => {
  if (!props.marks) return []
  const entries = Object.entries(props.marks).map(([key, val]) => {
    const num = Number(key)
    const label = typeof val === 'string' ? val : val.label
    const style = typeof val === 'string' ? undefined : val.style
    const pct = ((num - props.min) / (props.max - props.min)) * 100
    return { value: num, label, style, pct }
  })
  entries.sort((a, b) => a.value - b.value)
  return entries
})

/* ── step dots ── */
const dotList = computed(() => {
  if (!props.dots) return []
  const list: number[] = []
  const count = Math.floor((props.max - props.min) / props.step)
  for (let i = 0; i <= count; i++) {
    list.push(props.min + i * props.step)
  }
  return list
})

/* ── tooltip ── */
const showTooltip = computed(() => props.tooltip !== false)

function formatTooltip(v: number) {
  if (typeof props.tooltip === 'function') return props.tooltip(v)
  return String(v)
}

/* ── delegated reka props ── */
const delegated = reactiveOmit(
  props,
  'class',
  'modelValue',
  'defaultValue',
  'range',
  'vertical',
  'height',
  'marks',
  'tooltip',
  'dots',
  'reverse',
  'included',
  'size',
)

const rootProps = computed(() => ({
  ...delegated,
  modelValue: innerValue.value,
  orientation: orientation.value,
  inverted: props.reverse,
}))
</script>

<template>
  <TooltipProvider>
    <div
      :class="cn('relative w-full', !isHorizontal && 'flex flex-col items-center')"
      :style="!isHorizontal && height ? { height: typeof height === 'number' ? `${height}px` : height } : undefined"
    >
      <SliderRoot
        v-slot="{ modelValue: thumbs }"
        data-uipkge
        data-slot="slider"
        :class="
          cn(
            'relative flex touch-none select-none data-[disabled]:opacity-50',
            isHorizontal ? 'w-full items-center' : 'h-full min-h-44 flex-col justify-center',
            props.class,
          )
        "
        v-bind="rootProps"
        @update:model-value="handleUpdate"
        @value-commit="handleCommit"
      >
        <!-- Track -->
        <SliderTrack
          data-uipkge
          data-slot="slider-track"
          :class="cn('bg-muted relative grow overflow-hidden rounded-full', trackSize)"
        >
          <SliderRange
            v-if="included"
            data-uipkge
            data-slot="slider-range"
            :class="cn('bg-primary absolute', isHorizontal ? 'h-full' : 'w-full')"
          />
        </SliderTrack>

        <!-- Step dots -->
        <template v-if="dotList.length">
          <div
            v-for="dot in dotList"
            :key="dot"
            :class="
              cn(
                'border-primary/40 bg-background absolute rounded-full border',
                isHorizontal ? 'top-1/2 size-1.5 -translate-y-1/2' : 'left-1/2 size-1.5 -translate-x-1/2',
                props.size === 'small' && 'size-1',
              )
            "
            :style="
              isHorizontal
                ? {
                    left: `${((dot - min) / (max - min)) * 100}%`,
                    transform: 'translateX(-50%) translateY(-50%)',
                  }
                : {
                    bottom: `${((dot - min) / (max - min)) * 100}%`,
                    transform: 'translateX(-50%) translateY(50%)',
                  }
            "
          />
        </template>

        <!-- Marks -->
        <div
          v-if="markList.length"
          :class="
            cn(
              'pointer-events-none absolute',
              isHorizontal ? 'top-full mt-2.5 h-5 w-full' : 'top-0 left-full ml-3 h-full w-20',
            )
          "
        >
          <span
            v-for="mark in markList"
            :key="mark.value"
            class="text-muted-foreground absolute text-xs whitespace-nowrap"
            :style="{
              ...mark.style,
              ...(isHorizontal
                ? { left: `${mark.pct}%`, transform: 'translateX(-50%)' }
                : { bottom: `${mark.pct}%`, transform: 'translateY(50%)' }),
            }"
          >
            {{ mark.label }}
          </span>
        </div>

        <!-- Thumbs (with tooltips) -->
        <template v-for="(_, idx) in thumbs" :key="idx">
          <TooltipRoot v-if="showTooltip" :delay-duration="0">
            <TooltipTrigger as-child>
              <SliderThumb
                :index="idx"
                data-uipkge
                data-slot="slider-thumb"
                :class="
                  cn(
                    'border-primary bg-background ring-ring/50 block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
                    thumbSize,
                  )
                "
              />
            </TooltipTrigger>
            <TooltipPortal>
              <TooltipContent
                :side="isHorizontal ? 'top' : 'right'"
                :side-offset="4"
                class="bg-foreground text-background z-50 w-fit rounded-md px-2 py-1 text-xs"
              >
                {{ formatTooltip(thumbs?.[idx] ?? 0) }}
                <TooltipArrow class="bg-foreground fill-foreground size-2.5 rotate-45 rounded-[2px]" />
              </TooltipContent>
            </TooltipPortal>
          </TooltipRoot>

          <SliderThumb
            v-else
            :index="idx"
            data-uipkge
            data-slot="slider-thumb"
            :class="
              cn(
                'border-primary bg-background ring-ring/50 block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
                thumbSize,
              )
            "
          />
        </template>
      </SliderRoot>
    </div>
  </TooltipProvider>
</template>

```

### `packages/registry-vue/components/slider/index.ts`

```ts
export { default as Slider } from './Slider.vue'

```

## smooth-funnel

- type: `registry:ui`
- description: Smoothly tapering SVG funnel with cubic-bezier transitions between stages. Pure SVG (no ECharts). Each stage is colored independently and shows its own percent pill; a minHeight floor keeps tail stages visible at tiny percents.

### `packages/registry-vue/components/charts/smooth-funnel/SmoothFunnel.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface FunnelStage {
  name: string
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
}

interface Props {
  data: FunnelStage[]
  /** Container height (px when numeric, raw CSS when string). Defaults to 240. */
  height?: number | string
  /** Show the percent pill on each stage. Defaults to true. */
  showLabels?: boolean
  /** Minimum segment height in px so tail stages stay visible at tiny percents. Default 18. */
  minHeight?: number
  /** Optional fallback palette when `color` is omitted on a stage. */
  colors?: string[]
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  height: 240,
  showLabels: true,
  minHeight: 18,
  colors: () => ['#3b82f6', '#a855f7', '#34d399', '#facc15', '#fb7185', '#06b6d4'],
})

// SVG geometry. Width/height are virtual (the SVG fits to container
// via viewBox). The aspect ratio (W:H ≈ 4:1) matches the horizontal
// "flow" layout consumers typically want for a 4-6 stage funnel; if
// you need taller bands, override `height` and the curves stretch
// vertically without distorting horizontally.
const W = 720
const H = 180
const cy = H / 2

const segments = computed(() => {
  const stages = props.data
  const n = stages.length
  if (n === 0) return []
  const segW = W / n
  const max = Math.max(...stages.map((s) => s.value))
  const pctOf = (v: number) => (max > 0 ? (v / max) * 100 : 0)
  const heightFor = (pct: number) => Math.max((pct / 100) * H, props.minHeight)

  return stages.map((s, i) => {
    const next = stages[i + 1] ?? s
    const startPct = pctOf(s.value)
    const endPct = pctOf(next.value)
    const h0 = heightFor(startPct)
    const h1 = heightFor(endPct)
    const x0 = i * segW
    const x1 = x0 + segW
    const yTop0 = cy - h0 / 2
    const yTop1 = cy - h1 / 2
    const yBot0 = cy + h0 / 2
    const yBot1 = cy + h1 / 2

    // Cubic bezier control points at 38% / 62% of segment width produce
    // a soft S-curve transition between stages rather than the
    // trapezoidal default of an ECharts funnel.
    const cx1 = x0 + segW * 0.38
    const cx2 = x0 + segW * 0.62

    const d = [
      `M ${x0.toFixed(1)} ${yTop0.toFixed(1)}`,
      `C ${cx1.toFixed(1)} ${yTop0.toFixed(1)}, ${cx2.toFixed(1)} ${yTop1.toFixed(1)}, ${x1.toFixed(1)} ${yTop1.toFixed(1)}`,
      `L ${x1.toFixed(1)} ${yBot1.toFixed(1)}`,
      `C ${cx2.toFixed(1)} ${yBot1.toFixed(1)}, ${cx1.toFixed(1)} ${yBot0.toFixed(1)}, ${x0.toFixed(1)} ${yBot0.toFixed(1)}`,
      'Z',
    ].join(' ')

    return {
      d,
      color: s.color ?? props.colors[i % props.colors.length],
      percent: startPct,
      name: s.name,
      value: s.value,
      labelX: x0 + segW * 0.42,
      labelY: cy,
    }
  })
})

const heightStyle = computed(() => (/^\d+$/.test(String(props.height)) ? `${props.height}px` : String(props.height)))
</script>

<template>
  <div
    data-uipkge
    data-slot="smooth-funnel"
    tabindex="0"
    :style="{ height: heightStyle }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <svg :viewBox="`0 0 ${W} ${H}`" class="block h-full w-full" preserveAspectRatio="none" role="img">
      <g v-for="(seg, i) in segments" :key="i">
        <path :d="seg.d" :fill="seg.color" />
        <foreignObject v-if="props.showLabels" :x="seg.labelX - 28" :y="seg.labelY - 12" width="56" height="24">
          <div
            class="bg-background text-foreground inline-flex h-6 items-center rounded-full border px-2 text-[11px] font-semibold shadow-sm"
          >
            {{ Math.round(seg.percent * 10) / 10 }}%
          </div>
        </foreignObject>
      </g>
    </svg>
  </div>
</template>

```

### `packages/registry-vue/components/charts/smooth-funnel/index.ts`

```ts
export { default as SmoothFunnel } from './SmoothFunnel.vue'

```

## sonner

- type: `registry:ui`
- description: Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `vue-sonner` library with the registry’s tokens applied.
- npm deps: `lucide-vue-next`, `vue-sonner`

### `packages/registry-vue/components/sonner/Sonner.vue`

```vue
<script lang="ts" setup>
import type { ToasterProps } from 'vue-sonner'
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
import { Toaster as Sonner } from 'vue-sonner'
import { cn } from '@/lib/utils'

// Sonner cadence — UX_MICROINTERACTIONS.md research:
// 4000ms default, bottom-right position so swipe-right dismiss reads
// naturally, max 3 visible (older stack with scale offset), rich colors
// so success/error/info/warning each get distinct variants.
const props = withDefaults(defineProps<ToasterProps>(), {
  position: 'bottom-right',
  duration: 4000,
  visibleToasts: 3,
  richColors: true,
  closeButton: false,
  expand: false,
})
</script>

<template>
  <Sonner
    :class="cn('toaster group', props.class)"
    :style="{
      '--normal-bg': 'var(--popover)',
      '--normal-text': 'var(--popover-foreground)',
      '--normal-border': 'var(--border)',
      '--border-radius': 'var(--radius)',
    }"
    v-bind="props"
  >
    <template #success-icon>
      <CircleCheckIcon class="size-4" aria-hidden="true" />
    </template>
    <template #info-icon>
      <InfoIcon class="size-4" aria-hidden="true" />
    </template>
    <template #warning-icon>
      <TriangleAlertIcon class="size-4" aria-hidden="true" />
    </template>
    <template #error-icon>
      <OctagonXIcon class="size-4" aria-hidden="true" />
    </template>
    <template #loading-icon>
      <div>
        <Loader2Icon class="size-4 animate-spin" aria-hidden="true" />
      </div>
    </template>
    <template #close-icon>
      <XIcon class="size-4" aria-hidden="true" />
    </template>
  </Sonner>
</template>

```

### `packages/registry-vue/components/sonner/index.ts`

```ts
export { default as Toaster } from './Sonner.vue'

```

## sparkline

- type: `registry:ui`
- description: Inline micro-chart for KPI tiles. Line, area, bar, and win/loss variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/sparkline/Sparkline.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, toRgba } from '../useChartTheme'

// Bar + grid + tooltip registered alongside line so consumers can swap
// `type: 'bar'` via the option escape hatch (bar / win-loss sparklines)
// without having to `use()`-register the extras in their own code.
use([CanvasRenderer, EChartsLineChart, EChartsBarChart, GridComponent, TooltipComponent])

interface Props {
  data: number[]
  color?: string
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 40,
})

const color = computed(() => props.color ?? chartColors.value[1])

const mergedOption = computed(() => {
  const series = [
    {
      type: 'line',
      smooth: true,
      // Show a dot only at the last datapoint so the eye can find the
      // current value; intermediate dots clutter at sparkline density.
      showSymbol: false,
      showAllSymbol: false,
      symbol: 'circle',
      symbolSize: 5,
      endLabel: { show: false },
      lineStyle: { width: 1.75, color: color.value },
      itemStyle: { color: color.value, borderColor: color.value, borderWidth: 0 },
      // Render a small dot only at the latest point. ECharts' index-based
      // emphasis isn't exposed cleanly here, so we let `markPoint` handle
      // it -- a 4px dot pinned at the rightmost x using "max" on the time
      // axis would mark the peak, but we want the *last* point, so use
      // an explicit data point coord.
      data: props.data.map((v, i) => ({
        value: v,
        symbol: i === props.data.length - 1 ? 'circle' : 'none',
        symbolSize: i === props.data.length - 1 ? 5 : 0,
      })),
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: toRgba(color.value, 0.18) },
            { offset: 1, color: toRgba(color.value, 0) },
          ],
        },
      },
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  // Sparkline gets bar / win-loss variants this way (override `type: 'bar'`,
  // pass new data, the rest stays).
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    grid: { left: 0, right: 0, top: 2, bottom: 2 },
    xAxis: { type: 'category', show: false, data: props.data.map((_, i) => i) },
    yAxis: { type: 'value', show: false, min: (value: any) => value.min * 0.9 },
    tooltip: { show: false },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/sparkline/index.ts`

```ts
export { default as Sparkline } from './Sparkline.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## speed-dial

- type: `registry:ui`
- description: Expanding floating action button that reveals a list of secondary action buttons. Supports click or hover triggers, four expansion directions (up/down/left/right), staggered entrance animation, a configurable main FAB icon, and close-on-action. Built on the fab and popover primitives.
- npm deps: `lucide-vue-next`, `reka-ui`
- registry deps: `fab`, `popover`

### `packages/registry-vue/components/speed-dial/SpeedDial.vue`

```vue
<script setup lang="ts">
import type { Component, HTMLAttributes } from 'vue'
import { computed, ref } from 'vue'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Fab } from '@/components/ui/fab'
import { cn } from '@/lib/utils'
import { Plus } from 'lucide-vue-next'

export interface SpeedDialAction {
  icon: Component
  label: string
  handler?: () => void
  disabled?: boolean
  class?: HTMLAttributes['class']
}

type Direction = 'up' | 'down' | 'left' | 'right'
type Trigger = 'click' | 'hover'

interface Props {
  actions: SpeedDialAction[]
  /** Main FAB icon. */
  icon?: Component
  /** Accessible label for the main FAB. */
  label?: string
  direction?: Direction
  trigger?: Trigger
  /** Close the dial after an action is triggered. */
  closeOnAction?: boolean
  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'inline'
  absolute?: boolean
  disabled?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  direction: 'up',
  trigger: 'click',
  closeOnAction: true,
  variant: 'default',
  position: 'bottom-right',
  absolute: false,
})

const open = ref(false)
let hoverTimer: ReturnType<typeof setTimeout> | null = null

function onTriggerEnter() {
  if (props.trigger !== 'hover') return
  if (hoverTimer) clearTimeout(hoverTimer)
  open.value = true
}

function onTriggerLeave() {
  if (props.trigger !== 'hover') return
  if (hoverTimer) clearTimeout(hoverTimer)
  hoverTimer = setTimeout(() => (open.value = false), 150)
}

function onContentEnter() {
  if (props.trigger !== 'hover') return
  if (hoverTimer) clearTimeout(hoverTimer)
}

function onContentLeave() {
  if (props.trigger !== 'hover') return
  if (hoverTimer) clearTimeout(hoverTimer)
  hoverTimer = setTimeout(() => (open.value = false), 150)
}

function runAction(action: SpeedDialAction) {
  if (action.disabled) return
  action.handler?.()
  if (props.closeOnAction) open.value = false
}

const side = computed(() => {
  switch (props.direction) {
    case 'up':
      return 'top'
    case 'down':
      return 'bottom'
    case 'left':
      return 'left'
    case 'right':
      return 'right'
  }
})

const listClass = computed(() => {
  const base = 'flex items-center gap-3'
  return props.direction === 'up' || props.direction === 'down' ? `${base} flex-col` : `${base} flex-row`
})
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <div
        data-uipkge
        data-slot="speed-dial"
        :class="cn(props.class)"
        @mouseenter="onTriggerEnter"
        @mouseleave="onTriggerLeave"
      >
        <Fab
          :variant="variant"
          :position="position"
          :absolute="absolute"
          :disabled="disabled"
          :aria-label="label || 'Quick actions'"
          :class="cn('transition-transform duration-200', open && 'rotate-45')"
          @click="trigger === 'hover' ? $event.stopPropagation() : undefined"
        >
          <component :is="icon" v-if="icon" />
          <Plus v-else />
        </Fab>
      </div>
    </PopoverTrigger>

    <PopoverContent
      :side="side"
      align="center"
      :side-offset="12"
      :class="cn('w-auto border-0 bg-transparent p-0 shadow-none', trigger === 'hover' && 'pointer-events-auto')"
      @mouseenter="onContentEnter"
      @mouseleave="onContentLeave"
    >
      <div :class="listClass">
        <button
          v-for="(action, i) in actions"
          :key="i"
          type="button"
          data-slot="speed-dial-action"
          :disabled="action.disabled"
          :aria-label="action.label"
          :style="{ animationDelay: `${i * 40}ms` }"
          class="group/speed-dial-item bg-background text-foreground hover:bg-accent hover:text-accent-foreground motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 focus-visible:ring-ring/50 inline-flex size-12 items-center justify-center rounded-full border shadow-md transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
          :class="action.class"
          @click="runAction(action)"
        >
          <component :is="action.icon" />
          <span class="sr-only">{{ action.label }}</span>
        </button>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/speed-dial/index.ts`

```ts
export { default as SpeedDial } from './SpeedDial.vue'
export type { SpeedDialAction } from './SpeedDial.vue'

```

## spinner

- type: `registry:ui`
- description: Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/spinner/Spinner.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { Loader2 } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { spinnerVariants } from './spinner.variants'

// Inlined union: SFC compiler can't extract runtime props from
// `SpinnerVariants['size']`.
const props = defineProps<{
  class?: HTMLAttributes['class']
  size?: 'default' | 'sm' | 'lg' | 'icon'
}>()
</script>

<template>
  <Loader2
    data-uipkge
    data-slot="spinner"
    :class="cn(spinnerVariants({ size: size ?? 'default' }), props.class)"
    aria-label="Loading"
    role="status"
  />
</template>

```

### `packages/registry-vue/components/spinner/spinner.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const spinnerVariants = cva('animate-spin text-muted-foreground', {
  variants: {
    size: {
      default: 'size-6',
      sm: 'size-4',
      lg: 'size-8',
      icon: 'size-4',
    },
  },
  defaultVariants: {
    size: 'default',
  },
})

export type SpinnerVariants = VariantProps<typeof spinnerVariants>

```

### `packages/registry-vue/components/spinner/index.ts`

```ts
export { default as Spinner } from './Spinner.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { spinnerVariants, type SpinnerVariants } from './spinner.variants'

```

## stepper

- type: `registry:ui`
- description: Multi-step indicator — horizontal or vertical, with completed / current / upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.
- npm deps: `class-variance-authority`, `lucide-vue-next`

### `packages/registry-vue/components/stepper/Stepper.vue`

```vue
<script setup lang="ts">
import { computed, provide, toRef } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { STEPPER_CONTEXT, type StepperOrientation, type StepperSize, type StepperStatus } from './context'
import type { StepperStep } from './types'

interface Props {
  steps?: StepperStep[]
  modelValue?: number
  orientation?: StepperOrientation
  size?: StepperSize
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  steps: () => [],
  modelValue: 1,
  orientation: 'horizontal',
  size: 'default',
})

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const activeStep = computed(() => props.modelValue)
const stepsRef = computed(() => props.steps)

function getStatus(index: number): StepperStatus {
  const step = props.steps[index]
  if (step?.error) return 'error'
  if (index + 1 === activeStep.value) return 'active'
  if (index + 1 < activeStep.value) return 'completed'
  return 'pending'
}

function isClickable(index: number): boolean {
  return index + 1 < activeStep.value
}

function goToStep(stepIndex: number) {
  if (stepIndex < 1 || stepIndex > props.steps.length) return
  const step = props.steps[stepIndex - 1]
  if (step?.disabled) return
  emit('update:modelValue', stepIndex)
}

provide(STEPPER_CONTEXT, {
  orientation: toRef(props, 'orientation'),
  size: toRef(props, 'size'),
  activeStep,
  steps: stepsRef,
  goToStep,
  isClickable,
  getStatus,
})

defineExpose({ goToStep })
</script>

<template>
  <div
    :class="cn('w-full', props.class)"
    role="tablist"
    :aria-orientation="orientation"
    :data-orientation="orientation"
  >
    <!-- Header strip with steps -->
    <slot name="steps">
      <ol
        v-if="steps.length > 0"
        :class="cn('flex', orientation === 'horizontal' ? 'flex-row items-start' : 'flex-col items-stretch')"
      >
        <StepperItem v-for="(step, index) in steps" :key="step.id" :step="step" :index="index" />
      </ol>
    </slot>

    <!-- Content area -->
    <div v-if="$slots.default" class="mt-6 flex-1">
      <slot :active-step="activeStep" :steps="steps" />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/stepper/StepperItem.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { STEPPER_CONTEXT } from './context'
import type { StepperStep } from './types'

interface Props {
  step: StepperStep
  index: number
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()

const _maybeCtx = inject(STEPPER_CONTEXT)
if (!_maybeCtx) throw new Error('StepperItem must be used inside <Stepper>')
const ctx: NonNullable<typeof _maybeCtx> = _maybeCtx

const status = computed(() => ctx.getStatus(props.index))
const orientation = computed(() => ctx.orientation.value)
const isFirst = computed(() => props.index === 0)
const isLast = computed(() => props.index === ctx.steps.value.length - 1)
const clickable = computed(() => ctx.isClickable(props.index) && !props.step.disabled)

// A connector "segment" is the line drawn between this indicator and the
// adjacent one. We split it into left/right halves so each item owns its
// own piece — they butt up at item boundaries for pixel alignment.
const leftSegmentCompleted = computed(() => props.index < ctx.activeStep.value)
const rightSegmentCompleted = computed(() => props.index < ctx.activeStep.value - 1)

function handleNavigate() {
  if (clickable.value) ctx.goToStep(props.index + 1)
}
</script>

<template>
  <li
    :class="
      cn(
        'group/stepper-item relative min-w-0',
        orientation === 'horizontal'
          ? 'flex flex-1 flex-col items-center gap-2'
          : 'flex flex-row items-start gap-3 pb-6 last:pb-0',
        step.disabled && 'opacity-50',
        props.class,
      )
    "
    role="tab"
    :aria-selected="status === 'active'"
    :aria-disabled="step.disabled || undefined"
    :data-status="status"
  >
    <!-- Indicator row: contains the indicator + connector segments -->
    <div
      :class="
        cn(
          'relative flex shrink-0',
          orientation === 'horizontal'
            ? 'h-9 w-full items-center justify-center'
            : 'w-9 flex-col items-center justify-start self-stretch',
        )
      "
    >
      <!-- Connector segments (absolute, butt up at item boundaries) -->
      <span
        v-if="!isFirst"
        aria-hidden="true"
        :class="
          cn(
            'pointer-events-none absolute transition-colors duration-200',
            orientation === 'horizontal'
              ? 'top-1/2 right-1/2 left-0 h-px -translate-y-1/2'
              : 'top-0 bottom-1/2 left-1/2 w-px -translate-x-1/2',
            leftSegmentCompleted ? 'bg-primary' : 'bg-border',
          )
        "
      />
      <span
        v-if="!isLast"
        aria-hidden="true"
        :class="
          cn(
            'pointer-events-none absolute transition-colors duration-200',
            orientation === 'horizontal'
              ? 'top-1/2 right-0 left-1/2 h-px -translate-y-1/2'
              : 'top-1/2 bottom-0 left-1/2 w-px -translate-x-1/2',
            rightSegmentCompleted ? 'bg-primary' : 'bg-border',
          )
        "
      />

      <StepperIndicator
        :status="status"
        :index="index + 1"
        :icon="step.icon"
        :clickable="clickable"
        class="focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
        @click="handleNavigate"
      />
    </div>

    <!-- Title + description -->
    <div :class="cn('min-w-0', orientation === 'horizontal' ? 'max-w-[12rem] text-center' : 'flex-1 pt-1.5')">
      <button
        type="button"
        :class="
          cn(
            'text-foreground text-sm font-medium text-balance transition-colors outline-none',
            clickable &&
              'hover:text-primary focus-visible:text-primary focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',
            !clickable && 'cursor-default',
            status === 'pending' && 'text-muted-foreground',
            status === 'error' && 'text-destructive',
          )
        "
        :disabled="!clickable"
        @click="handleNavigate"
      >
        {{ step.title }}
      </button>
      <p v-if="step.description" class="text-muted-foreground mt-0.5 text-xs text-balance">
        {{ step.description }}
      </p>
    </div>
  </li>
</template>

```

### `packages/registry-vue/components/stepper/StepperIndicator.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { Component, HTMLAttributes } from 'vue'
import { Check, X } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { stepperIndicatorVariants } from './stepper.variants'
import type { StepperSize, StepperStatus } from './context'

interface Props {
  status?: StepperStatus
  size?: StepperSize
  index?: number
  icon?: Component
  clickable?: boolean
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  status: 'pending',
  size: 'default',
  clickable: false,
})

const emit = defineEmits<{
  click: []
}>()

const fallbackIcon = computed(() => {
  if (props.icon) return props.icon
  if (props.status === 'completed') return Check
  if (props.status === 'error') return X
  return null
})
</script>

<template>
  <button
    type="button"
    :class="
      cn(
        stepperIndicatorVariants({ status, size }),
        'ring-background relative z-10 ring-4 transition-colors duration-200 outline-none',
        clickable && 'focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',
        !clickable && 'cursor-default',
        props.class,
      )
    "
    :disabled="!clickable"
    :aria-current="status === 'active' ? 'step' : undefined"
    @click="emit('click')"
  >
    <slot>
      <component :is="fallbackIcon" v-if="fallbackIcon" class="size-4" aria-hidden="true" />
      <span v-else-if="index !== undefined" class="font-medium">{{ index }}</span>
    </slot>
  </button>
</template>

```

### `packages/registry-vue/components/stepper/StepperHeader.vue`

```vue
<!--
  StepperHeader Component
  
  Container for the stepper header row. Used to wrap StepperItems.
  
  @example
  <StepperHeader>
    <StepperItem>...</StepperItem>
    <StepperSeparator />
    <StepperItem>...</StepperItem>
  </StepperHeader>
-->
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <div :class="cn('stepper-header flex items-center gap-0', props.class)">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/stepper/StepperContent.vue`

```vue
<!--
  StepperContent Component
  
  Wrapper for step content with transition animations.
  
  @example
  <StepperContent :step="currentStep">
    <div class="step-content">
      Step content here
    </div>
  </StepperContent>
-->
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  step?: number
  activeStep?: number
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  step: 1,
  activeStep: 1,
})

const isActive = computed(() => props.step === props.activeStep)
</script>

<template>
  <div
    v-show="isActive"
    :class="cn('stepper-content motion-safe:animate-in motion-safe:fade-in-50 motion-safe:duration-200', props.class)"
    role="tabpanel"
    :aria-hidden="!isActive"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/stepper/StepperTitle.vue`

```vue
<!--
  StepperTitle Component
  
  Title text for a stepper item.
  
  @example
  <StepperTitle>Account Setup</StepperTitle>
-->
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <span :class="cn('text-foreground text-sm font-medium', props.class)">
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/stepper/StepperDescription.vue`

```vue
<!--
  StepperDescription Component
  
  Description text for a stepper item.
  
  @example
  <StepperDescription>Create your account to get started</StepperDescription>
-->
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
}

const props = defineProps<Props>()
</script>

<template>
  <span :class="cn('text-muted-foreground text-xs', props.class)">
    <slot />
  </span>
</template>

```

### `packages/registry-vue/components/stepper/StepperStep.vue`

```vue
<!--
  StepperStep Component
  
  A single step within a Stepper, used with step slots.
  Provides title, description, completion state, and active state.
  
  @example
  <Stepper v-model="currentStep" orientation="vertical">
    <StepperStep 
      title="Account" 
      description="Create your account"
      :completed="currentStep > 1" 
      :active="currentStep === 1"
      :error="hasAccountError"
    >
      <AccountForm @next="currentStep = 2" />
    </StepperStep>
    <StepperStep 
      title="Profile" 
      description="Set up your profile"
      :completed="currentStep > 2" 
      :active="currentStep === 2"
    >
      <ProfileForm @next="currentStep = 3" />
    </StepperStep>
    <StepperStep 
      title="Confirm" 
      description="Review and confirm"
      :completed="currentStep > 3" 
      :active="currentStep === 3"
    >
      <Confirmation @submit="handleSubmit" />
    </StepperStep>
  </Stepper>
-->
<script setup lang="ts">
import { computed } from 'vue'
import type { Component, HTMLAttributes } from 'vue'
import { Check } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { stepperIndicatorVariants } from './stepper.variants'

interface Props {
  title: string
  description?: string
  icon?: Component
  completed?: boolean
  active?: boolean
  error?: boolean
  disabled?: boolean
  status?: 'active' | 'completed' | 'pending' | 'error'
  index?: number
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  completed: false,
  active: false,
  error: false,
  disabled: false,
  index: undefined,
})

const computedStatus = computed(() => {
  if (props.status) return props.status
  if (props.error) return 'error'
  if (props.active) return 'active'
  if (props.completed) return 'completed'
  return 'pending'
})
</script>

<template>
  <div :class="cn('stepper-step flex gap-3', props.class)" role="tab" :aria-selected="active" :aria-disabled="disabled">
    <!-- Indicator -->
    <div
      :class="
        cn(
          stepperIndicatorVariants({
            status: computedStatus,
            size: 'default',
          }),
        )
      "
    >
      <slot name="icon">
        <Check v-if="computedStatus === 'completed'" class="size-4" aria-hidden="true" />
        <span v-else-if="index">{{ index }}</span>
      </slot>
    </div>

    <!-- Content -->
    <div class="flex flex-col gap-0.5 pt-1">
      <slot name="title">
        <span class="text-sm font-medium">{{ title }}</span>
      </slot>
      <slot name="description">
        <span v-if="description" class="text-muted-foreground text-xs">
          {{ description }}
        </span>
      </slot>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/stepper/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'
import type { StepperStep } from './types'

export type StepperOrientation = 'horizontal' | 'vertical'
export type StepperStatus = 'active' | 'completed' | 'pending' | 'error'
export type StepperSize = 'sm' | 'default' | 'lg'

export interface StepperContext {
  orientation: Ref<StepperOrientation>
  size: Ref<StepperSize>
  activeStep: Ref<number>
  steps: Ref<StepperStep[]>
  goToStep: (stepIndex: number) => void
  isClickable: (index: number) => boolean
  getStatus: (index: number) => StepperStatus
}

export const STEPPER_CONTEXT: InjectionKey<StepperContext> = Symbol('StepperContext')

```

### `packages/registry-vue/components/stepper/stepper.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `StepperIndicator.vue` / `StepperStep.vue` can import
 * them without creating a circular dependency back through the index.
 * Sibling pattern to `card/card.variants.ts`.
 */
export const stepperIndicatorVariants = cva('flex items-center justify-center rounded-full font-semibold shrink-0', {
  variants: {
    status: {
      pending: 'bg-muted text-muted-foreground',
      active: 'bg-primary text-primary-foreground shadow-sm',
      completed: 'bg-primary text-primary-foreground',
      error: 'bg-destructive text-destructive-foreground',
    },
    size: {
      sm: 'size-7 text-xs [&>svg]:size-3.5',
      default: 'size-9 text-sm [&>svg]:size-4',
      lg: 'size-11 text-base [&>svg]:size-5',
    },
  },
  defaultVariants: {
    status: 'pending',
    size: 'default',
  },
})

export type StepperIndicatorVariants = VariantProps<typeof stepperIndicatorVariants>

```

### `packages/registry-vue/components/stepper/types.ts`

```ts
import type { Component } from 'vue'

export interface StepperStep {
  id: string | number
  title: string
  description?: string
  icon?: Component
  disabled?: boolean
  error?: boolean
}

```

### `packages/registry-vue/components/stepper/index.ts`

```ts
export { default as Stepper } from './Stepper.vue'
export { default as StepperHeader } from './StepperHeader.vue'
export { default as StepperItem } from './StepperItem.vue'
export { default as StepperIndicator } from './StepperIndicator.vue'
export { default as StepperContent } from './StepperContent.vue'
export { default as StepperTitle } from './StepperTitle.vue'
export { default as StepperDescription } from './StepperDescription.vue'
export { default as StepperStep } from './StepperStep.vue'
export type { StepperStep as StepperStepConfig } from './types'
export type { StepperOrientation, StepperSize, StepperStatus } from './context'

// Re-export variant API from the sibling file (kept separate to avoid the
// StepperIndicator.vue <-> index.ts circular import that broke dev SSR).
export { stepperIndicatorVariants, type StepperIndicatorVariants } from './stepper.variants'

```

## sunburst-chart

- type: `registry:ui`
- description: Sunburst wrapper around Apache ECharts. Concentric-ring hierarchical share visualization — pairs naturally with treemap for comparison.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/sunburst-chart/SunburstChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { SunburstChart as EChartsSunburstChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

use([CanvasRenderer, EChartsSunburstChart, TooltipComponent])

interface SunNode {
  name: string
  value?: number
  children?: SunNode[]
}

interface Props {
  /** Hierarchical data — top-level array, each node has `name`, optional `value`, optional `children`. */
  data: SunNode[]
  height?: number | string
  /** Inner / outer radius as percentages of the smaller container side. Default `['12%', '90%']`. */
  radius?: [string, string]
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 360,
  radius: () => ['12%', '90%'] as [string, string],
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'sunburst',
      radius: props.radius,
      data: props.data,
      label: { rotate: 'radial' as const, fontSize: 11 },
      itemStyle: { borderColor: '#fff', borderWidth: 1 },
      emphasis: { focus: 'ancestor' as const },
    },
  ]

  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/sunburst-chart/index.ts`

```ts
export { default as SunburstChart } from './SunburstChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## switch

- type: `registry:ui`
- description: On/off toggle — visual analog of a hardware switch. Use for binary settings where the change takes effect immediately, not for form fields that submit later (use Checkbox there).
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/switch/Switch.vue`

```vue
<script setup lang="ts">
import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, getCurrentInstance, useSlots } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui'
import { Loader2 } from 'lucide-vue-next'
import { cn } from '@/lib/utils'

const props = defineProps<
  SwitchRootProps & {
    class?: HTMLAttributes['class']
    size?: 'sm' | 'default' | 'lg'
    checkedChildren?: string
    unCheckedChildren?: string
    loading?: boolean
    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  }
>()

const emits = defineEmits<SwitchRootEmits>()
const slots = useSlots()

const delegatedProps = reactiveOmit(
  props,
  'class',
  'size',
  'modelValue',
  'checkedChildren',
  'unCheckedChildren',
  'loading',
  'color',
)

const forwarded = useForwardPropsEmits(delegatedProps, emits)

// Detect controlled-vs-uncontrolled (Vue auto-defaults Boolean props to `false`,
// so the prop value alone can't distinguish).
const instance = getCurrentInstance()
const isControlled = computed(() => Boolean(instance?.vnode?.props?.['onUpdate:modelValue']))
const userPassedModelValue = computed(() => {
  const raw = instance?.vnode?.props
  return Boolean(raw && ('modelValue' in raw || 'model-value' in raw))
})

const switchStateBindings = computed(() => {
  if (isControlled.value) return { 'model-value': props.modelValue }
  if (userPassedModelValue.value) return { 'default-value': Boolean(props.modelValue) }
  return { 'default-value': false }
})

const hasChildren = computed(() =>
  Boolean(props.checkedChildren || props.unCheckedChildren || slots['checked-children'] || slots['unchecked-children']),
)

const sizeClasses = computed(() => {
  const height = {
    sm: 'h-4',
    default: 'h-[1.15rem]',
    lg: 'h-6',
  }[props.size ?? 'default']

  if (hasChildren.value) {
    const width = {
      sm: 'min-w-8 w-fit',
      default: 'min-w-10 w-fit',
      lg: 'min-w-[3.25rem] w-fit',
    }[props.size ?? 'default']
    return `${height} ${width}`
  }

  const width = {
    sm: 'w-6',
    default: 'w-8',
    lg: 'w-11',
  }[props.size ?? 'default']
  return `${height} ${width}`
})

const thumbSizes = {
  sm: 'size-3',
  default: 'size-4',
  lg: 'size-5',
}

const thumbTranslate = {
  sm: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
  default: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
  lg: 'data-[state=checked]:translate-x-[calc(100%-5px)]',
}

const textSizes = {
  sm: 'text-[7px]',
  default: 'text-xs',
  lg: 'text-xs',
}

const thumbIconSizes = {
  sm: 'size-2',
  default: 'size-2.5',
  lg: 'size-3',
}

const colorMap: Record<string, string> = {
  primary: 'var(--primary)',
  secondary: 'var(--secondary)',
  success: 'var(--success)',
  warning: 'var(--warning)',
  error: 'var(--destructive)',
  info: 'var(--info)',
}

const trackStyle = computed(() => ({
  '--switch-checked-bg': props.color ? colorMap[props.color] || props.color : 'var(--primary)',
}))
</script>

<template>
  <SwitchRoot
    v-slot="{ checked }"
    v-bind="{ 'data-slot': 'switch', ...forwarded, ...switchStateBindings }"
    :disabled="props.disabled || props.loading"
    :class="
      cn(
        'peer focus-visible:ring-ring/50 focus-visible:border-ring data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-transparent shadow-xs transition-[background-color,border-color,box-shadow] duration-150 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--switch-checked-bg)]',
        sizeClasses,
        props.class,
      )
    "
    :style="trackStyle"
  >
    <!-- Checked children (left side, visible when checked) -->
    <div
      v-if="hasChildren"
      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-1 transition-opacity duration-150"
      :class="[checked ? 'opacity-100' : 'opacity-0', textSizes[size ?? 'default']]"
    >
      <span class="text-primary-foreground truncate font-medium">
        <slot name="checked-children">{{ checkedChildren }}</slot>
      </span>
    </div>

    <!-- Unchecked children (right side, visible when unchecked) -->
    <div
      v-if="hasChildren"
      class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1 transition-opacity duration-150"
      :class="[!checked ? 'opacity-100' : 'opacity-0', textSizes[size ?? 'default']]"
    >
      <span class="text-muted-foreground truncate font-medium">
        <slot name="unchecked-children">{{ unCheckedChildren }}</slot>
      </span>
    </div>

    <SwitchThumb
      data-uipkge
      data-slot="switch-thumb"
      :class="
        cn(
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none z-10 block rounded-full ring-0 transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] data-[state=unchecked]:translate-x-0',
          thumbSizes[size ?? 'default'],
          thumbTranslate[size ?? 'default'],
        )
      "
    >
      <Loader2 v-if="loading" :class="[thumbIconSizes[size ?? 'default'], 'text-muted-foreground animate-spin']" />
      <slot v-else name="thumb" v-bind="{ checked }" />
    </SwitchThumb>
  </SwitchRoot>
</template>

```

### `packages/registry-vue/components/switch/index.ts`

```ts
export { default as Switch } from './Switch.vue'

```

## table

- type: `registry:ui`
- description: Plain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.
- npm deps: `@tanstack/vue-table`, `@vueuse/core`

### `packages/registry-vue/components/table/Table.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed } from 'vue'
import { cn } from '@/lib/utils'

// Match DataTable's density enum so consumers can opt into the same
// runtime feel without wiring DataTable. `cozy` is the canonical default
// for bare tables (cells: py-2, head: h-10); the other two are escape
// hatches for high-density admin lists and roomy patient-facing views.
const props = defineProps<{
  class?: HTMLAttributes['class']
  density?: 'compact' | 'cozy' | 'comfortable'
}>()

const densityClass = computed(() => {
  if (props.density === 'compact') return '[&_td]:py-1.5 [&_td]:text-xs [&_th]:h-8 [&_th]:text-xs'
  if (props.density === 'comfortable') return '[&_td]:py-3 [&_th]:h-12'
  // cozy is the new TableCell/TableHead baseline (py-2 / h-10) -- no override.
  return ''
})
</script>

<template>
  <div
    data-uipkge
    data-slot="table-container"
    class="relative w-full overflow-auto"
  >
    <table
      data-uipkge
      data-slot="table"
      :class="cn('w-full caption-bottom text-sm', densityClass, props.class)"
    >
      <slot />
    </table>
  </div>
</template>

```

### `packages/registry-vue/components/table/TableBody.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <tbody data-uipkge data-slot="table-body" :class="cn('[&_tr:last-child]:border-0', props.class)">
    <slot />
  </tbody>
</template>

```

### `packages/registry-vue/components/table/TableCaption.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <caption data-uipkge data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
    <slot />
  </caption>
</template>

```

### `packages/registry-vue/components/table/TableCell.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <td
    data-uipkge
    data-slot="table-cell"
    :class="
      cn(
        'px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        props.class,
      )
    "
  >
    <slot />
  </td>
</template>

```

### `packages/registry-vue/components/table/TableEmpty.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { cn } from '@/lib/utils'
import TableCell from './TableCell.vue'
import TableRow from './TableRow.vue'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    colspan?: number
  }>(),
  {
    colspan: 1,
  },
)

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <TableRow>
    <TableCell
      :class="cn('text-foreground p-4 align-middle text-sm whitespace-nowrap', props.class)"
      v-bind="delegatedProps"
    >
      <div class="flex items-center justify-center py-10">
        <slot />
      </div>
    </TableCell>
  </TableRow>
</template>

```

### `packages/registry-vue/components/table/TableFooter.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <tfoot
    data-uipkge
    data-slot="table-footer"
    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
  >
    <slot />
  </tfoot>
</template>

```

### `packages/registry-vue/components/table/TableHead.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <th
    data-uipkge
    data-slot="table-head"
    :class="
      cn(
        'text-foreground h-10 px-3 text-left align-middle text-sm font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        props.class,
      )
    "
  >
    <slot />
  </th>
</template>

```

### `packages/registry-vue/components/table/TableHeader.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <thead data-uipkge data-slot="table-header" :class="cn('bg-muted/50 [&_tr]:border-b', props.class)">
    <slot />
  </thead>
</template>

```

### `packages/registry-vue/components/table/TableRow.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <tr
    data-uipkge
    data-slot="table-row"
    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150', props.class)"
  >
    <slot />
  </tr>
</template>

```

### `packages/registry-vue/components/table/index.ts`

```ts
export { default as Table } from './Table.vue'
export { default as TableBody } from './TableBody.vue'
export { default as TableCaption } from './TableCaption.vue'
export { default as TableCell } from './TableCell.vue'
export { default as TableEmpty } from './TableEmpty.vue'
export { default as TableFooter } from './TableFooter.vue'
export { default as TableHead } from './TableHead.vue'
export { default as TableHeader } from './TableHeader.vue'
export { default as TableRow } from './TableRow.vue'

```

### `packages/registry-vue/components/table/utils.ts`

```ts
import type { Updater } from '@tanstack/vue-table'

import type { Ref } from 'vue'
import { isFunction } from '@tanstack/vue-table'

export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
  ref.value = isFunction(updaterOrValue) ? updaterOrValue(ref.value) : updaterOrValue
}

```

## tabs

- type: `registry:ui`
- description: Horizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on reka-ui with full keyboard navigation.
- npm deps: `@vueuse/core`, `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/tabs/Tabs.vue`

```vue
<script setup lang="ts">
import { computed, provide } from 'vue'
import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  TabsRootProps & {
    class?: HTMLAttributes['class']
    orientation?: 'horizontal' | 'vertical'
  }
>()
const emits = defineEmits<TabsRootEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'orientation')
const forwarded = useForwardPropsEmits(delegatedProps, emits)

// Make orientation reachable from descendants without each consumer having to
// pass it manually. TabsList / TabsTrigger inject this to apply variant CSS.
provide(
  Symbol.for('tabsOrientation'),
  computed(() => props.orientation ?? 'horizontal'),
)
</script>

<template>
  <TabsRoot
    data-uipkge
    data-slot="tabs"
    :data-orientation="orientation ?? 'horizontal'"
    :orientation="orientation ?? 'horizontal'"
    v-bind="forwarded"
    :class="cn('flex w-full', orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-2', props.class)"
  >
    <slot />
  </TabsRoot>
</template>

```

### `packages/registry-vue/components/tabs/TabsContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { TabsContent, type TabsContentProps } from 'reka-ui'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  value: string
  forceMount?: boolean
}

const props = defineProps<Props>()
</script>

<template>
  <TabsContent
    v-slot="slotProps"
    :value="props.value"
    :force-mount="props.forceMount"
    :class="
      cn(
        'ring-offset-background focus-visible:border-ring focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:ring-[3px] focus-visible:outline-none',
        props.class,
      )
    "
    data-uipkge
    data-slot="tabs-content"
  >
    <slot v-bind="slotProps" />
  </TabsContent>
</template>

```

### `packages/registry-vue/components/tabs/TabsList.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TabsList, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'
import { tabsListVariants } from './tabs.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// indexed-access types or reka-ui's TabsListProps.
const props = defineProps<{
  class?: HTMLAttributes['class']
  variant?: 'segmented' | 'pill' | 'underline'
  orientation?: 'horizontal' | 'vertical'
  asChild?: boolean
  as?: string | object
  loop?: boolean
}>()

const delegatedProps = reactiveOmit(props, 'class', 'variant', 'orientation')
const forwarded = useForwardProps(delegatedProps)

// Inherit orientation from <Tabs> when not set explicitly. Provided as a
// computed ref by Tabs.vue so updates propagate.
const tabsOrientation = inject<{ value: 'horizontal' | 'vertical' } | 'horizontal' | 'vertical'>(
  Symbol.for('tabsOrientation'),
  'horizontal',
)
const effectiveOrientation = computed(() => {
  if (props.orientation) return props.orientation
  return typeof tabsOrientation === 'string' ? tabsOrientation : tabsOrientation.value
})
</script>

<template>
  <TabsList
    data-uipkge
    data-slot="tabs-list"
    v-bind="forwarded"
    :class="cn(tabsListVariants({ variant, orientation: effectiveOrientation }), props.class)"
  >
    <slot />
  </TabsList>
</template>

```

### `packages/registry-vue/components/tabs/TabsTrigger.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { TabsTrigger } from 'reka-ui'
import { cn } from '@/lib/utils'
import { tabsTriggerVariants } from './tabs.variants'

// Inlined unions: SFC compiler can't extract runtime props from
// indexed-access types like TabsTriggerVariants['size'].
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    size?: 'default' | 'sm' | 'lg'
    variant?: 'segmented' | 'pill' | 'underline'
    orientation?: 'horizontal' | 'vertical'
    value: string
    disabled?: boolean
  }>(),
  {
    disabled: false,
  },
)

const tabsOrientation = inject<{ value: 'horizontal' | 'vertical' } | 'horizontal' | 'vertical'>(
  Symbol.for('tabsOrientation'),
  'horizontal',
)
const effectiveOrientation = computed(() => {
  if (props.orientation) return props.orientation
  return typeof tabsOrientation === 'string' ? tabsOrientation : tabsOrientation.value
})
</script>

<template>
  <TabsTrigger
    v-slot="slotProps"
    :value="props.value"
    :disabled="props.disabled"
    data-uipkge
    data-slot="tabs-trigger"
    :class="
      cn(
        tabsTriggerVariants({
          size: props.size,
          variant: props.variant,
          orientation: effectiveOrientation,
        }),
        props.class,
      )
    "
  >
    <slot v-bind="slotProps" />
  </TabsTrigger>
</template>

```

### `packages/registry-vue/components/tabs/tabs.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const tabsListVariants = cva('inline-flex items-stretch text-muted-foreground', {
  variants: {
    variant: {
      // Solid muted track with rounded inset triggers — the default look.
      segmented: 'gap-1 rounded-md bg-muted p-1',
      // Transparent track with rounded-full pill triggers.
      pill: 'gap-2 bg-transparent p-0',
      // Bottom-border bar (horizontal) or right-border bar (vertical), with
      // an underline on the active trigger.
      underline: 'gap-0 bg-transparent p-0',
    },
    orientation: {
      horizontal: 'flex-row',
      vertical: 'h-auto flex-col items-stretch',
    },
  },
  compoundVariants: [
    {
      variant: 'underline',
      orientation: 'horizontal',
      class: 'w-full justify-start border-b border-border',
    },
    {
      variant: 'underline',
      orientation: 'vertical',
      class: 'border-r border-border',
    },
  ],
  defaultVariants: {
    variant: 'segmented',
    orientation: 'horizontal',
  },
})

export const tabsTriggerVariants = cva(
  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-[color,background-color,box-shadow,border-color] duration-150 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        segmented:
          'rounded-sm data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
        pill: 'rounded-full border border-border bg-transparent data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary',
        underline:
          'rounded-none border-b-2 border-transparent -mb-px data-[state=active]:border-foreground data-[state=active]:text-foreground',
      },
      size: {
        default: 'h-9 px-3 text-sm',
        sm: 'h-8 px-2.5 text-xs',
        lg: 'h-10 px-4 text-sm',
      },
      orientation: {
        horizontal: '',
        vertical: 'w-full justify-start',
      },
    },
    compoundVariants: [
      {
        variant: 'underline',
        orientation: 'vertical',
        class: 'border-b-0 border-r-2 -mr-px',
      },
    ],
    defaultVariants: {
      variant: 'segmented',
      size: 'default',
      orientation: 'horizontal',
    },
  },
)

export type TabsListVariants = VariantProps<typeof tabsListVariants>

export type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>

```

### `packages/registry-vue/components/tabs/index.ts`

```ts
export { default as Tabs } from './Tabs.vue'
export { default as TabsContent } from './TabsContent.vue'
export { default as TabsList } from './TabsList.vue'
export { default as TabsTrigger } from './TabsTrigger.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { tabsListVariants, tabsTriggerVariants, type TabsListVariants, type TabsTriggerVariants } from './tabs.variants'

```

## tags-input

- type: `registry:ui`
- description: Multi-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`

### `packages/registry-vue/components/tags-input/TagsInput.vue`

```vue
<script setup lang="ts">
import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
const emits = defineEmits<TagsInputRootEmits>()

const delegatedProps = reactiveOmit(props, 'class')

const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <TagsInputRoot
    v-slot="slotProps"
    v-bind="forwarded"
    :class="
      cn(
        'border-input bg-background flex flex-wrap items-center gap-2 rounded-md border px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
        'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        props.class,
      )
    "
  >
    <slot v-bind="slotProps" />
  </TagsInputRoot>
</template>

```

### `packages/registry-vue/components/tags-input/TagsInputInput.vue`

```vue
<script setup lang="ts">
import type { TagsInputInputProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TagsInputInput, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TagsInputInput
    v-bind="forwardedProps"
    :class="cn('min-h-5 flex-1 bg-transparent px-1 text-sm focus:outline-none', props.class)"
  />
</template>

```

### `packages/registry-vue/components/tags-input/TagsInputItem.vue`

```vue
<script setup lang="ts">
import type { TagsInputItemProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

import { reactiveOmit } from '@vueuse/core'
import { TagsInputItem, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TagsInputItem
    v-bind="forwardedProps"
    :class="
      cn(
        'bg-secondary data-[state=active]:ring-ring ring-offset-background flex h-5 items-center rounded-md data-[state=active]:ring-2 data-[state=active]:ring-offset-2',
        props.class,
      )
    "
  >
    <slot />
  </TagsInputItem>
</template>

```

### `packages/registry-vue/components/tags-input/TagsInputItemDelete.vue`

```vue
<script setup lang="ts">
import type { TagsInputItemDeleteProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next'
import { TagsInputItemDelete, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('mr-1 flex rounded bg-transparent', props.class)">
    <slot>
      <X class="h-4 w-4" aria-hidden="true" />
    </slot>
  </TagsInputItemDelete>
</template>

```

### `packages/registry-vue/components/tags-input/TagsInputItemText.vue`

```vue
<script setup lang="ts">
import type { TagsInputItemTextProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TagsInputItemText, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')

const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <TagsInputItemText v-bind="forwardedProps" :class="cn('rounded bg-transparent px-2 py-0.5 text-sm', props.class)">
    <slot />
  </TagsInputItemText>
</template>

```

### `packages/registry-vue/components/tags-input/index.ts`

```ts
export { default as TagsInput } from './TagsInput.vue'
export { default as TagsInputInput } from './TagsInputInput.vue'
export { default as TagsInputItem } from './TagsInputItem.vue'
export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
export { default as TagsInputItemText } from './TagsInputItemText.vue'

```

## tailwind

- type: `registry:style`
- description: Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Ships the full canonical tailwind.css as the `files` content so a re-pull with `--overwrite` lands a working setup. The cssVars block stays as a safety net for first-install scenarios where the CLI merges tokens into a consumer's pre-existing tailwind.css. The `css` (@layer base) field is intentionally omitted to avoid duplicating the @layer base block already present in the shipped file when the CLI merges.
- npm deps: `tailwindcss`, `tw-animate-css`

### `packages/registry-vue/bootstrap/tailwind/tailwind.css`

```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Anybody:wght@600;700;800&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans:
    'DM Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-display: 'Anybody', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  /* Motion tokens — used across every component. Calibrated against Radix,
     Material 3 and Sonner defaults. Override per component if needed. */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; /* hover, focus ring, color shifts */
  --dur-base: 200ms; /* most state changes */
  --dur-slow: 300ms; /* modal/sheet enter, tab pill slide */
  --dur-page: 250ms; /* page transition */

  /* Sage paper palette — warm OKLCH tokens with forest accent. */
  --radius: 0.3rem;
  --background: oklch(0.98 0.006 130);
  --foreground: oklch(0.2 0.012 150);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.012 150);
  --popover: oklch(0.99 0.004 130);
  --popover-foreground: oklch(0.2 0.012 150);
  --primary: oklch(0.46 0.08 145);
  --primary-foreground: oklch(0.98 0.006 130);
  --secondary: oklch(0.94 0.012 130);
  --secondary-foreground: oklch(0.24 0.014 150);
  --muted: oklch(0.95 0.01 130);
  --muted-foreground: oklch(0.48 0.014 150);
  --accent: oklch(0.92 0.02 80);
  --accent-foreground: oklch(0.24 0.014 150);
  --destructive: oklch(0.55 0.2 28);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.88 0.014 135);
  --input: oklch(0.88 0.014 135);
  --ring: oklch(0.5 0.08 150);
  /* Chart palette held as hex (not OKLCH) so ECharts' canvas renderer
   * can hex-concat opacity (`color + '40'`) for gradient fills. Browsers
   * keep `oklch(...)` strings unchanged through canvas.fillStyle and
   * getComputedStyle, breaking those concat sites. Light mode: warm
   * orange / teal / deep blue / amber / yellow. */
  --chart-1: #e76e50;
  --chart-2: #2a9d90;
  --chart-3: #264653;
  --chart-4: #e9c468;
  --chart-5: #f4a261;

  --sidebar: oklch(0.955 0.012 130);
  --sidebar-foreground: oklch(0.2 0.012 150);
  --sidebar-primary: oklch(0.46 0.08 145);
  --sidebar-primary-foreground: oklch(0.98 0.006 130);
  --sidebar-accent: oklch(0.92 0.02 80);
  --sidebar-accent-foreground: oklch(0.24 0.014 150);
  --sidebar-border: oklch(0.88 0.014 135);
  --sidebar-ring: oklch(0.5 0.08 150);

  /* App extensions (not part of shadcn) */
  --success: oklch(0.55 0.18 145);
  --warning: oklch(0.7 0.16 75);
  --info: oklch(0.55 0.22 260);
}

.dark {
  /* Sage paper palette — dark variant. */
  --background: oklch(0.16 0.01 150);
  --foreground: oklch(0.94 0.008 130);
  --card: oklch(0.2 0.012 150);
  --card-foreground: oklch(0.94 0.008 130);
  --popover: oklch(0.2 0.012 150);
  --popover-foreground: oklch(0.94 0.008 130);
  --primary: oklch(0.72 0.1 145);
  --primary-foreground: oklch(0.16 0.01 150);
  --secondary: oklch(0.27 0.012 150);
  --secondary-foreground: oklch(0.94 0.008 130);
  --muted: oklch(0.26 0.012 150);
  --muted-foreground: oklch(0.72 0.014 140);
  --accent: oklch(0.3 0.018 80);
  --accent-foreground: oklch(0.94 0.008 130);
  --destructive: oklch(0.68 0.18 25);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.6 0.1 145);
  /* Dark mode chart palette — same warm earthy family as light,
     lightened for visibility on dark backgrounds. */
  --chart-1: #e8997a;
  --chart-2: #5cbfb0;
  --chart-3: #4a6b7a;
  --chart-4: #f0d99a;
  --chart-5: #f5b87a;

  --sidebar: oklch(0.19 0.012 150);
  --sidebar-foreground: oklch(0.94 0.008 130);
  --sidebar-primary: oklch(0.72 0.1 145);
  --sidebar-primary-foreground: oklch(0.16 0.01 150);
  --sidebar-accent: oklch(0.3 0.018 80);
  --sidebar-accent-foreground: oklch(0.94 0.008 130);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.6 0.1 145);

  /* App extensions (not part of shadcn) */
  --success: oklch(0.65 0.16 145);
  --warning: oklch(0.78 0.17 75);
  --info: oklch(0.65 0.18 260);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }

  /* Tailwind v4 dropped `cursor: pointer` for buttons. Restore it for all
     interactive elements (native + Reka role-based controls). Disabled
     elements stay default. */
  button:not(:disabled),
  [role='button']:not([aria-disabled='true']),
  [role='checkbox']:not([aria-disabled='true']),
  [role='radio']:not([aria-disabled='true']),
  [role='switch']:not([aria-disabled='true']),
  [role='menuitem']:not([aria-disabled='true']),
  [role='menuitemcheckbox']:not([aria-disabled='true']),
  [role='menuitemradio']:not([aria-disabled='true']),
  [role='option']:not([aria-disabled='true']),
  [role='tab']:not([aria-disabled='true']),
  summary,
  label[for],
  select:not(:disabled),
  input[type='checkbox']:not(:disabled),
  input[type='radio']:not(:disabled),
  input[type='range']:not(:disabled),
  input[type='file']:not(:disabled),
  input[type='submit']:not(:disabled),
  input[type='reset']:not(:disabled),
  input[type='button']:not(:disabled),
  input[type='color']:not(:disabled) {
    cursor: pointer;
  }

  /* Shadow tokens */
  .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  .shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  }
  .shadow-md {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
  .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  .dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .dark .shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }
  .dark .shadow-md {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 2px 4px -2px rgba(0, 0, 0, 0.2);
  }
  .dark .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.35),
      0 4px 6px -4px rgba(0, 0, 0, 0.25);
  }
  .dark .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.4),
      0 8px 10px -6px rgba(0, 0, 0, 0.3);
  }
}

/* Card hover lift */
[data-slot='card']:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dark [data-slot='card']:hover {
  box-shadow: var(--shadow-md);
}

/* Subtle background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 80%, oklch(0.46 0.08 145 / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, oklch(0.46 0.08 145 / 0.02) 0%, transparent 50%);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Reusable error-shake animation — apply class `animate-shake` on submit
   attempt only (never on blur, too aggressive). */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.animate-shake {
  animation: shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Global reduced-motion safety net — collapses every animation/transition
   to near-instant. Component-specific @media reduce blocks override
   timings further when needed; this is the floor. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-shake {
    animation: none;
  }
}

```

## terminal

- type: `registry:ui`
- description: Terminal/command-line display with a macOS-style title bar, command history, prompt character, dark/light themes, auto-scroll, optional typing animation, and a line slot for custom formatting.

### `packages/registry-vue/components/terminal/Terminal.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

export interface TerminalLine {
  /** Prompt prefix shown before the command. Omit for output-only lines. */
  prompt?: string
  /** Command text shown after the prompt. */
  command?: string
  /** Output lines rendered below the command. */
  output?: string
  /** Override the line type: 'command' renders prompt+command, 'output' renders plain text. */
  type?: 'command' | 'output'
}

interface Props {
  /** Command history to render. */
  lines: TerminalLine[]
  /** Window title shown in the title bar. Default 'bash'. */
  title?: string
  /** Prompt character. Default '$'. */
  promptChar?: string
  /** Color theme. Default 'dark'. */
  theme?: 'dark' | 'light'
  /** Auto-scroll to bottom when new lines arrive. Default true. */
  autoScroll?: boolean
  /** Animate lines typing in one-by-one. Default false. */
  typing?: boolean
  /** Typing speed in ms per line. Default 120. */
  typingSpeed?: number
  /** Max height before scrolling. Default '400px'. */
  maxHeight?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  title: 'bash',
  promptChar: '$',
  theme: 'dark',
  autoScroll: true,
  typing: false,
  typingSpeed: 120,
  maxHeight: '400px',
})

const bodyRef = ref<HTMLElement | null>(null)
const visibleCount = ref(props.typing ? 0 : props.lines.length)

const resolvedLines = computed(() =>
  props.lines.map((l) => ({
    ...l,
    type: l.type ?? (l.prompt || l.command ? 'command' : 'output'),
    prompt: l.prompt ?? (l.type === 'output' ? '' : props.promptChar),
  })),
)

const shownLines = computed(() => resolvedLines.value.slice(0, visibleCount.value))

function scrollToBottom() {
  if (!props.autoScroll || !bodyRef.value) return
  nextTick(() => {
    if (bodyRef.value) bodyRef.value.scrollTop = bodyRef.value.scrollHeight
  })
}

watch(
  () => props.lines.length,
  () => {
    if (props.typing) {
      // Reset typing animation when lines change.
      visibleCount.value = 0
      runTyping()
    } else {
      visibleCount.value = props.lines.length
      scrollToBottom()
    }
  },
)

let typingTimer: ReturnType<typeof setTimeout> | null = null
function runTyping() {
  if (typingTimer) clearTimeout(typingTimer)
  const tick = () => {
    if (visibleCount.value < props.lines.length) {
      visibleCount.value++
      scrollToBottom()
      typingTimer = setTimeout(tick, props.typingSpeed)
    }
  }
  typingTimer = setTimeout(tick, props.typingSpeed)
}

onMounted(() => {
  if (props.typing) runTyping()
  else scrollToBottom()
})

onBeforeUnmount(() => {
  if (typingTimer) clearTimeout(typingTimer)
})
</script>

<template>
  <div
    data-uipkge
    data-slot="terminal"
    :data-theme="theme"
    :class="
      cn(
        'relative overflow-hidden rounded-lg border font-mono text-sm shadow-sm',
        theme === 'dark' ? 'border-zinc-800 bg-zinc-950 text-zinc-200' : 'border-zinc-200 bg-zinc-50 text-zinc-800',
        props.class,
      )
    "
  >
    <!-- Title bar -->
    <div
      :class="
        cn(
          'flex items-center gap-2 border-b px-4 py-2.5',
          theme === 'dark' ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-zinc-100',
        )
      "
    >
      <div class="flex gap-1.5">
        <span class="size-3 rounded-full bg-red-500" />
        <span class="size-3 rounded-full bg-yellow-500" />
        <span class="size-3 rounded-full bg-green-500" />
      </div>
      <span :class="cn('ml-2 text-xs', theme === 'dark' ? 'text-zinc-400' : 'text-zinc-500')">{{ title }}</span>
    </div>

    <!-- Body -->
    <div ref="bodyRef" class="overflow-auto p-4 leading-relaxed" :style="{ maxHeight: props.maxHeight }">
      <div v-for="(line, i) in shownLines" :key="i" data-slot="terminal-line" class="break-words whitespace-pre-wrap">
        <slot name="line" :line="line" :index="i">
          <div
            v-if="line.type === 'command'"
            data-slot="terminal-command"
            class="flex flex-wrap items-baseline gap-x-1.5"
          >
            <span :class="cn('shrink-0 font-semibold', theme === 'dark' ? 'text-green-400' : 'text-green-600')">{{
              line.prompt
            }}</span>
            <span>{{ line.command }}</span>
          </div>
          <div v-if="line.output" data-slot="terminal-output" class="text-zinc-400">{{ line.output }}</div>
        </slot>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/terminal/index.ts`

```ts
export { default as Terminal } from './Terminal.vue'
export type { TerminalLine } from './Terminal.vue'

```

## testimonials-01

- type: `registry:block`
- description: Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.
- npm deps: `lucide-vue-next`
- registry deps: `avatar`, `card`

### `packages/registry-vue/blocks/testimonials-01/Testimonials01.vue`

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Quote } from 'lucide-vue-next'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Card, CardContent } from '@/components/ui/card'

const testimonials = [
  {
    quote:
      'We replaced four spreadsheets and two SaaS tools with this. Onboarding time dropped from 6 days to under 4 hours.',
    name: 'Aisha Rahman',
    role: 'Head of People',
    company: 'Northwind Logistics',
    initials: 'AR',
  },
  {
    quote:
      'The audit trail alone is worth it. SOC2 evidence collection went from a quarterly nightmare to a one-click export.',
    name: 'Marco Vidal',
    role: 'Director of Compliance',
    company: 'Helio Health',
    initials: 'MV',
  },
  {
    quote:
      'My favourite part is how fast it is. No spinners, no loading states. Search returns instantly across the entire org.',
    name: 'Tomoko Saito',
    role: 'IT Operations',
    company: 'Pixel & Co',
    initials: 'TS',
  },
]

const active = ref(0)
</script>

<template>
  <section class="bg-muted/30">
    <div class="mx-auto max-w-4xl px-6 py-24">
      <div class="text-center">
        <p class="text-primary text-sm font-medium tracking-widest uppercase">Testimonials</p>
        <h2 class="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Loved by teams everywhere</h2>
      </div>

      <Card class="mt-10">
        <CardContent class="space-y-6 p-8 text-center">
          <Quote class="text-primary mx-auto size-8" />
          <p class="text-foreground text-xl leading-relaxed sm:text-2xl">
            &ldquo;{{ testimonials[active].quote }}&rdquo;
          </p>
          <div class="flex flex-col items-center gap-2">
            <Avatar class="size-12">
              <AvatarFallback>{{ testimonials[active].initials }}</AvatarFallback>
            </Avatar>
            <div>
              <p class="text-sm font-semibold">{{ testimonials[active].name }}</p>
              <p class="text-muted-foreground text-xs">
                {{ testimonials[active].role }} · {{ testimonials[active].company }}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div class="mt-6 flex justify-center gap-2">
        <button
          v-for="(t, i) in testimonials"
          :key="t.name"
          type="button"
          :aria-label="`Show testimonial from ${t.name}`"
          :aria-current="i === active"
          class="size-2 rounded-full transition-all duration-200"
          :class="i === active ? 'bg-primary w-6' : 'bg-muted-foreground/30 hover:bg-muted-foreground/60'"
          @click="active = i"
        />
      </div>
    </div>
  </section>
</template>

```

## textarea

- type: `registry:ui`
- description: Multi-line text input. Auto-resize variant, character counter, and the same ring/border treatment as the rest of the form primitives.
- npm deps: `@vueuse/core`, `lucide-vue-next`, `reka-ui`
- registry deps: `label`

### `packages/registry-vue/components/textarea/Textarea.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { provide, computed, ref, nextTick, watch, onMounted } from 'vue'
import { useId } from 'reka-ui'
import { useVModel } from '@vueuse/core'
import { cn } from '@/lib/utils'
import { Loader, Check, AlertCircle, X } from 'lucide-vue-next'
import { Label } from '@/components/ui/label'

export interface TextareaProps {
  // Core
  modelValue?: string | number
  defaultValue?: string | number
  label?: string
  placeholder?: string
  hint?: string
  error?: string
  success?: string
  messages?: string[]
  disabled?: boolean
  readonly?: boolean
  required?: boolean
  autofocus?: boolean
  name?: string
  id?: string

  // Variants (Vuetify-style)
  variant?: 'outlined' | 'filled' | 'solo' | 'underlined' | 'plain'
  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
  density?: 'compact' | 'comfortable' | 'default'

  // Appearance
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'pill' | 'circle' | 'full'

  // Auto size (Ant Design API)
  autoSize?: boolean | { minRows?: number; maxRows?: number }

  // Legacy auto grow / resize
  autoGrow?: boolean
  noResize?: boolean
  autoResize?: boolean

  // Rows -- accept both number and string ("3" vs :rows="3") so unbound
  // attribute usage doesn't trip the Vue prop-type warning.
  rows?: number | string
  rowHeight?: number

  // Prefix/Suffix
  prefix?: string
  suffix?: string

  // Counter (legacy)
  counter?: boolean | number

  // Show count (Ant Design API)
  showCount?: boolean | { formatter?: (count: number, maxLength?: number) => string }

  // Max length
  maxLength?: number

  // Allow clear
  allowClear?: boolean

  // Validation
  rules?: Array<(value: any) => true | string>
  errorMessages?: string | string[]
  successMessages?: string | string[]
  validateOn?: 'blur' | 'input' | 'submit' | 'lazy' | 'blurlazy' | 'inputlazy'

  // States
  loading?: boolean
  persistentHint?: boolean
  persistentError?: boolean
  persistentPlaceholder?: boolean
  persistentPrefix?: boolean
  persistentSuffix?: boolean

  // Misc
  class?: HTMLAttributes['class']
  inputClass?: HTMLAttributes['class']
  labelClass?: HTMLAttributes['class']
  hintClass?: HTMLAttributes['class']
  bgColor?: string
  flat?: boolean
  bordered?: boolean

  // Browser
  spellcheck?: boolean
  autocomplete?: string

  // Direction
  direction?: 'ltr' | 'rtl'
}

const props = withDefaults(defineProps<TextareaProps>(), {
  variant: 'outlined',
  density: 'default',
  rounded: 'none',
  rows: 3,
  rowHeight: 24,
  autoGrow: false,
  noResize: false,
  autoResize: false,
  flat: false,
  bordered: true,
  persistentHint: false,
  persistentError: false,
  persistentPlaceholder: false,
  direction: 'ltr',
})

const emits = defineEmits<{
  (e: 'update:modelValue', payload: string | number): void
  (e: 'click:clear'): void
  (e: 'focus'): void
  (e: 'blur'): void
  (e: 'keydown'): void
  (e: 'keyup'): void
}>()

const textareaId = props.id ?? `textarea-${useId()}`
const descriptionId = `${textareaId}-description`
const messageId = `${textareaId}-message`

provide('form-item', {
  id: textareaId,
  descriptionId,
  messageId,
})

// Internal state
const internalValue = useVModel(props, 'modelValue', emits, {
  passive: true,
  defaultValue: props.defaultValue,
})
const focused = ref(false)
const internalErrorMessages = ref<string[]>([])
const validated = ref(false)
const textareaRef = ref<HTMLTextAreaElement | null>(null)

// Auto size
const autoSizeEnabled = computed(() => props.autoSize !== undefined)
const anyAutoResize = computed(() => autoSizeEnabled.value || props.autoResize || props.autoGrow)

const autoSizeConfig = computed<{ minRows?: number; maxRows?: number }>(() => {
  if (typeof props.autoSize === 'object') {
    return props.autoSize
  }
  return {}
})

const minHeightPx = ref(0)
const maxHeightPx = ref(Infinity)

const measureHeights = () => {
  if (!textareaRef.value) return
  if (!autoSizeEnabled.value) return

  const el = textareaRef.value
  const originalValue = el.value
  const originalRows = el.rows
  const originalOverflow = el.style.overflowY

  el.value = ''
  el.style.overflowY = 'hidden'

  const { minRows, maxRows } = autoSizeConfig.value

  if (minRows) {
    el.rows = minRows
    minHeightPx.value = el.scrollHeight
  } else {
    minHeightPx.value = 0
  }

  if (maxRows) {
    el.rows = maxRows
    maxHeightPx.value = el.scrollHeight
  } else {
    maxHeightPx.value = Infinity
  }

  el.value = originalValue
  el.rows = originalRows
  el.style.overflowY = originalOverflow

  autoResize()
}

watch(() => autoSizeConfig.value, measureHeights, { deep: true })

// Auto grow functionality (legacy)
const rowsNum = computed(() => Number(props.rows) || 3)

const computedRows = computed(() => {
  if (autoSizeEnabled.value || props.autoResize) return rowsNum.value
  if (!props.autoGrow) return rowsNum.value
  if (!textareaRef.value) return rowsNum.value

  const lineHeight = props.rowHeight
  const computedHeight = textareaRef.value.scrollHeight
  const newRows = Math.ceil((computedHeight - lineHeight) / lineHeight) + 1
  return Math.max(rowsNum.value, newRows)
})

// Validation
const validate = () => {
  if (!props.rules || props.rules.length === 0) return true
  internalErrorMessages.value = []
  for (const rule of props.rules) {
    const result = rule(internalValue.value)
    if (result !== true) {
      internalErrorMessages.value.push(result as string)
    }
  }
  return internalErrorMessages.value.length === 0
}

// Handle input
const handleInput = (e: Event) => {
  const target = e.target as HTMLTextAreaElement
  internalValue.value = target.value

  if (anyAutoResize.value) {
    autoResize()
  }
}

const autoResize = () => {
  if (!textareaRef.value) return
  if (!anyAutoResize.value) return

  const el = textareaRef.value

  el.style.height = 'auto'
  let newHeight = el.scrollHeight

  if (minHeightPx.value && newHeight < minHeightPx.value) {
    newHeight = minHeightPx.value
  }

  if (newHeight > maxHeightPx.value) {
    newHeight = maxHeightPx.value
    el.style.overflowY = 'auto'
  } else {
    el.style.overflowY = 'hidden'
  }

  el.style.height = `${newHeight}px`
}

// Handle clear
const handleClear = () => {
  internalValue.value = ''
  emits('click:clear')
  nextTick(() => {
    autoResize()
    textareaRef.value?.focus()
  })
}

// Handle focus/blur
const handleFocus = () => {
  focused.value = true
  emits('focus')
}

const handleBlur = () => {
  focused.value = false
  if (props.validateOn === 'blur' || props.validateOn === 'blurlazy') {
    validate()
  }
  emits('blur')
}

// Compute error/success messages
const computedErrorMessages = computed(() => {
  if (props.errorMessages) {
    return Array.isArray(props.errorMessages) ? props.errorMessages : [props.errorMessages]
  }
  if (props.error) {
    return [props.error]
  }
  return internalErrorMessages.value
})

const computedSuccessMessages = computed(() => {
  if (props.successMessages) {
    return Array.isArray(props.successMessages) ? props.successMessages : [props.successMessages]
  }
  if (props.success) {
    return [props.success]
  }
  return []
})

const hasError = computed(() => computedErrorMessages.value.length > 0)
const hasSuccess = computed(() => computedSuccessMessages.value.length > 0 && validated.value)

// Counter (legacy)
const computedCounter = computed(() => {
  if (typeof props.counter === 'number') return props.counter
  if (props.counter) return props.maxLength ?? 100
  return null
})

const currentLength = computed(() => String(internalValue.value ?? '').length)

// Show count (Ant Design API)
const showCountEnabled = computed(() => {
  return props.showCount !== undefined && props.showCount !== false
})

const showCountConfig = computed<{ formatter?: (count: number, maxLength?: number) => string }>(() => {
  if (typeof props.showCount === 'object') {
    return props.showCount
  }
  return {}
})

const countText = computed(() => {
  const formatter = showCountConfig.value.formatter
  if (formatter) {
    return formatter(currentLength.value, props.maxLength)
  }
  if (props.maxLength !== undefined) {
    return `${currentLength.value} / ${props.maxLength}`
  }
  return `${currentLength.value}`
})

// Allow clear
const showClear = computed(() => {
  return props.allowClear && !props.disabled && !props.readonly && String(internalValue.value ?? '').length > 0
})

// Variant classes
const variantClasses = computed(() => {
  const base = 'w-full transition-colors duration-200'

  switch (props.variant) {
    case 'outlined':
      return cn(
        base,
        'border-2 rounded-lg',
        focused.value ? 'border-primary ring-2 ring-primary/20' : 'border-input',
        hasError.value && 'border-destructive focus:border-destructive focus:ring-destructive/20',
      )
    case 'filled':
      return cn(
        base,
        'border-b-2 bg-muted/50 rounded-t-lg',
        focused.value ? 'border-primary bg-muted' : 'border-transparent',
        hasError.value && 'border-destructive',
      )
    case 'solo':
      return cn(
        base,
        'rounded-lg shadow-sm',
        focused.value ? 'shadow-md' : 'shadow-sm',
        'bg-card border border-transparent',
      )
    case 'underlined':
      return cn(
        base,
        'border-b-2 rounded-none border-x-0 border-t-0 px-0',
        focused.value ? 'border-primary' : 'border-muted-foreground/30',
        hasError.value && 'border-destructive',
      )
    case 'plain':
      return cn(base, 'border-0 bg-transparent')
    default:
      return base
  }
})

// Density classes
const densityClasses = computed(() => {
  switch (props.density) {
    case 'compact':
      return 'text-sm min-h-[32px]'
    case 'comfortable':
      return 'text-base min-h-[40px]'
    case 'default':
    default:
      return 'text-base min-h-[48px]'
  }
})

// Resize classes
const resizeClasses = computed(() => {
  if (props.noResize) return 'resize-none'
  if (anyAutoResize.value) return 'resize-none'
  return 'resize-y'
})

// Watch for programmatic value changes to trigger auto-resize
watch(internalValue, () => {
  if (anyAutoResize.value) {
    nextTick(() => autoResize())
  }
})

onMounted(() => {
  nextTick(() => {
    measureHeights()
    if (anyAutoResize.value) {
      autoResize()
    }
  })
})
</script>

<template>
  <div :class="cn('relative space-y-2', props.class)">
    <!-- Label -->
    <Label
      v-if="label"
      :for="textareaId"
      :class="[
        'text-foreground text-sm font-medium',
        props.labelClass,
        focused && 'text-primary',
        hasError && 'text-destructive',
      ]"
    >
      {{ label }}
      <span v-if="required" class="text-destructive ml-0.5">*</span>
    </Label>

    <!-- Control wrapper -->
    <div
      :class="
        cn(
          'relative flex items-center',
          variantClasses,
          densityClasses,
          disabled && 'pointer-events-none opacity-50',
          props.readonly && !disabled && 'cursor-default',
          props.rounded !== 'none' && `rounded-${props.rounded}`,
        )
      "
      :style="props.bgColor ? { backgroundColor: props.bgColor } : {}"
    >
      <!-- Prefix -->
      <span
        v-if="prefix"
        class="text-muted-foreground pointer-events-none absolute top-3 left-3 text-sm"
        :class="{ 'opacity-50': !persistentPrefix && !focused }"
      >
        {{ prefix }}
      </span>

      <!-- Textarea -->
      <textarea
        :id="textareaId"
        :ref="
          (el) => {
            textareaRef = el as HTMLTextAreaElement
          }
        "
        :value="internalValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :required="required"
        :name="name"
        :autocomplete="autocomplete"
        :autofocus="autofocus"
        :spellcheck="spellcheck"
        :maxlength="maxLength"
        :rows="computedRows"
        :aria-describedby="descriptionId"
        :aria-invalid="hasError"
        :class="
          cn(
            'w-full flex-1 resize-y bg-transparent outline-none',
            densityClasses,
            resizeClasses,
            prefix ? 'pl-16' : 'pl-3',
            suffix ? 'pr-16' : showClear ? 'pr-10' : 'pr-3',
            showCountEnabled && 'pb-6',
            'py-2',
            props.inputClass,
          )
        "
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @keydown="emits('keydown')"
        @keyup="emits('keyup')"
      />

      <!-- Suffix -->
      <span
        v-if="suffix"
        class="text-muted-foreground pointer-events-none absolute top-3 right-3 text-sm"
        :class="{ 'opacity-50': !persistentSuffix && !focused }"
      >
        {{ suffix }}
      </span>

      <!-- Clear button -->
      <button
        v-if="showClear"
        type="button"
        tabindex="-1"
        class="text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-3 flex items-center justify-center rounded-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
        :class="suffix ? 'right-10' : 'right-3'"
        @click="handleClear"
      >
        <X class="size-4" aria-hidden="true" />
      </button>

      <!-- Loading spinner -->
      <div v-if="loading" class="absolute top-3 right-3 flex items-center justify-center">
        <Loader class="text-muted-foreground size-4 animate-spin" />
      </div>

      <!-- Success/Error indicators -->
      <div
        v-if="hasSuccess && !loading"
        class="absolute top-3 right-3 flex items-center justify-center text-[var(--success)]"
      >
        <Check class="size-4" aria-hidden="true" />
      </div>
      <div v-if="hasError && !loading" class="text-destructive absolute top-3 right-3 flex items-center justify-center">
        <AlertCircle class="size-4" aria-hidden="true" />
      </div>

      <!-- Show count -->
      <div
        v-if="showCountEnabled"
        class="text-muted-foreground pointer-events-none absolute right-3 bottom-1.5 text-xs"
        :class="{ 'text-destructive': props.maxLength !== undefined && currentLength > props.maxLength }"
      >
        {{ countText }}
      </div>
    </div>

    <!-- Messages (hint, error, success) -->
    <div class="mt-1.5">
      <!-- Hint -->
      <p
        v-if="hint && (!hasError || persistentHint) && !focused"
        :class="cn('text-muted-foreground text-sm', props.hintClass)"
      >
        {{ hint }}
      </p>

      <!-- Error messages -->
      <p
        v-for="(msg, i) in computedErrorMessages"
        :key="`error-${i}`"
        class="text-destructive flex items-center gap-1 text-sm"
      >
        <AlertCircle class="size-3 shrink-0" aria-hidden="true" />
        {{ msg }}
      </p>

      <!-- Success messages -->
      <p
        v-for="(msg, i) in computedSuccessMessages"
        :key="`success-${i}`"
        class="flex items-center gap-1 text-sm text-[var(--success)]"
      >
        <Check class="size-3 shrink-0" />
        {{ msg }}
      </p>

      <!-- Counter (legacy) -->
      <div
        v-if="computedCounter !== null"
        class="text-muted-foreground mt-1 text-right text-xs"
        :class="{ 'text-destructive': currentLength > computedCounter }"
      >
        {{ currentLength }} / {{ computedCounter }}
      </div>
    </div>

    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/textarea/index.ts`

```ts
export { default as Textarea } from './Textarea.vue'

```

## theme-customize

- type: `registry:block`
- description: Compact theme customization popover. Light/Dark/System mode (via the useTheme cookie), six curated color presets that overwrite `--primary` / `--primary-foreground` / `--ring`, and a radius slider bound to `--radius`. Persists to localStorage and exposes a one-click Copy CSS for the active token set.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `slider`, `sheet`, `use-theme`

### `packages/registry-vue/blocks/theme-customize/ThemeCustomize.vue`

```vue
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { Check, Copy, Download, Monitor, Moon, Palette, Pipette, RotateCcw, Shuffle, Sun } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Slider } from '@/components/ui/slider'
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
import { useTheme } from '@/composables/useTheme'

type Mode = 'light' | 'dark' | 'system'
type PresetKey =
  | 'neutral'
  | 'zinc'
  | 'slate'
  | 'stone'
  | 'rose'
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'custom'
type ThemeKey =
  | 'newyear'
  | 'sunset'
  | 'cyberpunk'
  | 'forest'
  | 'ocean'
  | 'pastel'
  | 'mono'
  | 'brutalist'
  | 'notebook'
  | 'caffeine'
  | 'midnight'
  | 'mocha'
  | 'retro'
  | 'tangerine'
  | 'quartz'
  | 'cosmic'
  | 'sage'
  | 'marble'
  | 'ember'
  | 'amethyst'
  | 'rainfall'
  | 'peach'
  | 'tropical'
  | 'vintage'
type FontKey = 'sans' | 'serif' | 'mono'
type TintKey = 'pure' | 'cool' | 'warm'

interface Preset {
  key: PresetKey
  label: string
  swatch: string
  light: { primary: string; primaryForeground: string; ring: string }
  dark: { primary: string; primaryForeground: string; ring: string }
}

function mkPreset(key: PresetKey, label: string, hue: number, l = 0.6, c = 0.2, fg = 'oklch(0.985 0 0)'): Preset {
  const swatch = `oklch(${l} ${c} ${hue})`
  return {
    key,
    label,
    swatch,
    light: { primary: swatch, primaryForeground: fg, ring: swatch },
    dark: { primary: swatch, primaryForeground: fg, ring: swatch },
  }
}

const PRESETS: Preset[] = [
  // Greyscale family
  {
    key: 'neutral',
    label: 'Neutral',
    swatch: 'oklch(0.205 0 0)',
    light: { primary: 'oklch(0.205 0 0)', primaryForeground: 'oklch(0.985 0 0)', ring: 'oklch(0.708 0 0)' },
    dark: { primary: 'oklch(0.922 0 0)', primaryForeground: 'oklch(0.205 0 0)', ring: 'oklch(0.556 0 0)' },
  },
  {
    key: 'zinc',
    label: 'Zinc',
    swatch: 'oklch(0.21 0.006 285.885)',
    light: {
      primary: 'oklch(0.21 0.006 285.885)',
      primaryForeground: 'oklch(0.985 0 0)',
      ring: 'oklch(0.705 0.015 286.067)',
    },
    dark: {
      primary: 'oklch(0.92 0.004 286.32)',
      primaryForeground: 'oklch(0.21 0.006 285.885)',
      ring: 'oklch(0.552 0.016 285.938)',
    },
  },
  {
    key: 'slate',
    label: 'Slate',
    swatch: 'oklch(0.21 0.034 264.665)',
    light: {
      primary: 'oklch(0.21 0.034 264.665)',
      primaryForeground: 'oklch(0.985 0 0)',
      ring: 'oklch(0.554 0.046 257.417)',
    },
    dark: {
      primary: 'oklch(0.929 0.013 255.508)',
      primaryForeground: 'oklch(0.21 0.034 264.665)',
      ring: 'oklch(0.554 0.046 257.417)',
    },
  },
  {
    key: 'stone',
    label: 'Stone',
    swatch: 'oklch(0.216 0.006 56.043)',
    light: {
      primary: 'oklch(0.216 0.006 56.043)',
      primaryForeground: 'oklch(0.985 0.001 106.423)',
      ring: 'oklch(0.553 0.013 58.071)',
    },
    dark: {
      primary: 'oklch(0.923 0.003 48.717)',
      primaryForeground: 'oklch(0.216 0.006 56.043)',
      ring: 'oklch(0.553 0.013 58.071)',
    },
  },
  // Warm
  mkPreset('rose', 'Rose', 16.439, 0.645, 0.246),
  mkPreset('red', 'Red', 27.325, 0.637, 0.237),
  mkPreset('orange', 'Orange', 47.604, 0.705, 0.213),
  mkPreset('amber', 'Amber', 70.08, 0.769, 0.188),
  mkPreset('yellow', 'Yellow', 95.277, 0.795, 0.184, 'oklch(0.286 0.066 53.813)'),
  // Greens
  mkPreset('lime', 'Lime', 130.85, 0.768, 0.233, 'oklch(0.274 0.072 132.109)'),
  mkPreset('emerald', 'Emerald', 162.48, 0.696, 0.17),
  mkPreset('teal', 'Teal', 184.704, 0.704, 0.14, 'oklch(0.984 0.014 180.72)'),
  // Cool
  mkPreset('cyan', 'Cyan', 221.723, 0.715, 0.143, 'oklch(0.302 0.056 229.695)'),
  mkPreset('sky', 'Sky', 235.711, 0.685, 0.169),
  mkPreset('blue', 'Blue', 264.376, 0.546, 0.245),
  mkPreset('indigo', 'Indigo', 277.117, 0.511, 0.262),
  // Purples
  mkPreset('violet', 'Violet', 293.009, 0.541, 0.281),
  mkPreset('purple', 'Purple', 303.9, 0.558, 0.288),
  mkPreset('fuchsia', 'Fuchsia', 322.16, 0.667, 0.295),
  mkPreset('pink', 'Pink', 354.308, 0.656, 0.241),
]

type CategoryKey = 'featured' | 'editorial' | 'bold' | 'cool' | 'soft'

interface ThemePreset {
  key: ThemeKey
  label: string
  emoji: string
  category: CategoryKey
  mode: Mode
  color: PresetKey
  tint: TintKey
  font: FontKey
  radius: number
}

const CATEGORY_LABELS: Record<CategoryKey, string> = {
  featured: 'Featured',
  editorial: 'Editorial',
  bold: 'Bold',
  cool: 'Cool',
  soft: 'Soft',
}

const THEMES: ThemePreset[] = [
  {
    key: 'newyear',
    label: 'New Year',
    emoji: '✨',
    category: 'featured',
    mode: 'dark',
    color: 'amber',
    tint: 'warm',
    font: 'serif',
    radius: 0.75,
  },
  {
    key: 'sunset',
    label: 'Sunset',
    emoji: '🌅',
    category: 'featured',
    mode: 'light',
    color: 'orange',
    tint: 'warm',
    font: 'sans',
    radius: 0.625,
  },
  {
    key: 'cyberpunk',
    label: 'Cyberpunk',
    emoji: '⚡',
    category: 'featured',
    mode: 'dark',
    color: 'fuchsia',
    tint: 'cool',
    font: 'mono',
    radius: 0.125,
  },
  {
    key: 'forest',
    label: 'Forest',
    emoji: '🌿',
    category: 'featured',
    mode: 'light',
    color: 'emerald',
    tint: 'warm',
    font: 'serif',
    radius: 0.5,
  },
  {
    key: 'ocean',
    label: 'Ocean',
    emoji: '🌊',
    category: 'featured',
    mode: 'dark',
    color: 'cyan',
    tint: 'cool',
    font: 'sans',
    radius: 0.5,
  },
  {
    key: 'pastel',
    label: 'Pastel',
    emoji: '🌸',
    category: 'featured',
    mode: 'light',
    color: 'rose',
    tint: 'pure',
    font: 'sans',
    radius: 0.875,
  },
  {
    key: 'mono',
    label: 'Mono',
    emoji: '◼',
    category: 'editorial',
    mode: 'light',
    color: 'neutral',
    tint: 'pure',
    font: 'mono',
    radius: 0,
  },
  {
    key: 'brutalist',
    label: 'Brutalist',
    emoji: '▢',
    category: 'editorial',
    mode: 'light',
    color: 'neutral',
    tint: 'pure',
    font: 'mono',
    radius: 0,
  },
  {
    key: 'notebook',
    label: 'Notebook',
    emoji: '📓',
    category: 'editorial',
    mode: 'light',
    color: 'stone',
    tint: 'warm',
    font: 'serif',
    radius: 0.25,
  },
  {
    key: 'vintage',
    label: 'Vintage',
    emoji: '📜',
    category: 'editorial',
    mode: 'light',
    color: 'amber',
    tint: 'warm',
    font: 'serif',
    radius: 0.375,
  },
  {
    key: 'caffeine',
    label: 'Caffeine',
    emoji: '☕',
    category: 'editorial',
    mode: 'light',
    color: 'orange',
    tint: 'warm',
    font: 'serif',
    radius: 0.5,
  },
  {
    key: 'marble',
    label: 'Marble',
    emoji: '🏛',
    category: 'editorial',
    mode: 'light',
    color: 'stone',
    tint: 'pure',
    font: 'serif',
    radius: 0.25,
  },
  {
    key: 'retro',
    label: 'Retro',
    emoji: '🎮',
    category: 'bold',
    mode: 'dark',
    color: 'lime',
    tint: 'cool',
    font: 'mono',
    radius: 0,
  },
  {
    key: 'tangerine',
    label: 'Tangerine',
    emoji: '🍊',
    category: 'bold',
    mode: 'light',
    color: 'orange',
    tint: 'pure',
    font: 'sans',
    radius: 0.75,
  },
  {
    key: 'ember',
    label: 'Ember',
    emoji: '🔥',
    category: 'bold',
    mode: 'dark',
    color: 'red',
    tint: 'warm',
    font: 'sans',
    radius: 0.375,
  },
  {
    key: 'tropical',
    label: 'Tropical',
    emoji: '🌴',
    category: 'bold',
    mode: 'light',
    color: 'teal',
    tint: 'cool',
    font: 'sans',
    radius: 0.625,
  },
  {
    key: 'midnight',
    label: 'Midnight',
    emoji: '🌃',
    category: 'cool',
    mode: 'dark',
    color: 'indigo',
    tint: 'cool',
    font: 'sans',
    radius: 0.5,
  },
  {
    key: 'cosmic',
    label: 'Cosmic',
    emoji: '🌌',
    category: 'cool',
    mode: 'dark',
    color: 'violet',
    tint: 'cool',
    font: 'sans',
    radius: 0.625,
  },
  {
    key: 'rainfall',
    label: 'Rainfall',
    emoji: '🌧',
    category: 'cool',
    mode: 'dark',
    color: 'sky',
    tint: 'cool',
    font: 'sans',
    radius: 0.5,
  },
  {
    key: 'amethyst',
    label: 'Amethyst',
    emoji: '💜',
    category: 'cool',
    mode: 'dark',
    color: 'purple',
    tint: 'cool',
    font: 'sans',
    radius: 0.625,
  },
  {
    key: 'sage',
    label: 'Sage',
    emoji: '🌱',
    category: 'soft',
    mode: 'light',
    color: 'emerald',
    tint: 'warm',
    font: 'serif',
    radius: 0.75,
  },
  {
    key: 'peach',
    label: 'Peach',
    emoji: '🍑',
    category: 'soft',
    mode: 'light',
    color: 'amber',
    tint: 'warm',
    font: 'sans',
    radius: 0.875,
  },
  {
    key: 'quartz',
    label: 'Quartz',
    emoji: '💎',
    category: 'soft',
    mode: 'light',
    color: 'violet',
    tint: 'cool',
    font: 'sans',
    radius: 0.875,
  },
  {
    key: 'mocha',
    label: 'Mocha',
    emoji: '🌹',
    category: 'soft',
    mode: 'light',
    color: 'rose',
    tint: 'warm',
    font: 'serif',
    radius: 0.5,
  },
]

const FONTS: { key: FontKey; label: string; stack: string }[] = [
  { key: 'sans', label: 'Sans', stack: '"DM Sans", ui-sans-serif, system-ui, sans-serif' },
  { key: 'serif', label: 'Serif', stack: '"Source Serif Pro", ui-serif, Georgia, serif' },
  { key: 'mono', label: 'Mono', stack: '"JetBrains Mono", ui-monospace, monospace' },
]

const TINTS: { key: TintKey; label: string; light: string; dark: string }[] = [
  { key: 'pure', label: 'Pure', light: 'oklch(1 0 0)', dark: 'oklch(0.145 0 0)' },
  { key: 'cool', label: 'Cool', light: 'oklch(0.99 0.005 240)', dark: 'oklch(0.16 0.008 250)' },
  { key: 'warm', label: 'Warm', light: 'oklch(0.99 0.005 70)', dark: 'oklch(0.16 0.008 60)' },
]

const STORAGE_KEY = 'uipkge-theme-customize'

const { theme, setTheme } = useTheme()
const preset = ref<PresetKey>('neutral')
const customColor = ref<string>('#ec4899')
const font = ref<FontKey>('sans')
const tint = ref<TintKey>('pure')
const radius = ref(0.3)
const copied = ref(false)
const exported = ref(false)
const themeSearch = ref('')
const sheetOpen = ref(false)

const activeTheme = computed<ThemePreset | null>(() => {
  // Radius isn't part of the preset signature any more (it stays
  // user-controlled), so the match only checks the four token axes.
  return (
    THEMES.find(
      (t) => t.mode === theme.value && t.color === preset.value && t.tint === tint.value && t.font === font.value,
    ) ?? null
  )
})

const filteredThemes = computed(() => {
  const q = themeSearch.value.trim().toLowerCase()
  if (!q) return THEMES
  return THEMES.filter((t) => t.label.toLowerCase().includes(q) || t.key.includes(q))
})

const themesByCategory = computed<{ key: CategoryKey; label: string; items: ThemePreset[] }[]>(() => {
  const order: CategoryKey[] = ['featured', 'editorial', 'bold', 'cool', 'soft']
  return order
    .map((c) => ({
      key: c,
      label: CATEGORY_LABELS[c],
      items: filteredThemes.value.filter((t) => t.category === c),
    }))
    .filter((g) => g.items.length > 0)
})

const modes: { value: Mode; label: string; icon: typeof Sun }[] = [
  { value: 'light', label: 'Light', icon: Sun },
  { value: 'dark', label: 'Dark', icon: Moon },
  { value: 'system', label: 'System', icon: Monitor },
]

function isDarkActive(): boolean {
  if (typeof window === 'undefined') return false
  return document.documentElement.classList.contains('dark')
}

function applyPreset(key: PresetKey) {
  if (typeof window === 'undefined') return
  const root = document.documentElement
  if (key === 'custom') {
    root.style.setProperty('--primary', customColor.value)
    root.style.setProperty('--primary-foreground', isDarkActive() ? 'oklch(0.985 0 0)' : 'oklch(0.985 0 0)')
    root.style.setProperty('--ring', customColor.value)
    return
  }
  const found = PRESETS.find((p) => p.key === key)
  if (!found) return
  const tokens = isDarkActive() ? found.dark : found.light
  root.style.setProperty('--primary', tokens.primary)
  root.style.setProperty('--primary-foreground', tokens.primaryForeground)
  root.style.setProperty('--ring', tokens.ring)
}

function applyTint(key: TintKey) {
  if (typeof window === 'undefined') return
  const t = TINTS.find((x) => x.key === key)
  if (!t) return
  document.documentElement.style.setProperty('--background', isDarkActive() ? t.dark : t.light)
}

function applyFont(key: FontKey) {
  if (typeof window === 'undefined') return
  const f = FONTS.find((x) => x.key === key)
  if (!f) return
  document.documentElement.style.setProperty('--font-sans', f.stack)
}

function applyRadius(rem: number) {
  if (typeof window === 'undefined') return
  document.documentElement.style.setProperty('--radius', `${rem}rem`)
}

function save() {
  try {
    localStorage.setItem(
      STORAGE_KEY,
      JSON.stringify({
        preset: preset.value,
        customColor: customColor.value,
        font: font.value,
        tint: tint.value,
        radius: radius.value,
      }),
    )
  } catch {
    // ignore
  }
}

function load() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    if (!raw) return
    const parsed = JSON.parse(raw)
    if (parsed.preset) preset.value = parsed.preset
    if (parsed.customColor) customColor.value = parsed.customColor
    if (parsed.font) font.value = parsed.font
    if (parsed.tint) tint.value = parsed.tint
    if (typeof parsed.radius === 'number') radius.value = parsed.radius
  } catch {
    // ignore
  }
}

function applyAll() {
  applyPreset(preset.value)
  applyTint(tint.value)
  applyFont(font.value)
  applyRadius(radius.value)
}

function applyTheme(t: ThemePreset) {
  // Themes drive mode / color / tint / font. Radius is treated as a
  // user-controlled value (default 0.3) and is not changed by presets.
  setTheme(t.mode)
  preset.value = t.color
  tint.value = t.tint
  font.value = t.font
}

function applyRandomTheme() {
  const candidates = THEMES.filter((t) => t.key !== activeTheme.value?.key)
  const pick = candidates[Math.floor(Math.random() * candidates.length)]
  if (pick) applyTheme(pick)
}

function reset() {
  preset.value = 'neutral'
  customColor.value = '#ec4899'
  font.value = 'sans'
  tint.value = 'pure'
  radius.value = 0.3
  const root = document.documentElement
  ;['--primary', '--primary-foreground', '--ring', '--background', '--font-sans', '--radius'].forEach((p) =>
    root.style.removeProperty(p),
  )
  try {
    localStorage.removeItem(STORAGE_KEY)
  } catch {
    // ignore
  }
}

function buildCss(): string {
  const found = PRESETS.find((p) => p.key === preset.value) ?? PRESETS[0]
  const isCustom = preset.value === 'custom'
  const tokens = isDarkActive() ? found.dark : found.light
  const t = TINTS.find((x) => x.key === tint.value) ?? TINTS[0]
  const f = FONTS.find((x) => x.key === font.value) ?? FONTS[0]
  const primary = isCustom ? customColor.value : tokens.primary
  const primaryFg = isCustom ? 'oklch(0.985 0 0)' : tokens.primaryForeground
  const ring = isCustom ? customColor.value : tokens.ring
  return `:root {
  --background: ${isDarkActive() ? t.dark : t.light};
  --primary: ${primary};
  --primary-foreground: ${primaryFg};
  --ring: ${ring};
  --radius: ${radius.value}rem;
  --font-sans: ${f.stack};
}`
}

async function copyCss() {
  try {
    await navigator.clipboard.writeText(buildCss())
    copied.value = true
    setTimeout(() => (copied.value = false), 1600)
  } catch {
    // ignore
  }
}

function exportJson() {
  const blob = new Blob(
    [
      JSON.stringify(
        {
          preset: preset.value,
          customColor: customColor.value,
          font: font.value,
          tint: tint.value,
          radius: radius.value,
          css: buildCss(),
        },
        null,
        2,
      ),
    ],
    { type: 'application/json' },
  )
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'theme.json'
  a.click()
  URL.revokeObjectURL(url)
  exported.value = true
  setTimeout(() => (exported.value = false), 1600)
}

watch([preset, customColor], () => {
  applyPreset(preset.value)
  save()
})
watch(font, (k) => {
  applyFont(k)
  save()
})
watch(tint, (k) => {
  applyTint(k)
  save()
})
watch(radius, (r) => {
  applyRadius(r)
  save()
})

watch(theme, () => {
  setTimeout(() => {
    applyPreset(preset.value)
    applyTint(tint.value)
  }, 0)
})

// Smoothly fade color changes on the whole document. Toggled briefly
// during apply* so users don't see a hard snap between themes.
function pulseTransition() {
  if (typeof document === 'undefined') return
  const root = document.documentElement
  root.style.transition = 'background-color 240ms ease, color 240ms ease'
  window.setTimeout(() => {
    root.style.transition = ''
  }, 300)
}

watch([preset, customColor, font, tint, radius, theme], pulseTransition)

function onKeydown(e: KeyboardEvent) {
  // Cmd/Ctrl + J -> toggle the customizer
  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
    e.preventDefault()
    sheetOpen.value = !sheetOpen.value
  }
}

onMounted(() => {
  load()
  applyAll()
  if (typeof window !== 'undefined') window.addEventListener('keydown', onKeydown)
})

onUnmounted(() => {
  if (typeof window !== 'undefined') window.removeEventListener('keydown', onKeydown)
})

const sliderModel = computed({
  get: () => [radius.value],
  set: ([v]) => {
    radius.value = v
  },
})
</script>

<template>
  <Sheet v-model:open="sheetOpen">
    <SheetTrigger as-child>
      <Button variant="outline" size="sm" class="gap-2">
        <Palette class="size-4" />
        <span class="hidden sm:inline">Customize</span>
        <kbd class="bg-muted text-muted-foreground hidden rounded px-1 py-0.5 text-[10px] font-medium sm:inline-block"
          >⌘J</kbd
        >
      </Button>
    </SheetTrigger>
    <SheetContent side="right" class="flex w-full flex-col gap-0 p-0 sm:max-w-md">
      <SheetHeader class="border-b px-6 py-4">
        <div class="flex items-center justify-between gap-3">
          <SheetTitle class="flex items-center gap-2 text-base"> <Palette class="size-4" /> Customize </SheetTitle>
          <!-- Active theme chip -->
          <span
            v-if="activeTheme"
            class="bg-muted text-foreground inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium"
          >
            <span class="text-[13px] leading-none">{{ activeTheme.emoji }}</span>
            {{ activeTheme.label }}
          </span>
          <span v-else class="text-muted-foreground bg-muted/50 rounded-full px-2 py-0.5 text-[11px] font-medium">
            Custom
          </span>
        </div>
        <SheetDescription class="text-xs">
          Live-edit tokens. Changes write to <code class="font-mono">:root</code> and persist locally.
        </SheetDescription>
        <!-- Quick actions -->
        <div class="mt-2 flex gap-2">
          <Button variant="outline" size="xs" class="gap-1.5" @click="applyRandomTheme">
            <Shuffle class="size-3" /> Surprise me
          </Button>
        </div>
      </SheetHeader>
      <div class="flex-1 overflow-y-auto px-6 py-5">
        <div class="space-y-6">
          <!-- Curated themes -->
          <div>
            <div class="mb-2 flex items-baseline justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">Themes</span>
              <span class="text-muted-foreground text-[10px]">
                {{ filteredThemes.length }}<span v-if="themeSearch"> / {{ THEMES.length }}</span> presets
              </span>
            </div>

            <!-- Search -->
            <div class="relative mb-3">
              <input
                v-model="themeSearch"
                type="search"
                placeholder="Search themes..."
                class="border-input bg-background focus-visible:ring-ring h-8 w-full rounded-md border pr-2 pl-7 text-xs outline-none focus-visible:ring-2"
              />
              <svg
                viewBox="0 0 24 24"
                class="text-muted-foreground absolute top-1/2 left-2 size-3.5 -translate-y-1/2"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <circle cx="11" cy="11" r="7" />
                <path d="m21 21-4.3-4.3" />
              </svg>
            </div>

            <!-- Categorized groups -->
            <div class="space-y-4">
              <div v-for="group in themesByCategory" :key="group.key">
                <div class="text-muted-foreground/70 mb-1.5 text-[10px] font-medium tracking-wider uppercase">
                  {{ group.label }}
                </div>
                <div class="grid grid-cols-3 gap-2">
                  <button
                    v-for="t in group.items"
                    :key="t.key"
                    type="button"
                    :title="`${t.mode} · ${t.color} · ${t.font} · r=${t.radius}`"
                    :aria-pressed="activeTheme?.key === t.key"
                    :class="[
                      'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
                      activeTheme?.key === t.key
                        ? 'ring-ring ring-offset-background border-transparent ring-2 ring-offset-2'
                        : 'hover:scale-[1.03] hover:shadow-md',
                    ]"
                    @click="applyTheme(t)"
                  >
                    <!-- Mini-preview window -->
                    <div
                      class="relative h-14 px-2 py-1.5"
                      :style="{
                        background: (TINTS.find((x) => x.key === t.tint) || {})[t.mode === 'dark' ? 'dark' : 'light'],
                        color: t.mode === 'dark' ? 'oklch(0.985 0 0)' : 'oklch(0.205 0 0)',
                      }"
                    >
                      <!-- Top row: dot + brand emoji -->
                      <div class="flex items-center justify-between">
                        <div class="flex gap-0.5">
                          <span class="size-1.5 rounded-full opacity-40" :style="{ background: 'currentColor' }" />
                          <span class="size-1.5 rounded-full opacity-25" :style="{ background: 'currentColor' }" />
                          <span class="size-1.5 rounded-full opacity-15" :style="{ background: 'currentColor' }" />
                        </div>
                        <span class="text-[10px] leading-none">{{ t.emoji }}</span>
                      </div>
                      <!-- Mini button + chip preview -->
                      <div class="mt-2 flex items-center gap-1">
                        <span
                          class="inline-block h-3 px-1.5 text-[8px] leading-3 font-semibold"
                          :style="{
                            background: PRESETS.find((p) => p.key === t.color)?.swatch,
                            color: 'oklch(0.985 0 0)',
                            borderRadius: `${Math.min(t.radius, 0.5)}rem`,
                            fontFamily: FONTS.find((f) => f.key === t.font)?.stack,
                          }"
                          >Aa</span
                        >
                        <span
                          class="block h-1 flex-1 rounded-full opacity-30"
                          :style="{ background: 'currentColor' }"
                        />
                      </div>
                      <!-- Lower text bar -->
                      <div class="mt-1.5 flex gap-1">
                        <span class="block h-0.5 w-3 rounded-full opacity-20" :style="{ background: 'currentColor' }" />
                        <span class="block h-0.5 w-5 rounded-full opacity-15" :style="{ background: 'currentColor' }" />
                      </div>
                    </div>
                    <!-- Label strip -->
                    <div class="bg-muted/40 flex items-center justify-between px-2 py-1">
                      <span class="text-[10px] leading-none font-medium">{{ t.label }}</span>
                      <Check v-if="activeTheme?.key === t.key" class="text-primary size-3" />
                    </div>
                  </button>
                </div>
              </div>
              <div v-if="filteredThemes.length === 0" class="text-muted-foreground py-6 text-center text-xs">
                No themes match "<span class="font-mono">{{ themeSearch }}</span
                >"
              </div>
            </div>
          </div>

          <!-- Mode -->
          <div>
            <div class="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Mode</div>
            <div class="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
              <button
                v-for="m in modes"
                :key="m.value"
                type="button"
                :aria-pressed="theme === m.value"
                :class="[
                  'flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-medium transition-colors',
                  theme === m.value ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                ]"
                @click="setTheme(m.value)"
              >
                <component :is="m.icon" class="size-3.5" />
                {{ m.label }}
              </button>
            </div>
          </div>

          <!-- Color -->
          <div>
            <div class="mb-2 flex items-baseline justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">Color</span>
              <span class="text-muted-foreground text-[10px]">{{ PRESETS.length }} options</span>
            </div>
            <div class="grid grid-cols-10 gap-1.5">
              <button
                v-for="p in PRESETS"
                :key="p.key"
                type="button"
                :aria-label="p.label"
                :aria-pressed="preset === p.key"
                :title="p.label"
                :class="[
                  'group ring-offset-background relative aspect-square rounded-md transition-all',
                  preset === p.key ? 'ring-ring ring-2 ring-offset-2' : 'hover:scale-110',
                ]"
                :style="{ background: p.swatch }"
                @click="preset = p.key"
              >
                <Check v-if="preset === p.key" class="absolute inset-0 m-auto size-3 text-white mix-blend-difference" />
              </button>

              <!-- Custom color slot -->
              <label
                :class="[
                  'relative flex aspect-square cursor-pointer items-center justify-center rounded-md border transition-all',
                  preset === 'custom'
                    ? 'ring-ring ring-offset-background border-transparent ring-2 ring-offset-2'
                    : 'border-dashed hover:scale-110',
                ]"
                :style="preset === 'custom' ? { background: customColor } : {}"
                :aria-label="'Custom color'"
                :title="'Custom color'"
              >
                <input type="color" v-model="customColor" class="sr-only" @input="preset = 'custom'" />
                <Pipette v-if="preset !== 'custom'" class="text-muted-foreground size-3" />
                <Check v-else class="size-3 text-white mix-blend-difference" />
              </label>
            </div>
          </div>

          <!-- Surface tint -->
          <div>
            <div class="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Surface</div>
            <div class="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
              <button
                v-for="t in TINTS"
                :key="t.key"
                type="button"
                :aria-pressed="tint === t.key"
                :class="[
                  'rounded px-2 py-1.5 text-xs font-medium transition-colors',
                  tint === t.key ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                ]"
                @click="tint = t.key"
              >
                {{ t.label }}
              </button>
            </div>
          </div>

          <!-- Font -->
          <div>
            <div class="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Font</div>
            <div class="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
              <button
                v-for="f in FONTS"
                :key="f.key"
                type="button"
                :aria-pressed="font === f.key"
                :class="[
                  'rounded px-2 py-1.5 text-xs font-medium transition-colors',
                  font === f.key ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                ]"
                :style="{ fontFamily: f.stack }"
                @click="font = f.key"
              >
                {{ f.label }}
              </button>
            </div>
          </div>

          <!-- Radius -->
          <div>
            <div class="mb-2 flex items-baseline justify-between">
              <span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">Radius</span>
              <span class="text-muted-foreground font-mono text-[10px]">{{ radius.toFixed(2) }}rem</span>
            </div>
            <Slider v-model="sliderModel" :min="0" :max="1" :step="0.05" />
            <div class="text-muted-foreground mt-1 flex justify-between text-[10px]">
              <span>0</span>
              <span>0.5</span>
              <span>1</span>
            </div>
          </div>

          <!-- Live preview -->
          <div>
            <div class="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Preview</div>
            <div class="bg-card space-y-2.5 rounded-lg border p-3">
              <div class="flex items-center gap-2">
                <Button size="sm" class="text-xs">Primary</Button>
                <Button size="sm" variant="outline" class="text-xs">Outline</Button>
                <span class="bg-primary/10 text-primary rounded-md px-2 py-0.5 text-[10px] font-medium">Badge</span>
              </div>
              <div
                class="ring-ring/40 bg-background border-input flex h-8 items-center rounded-md border px-2 text-xs focus-within:ring-2"
              >
                Input sample
              </div>
              <p class="text-muted-foreground text-[11px] leading-relaxed">
                The quick brown fox jumps over the lazy dog.
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- Footer actions (sticky bottom) -->
      <div class="bg-background/95 flex gap-2 border-t px-6 py-3 backdrop-blur">
        <Button variant="ghost" size="sm" class="flex-1 gap-1.5" @click="reset">
          <RotateCcw class="size-3.5" /> Reset
        </Button>
        <Button variant="outline" size="sm" class="flex-1 gap-1.5" @click="exportJson">
          <Download class="size-3.5" />
          {{ exported ? 'Saved' : 'Export' }}
        </Button>
        <Button variant="default" size="sm" class="flex-1 gap-1.5" @click="copyCss">
          <Check v-if="copied" class="size-3.5" />
          <Copy v-else class="size-3.5" />
          {{ copied ? 'Copied' : 'Copy CSS' }}
        </Button>
      </div>
    </SheetContent>
  </Sheet>
</template>

```

## theme-river

- type: `registry:ui`
- description: Theme-river (streamgraph) wrapper around Apache ECharts. Stacked areas centred on a baseline along a time axis — good for topic-volume drift over time.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/theme-river/ThemeRiver.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { ThemeRiverChart } from 'echarts/charts'
import { SingleAxisComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
  mergeOptionBlock,
} from '../useChartTheme'

use([CanvasRenderer, ThemeRiverChart, SingleAxisComponent, TooltipComponent, LegendComponent])

interface Props {
  /** `[time, value, series]` tuples. Time can be a date string or number. */
  data: [string | number, number, string][]
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  height: 320,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'themeRiver',
      data: props.data,
      label: { show: false },
      emphasis: { itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.2)' } },
    },
  ]

  const userOption: any = props.option ?? {}
  const {
    series: userSeries,
    singleAxis: userSingleAxis,
    tooltip: userTooltip,
    legend: userLegend,
    ...userRest
  } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: mergeOptionBlock(
      {
        trigger: 'axis',
        axisPointer: { type: 'line', lineStyle: { color: chartAxisColor.value, opacity: 0.8 } },
        backgroundColor: chartTooltipBg.value,
        borderColor: chartTooltipBorder.value,
        textStyle: { color: chartTooltipText.value, fontSize: 12 },
      },
      userTooltip,
    ),
    legend:
      userLegend?.show === false
        ? undefined
        : mergeOptionBlock(
            {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: chartTextColor.value },
            },
            userLegend,
          ),
    singleAxis: mergeOptionBlock(
      {
        top: 12,
        bottom: 40,
        type: 'time',
        axisTick: { show: false },
        axisLabel: { color: chartTextColor.value, fontSize: 11 },
        axisLine: { lineStyle: { color: chartAxisColor.value } },
      },
      userSingleAxis,
    ),
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/theme-river/index.ts`

```ts
export { default as ThemeRiver } from './ThemeRiver.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## theme-switch

- type: `registry:ui`
- description: Light / dark / system theme toggle — drop in the header. Seven visual variants: `cards`, `icons`, `icon-only`, `dropdown`, `pill`, `pill-4`, and `switch`. Persists choice to `localStorage` and respects `prefers-color-scheme` for `system`.
- npm deps: `lucide-vue-next`
- registry deps: `section-card`, `dropdown-menu`

### `packages/registry-vue/components/theme-switch/ThemeSwitch.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { ChevronDown, Monitor, Moon, Palette, Sparkles, Sun } from 'lucide-vue-next'
import { SectionCard } from '@/components/ui/section-card'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

type Theme = 'light' | 'dark' | 'system' | 'black'
type Variant = 'cards' | 'icons' | 'icon-only' | 'dropdown' | 'pill' | 'pill-4' | 'switch'

const ICONS: Record<Theme, any> = {
  light: Sun,
  dark: Moon,
  system: Monitor,
  black: Sparkles,
}

const LABELS: Record<Theme, string> = {
  light: 'Light',
  dark: 'Dark',
  system: 'System',
  black: 'Black',
}

const VARIANT_OPTIONS: Record<Variant, Theme[]> = {
  cards: ['light', 'dark', 'system'],
  icons: ['light', 'dark', 'system'],
  'icon-only': ['light', 'dark'],
  dropdown: ['light', 'dark', 'system'],
  pill: ['light', 'dark', 'system'],
  'pill-4': ['system', 'light', 'dark', 'black'],
  switch: ['light', 'dark'],
}

const props = withDefaults(
  defineProps<{
    modelValue: Theme
    variant?: Variant
    title?: string
    description?: string
    class?: string
  }>(),
  { variant: 'cards' },
)

const emit = defineEmits<{ 'update:modelValue': [Theme] }>()

const options = computed(() => VARIANT_OPTIONS[props.variant])
const activeIndex = computed(() => {
  const i = options.value.indexOf(props.modelValue)
  return i === -1 ? 0 : i
})

const indicatorStyle = computed(() => ({
  width: `calc((100% - 4px) / ${options.value.length})`,
  transform: `translateX(calc(${activeIndex.value} * 100%))`,
}))

function set(t: Theme) {
  emit('update:modelValue', t)
}
function cycle() {
  const next = options.value[(activeIndex.value + 1) % options.value.length]
  if (next) emit('update:modelValue', next)
}
</script>

<template>
  <!-- Cards: full SectionCard with 3-button grid (default) -->
  <SectionCard
    v-if="variant === 'cards'"
    :title="title ?? 'Appearance'"
    :description="description ?? 'Choose your interface theme.'"
    :class="$props.class"
  >
    <template #header-action>
      <Palette class="text-muted-foreground size-5" />
    </template>
    <div class="grid grid-cols-3 gap-2">
      <button
        type="button"
        v-for="t in options"
        :key="t"
        class="focus-visible:ring-ring rounded-md border p-3 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:outline-none"
        :class="
          modelValue === t ? 'border-primary ring-primary bg-primary/5 ring-1' : 'border-border hover:bg-muted/50'
        "
        @click="set(t)"
      >
        <component :is="ICONS[t]" class="text-muted-foreground mb-2 size-4" aria-hidden="true" />
        <p class="text-xs font-medium">{{ LABELS[t] }}</p>
      </button>
    </div>
  </SectionCard>

  <!-- Icons: compact 3-icon segmented row, no labels -->
  <div
    v-else-if="variant === 'icons'"
    role="radiogroup"
    :aria-label="title ?? 'Theme'"
    :class="['border-border bg-card inline-flex items-center gap-0.5 rounded-md border p-0.5', $props.class]"
  >
    <button
      type="button"
      v-for="t in options"
      :key="t"
      role="radio"
      :aria-checked="modelValue === t"
      :aria-label="LABELS[t]"
      class="focus-visible:ring-ring grid size-7 place-items-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
      :class="
        modelValue === t
          ? 'bg-primary text-primary-foreground'
          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
      "
      @click="set(t)"
    >
      <component :is="ICONS[t]" class="size-4" aria-hidden="true" />
    </button>
  </div>

  <!-- Icon-only: header-grade icon button. No border, ghost background,
       rounded-lg to match adjacent header affordances (notification
       bell, profile avatar). The previous `rounded-full border bg-card`
       coin-shape stood out from typical icon-button row layouts; if you
       need that look, pass `class="rounded-full border border-border bg-card"`
       and it'll override.

       Dropped the rotate+fade Transition that the previous version
       wrapped the icon in. `mode="out-in"` with opacity-0 on both the
       enter-from and leave-to states left a frame where the button was
       empty -- visible as a flicker that occasionally rendered as "no
       icon at all" on slower devices. A direct swap reads cleaner. -->
  <button
    type="button"
    v-else-if="variant === 'icon-only'"
    :aria-label="LABELS[modelValue]"
    :class="[
      'text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none',
      $props.class,
    ]"
    @click="cycle"
  >
    <component :is="ICONS[modelValue]" class="size-4" aria-hidden="true" />
  </button>

  <!-- Dropdown: trigger button → menu of states -->
  <DropdownMenu v-else-if="variant === 'dropdown'">
    <DropdownMenuTrigger as-child>
      <button
        type="button"
        :class="[
          'border-border bg-card hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm transition focus-visible:ring-2 focus-visible:outline-none',
          $props.class,
        ]"
      >
        <component :is="ICONS[modelValue]" class="size-4" aria-hidden="true" />
        <span>{{ LABELS[modelValue] }}</span>
        <ChevronDown class="size-3 opacity-60" aria-hidden="true" />
      </button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end" class="min-w-[140px]">
      <DropdownMenuItem v-for="t in options" :key="t" @click="set(t)">
        <component :is="ICONS[t]" class="mr-2 size-4" aria-hidden="true" />
        <span>{{ LABELS[t] }}</span>
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>

  <!-- Pill / Pill-4: equal segments with sliding indicator -->
  <div
    v-else-if="variant === 'pill' || variant === 'pill-4'"
    role="radiogroup"
    :aria-label="title ?? 'Theme'"
    :class="['border-border bg-card relative inline-flex w-full max-w-md rounded-full border p-0.5', $props.class]"
  >
    <span
      aria-hidden
      class="bg-primary pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 rounded-full transition-transform duration-300 ease-out"
      :style="indicatorStyle"
    />
    <button
      type="button"
      v-for="t in options"
      :key="t"
      role="radio"
      :aria-checked="modelValue === t"
      :aria-label="LABELS[t]"
      class="focus-visible:ring-ring relative z-[1] inline-flex h-7 flex-1 items-center justify-center gap-1.5 rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
      :class="modelValue === t ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'"
      @click="set(t)"
    >
      <component :is="ICONS[t]" class="size-3.5" aria-hidden="true" />
      <span>{{ LABELS[t] }}</span>
    </button>
  </div>

  <!-- Switch: iOS-style 2-state toggle with thumb that slides -->
  <button
    type="button"
    v-else-if="variant === 'switch'"
    role="switch"
    :aria-checked="modelValue === 'dark'"
    :aria-label="LABELS[modelValue]"
    :class="[
      'border-border focus-visible:ring-ring relative inline-flex h-8 w-16 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:outline-none',
      modelValue === 'dark' ? 'bg-zinc-900' : 'bg-amber-100',
      $props.class,
    ]"
    @click="set(modelValue === 'dark' ? 'light' : 'dark')"
  >
    <Sun
      class="absolute left-1.5 size-4 text-amber-500 transition-opacity"
      :class="modelValue === 'dark' ? 'opacity-30' : 'opacity-100'"
      aria-hidden="true"
    />
    <Moon
      class="absolute right-1.5 size-4 text-zinc-300 transition-opacity"
      :class="modelValue === 'light' ? 'opacity-30' : 'opacity-100'"
      aria-hidden="true"
    />
    <span
      aria-hidden
      class="bg-card border-border absolute size-6 rounded-full border shadow transition-transform duration-300 ease-out"
      :style="{ transform: `translateX(${modelValue === 'dark' ? '36px' : '4px'})` }"
    />
  </button>
</template>

```

### `packages/registry-vue/components/theme-switch/index.ts`

```ts
export { default as ThemeSwitch } from './ThemeSwitch.vue'

```

## time-picker

- type: `registry:ui`
- description: Standalone time input — hours, minutes, optional seconds, and 12h/24h modes. Pairs with Date Picker for full datetime entry.
- npm deps: `lucide-vue-next`
- registry deps: `button`, `popover`, `scroll-area`

### `packages/registry-vue/components/time-picker/TimeColumns.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { ScrollArea } from '@/components/ui/scroll-area'

export interface TimeParts {
  hour24: number
  minute: number
  second: number
}

export type TimeFormat = 'HH:mm' | 'HH:mm:ss' | 'hh:mm A'

interface Props {
  /** Time value. HH:mm or HH:mm:ss depending on format. Empty = no selection. */
  modelValue?: string
  use24Hour?: boolean
  use12Hours?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  /** 24h HH:mm or HH:mm:ss. */
  minTime?: string
  /** 24h HH:mm or HH:mm:ss. */
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  /** Auto-scroll active rows into view when this becomes true. */
  visible?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  use24Hour: false,
  use12Hours: false,
  minuteStep: 5,
  hourStep: 1,
  secondStep: 1,
  format: 'HH:mm',
  hideDisabledOptions: false,
  visible: true,
})

const emits = defineEmits<{
  'update:modelValue': [value: string]
}>()

function parse(v: string): TimeParts | null {
  if (!v) return null
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(v.trim())
  if (!m) return null
  const h = Number(m[1])
  const min = Number(m[2])
  const s = m[3] ? Number(m[3]) : 0
  if (
    Number.isNaN(h) ||
    Number.isNaN(min) ||
    Number.isNaN(s) ||
    h < 0 ||
    h > 23 ||
    min < 0 ||
    min > 59 ||
    s < 0 ||
    s > 59
  )
    return null
  return { hour24: h, minute: min, second: s }
}

function format24(p: TimeParts) {
  if (props.format === 'HH:mm:ss') {
    return `${String(p.hour24).padStart(2, '0')}:${String(p.minute).padStart(2, '0')}:${String(p.second).padStart(2, '0')}`
  }
  return `${String(p.hour24).padStart(2, '0')}:${String(p.minute).padStart(2, '0')}`
}

function toMinutes(p: TimeParts) {
  return p.hour24 * 60 + p.minute + p.second / 60
}

const parts = ref<TimeParts | null>(parse(props.modelValue))
watch(
  () => props.modelValue,
  (v) => {
    parts.value = parse(v)
  },
)

const showSeconds = computed(() => props.format === 'HH:mm:ss')

const effective12Hour = computed(() => {
  if (props.format === 'hh:mm A') return true
  if (props.use12Hours) return true
  return !props.use24Hour
})

const hour12 = computed(() => {
  if (!parts.value) return null
  const h = parts.value.hour24 % 12
  return h === 0 ? 12 : h
})
const period = computed(() => (parts.value && parts.value.hour24 >= 12 ? 'PM' : 'AM'))

const minBound = computed(() => parse(props.minTime ?? '') ?? null)
const maxBound = computed(() => parse(props.maxTime ?? '') ?? null)

function withinBounds(p: TimeParts) {
  const m = toMinutes(p)
  if (minBound.value && m < toMinutes(minBound.value)) return false
  if (maxBound.value && m > toMinutes(maxBound.value)) return false
  return true
}

const disabledHoursSet = computed(() => {
  const arr = props.disabledHours ? props.disabledHours() : []
  return new Set(arr)
})

const disabledMinutesSet = computed(() => {
  const h = parts.value?.hour24 ?? 0
  const arr = props.disabledMinutes ? props.disabledMinutes(h) : []
  return new Set(arr)
})

const disabledSecondsSet = computed(() => {
  const h = parts.value?.hour24 ?? 0
  const m = parts.value?.minute ?? 0
  const arr = props.disabledSeconds ? props.disabledSeconds(h, m) : []
  return new Set(arr)
})

function isHourDisabledItem(h: number) {
  if (disabledHoursSet.value.has(h)) return true
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  if (effective12Hour.value) {
    const isPM = period.value === 'PM'
    return !withinBounds({ hour24: (h % 12) + (isPM ? 12 : 0), minute: cur.minute, second: cur.second })
  }
  return !withinBounds({ hour24: h, minute: cur.minute, second: cur.second })
}

function isMinuteDisabledItem(m: number) {
  if (disabledMinutesSet.value.has(m)) return true
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  return !withinBounds({ hour24: cur.hour24, minute: m, second: cur.second })
}

function isSecondDisabledItem(s: number) {
  if (disabledSecondsSet.value.has(s)) return true
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  return !withinBounds({ hour24: cur.hour24, minute: cur.minute, second: s })
}

const hours12List = computed(() => {
  const step = Math.max(1, props.hourStep)
  const list = Array.from({ length: 12 }, (_, i) => i + 1).filter((h) => (h - 1) % step === 0)
  if (!props.hideDisabledOptions) return list
  return list.filter((h) => !isHourDisabledItem(h))
})

const hours24List = computed(() => {
  const step = Math.max(1, props.hourStep)
  const list = Array.from({ length: 24 }, (_, i) => i).filter((h) => h % step === 0)
  if (!props.hideDisabledOptions) return list
  return list.filter((h) => !isHourDisabledItem(h))
})

const minutesList = computed(() => {
  const step = Math.max(1, Math.min(60, props.minuteStep))
  const list = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step)
  if (!props.hideDisabledOptions) return list
  return list.filter((m) => !isMinuteDisabledItem(m))
})

const secondsList = computed(() => {
  const step = Math.max(1, Math.min(60, props.secondStep))
  const list = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step)
  if (!props.hideDisabledOptions) return list
  return list.filter((s) => !isSecondDisabledItem(s))
})

function commit(p: TimeParts) {
  if (!withinBounds(p)) return
  parts.value = p
  emits('update:modelValue', format24(p))
}

function pickHour12(h: number) {
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  const isPM = period.value === 'PM'
  commit({ hour24: (h % 12) + (isPM ? 12 : 0), minute: cur.minute, second: cur.second })
}

function pickHour24(h: number) {
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  commit({ hour24: h, minute: cur.minute, second: cur.second })
}

function pickMinute(m: number) {
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  commit({ hour24: cur.hour24, minute: m, second: cur.second })
}

function pickSecond(s: number) {
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  commit({ hour24: cur.hour24, minute: cur.minute, second: s })
}

function pickPeriod(p: 'AM' | 'PM') {
  const cur = parts.value ?? { hour24: 0, minute: 0, second: 0 }
  const h12 = cur.hour24 % 12
  commit({ hour24: h12 + (p === 'PM' ? 12 : 0), minute: cur.minute, second: cur.second })
}

const hourCol = ref<HTMLElement | null>(null)
const minCol = ref<HTMLElement | null>(null)
const secCol = ref<HTMLElement | null>(null)
watch(
  () => props.visible,
  (v) => {
    if (!v) return
    nextTick(() => {
      hourCol.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
      minCol.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
      secCol.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
    })
  },
  { immediate: true },
)

function isHourActive(h: number) {
  if (!parts.value) return false
  return effective12Hour.value ? hour12.value === h : parts.value.hour24 === h
}

function isHourDisabled(h: number) {
  if (!props.hideDisabledOptions) return isHourDisabledItem(h)
  return false
}

function isMinuteDisabled(m: number) {
  if (!props.hideDisabledOptions) return isMinuteDisabledItem(m)
  return false
}

function isSecondDisabled(s: number) {
  if (!props.hideDisabledOptions) return isSecondDisabledItem(s)
  return false
}
</script>

<template>
  <div class="flex divide-x" data-uipkge data-slot="time-columns">
    <ScrollArea ref="hourCol" class="h-56">
      <div class="flex w-14 flex-col p-1">
        <button
          v-for="h in effective12Hour ? hours12List : hours24List"
          :key="h"
          type="button"
          :data-active="isHourActive(h)"
          :disabled="isHourDisabled(h)"
          class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
          :class="isHourActive(h) ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
          @click="effective12Hour ? pickHour12(h) : pickHour24(h)"
        >
          {{ String(h).padStart(2, '0') }}
        </button>
      </div>
    </ScrollArea>

    <ScrollArea ref="minCol" class="h-56">
      <div class="flex w-14 flex-col p-1">
        <button
          v-for="m in minutesList"
          :key="m"
          type="button"
          :data-active="parts?.minute === m"
          :disabled="isMinuteDisabled(m)"
          class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
          :class="parts?.minute === m ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
          @click="pickMinute(m)"
        >
          {{ String(m).padStart(2, '0') }}
        </button>
      </div>
    </ScrollArea>

    <ScrollArea v-if="showSeconds" ref="secCol" class="h-56">
      <div class="flex w-14 flex-col p-1">
        <button
          v-for="s in secondsList"
          :key="s"
          type="button"
          :data-active="parts?.second === s"
          :disabled="isSecondDisabled(s)"
          class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent"
          :class="parts?.second === s ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
          @click="pickSecond(s)"
        >
          {{ String(s).padStart(2, '0') }}
        </button>
      </div>
    </ScrollArea>

    <div v-if="effective12Hour" class="flex w-12 flex-col p-1">
      <button
        v-for="p in ['AM', 'PM']"
        :key="p"
        type="button"
        class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
        :class="period === p ? 'bg-primary text-primary-foreground hover:bg-primary' : ''"
        @click="pickPeriod(p as 'AM' | 'PM')"
      >
        {{ p }}
      </button>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/time-picker/TimePicker.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { Clock, X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import TimeColumns, { type TimeFormat } from './TimeColumns.vue'
import { cn } from '@/lib/utils'

export interface TimePreset {
  label: string
  value: string
}

export type TimePickerSize = 'small' | 'middle' | 'large'
export type TimePickerStatus = 'error' | 'warning'

interface Props {
  /** Controlled value as 24h HH:mm or HH:mm:ss. Empty string = no selection. */
  modelValue?: string
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  allowClear?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  /** Backward-compat: when true, render 24-hour selector. */
  use24Hour?: boolean
  /** When true, show AM/PM selector. */
  use12Hours?: boolean
  minTime?: string
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  presets?: TimePreset[]
  size?: TimePickerSize
  status?: TimePickerStatus
  triggerClass?: HTMLAttributes['class']
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: 'Pick a time',
  disabled: false,
  readOnly: false,
  clearable: true,
  allowClear: undefined,
  minuteStep: 5,
  hourStep: 1,
  secondStep: 1,
  use24Hour: false,
  use12Hours: false,
  format: 'HH:mm',
  hideDisabledOptions: false,
  presets: () => [],
  size: 'middle',
})

const emits = defineEmits<{
  'update:modelValue': [value: string]
}>()

const open = ref(false)

const effectiveAllowClear = computed(() => {
  if (props.allowClear !== undefined) return props.allowClear
  return props.clearable
})

function parse(v: string) {
  if (!v) return null
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(v.trim())
  if (!m) return null
  return { hour24: Number(m[1]), minute: Number(m[2]), second: m[3] ? Number(m[3]) : 0 }
}

const parsed = computed(() => parse(props.modelValue))

const effective12Hour = computed(() => {
  if (props.format === 'hh:mm A') return true
  if (props.use12Hours) return true
  return !props.use24Hour
})

function formatDisplay(h: number, m: number, s: number) {
  if (props.format === 'hh:mm A') {
    const h12 = h % 12 === 0 ? 12 : h % 12
    const period = h >= 12 ? 'PM' : 'AM'
    return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')} ${period}`
  }
  if (props.format === 'HH:mm:ss') {
    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
  }
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
}

const display = computed(() => {
  if (!parsed.value) return ''
  const { hour24, minute, second } = parsed.value
  return formatDisplay(hour24, minute, second)
})

function emitTime(v: string) {
  emits('update:modelValue', v)
}

function pickNow() {
  if (props.readOnly) return
  const d = new Date()
  const sStep = Math.max(1, props.secondStep)
  const rawS = d.getSeconds()
  const snappedS = Math.round(rawS / sStep) * sStep
  const secCarry = Math.floor(snappedS / 60)
  const s = snappedS % 60

  const mStep = Math.max(1, props.minuteStep)
  const rawM = d.getMinutes() + secCarry
  const snappedM = Math.round(rawM / mStep) * mStep
  const minCarry = Math.floor(snappedM / 60)
  const min = snappedM % 60

  const h = d.getHours() + minCarry
  const hourStr = String(h).padStart(2, '0')
  const minStr = String(min).padStart(2, '0')
  const secStr = String(s).padStart(2, '0')
  emitTime(props.format === 'HH:mm:ss' ? `${hourStr}:${minStr}:${secStr}` : `${hourStr}:${minStr}`)
}

function applyPreset(preset: TimePreset) {
  if (props.readOnly) return
  emitTime(preset.value)
  open.value = false
}

function clear(event: Event) {
  event.stopPropagation()
  if (props.disabled || props.readOnly) return
  emitTime('')
}

const sizeClasses: Record<TimePickerSize, string> = {
  small: 'h-8 text-xs px-2.5 py-1',
  middle: 'h-9 text-sm px-3 py-1.5',
  large: 'h-11 text-base px-4 py-2',
}

const statusClasses: Record<string, string> = {
  error: 'border-destructive focus-visible:ring-destructive',
  warning: 'border-warning focus-visible:ring-warning',
}

const triggerClasses = computed(() =>
  cn(
    'min-w-[160px] justify-start gap-2 text-left font-normal',
    !parsed.value && 'text-muted-foreground',
    sizeClasses[props.size],
    props.status && statusClasses[props.status],
    props.triggerClass,
    props.class,
  ),
)

// Pulse the columns when reopen happens (passes via prop reactivity).
const columnsVisible = ref(false)
watch(open, (v) => {
  columnsVisible.value = v
})
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        type="button"
        variant="outline"
        :disabled="disabled"
        :class="triggerClasses"
        data-uipkge
        data-slot="time-picker"
      >
        <Clock class="size-4 shrink-0" />
        <span class="flex-1 truncate">{{ display || placeholder }}</span>
        <button
          v-if="effectiveAllowClear && parsed && !disabled && !readOnly"
          type="button"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-5 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
          aria-label="Clear time"
          @click.stop="clear"
        >
          <X class="size-3.5" aria-hidden="true" />
        </button>
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-auto p-0" align="start">
      <div v-if="presets.length" class="flex flex-col gap-0.5 border-b p-2">
        <button
          v-for="p in presets"
          :key="p.label"
          type="button"
          class="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
          @click="applyPreset(p)"
        >
          {{ p.label }}
        </button>
      </div>
      <div class="flex items-center justify-between border-b px-3 py-2">
        <span class="text-muted-foreground text-xs tracking-widest uppercase">Time</span>
        <button
          type="button"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs focus-visible:ring-2 focus-visible:outline-none"
          @click="pickNow"
        >
          Now
        </button>
      </div>
      <TimeColumns
        :model-value="modelValue"
        :use24-hour="use24Hour"
        :use12-hours="use12Hours"
        :minute-step="minuteStep"
        :hour-step="hourStep"
        :second-step="secondStep"
        :min-time="minTime"
        :max-time="maxTime"
        :format="format"
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        :hide-disabled-options="hideDisabledOptions"
        :visible="columnsVisible"
        @update:model-value="emitTime"
      />
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/time-picker/TimeRangePicker.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { Clock, X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import TimeColumns, { type TimeFormat } from './TimeColumns.vue'
import { cn } from '@/lib/utils'

export interface TimeRangePreset {
  label: string
  value: [string, string]
}

export type TimeRangePickerSize = 'small' | 'middle' | 'large'
export type TimeRangePickerStatus = 'error' | 'warning'

interface Props {
  /** Controlled value as [startTime, endTime] in 24h format. */
  modelValue?: [string, string] | null
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  allowClear?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  use24Hour?: boolean
  use12Hours?: boolean
  minTime?: string
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  presets?: TimeRangePreset[]
  size?: TimeRangePickerSize
  status?: TimeRangePickerStatus
  triggerClass?: HTMLAttributes['class']
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  placeholder: 'Pick a time range',
  disabled: false,
  readOnly: false,
  clearable: true,
  allowClear: undefined,
  minuteStep: 5,
  hourStep: 1,
  secondStep: 1,
  use24Hour: false,
  use12Hours: false,
  format: 'HH:mm',
  hideDisabledOptions: false,
  presets: () => [],
  size: 'middle',
})

const emits = defineEmits<{
  'update:modelValue': [value: [string, string] | null]
}>()

const open = ref(false)

const effectiveAllowClear = computed(() => {
  if (props.allowClear !== undefined) return props.allowClear
  return props.clearable
})

function parse(v: string) {
  if (!v) return null
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(v.trim())
  if (!m) return null
  return { hour24: Number(m[1]), minute: Number(m[2]), second: m[3] ? Number(m[3]) : 0 }
}

const startValue = computed(() => props.modelValue?.[0] ?? '')
const endValue = computed(() => props.modelValue?.[1] ?? '')

const startParsed = computed(() => parse(startValue.value))
const endParsed = computed(() => parse(endValue.value))

const effective12Hour = computed(() => {
  if (props.format === 'hh:mm A') return true
  if (props.use12Hours) return true
  return !props.use24Hour
})

function formatDisplay(h: number, m: number, s: number) {
  if (props.format === 'hh:mm A') {
    const h12 = h % 12 === 0 ? 12 : h % 12
    const period = h >= 12 ? 'PM' : 'AM'
    return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')} ${period}`
  }
  if (props.format === 'HH:mm:ss') {
    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
  }
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
}

const display = computed(() => {
  const hasStart = startParsed.value !== null
  const hasEnd = endParsed.value !== null
  if (!hasStart && !hasEnd) return ''
  const startStr = hasStart
    ? formatDisplay(startParsed.value!.hour24, startParsed.value!.minute, startParsed.value!.second)
    : ''
  const endStr = hasEnd ? formatDisplay(endParsed.value!.hour24, endParsed.value!.minute, endParsed.value!.second) : ''
  if (hasStart && hasEnd) return `${startStr} ~ ${endStr}`
  return startStr || endStr
})

function emitRange(start: string, end: string) {
  emits('update:modelValue', [start, end])
}

function emitStart(v: string) {
  emitRange(v, endValue.value || v)
}

function emitEnd(v: string) {
  emitRange(startValue.value || v, v)
}

function pickNow(which: 'start' | 'end') {
  if (props.readOnly) return
  const d = new Date()
  const sStep = Math.max(1, props.secondStep)
  const rawS = d.getSeconds()
  const snappedS = Math.round(rawS / sStep) * sStep
  const secCarry = Math.floor(snappedS / 60)
  const s = snappedS % 60

  const mStep = Math.max(1, props.minuteStep)
  const rawM = d.getMinutes() + secCarry
  const snappedM = Math.round(rawM / mStep) * mStep
  const minCarry = Math.floor(snappedM / 60)
  const min = snappedM % 60

  const h = d.getHours() + minCarry
  const hourStr = String(h).padStart(2, '0')
  const minStr = String(min).padStart(2, '0')
  const secStr = String(s).padStart(2, '0')
  const v = props.format === 'HH:mm:ss' ? `${hourStr}:${minStr}:${secStr}` : `${hourStr}:${minStr}`
  if (which === 'start') emitStart(v)
  else emitEnd(v)
}

function applyPreset(preset: TimeRangePreset) {
  if (props.readOnly) return
  emits('update:modelValue', preset.value)
  open.value = false
}

function clear(event: Event) {
  event.stopPropagation()
  if (props.disabled || props.readOnly) return
  emits('update:modelValue', null)
}

const sizeClasses: Record<TimeRangePickerSize, string> = {
  small: 'h-8 text-xs px-2.5 py-1',
  middle: 'h-9 text-sm px-3 py-1.5',
  large: 'h-11 text-base px-4 py-2',
}

const statusClasses: Record<string, string> = {
  error: 'border-destructive focus-visible:ring-destructive',
  warning: 'border-warning focus-visible:ring-warning',
}

const triggerClasses = computed(() =>
  cn(
    'min-w-[200px] justify-start gap-2 text-left font-normal',
    !display.value && 'text-muted-foreground',
    sizeClasses[props.size],
    props.status && statusClasses[props.status],
    props.triggerClass,
    props.class,
  ),
)

const columnsVisible = ref(false)
watch(open, (v) => {
  columnsVisible.value = v
})
</script>

<template>
  <Popover v-model:open="open">
    <PopoverTrigger as-child>
      <Button
        type="button"
        variant="outline"
        :disabled="disabled"
        :class="triggerClasses"
        data-uipkge
        data-slot="time-range-picker"
      >
        <Clock class="size-4 shrink-0" />
        <span class="flex-1 truncate">{{ display || placeholder }}</span>
        <button
          v-if="effectiveAllowClear && display && !disabled && !readOnly"
          type="button"
          class="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-5 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
          aria-label="Clear time range"
          @click.stop="clear"
        >
          <X class="size-3.5" aria-hidden="true" />
        </button>
      </Button>
    </PopoverTrigger>
    <PopoverContent class="w-auto p-0" align="start">
      <div v-if="presets.length" class="flex flex-col gap-0.5 border-b p-2">
        <button
          v-for="p in presets"
          :key="p.label"
          type="button"
          class="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
          @click="applyPreset(p)"
        >
          {{ p.label }}
        </button>
      </div>
      <div class="flex items-center justify-between border-b px-3 py-2">
        <span class="text-muted-foreground text-xs tracking-widest uppercase">Time Range</span>
        <div class="flex gap-2">
          <button
            type="button"
            class="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs focus-visible:ring-2 focus-visible:outline-none"
            @click="pickNow('start')"
          >
            Now (Start)
          </button>
          <button type="button" class="text-muted-foreground hover:text-foreground text-xs" @click="pickNow('end')">
            Now (End)
          </button>
        </div>
      </div>
      <div class="flex">
        <div class="flex flex-col">
          <div class="text-muted-foreground border-b px-3 py-1.5 text-center text-xs font-medium">Start</div>
          <TimeColumns
            :model-value="startValue"
            :use24-hour="use24Hour"
            :use12-hours="use12Hours"
            :minute-step="minuteStep"
            :hour-step="hourStep"
            :second-step="secondStep"
            :min-time="minTime"
            :max-time="maxTime"
            :format="format"
            :disabled-hours="disabledHours"
            :disabled-minutes="disabledMinutes"
            :disabled-seconds="disabledSeconds"
            :hide-disabled-options="hideDisabledOptions"
            :visible="columnsVisible"
            @update:model-value="emitStart"
          />
        </div>
        <div class="bg-border w-px" />
        <div class="flex flex-col">
          <div class="text-muted-foreground border-b px-3 py-1.5 text-center text-xs font-medium">End</div>
          <TimeColumns
            :model-value="endValue"
            :use24-hour="use24Hour"
            :use12-hours="use12Hours"
            :minute-step="minuteStep"
            :hour-step="hourStep"
            :second-step="secondStep"
            :min-time="minTime"
            :max-time="maxTime"
            :format="format"
            :disabled-hours="disabledHours"
            :disabled-minutes="disabledMinutes"
            :disabled-seconds="disabledSeconds"
            :hide-disabled-options="hideDisabledOptions"
            :visible="columnsVisible"
            @update:model-value="emitEnd"
          />
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/time-picker/index.ts`

```ts
export { default as TimePicker } from './TimePicker.vue'
export { default as TimeRangePicker } from './TimeRangePicker.vue'
export { default as TimeColumns } from './TimeColumns.vue'

```

## timeline

- type: `registry:ui`
- description: Vertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.
- npm deps: `class-variance-authority`

### `packages/registry-vue/components/timeline/Timeline.vue`

```vue
<script setup lang="ts">
import { provide, ref, toRef } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import {
  TIMELINE_CONTEXT,
  type TimelineAlign,
  type TimelineDensity,
  type TimelineDirection,
  type TimelineSide,
} from './context'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    direction?: TimelineDirection
    align?: TimelineAlign
    side?: TimelineSide
    density?: TimelineDensity
  }>(),
  {
    direction: 'vertical',
    align: 'start',
    density: 'default',
  },
)

const itemIds = ref<symbol[]>([])

provide(TIMELINE_CONTEXT, {
  direction: toRef(props, 'direction'),
  align: toRef(props, 'align'),
  side: toRef(() => props.side ?? (props.direction === 'horizontal' ? 'top' : 'left')),
  density: toRef(props, 'density'),
  itemIds,
  register: (id) => {
    if (!itemIds.value.includes(id)) itemIds.value.push(id)
  },
  unregister: (id) => {
    itemIds.value = itemIds.value.filter((i) => i !== id)
  },
})
</script>

<template>
  <div
    data-uipkge
    data-slot="timeline"
    :data-direction="direction"
    :data-align="align"
    :class="cn('relative', direction === 'vertical' ? 'flex flex-col' : 'flex flex-row', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/timeline/TimelineItem.vue`

```vue
<script setup lang="ts">
import { computed, inject, onBeforeUnmount, provide, toRef } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { TIMELINE_CONTEXT, TIMELINE_ITEM_CONTEXT, type TimelineSide, type TimelineStatus } from './context'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    side?: TimelineSide
    status?: TimelineStatus
  }>(),
  {
    status: 'default',
  },
)

const ctx = inject(TIMELINE_CONTEXT, null)
const id = Symbol('TimelineItem')

if (ctx) {
  ctx.register(id)
  onBeforeUnmount(() => ctx.unregister(id))
}

const index = computed(() => (ctx ? ctx.itemIds.value.indexOf(id) : 0))
const isFirst = computed(() => index.value === 0)
const isLast = computed(() => (ctx ? index.value === ctx.itemIds.value.length - 1 : false))

const effectiveSide = computed<TimelineSide>(() => {
  if (props.side) return props.side
  if (!ctx) return 'left'
  if (ctx.align.value === 'center') {
    if (ctx.direction.value === 'vertical') {
      return index.value % 2 === 0 ? 'left' : 'right'
    }
    return index.value % 2 === 0 ? 'top' : 'bottom'
  }
  return ctx.side.value
})

const direction = computed(() => ctx?.direction.value ?? 'vertical')
const density = computed(() => ctx?.density.value ?? 'default')
const isCenter = computed(() => ctx?.align.value === 'center')

const verticalSpacing = computed(() => {
  if (isLast.value) return ''
  return {
    compact: '[&>[data-slot=timeline-content]]:pb-2',
    default: '[&>[data-slot=timeline-content]]:pb-6',
    comfortable: '[&>[data-slot=timeline-content]]:pb-10',
  }[density.value]
})

const horizontalSpacing = computed(() => {
  if (isLast.value) return ''
  return {
    compact: '[&>[data-slot=timeline-content]]:pr-3',
    default: '[&>[data-slot=timeline-content]]:pr-6',
    comfortable: '[&>[data-slot=timeline-content]]:pr-10',
  }[density.value]
})

provide(TIMELINE_ITEM_CONTEXT, {
  index,
  isFirst,
  isLast,
  side: effectiveSide,
  status: toRef(props, 'status'),
  direction,
  density,
})
</script>

<template>
  <div
    data-uipkge
    data-slot="timeline-item"
    :data-side="effectiveSide"
    :data-last="isLast || undefined"
    :class="
      cn(
        'relative',
        // start mode (default): simple flex
        // No item padding — TimelineMedia's continuous line relies on items
        // butting up edge-to-edge. Use TimelineContent's own padding for
        // breathing room between rows/cards.
        !isCenter &&
          direction === 'vertical' && [
            'flex gap-4',
            effectiveSide === 'right' && 'flex-row-reverse text-right',
            verticalSpacing,
          ],
        !isCenter &&
          direction === 'horizontal' && [
            'flex flex-col gap-2',
            effectiveSide === 'bottom' && 'flex-col-reverse',
            horizontalSpacing,
          ],
        // center alternating: 3-col / 3-row grid
        isCenter &&
          direction === 'vertical' && [
            'grid grid-cols-[1fr_auto_1fr] items-start gap-x-4',
            '[&>[data-slot=timeline-media]]:col-start-2',
            '[&>[data-slot=timeline-separator]]:col-start-2',
            effectiveSide === 'left' &&
              '[&>[data-slot=timeline-content]]:col-start-1 [&>[data-slot=timeline-content]]:text-right',
            effectiveSide === 'right' && '[&>[data-slot=timeline-content]]:col-start-3',
            verticalSpacing,
          ],
        isCenter &&
          direction === 'horizontal' && [
            'grid grid-rows-[1fr_auto_1fr] items-start gap-y-2',
            '[&>[data-slot=timeline-media]]:row-start-2',
            '[&>[data-slot=timeline-separator]]:row-start-2',
            effectiveSide === 'top' &&
              '[&>[data-slot=timeline-content]]:row-start-1 [&>[data-slot=timeline-content]]:self-end',
            effectiveSide === 'bottom' && '[&>[data-slot=timeline-content]]:row-start-3',
            horizontalSpacing,
          ],
        props.class,
      )
    "
    v-bind="$attrs"
  >
    <slot :index="index" :is-last="isLast" :side="effectiveSide" :status="status" />
  </div>
</template>

```

### `packages/registry-vue/components/timeline/TimelineMedia.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { TIMELINE_ITEM_CONTEXT, type TimelineStatus } from './context'
import { timelineMediaVariants, type TimelineMediaVariant } from './timeline.variants'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    variant?: TimelineMediaVariant
    status?: TimelineStatus
    /** Manually hide the auto-generated connector line. */
    hideConnector?: boolean
    /**
     * Color the connector line below the marker using the item's status
     * (success → green, muted → gray, etc) instead of the neutral border.
     * Opt-in so existing timelines stay visually unchanged.
     */
    coloredConnector?: boolean
  }>(),
  {
    variant: 'dot',
  },
)

const item = inject(TIMELINE_ITEM_CONTEXT, null)

const direction = computed(() => item?.direction.value ?? 'vertical')
const isFirst = computed(() => item?.isFirst.value ?? true)
const isLast = computed(() => item?.isLast.value ?? true)
const effectiveStatus = computed<TimelineStatus>(() => props.status ?? item?.status.value ?? 'default')
const showConnector = computed(() => !props.hideConnector && !(isFirst.value && isLast.value))

// Marker half-size in rem, used to crop the line so it visually emerges
// from the marker center on the first item.
const markerHalfRem = computed(
  () =>
    ({
      dot: '0.375rem', // size-3 = 12px / 2
      icon: '1rem', // size-8 = 32px / 2
      avatar: '1.125rem', // size-9 = 36px / 2
    })[(props.variant ?? 'dot') as 'dot' | 'icon' | 'avatar'],
)

const connectorBgClass = computed(() => {
  if (!props.coloredConnector) return 'bg-border'
  return {
    default: 'bg-primary',
    success: 'bg-success',
    warning: 'bg-warning',
    error: 'bg-destructive',
    info: 'bg-info',
    muted: 'bg-muted-foreground/40',
  }[effectiveStatus.value]
})
</script>

<template>
  <div
    data-uipkge
    data-slot="timeline-media"
    :class="
      cn(
        'relative shrink-0 self-stretch',
        direction === 'vertical' ? 'flex w-9 flex-col items-center' : 'flex h-9 flex-row items-center',
        props.class,
      )
    "
    :style="{ '--timeline-marker-half': markerHalfRem }"
  >
    <!-- Single continuous connector line, positioned through the marker.
         The marker's bg + ring-background acts as a "punch-through" so the
         line appears to break at each marker without any per-item math. -->
    <div
      v-if="showConnector"
      data-uipkge
      data-slot="timeline-media-connector"
      aria-hidden="true"
      :class="
        direction === 'vertical'
          ? cn('absolute left-1/2 w-px -translate-x-1/2', connectorBgClass)
          : cn('absolute top-1/2 h-px -translate-y-1/2', connectorBgClass)
      "
      :style="
        direction === 'vertical'
          ? {
              top: isFirst ? 'var(--timeline-marker-half)' : '0',
              bottom: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
            }
          : {
              left: isFirst ? 'var(--timeline-marker-half)' : '0',
              right: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
            }
      "
    />

    <!-- Marker — its bg + ring-background hides the line behind it. -->
    <div
      data-uipkge
      data-slot="timeline-media-marker"
      :class="cn(timelineMediaVariants({ variant, status: effectiveStatus }), 'relative z-10')"
    >
      <slot />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/timeline/TimelineSeparator.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { TIMELINE_ITEM_CONTEXT } from './context'

const props = defineProps<{
  class?: HTMLAttributes['class']
  /** Manually hide the auto-generated connector line. */
  hideConnector?: boolean
}>()

const item = inject(TIMELINE_ITEM_CONTEXT, null)
const direction = computed(() => item?.direction.value ?? 'vertical')
const isFirst = computed(() => item?.isFirst.value ?? true)
const isLast = computed(() => item?.isLast.value ?? true)
const showConnector = computed(() => !props.hideConnector && !(isFirst.value && isLast.value))
</script>

<template>
  <!-- Legacy compact separator: 16px marker, customizable inner dot via #dot
       slot. Uses the same single-absolute-line strategy as TimelineMedia so
       the connector is pixel-aligned across items. --marker-half = 0.5rem
       (= size-4 / 2). -->
  <div
    data-uipkge
    data-slot="timeline-separator"
    :class="
      cn(
        'relative shrink-0 self-stretch',
        direction === 'vertical' ? 'flex w-4 flex-col items-center' : 'flex h-4 flex-row items-center',
        props.class,
      )
    "
    style="--timeline-marker-half: 0.5rem"
    v-bind="$attrs"
  >
    <div
      v-if="showConnector"
      aria-hidden="true"
      :class="
        direction === 'vertical'
          ? 'bg-border absolute left-1/2 w-px -translate-x-1/2'
          : 'bg-border absolute top-1/2 h-px -translate-y-1/2'
      "
      :style="
        direction === 'vertical'
          ? {
              top: isFirst ? 'var(--timeline-marker-half)' : '0',
              bottom: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
            }
          : {
              left: isFirst ? 'var(--timeline-marker-half)' : '0',
              right: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
            }
      "
    />
    <div class="bg-primary ring-background relative z-10 flex size-4 items-center justify-center rounded-full ring-4">
      <slot name="dot">
        <div class="bg-primary-foreground size-2 rounded-full" />
      </slot>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/timeline/TimelineContent.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div data-uipkge data-slot="timeline-content" :class="cn('flex-1 space-y-1', props.class)" v-bind="$attrs">
    <slot />
  </div>
</template>

```

### `packages/registry-vue/components/timeline/TimelineTitle.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <component
    :is="props.as ?? 'h3'"
    data-uipkge
    data-slot="timeline-title"
    :class="cn('text-sm leading-none font-semibold tracking-tight', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </component>
</template>

```

### `packages/registry-vue/components/timeline/TimelineDescription.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <p
    data-uipkge
    data-slot="timeline-description"
    :class="cn('text-muted-foreground text-sm', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </p>
</template>

```

### `packages/registry-vue/components/timeline/TimelineDate.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <time data-uipkge data-slot="timeline-date" :class="cn('text-muted-foreground text-xs', props.class)" v-bind="$attrs">
    <slot />
  </time>
</template>

```

### `packages/registry-vue/components/timeline/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'

export type TimelineDirection = 'vertical' | 'horizontal'
export type TimelineAlign = 'start' | 'center'
export type TimelineSide = 'left' | 'right' | 'top' | 'bottom'
export type TimelineStatus = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted'
export type TimelineDensity = 'compact' | 'default' | 'comfortable'

export interface TimelineContext {
  direction: Ref<TimelineDirection>
  align: Ref<TimelineAlign>
  side: Ref<TimelineSide>
  density: Ref<TimelineDensity>
  itemIds: Ref<symbol[]>
  register: (id: symbol) => void
  unregister: (id: symbol) => void
}

export const TIMELINE_CONTEXT: InjectionKey<TimelineContext> = Symbol('TimelineContext')

export interface TimelineItemContext {
  index: Ref<number>
  isFirst: Ref<boolean>
  isLast: Ref<boolean>
  side: Ref<TimelineSide>
  status: Ref<TimelineStatus>
  direction: Ref<TimelineDirection>
  density: Ref<TimelineDensity>
}

export const TIMELINE_ITEM_CONTEXT: InjectionKey<TimelineItemContext> = Symbol('TimelineItemContext')

```

### `packages/registry-vue/components/timeline/timeline.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const timelineMediaVariants = cva(
  'relative z-10 flex shrink-0 items-center justify-center rounded-full ring-4 ring-background [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        dot: 'size-3',
        icon: 'size-8 [&>svg]:size-4',
        avatar: 'size-9 ring-2 [&>img]:size-full [&>img]:rounded-full [&>img]:object-cover',
      },
      status: {
        default: 'bg-primary text-primary-foreground',
        success: 'bg-success text-success-foreground',
        warning: 'bg-warning text-warning-foreground',
        error: 'bg-destructive text-destructive-foreground',
        info: 'bg-info text-info-foreground',
        muted: 'bg-muted text-muted-foreground',
      },
    },
    defaultVariants: {
      variant: 'dot',
      status: 'default',
    },
  },
)

export type TimelineMediaVariantsProps = VariantProps<typeof timelineMediaVariants>
export type TimelineMediaVariant = 'dot' | 'icon' | 'avatar'

```

### `packages/registry-vue/components/timeline/index.ts`

```ts
export { default as Timeline } from './Timeline.vue'
export { default as TimelineItem } from './TimelineItem.vue'
export { default as TimelineMedia } from './TimelineMedia.vue'
export { default as TimelineSeparator } from './TimelineSeparator.vue'
export { default as TimelineContent } from './TimelineContent.vue'
export { default as TimelineTitle } from './TimelineTitle.vue'
export { default as TimelineDescription } from './TimelineDescription.vue'
export { default as TimelineDate } from './TimelineDate.vue'

export type { TimelineDirection, TimelineAlign, TimelineSide, TimelineStatus, TimelineDensity } from './context'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { timelineMediaVariants, type TimelineMediaVariantsProps, type TimelineMediaVariant } from './timeline.variants'

```

## toggle

- type: `registry:ui`
- description: On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for "press to enable" buttons like bold / italic.
- npm deps: `@vueuse/core`, `class-variance-authority`, `reka-ui`

### `packages/registry-vue/components/toggle/Toggle.vue`

```vue
<script setup lang="ts">
import type { ToggleEmits } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { computed, getCurrentInstance } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Toggle, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'
import { toggleVariants } from './toggle.variants'

// Inlined unions for variant/size: Vue's SFC compiler can't extract
// runtime props from indexed-access types like `ToggleVariants['variant']`,
// so we spell the unions out. cva still validates at runtime.
// Same goes for `ToggleProps` from reka-ui (no exports.types condition);
// we inline only the props we actually expose.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    variant?: 'default' | 'outline'
    size?: 'default' | 'sm' | 'lg'
    asChild?: boolean
    as?: string | object
    defaultValue?: boolean
    modelValue?: boolean
    pressed?: boolean
    disabled?: boolean
    name?: string
    required?: boolean
  }>(),
  {
    variant: 'default',
    size: 'default',
    disabled: false,
  },
)

const emits = defineEmits<ToggleEmits>()

const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant', 'modelValue')
const forwarded = useForwardPropsEmits(delegatedProps, emits)

const instance = getCurrentInstance()
const isControlled = computed(() => Boolean(instance?.vnode?.props?.['onUpdate:modelValue']))
const userPassedModelValue = computed(() => {
  const raw = instance?.vnode?.props
  return Boolean(raw && ('modelValue' in raw || 'model-value' in raw))
})

const toggleStateBindings = computed(() => {
  if (isControlled.value) return { 'model-value': props.modelValue }
  if (userPassedModelValue.value) return { 'default-value': Boolean(props.modelValue) }
  return { 'default-value': false }
})
</script>

<template>
  <Toggle
    v-slot="slotProps"
    data-uipkge
    data-slot="toggle"
    v-bind="{ ...forwarded, ...toggleStateBindings }"
    :class="cn(toggleVariants({ variant, size }), props.class)"
  >
    <slot v-bind="slotProps" />
  </Toggle>
</template>

```

### `packages/registry-vue/components/toggle/toggle.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const toggleVariants = cva(
  // Focus ring intentionally subtle: 1px ring on :focus-visible only, no
  // border swap. Keyboard users still get a clear focused state; mouse
  // users don't see a loud 3px halo after click (which lingers because
  // the button retains focus). Matches the segmented-control density.
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-ring/50 focus-visible:ring-1 outline-none transition-colors duration-200 whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ToggleVariants = VariantProps<typeof toggleVariants>

```

### `packages/registry-vue/components/toggle/index.ts`

```ts
export { default as Toggle } from './Toggle.vue'

// Re-export variant API from the sibling file (kept separate to avoid the
// Component.vue <-> index.ts circular import that broke dev SSR for Card).
export { toggleVariants, type ToggleVariants } from './toggle.variants'

```

## toggle-group

- type: `registry:ui`
- description: Group of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid/list), text-format toolbars, and any "pick one of N" button bar.
- npm deps: `@vueuse/core`, `class-variance-authority`, `reka-ui`
- registry deps: `toggle`

### `packages/registry-vue/components/toggle-group/ToggleGroup.vue`

```vue
<script setup lang="ts">
import type { ToggleGroupRootEmits } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'
import { provide } from 'vue'
import { cn } from '@/lib/utils'

// Inlined unions: SFC compiler can't extract runtime props from
// `VariantProps<typeof toggleVariants>['...']`. Same for the
// reka-ui `ToggleGroupRootProps` (no exports.types). Inline the
// surface we expose.
const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    variant?: 'default' | 'outline'
    size?: 'default' | 'sm' | 'lg'
    spacing?: number
    asChild?: boolean
    as?: string | object
    type?: 'single' | 'multiple'
    modelValue?: string | string[]
    defaultValue?: string | string[]
    disabled?: boolean
    loop?: boolean
    orientation?: 'horizontal' | 'vertical'
    rovingFocus?: boolean
    dir?: 'ltr' | 'rtl'
  }>(),
  {
    spacing: 0,
  },
)

const emits = defineEmits<ToggleGroupRootEmits>()

provide('toggleGroup', {
  variant: props.variant,
  size: props.size,
  spacing: props.spacing,
})

const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <ToggleGroupRoot
    v-slot="slotProps"
    data-uipkge
    data-slot="toggle-group"
    :data-size="size"
    :data-variant="variant"
    :data-spacing="spacing"
    :style="{
      '--gap': spacing,
    }"
    v-bind="forwarded"
    :class="
      cn(
        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
        props.class,
      )
    "
  >
    <slot v-bind="slotProps" />
  </ToggleGroupRoot>
</template>

```

### `packages/registry-vue/components/toggle-group/ToggleGroupItem.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { ToggleGroupItem, useForwardProps } from 'reka-ui'
import { inject } from 'vue'
import { cn } from '@/lib/utils'
import { toggleVariants } from '@/components/ui/toggle'

type ToggleGroupContext = {
  variant?: 'default' | 'outline'
  size?: 'default' | 'sm' | 'lg'
  spacing?: number
}

// Inlined unions: SFC compiler can't extract runtime props from
// indexed-access types. Same for reka-ui's ToggleGroupItemProps.
const props = defineProps<{
  class?: HTMLAttributes['class']
  variant?: 'default' | 'outline'
  size?: 'default' | 'sm' | 'lg'
  asChild?: boolean
  as?: string | object
  value: string
  disabled?: boolean
}>()

const context = inject<ToggleGroupContext>('toggleGroup')

const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant')
const forwardedProps = useForwardProps(delegatedProps)
</script>

<template>
  <ToggleGroupItem
    v-slot="slotProps"
    data-uipkge
    data-slot="toggle-group-item"
    :data-variant="context?.variant || variant"
    :data-size="context?.size || size"
    :data-spacing="context?.spacing"
    v-bind="forwardedProps"
    :class="
      cn(
        toggleVariants({
          variant: context?.variant || variant,
          size: context?.size || size,
        }),
        'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
        'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
        props.class,
      )
    "
  >
    <slot v-bind="slotProps" />
  </ToggleGroupItem>
</template>

```

### `packages/registry-vue/components/toggle-group/index.ts`

```ts
export { default as ToggleGroup } from './ToggleGroup.vue'
export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

```

## toggle-setting-list

- type: `registry:block`
- description: List of toggle-able settings in a SectionCard. v-model binds a Record<string, boolean> keyed by item.key.
- npm deps: `lucide-vue-next`
- registry deps: `section-card`

### `packages/registry-vue/blocks/toggle-setting-list/ToggleSettingList.vue`

```vue
<script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'

interface SettingRow {
  key: string
  label: string
  desc?: string
}

const props = defineProps<{
  title?: string
  description?: string
  headerIcon?: Component
  items: SettingRow[]
  modelValue: Record<string, boolean>
  class?: string
}>()

const emit = defineEmits<{ 'update:modelValue': [Record<string, boolean>] }>()

function toggle(key: string) {
  emit('update:modelValue', { ...props.modelValue, [key]: !props.modelValue[key] })
}
</script>

<template>
  <SectionCard :title="title ?? 'Notifications'" :description="description" :class="$props.class">
    <template v-if="headerIcon" #header-action>
      <component :is="headerIcon" class="text-muted-foreground size-5" />
    </template>
    <ul class="-my-4 divide-y">
      <li
        v-for="(row, i) in items"
        :key="row.key"
        class="flex items-center justify-between gap-4 py-4"
        :class="i === 0 ? 'pt-0' : ''"
      >
        <div>
          <p class="text-sm font-medium">{{ row.label }}</p>
          <p v-if="row.desc" class="text-muted-foreground text-xs">{{ row.desc }}</p>
        </div>
        <button
          type="button"
          role="switch"
          :aria-checked="modelValue[row.key]"
          class="focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2"
          :class="modelValue[row.key] ? 'bg-primary' : 'bg-muted-foreground/30'"
          @click="toggle(row.key)"
        >
          <span
            class="bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform"
            :class="modelValue[row.key] ? 'translate-x-[18px]' : 'translate-x-0.5'"
          />
        </button>
      </li>
    </ul>
  </SectionCard>
</template>

```

## tooltip

- type: `registry:ui`
- description: Small popover triggered by hover/focus, used for short labels — icon-button names, abbreviation expansions, keyboard shortcuts. Auto-positions and respects `prefers-reduced-motion`.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/tooltip/Tooltip.vue`

```vue
<script setup lang="ts">
import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'

const props = defineProps<TooltipRootProps>()
const emits = defineEmits<TooltipRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <TooltipRoot v-slot="slotProps" data-uipkge data-slot="tooltip" v-bind="forwarded">
    <slot v-bind="slotProps" />
  </TooltipRoot>
</template>

```

### `packages/registry-vue/components/tooltip/TooltipContent.vue`

```vue
<script setup lang="ts">
import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
  sideOffset: 4,
})

const emits = defineEmits<TooltipContentEmits>()

const delegatedProps = reactiveOmit(props, 'class')
const forwarded = useForwardPropsEmits(delegatedProps, emits)
</script>

<template>
  <TooltipPortal>
    <TooltipContent
      data-uipkge
      data-slot="tooltip-content"
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'bg-foreground text-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
          props.class,
        )
      "
    >
      <slot />

      <TooltipArrow
        class="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
      />
    </TooltipContent>
  </TooltipPortal>
</template>

```

### `packages/registry-vue/components/tooltip/TooltipProvider.vue`

```vue
<script setup lang="ts">
import type { TooltipProviderProps } from 'reka-ui'
import { TooltipProvider } from 'reka-ui'

// Defaults follow Radix conventions: 700ms open delay for ambient tooltips,
// 300ms skip-delay so once one tooltip opens, neighbors skip the wait.
const props = withDefaults(defineProps<TooltipProviderProps>(), {
  delayDuration: 700,
  skipDelayDuration: 300,
})
</script>

<template>
  <TooltipProvider v-bind="props">
    <slot />
  </TooltipProvider>
</template>

```

### `packages/registry-vue/components/tooltip/TooltipTrigger.vue`

```vue
<script setup lang="ts">
import type { TooltipTriggerProps } from 'reka-ui'
import { TooltipTrigger } from 'reka-ui'

const props = defineProps<TooltipTriggerProps>()
</script>

<template>
  <TooltipTrigger data-uipkge data-slot="tooltip-trigger" v-bind="props">
    <slot />
  </TooltipTrigger>
</template>

```

### `packages/registry-vue/components/tooltip/index.ts`

```ts
export { default as Tooltip } from './Tooltip.vue'
export { default as TooltipContent } from './TooltipContent.vue'
export { default as TooltipProvider } from './TooltipProvider.vue'
export { default as TooltipTrigger } from './TooltipTrigger.vue'

```

## tour

- type: `registry:ui`
- description: Multi-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.
- npm deps: `lucide-vue-next`
- registry deps: `button`

### `packages/registry-vue/components/tour/Tour.vue`

```vue
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import TourMask from './TourMask.vue'
import TourCard from './TourCard.vue'
import { useTourTarget } from './use-tour-target'
import type { TourStep } from '.'

const props = withDefaults(
  defineProps<{
    open?: boolean
    current?: number
    steps: TourStep[]
    mask?: boolean
    type?: 'default' | 'primary'
    zIndex?: number
  }>(),
  {
    open: false,
    current: 0,
    mask: true,
    type: 'default',
    zIndex: 1000,
  },
)

const emits = defineEmits<{
  (e: 'update:open', v: boolean): void
  (e: 'update:current', v: number): void
  (e: 'change', v: number): void
  (e: 'finish'): void
  (e: 'close'): void
}>()

const stepIndex = ref(props.current)
watch(
  () => props.current,
  (v) => (stepIndex.value = v),
)

const currentStep = computed<TourStep | null>(() => props.steps[stepIndex.value] ?? null)

const targetRef = computed(() => currentStep.value?.target)
const { rect, attach, measure } = useTourTarget(targetRef)

watch(
  [() => props.open, stepIndex],
  async ([open]) => {
    if (!open) return
    await nextTick()
    attach()
    const t = currentStep.value?.target
    if (t) {
      const el =
        typeof t === 'string' ? (document.querySelector(t) as HTMLElement | null) : typeof t === 'function' ? t() : t
      el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
      setTimeout(measure, 320)
    }
  },
  { immediate: true },
)

function setStep(i: number) {
  stepIndex.value = i
  emits('update:current', i)
  emits('change', i)
}

function next() {
  if (stepIndex.value < props.steps.length - 1) setStep(stepIndex.value + 1)
}

function prev() {
  if (stepIndex.value > 0) setStep(stepIndex.value - 1)
}

function finish() {
  emits('finish')
  emits('update:open', false)
}

function skip() {
  emits('close')
  emits('update:open', false)
}

function onKeydown(e: KeyboardEvent) {
  if (!props.open) return
  if (e.key === 'Escape') {
    e.preventDefault()
    skip()
  }
}

watch(
  () => props.open,
  (v) => {
    if (typeof document === 'undefined') return
    if (v) document.addEventListener('keydown', onKeydown)
    else document.removeEventListener('keydown', onKeydown)
  },
)

const showMask = computed(() => {
  const stepMask = currentStep.value?.mask
  if (stepMask !== undefined) return stepMask
  return props.mask
})
</script>

<template>
  <Teleport to="body">
    <template v-if="open && currentStep">
      <TourMask v-if="showMask" :rect="rect" :z-index="zIndex" />
      <TourCard
        :title="currentStep.title"
        :description="currentStep.description"
        :cover="currentStep.cover"
        :rect="rect"
        :total="steps.length"
        :current="stepIndex"
        :prev-text="currentStep.prevButtonText"
        :next-text="currentStep.nextButtonText"
        :type="type"
        :z-index="zIndex"
        @prev="prev"
        @next="next"
        @finish="finish"
        @skip="skip"
      />
    </template>
  </Teleport>
</template>

```

### `packages/registry-vue/components/tour/TourMask.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { TargetRect } from './use-tour-target'

const props = defineProps<{
  rect: TargetRect | null
  zIndex: number
  opacity?: number
  padding?: number
  radius?: number
}>()

const opacity = computed(() => props.opacity ?? 0.5)
const padding = computed(() => props.padding ?? 4)
const radius = computed(() => props.radius ?? 6)

const cutout = computed(() => {
  const r = props.rect
  if (!r) return null
  return {
    x: r.x - padding.value,
    y: r.y - padding.value,
    w: r.width + padding.value * 2,
    h: r.height + padding.value * 2,
  }
})
</script>

<template>
  <svg class="pointer-events-none fixed inset-0" :style="{ zIndex }" width="100%" height="100%" aria-hidden="true">
    <defs>
      <mask id="uipkge-tour-mask">
        <rect width="100%" height="100%" fill="white" />
        <rect
          v-if="cutout"
          :x="cutout.x"
          :y="cutout.y"
          :width="cutout.w"
          :height="cutout.h"
          :rx="radius"
          fill="black"
        />
      </mask>
    </defs>
    <rect
      width="100%"
      height="100%"
      :fill="`rgba(0, 0, 0, ${opacity})`"
      mask="url(#uipkge-tour-mask)"
      class="pointer-events-auto"
      :style="{ transition: 'all 200ms ease' }"
    />
  </svg>
</template>

```

### `packages/registry-vue/components/tour/TourCard.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import type { TargetRect } from './use-tour-target'

const props = withDefaults(
  defineProps<{
    title: string
    description?: string
    cover?: string
    rect: TargetRect | null
    total: number
    current: number
    prevText?: string
    nextText?: string
    type?: 'default' | 'primary'
    zIndex: number
  }>(),
  {
    prevText: 'Previous',
    nextText: 'Next',
    type: 'default',
  },
)

defineEmits<{
  (e: 'prev'): void
  (e: 'next'): void
  (e: 'finish'): void
  (e: 'skip'): void
}>()

const isLast = computed(() => props.current === props.total - 1)
const isFirst = computed(() => props.current === 0)

const cardStyle = computed(() => {
  const cardWidth = 320
  const margin = 12
  if (!props.rect) {
    return {
      position: 'fixed' as const,
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: `${cardWidth}px`,
      zIndex: props.zIndex + 1,
    }
  }
  const { x, y, width, height } = props.rect
  const viewportH = typeof window !== 'undefined' ? window.innerHeight : 768
  const viewportW = typeof window !== 'undefined' ? window.innerWidth : 1024
  const placeBelow = y + height + margin + 200 < viewportH
  const top = placeBelow ? y + height + margin : Math.max(8, y - margin - 200)
  let left = x
  if (left + cardWidth > viewportW - 8) {
    left = viewportW - cardWidth - 8
  }
  if (left < 8) left = 8
  return {
    position: 'fixed' as const,
    top: `${top}px`,
    left: `${left}px`,
    width: `${cardWidth}px`,
    zIndex: props.zIndex + 1,
  }
})
</script>

<template>
  <div
    role="dialog"
    aria-modal="true"
    :class="
      cn(
        'relative space-y-3 rounded-lg border p-4 shadow-lg',
        type === 'primary' ? 'bg-primary text-primary-foreground border-primary' : 'bg-popover text-popover-foreground',
      )
    "
    :style="cardStyle"
  >
    <button
      type="button"
      class="hover:bg-foreground/10 focus-visible:ring-ring absolute top-2 right-2 inline-flex size-6 items-center justify-center rounded focus-visible:ring-2 focus-visible:outline-none"
      aria-label="Close tour"
      @click="$emit('skip')"
    >
      <X class="size-4" aria-hidden="true" />
    </button>

    <img v-if="cover" :src="cover" alt="" class="w-full rounded-md" />

    <div>
      <div class="pr-6 font-semibold">{{ title }}</div>
      <div v-if="description" class="mt-1 text-sm opacity-90">{{ description }}</div>
    </div>

    <div class="flex items-center justify-between gap-2 pt-2">
      <div class="text-xs tabular-nums opacity-70" aria-live="polite">{{ current + 1 }} / {{ total }}</div>
      <div class="flex gap-2">
        <Button
          v-if="!isFirst"
          size="sm"
          :variant="type === 'primary' ? 'secondary' : 'outline'"
          @click="$emit('prev')"
        >
          {{ prevText }}
        </Button>
        <Button v-if="!isLast" size="sm" :variant="type === 'primary' ? 'secondary' : 'default'" @click="$emit('next')">
          {{ nextText }}
        </Button>
        <Button v-else size="sm" :variant="type === 'primary' ? 'secondary' : 'default'" @click="$emit('finish')">
          Finish
        </Button>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/tour/use-tour-target.ts`

```ts
import { onBeforeUnmount, ref, watch, type Ref } from 'vue'

export type TourTarget = string | (() => HTMLElement | null) | HTMLElement | null

export interface TargetRect {
  x: number
  y: number
  width: number
  height: number
}

export function useTourTarget(target: Ref<TourTarget | undefined>) {
  const rect = ref<TargetRect | null>(null)
  const element = ref<HTMLElement | null>(null)

  let resizeObs: ResizeObserver | null = null
  let raf = 0

  function resolve(): HTMLElement | null {
    const t = target.value
    if (!t) return null
    if (typeof t === 'string') return document.querySelector(t) as HTMLElement | null
    if (typeof t === 'function') return t()
    return t
  }

  function measure() {
    cancelAnimationFrame(raf)
    raf = requestAnimationFrame(() => {
      if (!element.value) {
        rect.value = null
        return
      }
      const r = element.value.getBoundingClientRect()
      rect.value = { x: r.left, y: r.top, width: r.width, height: r.height }
    })
  }

  function attach() {
    detach()
    element.value = resolve()
    if (!element.value) {
      rect.value = null
      return
    }
    measure()
    if (typeof ResizeObserver !== 'undefined') {
      resizeObs = new ResizeObserver(measure)
      resizeObs.observe(element.value)
      resizeObs.observe(document.documentElement)
    }
    window.addEventListener('scroll', measure, { passive: true, capture: true })
    window.addEventListener('resize', measure, { passive: true })
  }

  function detach() {
    resizeObs?.disconnect()
    resizeObs = null
    window.removeEventListener('scroll', measure, true)
    window.removeEventListener('resize', measure)
    cancelAnimationFrame(raf)
  }

  watch(target, attach, { immediate: false })

  onBeforeUnmount(detach)

  return { element, rect, attach, detach, measure }
}

```

### `packages/registry-vue/components/tour/index.ts`

```ts
import type { TourTarget } from './use-tour-target'

export interface TourStep {
  target?: TourTarget
  title: string
  description?: string
  cover?: string
  mask?: boolean
  nextButtonText?: string
  prevButtonText?: string
}

export type { TourTarget } from './use-tour-target'
export { default as Tour } from './Tour.vue'

```

## transfer

- type: `registry:ui`
- description: Dual-list move-between control. Two columns plus a center pair of move buttons. Optional search, pagination, and one-way mode.
- npm deps: `lucide-vue-next`
- registry deps: `input`, `checkbox`, `button`, `scroll-area`

### `packages/registry-vue/components/transfer/Transfer.vue`

```vue
<script setup lang="ts">
import { computed, provide, ref, toRef } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import TransferList from './TransferList.vue'
import TransferOperation from './TransferOperation.vue'
import { TRANSFER_INJECTION_KEY, type TransferDragPayload, type TransferItem, type TransferSide } from './context'

const props = withDefaults(
  defineProps<{
    targetKeys?: string[]
    dataSource: TransferItem[]
    titles?: [string, string]
    showSearch?: boolean
    filterFn?: (query: string, item: TransferItem) => boolean
    height?: number | string
    pagination?: boolean | { pageSize: number }
    oneWay?: boolean
    disabled?: boolean
    draggable?: boolean
    selectable?: boolean
    class?: HTMLAttributes['class']
  }>(),
  {
    targetKeys: () => [],
    titles: () => ['Source', 'Target'],
    showSearch: false,
    height: 320,
    pagination: false,
    oneWay: false,
    disabled: false,
    draggable: false,
    selectable: true,
  },
)

const emits = defineEmits<{
  (e: 'update:targetKeys', keys: string[]): void
  (e: 'change', keys: string[], direction: 'left' | 'right', moved: string[]): void
  (e: 'search', payload: { direction: 'left' | 'right'; query: string }): void
  (e: 'select-change', payload: { left: string[]; right: string[] }): void
}>()

const dataMap = computed(() => new Map(props.dataSource.map((i) => [i.key, i])))

const sourceItems = computed(() => props.dataSource.filter((i) => !props.targetKeys.includes(i.key)))

// When draggable, target order follows targetKeys exactly so reorder persists.
// Otherwise keep legacy dataSource ordering for backwards compat.
const targetItems = computed<TransferItem[]>(() => {
  if (props.draggable) {
    const out: TransferItem[] = []
    for (const k of props.targetKeys) {
      const item = dataMap.value.get(k)
      if (item) out.push(item)
    }
    return out
  }
  return props.dataSource.filter((i) => props.targetKeys.includes(i.key))
})

const selectedLeft = ref<string[]>([])
const selectedRight = ref<string[]>([])

const pageSize = computed<number | null>(() => {
  if (props.pagination === false) return null
  if (props.pagination === true) return 10
  return props.pagination.pageSize
})

const defaultFilter = (q: string, item: TransferItem) => item.label.toLowerCase().includes(q.toLowerCase())

const dragPayload = ref<TransferDragPayload | null>(null)

function startDrag(payload: TransferDragPayload) {
  dragPayload.value = payload
}

function endDrag() {
  dragPayload.value = null
}

function drop(toSide: TransferSide, beforeKey: string | null) {
  const payload = dragPayload.value
  dragPayload.value = null
  if (!payload || props.disabled) return
  const keys = payload.keys.filter((k) => {
    const item = dataMap.value.get(k)
    return item && !item.disabled
  })
  if (keys.length === 0) return

  // left → left: reorder source not supported (parent owns dataSource order). No-op.
  if (payload.fromSide === 'left' && toSide === 'left') return

  // right → left: remove from targetKeys (skip when oneWay).
  if (payload.fromSide === 'right' && toSide === 'left') {
    if (props.oneWay) return
    const removeSet = new Set(keys)
    const next = props.targetKeys.filter((k) => !removeSet.has(k))
    selectedRight.value = selectedRight.value.filter((k) => !removeSet.has(k))
    emits('update:targetKeys', next)
    emits('change', next, 'left', keys)
    emits('select-change', { left: selectedLeft.value, right: selectedRight.value })
    return
  }

  // → right: insert (cross-list move) or reorder (within-target).
  const movingSet = new Set(keys)
  const without = props.targetKeys.filter((k) => !movingSet.has(k))
  let insertAt = without.length
  if (beforeKey != null) {
    const idx = without.indexOf(beforeKey)
    if (idx >= 0) insertAt = idx
  }
  const next = [...without.slice(0, insertAt), ...keys, ...without.slice(insertAt)]
  if (payload.fromSide === 'left') {
    const movedSet = new Set(keys)
    selectedLeft.value = selectedLeft.value.filter((k) => !movedSet.has(k))
    emits('update:targetKeys', next)
    emits('change', next, 'right', keys)
    emits('select-change', { left: selectedLeft.value, right: selectedRight.value })
  } else {
    // right → right: pure reorder, no change event (target set unchanged).
    emits('update:targetKeys', next)
  }
}

provide(TRANSFER_INJECTION_KEY, {
  disabled: toRef(props, 'disabled'),
  showSearch: toRef(props, 'showSearch'),
  height: toRef(props, 'height'),
  pageSize,
  filterFn: props.filterFn ?? defaultFilter,
  draggable: toRef(props, 'draggable'),
  selectable: toRef(props, 'selectable'),
  oneWay: toRef(props, 'oneWay'),
  dragPayload,
  startDrag,
  endDrag,
  drop,
})

function onLeftSelected(keys: string[]) {
  selectedLeft.value = keys
  emits('select-change', { left: keys, right: selectedRight.value })
}

function onRightSelected(keys: string[]) {
  selectedRight.value = keys
  emits('select-change', { left: selectedLeft.value, right: keys })
}

function moveRight() {
  if (selectedLeft.value.length === 0) return
  const next = [...props.targetKeys, ...selectedLeft.value]
  const moved = [...selectedLeft.value]
  selectedLeft.value = []
  emits('update:targetKeys', next)
  emits('change', next, 'right', moved)
  emits('select-change', { left: [], right: selectedRight.value })
}

function moveLeft() {
  if (selectedRight.value.length === 0) return
  const remove = new Set(selectedRight.value)
  const next = props.targetKeys.filter((k) => !remove.has(k))
  const moved = [...selectedRight.value]
  selectedRight.value = []
  emits('update:targetKeys', next)
  emits('change', next, 'left', moved)
  emits('select-change', { left: selectedLeft.value, right: [] })
}
</script>

<template>
  <div :class="cn('flex items-stretch gap-3', props.class)" data-uipkge data-slot="transfer">
    <div class="min-w-0 flex-1">
      <TransferList
        side="left"
        :title="titles[0]"
        :items="sourceItems"
        :selected="selectedLeft"
        @update:selected="onLeftSelected"
        @search="emits('search', { direction: 'left', query: $event })"
      >
        <template v-if="$slots['footer-left']" #footer>
          <slot name="footer-left" />
        </template>
      </TransferList>
    </div>
    <TransferOperation
      :can-move-right="selectedLeft.length > 0 && !disabled"
      :can-move-left="selectedRight.length > 0 && !disabled"
      :one-way="oneWay"
      @move-right="moveRight"
      @move-left="moveLeft"
    />
    <div class="min-w-0 flex-1">
      <TransferList
        side="right"
        :title="titles[1]"
        :items="targetItems"
        :selected="selectedRight"
        @update:selected="onRightSelected"
        @search="emits('search', { direction: 'right', query: $event })"
      >
        <template v-if="$slots['footer-right']" #footer>
          <slot name="footer-right" />
        </template>
      </TransferList>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/transfer/TransferList.vue`

```vue
<script setup lang="ts">
import { computed, inject, ref, watch } from 'vue'
import { GripVertical, Search } from 'lucide-vue-next'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { ScrollArea } from '@/components/ui/scroll-area'
import { TRANSFER_INJECTION_KEY, type TransferItem, type TransferSide } from './context'

const props = defineProps<{
  side: TransferSide
  title: string
  items: TransferItem[]
  selected: string[]
}>()

const emits = defineEmits<{
  (e: 'update:selected', keys: string[]): void
  (e: 'search', query: string): void
}>()

const _maybeCtx = inject(TRANSFER_INJECTION_KEY, null)
if (!_maybeCtx) throw new Error('TransferList must be used inside <Transfer>.')
const ctx: NonNullable<typeof _maybeCtx> = _maybeCtx

const query = ref('')
const page = ref(1)

const filtered = computed(() => {
  if (!query.value) return props.items
  return props.items.filter((i) => ctx.filterFn(query.value, i))
})

const effectivePageSize = computed(() => ctx.pageSize.value ?? Math.max(1, filtered.value.length))
const totalPages = computed(() => Math.max(1, Math.ceil(filtered.value.length / effectivePageSize.value)))

const visible = computed(() => {
  if (!ctx.pageSize.value) return filtered.value
  const start = (page.value - 1) * effectivePageSize.value
  return filtered.value.slice(start, start + effectivePageSize.value)
})

watch(filtered, () => {
  if (page.value > totalPages.value) page.value = totalPages.value
})

const visibleEnabledKeys = computed(() => visible.value.filter((i) => !i.disabled).map((i) => i.key))
const selectedSet = computed(() => new Set(props.selected))

const visibleSelectedCount = computed(() => visibleEnabledKeys.value.filter((k) => selectedSet.value.has(k)).length)

const masterChecked = computed(
  () => visibleEnabledKeys.value.length > 0 && visibleSelectedCount.value === visibleEnabledKeys.value.length,
)

const masterIndeterminate = computed(
  () => visibleSelectedCount.value > 0 && visibleSelectedCount.value < visibleEnabledKeys.value.length,
)

function toggleAll(checked: boolean) {
  let next = [...props.selected]
  if (checked) {
    for (const k of visibleEnabledKeys.value) {
      if (!selectedSet.value.has(k)) next.push(k)
    }
  } else {
    next = next.filter((k) => !visibleEnabledKeys.value.includes(k))
  }
  emits('update:selected', next)
}

function toggleItem(item: TransferItem, checked: boolean) {
  if (item.disabled || ctx.disabled.value) return
  let next = [...props.selected]
  if (checked) {
    if (!next.includes(item.key)) next.push(item.key)
  } else {
    next = next.filter((k) => k !== item.key)
  }
  emits('update:selected', next)
  lastAnchor.value = item.key
}

const lastAnchor = ref<string | null>(null)

function onRowClick(e: MouseEvent, item: TransferItem) {
  if (item.disabled || ctx.disabled.value) return
  // With checkbox visible, click toggles (matches checkbox UX).
  if (ctx.selectable.value) {
    toggleItem(item, !selectedSet.value.has(item.key))
    return
  }
  // No checkbox: desktop list pattern — plain=replace, cmd/ctrl=toggle, shift=range.
  const enabledKeys = visible.value.filter((i) => !i.disabled).map((i) => i.key)
  if (e.shiftKey && lastAnchor.value && enabledKeys.includes(lastAnchor.value)) {
    const start = enabledKeys.indexOf(lastAnchor.value)
    const end = enabledKeys.indexOf(item.key)
    const [lo, hi] = start < end ? [start, end] : [end, start]
    emits('update:selected', enabledKeys.slice(lo, hi + 1))
    return
  }
  if (e.metaKey || e.ctrlKey) {
    let next = [...props.selected]
    if (selectedSet.value.has(item.key)) next = next.filter((k) => k !== item.key)
    else next.push(item.key)
    emits('update:selected', next)
    lastAnchor.value = item.key
    return
  }
  emits('update:selected', [item.key])
  lastAnchor.value = item.key
}

function onSearch(v: string) {
  query.value = v
  page.value = 1
  emits('search', v)
}

function prevPage() {
  if (page.value > 1) page.value--
}

function nextPage() {
  if (page.value < totalPages.value) page.value++
}

const heightStyle = computed(() => ({
  height: typeof ctx.height.value === 'number' ? ctx.height.value + 'px' : ctx.height.value,
}))

// ----- DnD -----

const dropIndicator = ref<{ key: string; position: 'before' | 'after' } | null>(null)
const draggingKeys = ref<Set<string>>(new Set())

const isDropTarget = computed(() => {
  const p = ctx.dragPayload.value
  if (!p) return false
  // left list rejects drops when oneWay
  if (props.side === 'left' && ctx.oneWay.value && p.fromSide === 'right') return false
  // left → left is a no-op (parent owns dataSource order)
  if (props.side === 'left' && p.fromSide === 'left') return false
  return true
})

function onItemDragStart(e: DragEvent, item: TransferItem) {
  if (!ctx.draggable.value || item.disabled || ctx.disabled.value) {
    e.preventDefault()
    return
  }
  // If the dragged row is part of the current selection, drag the whole selection.
  // Else, drag just this row (and clear selection visually for clarity).
  const keys = selectedSet.value.has(item.key)
    ? props.selected.filter((k) => {
        const i = props.items.find((x) => x.key === k)
        return i && !i.disabled
      })
    : [item.key]
  draggingKeys.value = new Set(keys)
  ctx.startDrag({ keys, fromSide: props.side })
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move'
    // Required by Firefox to actually start the drag.
    try {
      e.dataTransfer.setData('text/plain', keys.join(','))
    } catch {
      /* noop */
    }
  }
}

function onItemDragEnd() {
  draggingKeys.value = new Set()
  dropIndicator.value = null
  ctx.endDrag()
}

function onItemDragOver(e: DragEvent, item: TransferItem) {
  if (!isDropTarget.value) return
  e.preventDefault()
  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
  if (props.side !== 'right') {
    // left list: no insertion indicator, drop just removes from target
    return
  }
  const target = e.currentTarget as HTMLElement
  const rect = target.getBoundingClientRect()
  const after = e.clientY > rect.top + rect.height / 2
  dropIndicator.value = { key: item.key, position: after ? 'after' : 'before' }
}

function onItemDrop(e: DragEvent, item: TransferItem) {
  if (!isDropTarget.value) return
  e.preventDefault()
  e.stopPropagation()
  if (props.side === 'right') {
    const after = dropIndicator.value?.position === 'after'
    const idx = props.items.findIndex((x) => x.key === item.key)
    const beforeKey = after ? (props.items[idx + 1]?.key ?? null) : item.key
    ctx.drop('right', beforeKey)
  } else {
    ctx.drop('left', null)
  }
  dropIndicator.value = null
}

function onListDragOver(e: DragEvent) {
  if (!isDropTarget.value) return
  e.preventDefault()
  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
}

function onListDrop(e: DragEvent) {
  if (!isDropTarget.value) return
  e.preventDefault()
  // Empty zone or below all items → append (right) / remove (left).
  ctx.drop(props.side, null)
  dropIndicator.value = null
}

function onListDragLeave(e: DragEvent) {
  // Clear indicator only when leaving the list container, not when crossing item rows.
  const related = e.relatedTarget as Node | null
  const current = e.currentTarget as Node
  if (!related || !current.contains(related)) {
    dropIndicator.value = null
  }
}
</script>

<template>
  <div
    class="bg-card flex flex-col overflow-hidden rounded-md border transition-colors"
    :class="[ctx.dragPayload.value && isDropTarget && 'ring-ring/40 ring-1']"
  >
    <div class="bg-muted/40 flex items-center justify-between gap-2 border-b px-3 py-2">
      <div class="flex min-w-0 items-center gap-2">
        <Checkbox
          v-if="ctx.selectable.value"
          :model-value="masterIndeterminate ? 'indeterminate' : masterChecked"
          :disabled="ctx.disabled.value || visibleEnabledKeys.length === 0"
          @update:model-value="toggleAll($event === true)"
        />
        <span class="truncate text-sm font-medium">{{ title }}</span>
      </div>
      <span class="text-muted-foreground text-xs tabular-nums"> {{ selected.length }}/{{ items.length }} </span>
    </div>

    <div v-if="ctx.showSearch.value" class="border-b p-2">
      <div class="relative">
        <Search
          class="text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2"
          aria-hidden="true"
        />
        <Input
          :model-value="query"
          placeholder="Search"
          class="h-8 pl-8"
          @update:model-value="(v) => onSearch(String(v ?? ''))"
        />
      </div>
    </div>

    <ScrollArea
      :style="heightStyle"
      class="flex-1"
      @dragover="onListDragOver"
      @drop="onListDrop"
      @dragleave="onListDragLeave"
    >
      <ul role="listbox" aria-multiselectable="true" class="py-1">
        <li
          v-for="item in visible"
          :key="item.key"
          role="option"
          :aria-selected="selectedSet.has(item.key)"
          :draggable="ctx.draggable.value && !item.disabled && !ctx.disabled.value"
          :class="[
            'hover:bg-accent focus-visible:ring-ring relative flex min-h-11 cursor-pointer items-start gap-2 px-3 py-3 text-sm select-none focus-visible:ring-2 focus-visible:outline-none',
            item.disabled && 'cursor-not-allowed opacity-50',
            draggingKeys.has(item.key) && 'opacity-40',
            !ctx.selectable.value && selectedSet.has(item.key) && 'bg-accent',
          ]"
          @click="(e) => onRowClick(e, item)"
          @dragstart="(e) => onItemDragStart(e, item)"
          @dragend="onItemDragEnd"
          @dragover="(e) => onItemDragOver(e, item)"
          @drop="(e) => onItemDrop(e, item)"
        >
          <span
            v-if="
              dropIndicator && dropIndicator.key === item.key && dropIndicator.position === 'before' && side === 'right'
            "
            class="bg-primary pointer-events-none absolute -top-px right-2 left-2 h-0.5 rounded-full"
            aria-hidden="true"
          />
          <span
            v-if="
              dropIndicator && dropIndicator.key === item.key && dropIndicator.position === 'after' && side === 'right'
            "
            class="bg-primary pointer-events-none absolute right-2 -bottom-px left-2 h-0.5 rounded-full"
            aria-hidden="true"
          />
          <Checkbox
            v-if="ctx.selectable.value"
            :model-value="selectedSet.has(item.key)"
            :disabled="item.disabled || ctx.disabled.value"
            @update:model-value="toggleItem(item, $event === true)"
            @click.stop
          />
          <div class="min-w-0 flex-1">
            <div class="truncate">{{ item.label }}</div>
            <div v-if="item.description" class="text-muted-foreground truncate text-xs">
              {{ item.description }}
            </div>
          </div>
          <GripVertical
            v-if="ctx.draggable.value && !item.disabled"
            class="text-muted-foreground/60 mt-0.5 size-3.5 shrink-0"
            aria-hidden="true"
          />
        </li>
        <li v-if="visible.length === 0" class="text-muted-foreground px-3 py-6 text-center text-sm">No items</li>
      </ul>
    </ScrollArea>

    <div
      v-if="ctx.pageSize.value && totalPages > 1"
      class="flex items-center justify-center gap-2 border-t p-2 text-xs"
    >
      <button
        type="button"
        class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
        :disabled="page <= 1"
        @click="prevPage"
      >
        Prev
      </button>
      <span class="tabular-nums">{{ page }} / {{ totalPages }}</span>
      <button
        type="button"
        class="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
        :disabled="page >= totalPages"
        @click="nextPage"
      >
        Next
      </button>
    </div>

    <div v-if="$slots.footer" class="border-t p-2">
      <slot name="footer" />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/transfer/TransferOperation.vue`

```vue
<script setup lang="ts">
import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'

defineProps<{
  canMoveRight: boolean
  canMoveLeft: boolean
  oneWay?: boolean
}>()

defineEmits<{
  (e: 'move-right'): void
  (e: 'move-left'): void
}>()
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-2 px-2">
    <Button
      size="icon-sm"
      variant="outline"
      :disabled="!canMoveRight"
      aria-label="Move selected to right"
      @click="$emit('move-right')"
    >
      <ChevronRight aria-hidden="true" />
    </Button>
    <Button
      v-if="!oneWay"
      size="icon-sm"
      variant="outline"
      :disabled="!canMoveLeft"
      aria-label="Move selected to left"
      @click="$emit('move-left')"
    >
      <ChevronLeft aria-hidden="true" />
    </Button>
  </div>
</template>

```

### `packages/registry-vue/components/transfer/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'

export interface TransferItem {
  key: string
  label: string
  description?: string
  disabled?: boolean
}

export type TransferSide = 'left' | 'right'

export interface TransferDragPayload {
  keys: string[]
  fromSide: TransferSide
}

export interface TransferContext {
  disabled: Ref<boolean>
  showSearch: Ref<boolean>
  height: Ref<number | string>
  pageSize: Ref<number | null>
  filterFn: (query: string, item: TransferItem) => boolean
  draggable: Ref<boolean>
  selectable: Ref<boolean>
  oneWay: Ref<boolean>
  dragPayload: Ref<TransferDragPayload | null>
  startDrag: (payload: TransferDragPayload) => void
  endDrag: () => void
  drop: (toSide: TransferSide, beforeKey: string | null) => void
}

export const TRANSFER_INJECTION_KEY: InjectionKey<TransferContext> = Symbol('uipkge-transfer')

```

### `packages/registry-vue/components/transfer/index.ts`

```ts
export type { TransferItem } from './context'
export { default as Transfer } from './Transfer.vue'
export { default as TransferList } from './TransferList.vue'
export { default as TransferOperation } from './TransferOperation.vue'

```

## tree-chart

- type: `registry:ui`
- description: Hierarchical tree wrapper around Apache ECharts. Orthogonal (LR/TB/RL/BT) or radial layout, optional roam, focus-on-hover for descendants.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/tree-chart/TreeChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { TreeChart as EChartsTreeChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import {
  chartColors,
  chartTextColor,
  chartAxisColor,
  chartTooltipBg,
  chartTooltipBorder,
  chartTooltipText,
} from '../useChartTheme'

use([CanvasRenderer, EChartsTreeChart, TooltipComponent])

interface TreeNode {
  name: string
  value?: number
  children?: TreeNode[]
  /** Collapse this branch on initial render. */
  collapsed?: boolean
}

interface Props {
  data: TreeNode
  /** `LR` (left-to-right, default), `TB` (top-down), `RL`, `BT`, or `radial`. */
  orient?: 'LR' | 'TB' | 'RL' | 'BT' | 'radial'
  /** Allow click-and-drag pan. Default false. */
  roam?: boolean
  height?: number | string
  option?: any
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  orient: 'LR',
  roam: false,
  height: 380,
})

const mergedOption = computed(() => {
  const layout = props.orient === 'radial' ? ('radial' as const) : ('orthogonal' as const)
  const series = [
    {
      type: 'tree',
      data: [props.data],
      layout,
      orient: layout === 'orthogonal' ? props.orient : undefined,
      roam: props.roam,
      symbol: 'circle',
      symbolSize: 10,
      initialTreeDepth: -1,
      top: 16,
      bottom: 16,
      left: layout === 'radial' ? '5%' : 16,
      right: layout === 'radial' ? '5%' : 60,
      label: {
        fontSize: 11,
        color: chartTextColor.value,
        position: layout === 'radial' ? ('inside' as const) : ('right' as const),
        verticalAlign: 'middle' as const,
        align: layout === 'radial' ? ('center' as const) : ('left' as const),
        distance: 6,
      },
      leaves: {
        label: { position: layout === 'radial' ? ('inside' as const) : ('right' as const) },
      },
      lineStyle: { color: chartAxisColor.value, width: 1.5, curveness: 0.5 },
      emphasis: { focus: 'descendant' as const },
      itemStyle: { color: chartColors.value[0], borderColor: chartColors.value[0] },
    },
  ]

  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      trigger: 'item',
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('w-full', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/tree-chart/index.ts`

```ts
export { default as TreeChart } from './TreeChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## tree-select

- type: `registry:ui`
- description: Select from tree-structured data with expand/collapse nodes, single or multi-select with checkboxes, and search filtering. Dropdown shows a nested tree; parent selection cascades to leaf descendants.
- npm deps: `lucide-vue-next`, `reka-ui`
- registry deps: `popover`

### `packages/registry-vue/components/tree-select/TreeSelect.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, ref, watch } from 'vue'
import { Check, ChevronDown, Loader2, Search, X } from 'lucide-vue-next'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'
import TreeSelectNode from './TreeSelectNode.vue'
import type { TreeSelectNode as TreeNode } from './types'

interface Props {
  modelValue?: string | string[] | null
  data: TreeNode[]
  multiple?: boolean
  placeholder?: string
  searchable?: boolean
  disabled?: boolean
  loading?: boolean
  clearable?: boolean
  defaultExpandAll?: boolean
  size?: 'sm' | 'default' | 'lg'
  emptyText?: string
  searchPlaceholder?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  placeholder: 'Select...',
  searchable: true,
  disabled: false,
  loading: false,
  clearable: true,
  defaultExpandAll: false,
  size: 'default',
  emptyText: 'No results found.',
  searchPlaceholder: 'Search...',
})

const emits = defineEmits<{
  'update:modelValue': [value: string | string[] | null]
  select: [node: TreeNode]
  change: [value: string | string[] | null]
  clear: []
}>()

const isOpen = ref(false)
const search = ref('')
const expandedIds = ref<Set<string>>(new Set())

function collectAllExpandable(nodes: TreeNode[]): string[] {
  const ids: string[] = []
  const walk = (list: TreeNode[]) => {
    for (const n of list) {
      if (n.children?.length) {
        ids.push(n.value)
        walk(n.children)
      }
    }
  }
  walk(nodes)
  return ids
}

watch(
  () => props.defaultExpandAll,
  (v) => {
    if (v) expandedIds.value = new Set(collectAllExpandable(props.data))
  },
  { immediate: true },
)

const selectedValues = computed<Set<string>>(() => {
  if (props.modelValue == null) return new Set()
  if (Array.isArray(props.modelValue)) return new Set(props.modelValue)
  return new Set([props.modelValue])
})

function findNode(nodes: TreeNode[], value: string): TreeNode | undefined {
  for (const n of nodes) {
    if (n.value === value) return n
    if (n.children) {
      const found = findNode(n.children, value)
      if (found) return found
    }
  }
  return undefined
}

function findLabels(nodes: TreeNode[], values: string[]): string[] {
  return values.map((v) => findNode(nodes, v)?.label ?? v)
}

const displayLabel = computed(() => {
  if (props.multiple) {
    const vals = Array.isArray(props.modelValue) ? props.modelValue : []
    if (vals.length === 0) return props.placeholder
    const labels = findLabels(props.data, vals)
    if (labels.length <= 3) return labels.join(', ')
    return `${labels.slice(0, 3).join(', ')} +${labels.length - 3}`
  }
  if (props.modelValue == null) return props.placeholder
  const node = findNode(props.data, props.modelValue as string)
  return node?.label ?? String(props.modelValue)
})

const hasValue = computed(() => {
  if (props.multiple) return Array.isArray(props.modelValue) && props.modelValue.length > 0
  return props.modelValue != null
})

// Search filtering: a node is visible if it or any descendant matches
const filteredIds = computed<Set<string> | null>(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return null
  const visible = new Set<string>()
  const walk = (nodes: TreeNode[]): boolean => {
    let anyMatch = false
    for (const n of nodes) {
      const selfMatch = n.label.toLowerCase().includes(q)
      let childMatch = false
      if (n.children?.length) {
        childMatch = walk(n.children)
      }
      if (selfMatch || childMatch) {
        visible.add(n.value)
        anyMatch = true
        // Auto-expand parents of matches
        if (childMatch) expandedIds.value.add(n.value)
      }
    }
    return anyMatch
  }
  walk(props.data)
  return visible
})

function toggleNode(node: TreeNode) {
  if (node.disabled) return
  const next = new Set(expandedIds.value)
  if (next.has(node.value)) next.delete(node.value)
  else next.add(node.value)
  expandedIds.value = next
}

function collectLeafValues(node: TreeNode): string[] {
  if (!node.children?.length) return [node.value]
  const vals: string[] = []
  for (const c of node.children) vals.push(...collectLeafValues(c))
  return vals
}

function selectNode(node: TreeNode) {
  if (node.disabled) return
  if (!props.multiple) {
    emits('update:modelValue', node.value)
    emits('change', node.value)
    emits('select', node)
    isOpen.value = false
    return
  }
  // Multi-select: toggle. For parent nodes, toggle all leaf descendants.
  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
  const leaves = collectLeafValues(node)
  const allSelected = leaves.every((v) => current.includes(v))
  let next: string[]
  if (allSelected) {
    next = current.filter((v) => !leaves.includes(v))
  } else {
    next = [...current, ...leaves.filter((v) => !current.includes(v))]
  }
  emits('update:modelValue', next)
  emits('change', next)
  emits('select', node)
}

function clearAll(event?: Event) {
  event?.stopPropagation()
  if (props.disabled) return
  emits('clear')
  if (props.multiple) {
    emits('update:modelValue', [])
    emits('change', [])
  } else {
    emits('update:modelValue', null)
    emits('change', null)
  }
}

watch(isOpen, (open) => {
  if (!open) search.value = ''
})

const sizeClasses = {
  sm: 'h-8 text-xs px-2.5',
  default: 'h-9 text-sm px-3',
  lg: 'h-11 text-base px-4',
}

const triggerClasses = computed(() =>
  cn(
    'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none',
    'hover:border-ring/50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
    'disabled:cursor-not-allowed disabled:opacity-50',
    sizeClasses[props.size],
    props.class,
  ),
)
</script>

<template>
  <Popover v-model:open="isOpen">
    <PopoverTrigger as-child>
      <button
        type="button"
        role="combobox"
        :aria-expanded="isOpen"
        :disabled="disabled || loading"
        data-uipkge
        data-slot="tree-select"
        :class="triggerClasses"
      >
        <span :class="['flex-1 truncate text-left', hasValue ? 'text-foreground' : 'text-muted-foreground']">
          {{ displayLabel }}
        </span>
        <span class="flex shrink-0 items-center gap-1">
          <Loader2 v-if="loading" class="text-muted-foreground size-4 animate-spin" />
          <span
            v-else-if="clearable && hasValue && !disabled"
            role="button"
            tabindex="0"
            aria-label="Clear"
            class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex size-4 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
            @click.stop="clearAll"
            @keydown.enter.prevent="clearAll"
            @keydown.space.prevent="clearAll"
          >
            <X class="size-4" />
          </span>
          <ChevronDown
            v-else
            class="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
            :class="isOpen ? 'rotate-180' : ''"
          />
        </span>
      </button>
    </PopoverTrigger>

    <PopoverContent class="p-0" align="start" :side-offset="4" :style="{ width: 'var(--reka-popover-trigger-width)' }">
      <div class="flex max-h-80 flex-col">
        <div v-if="searchable" class="border-b p-2">
          <div class="relative">
            <Search class="text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
            <input
              v-model="search"
              :placeholder="searchPlaceholder"
              aria-label="Search tree"
              class="border-input focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent pl-8 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
            />
          </div>
        </div>

        <div v-if="loading" class="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
          <Loader2 class="size-4 animate-spin" />
          Loading...
        </div>

        <div v-else-if="filteredIds && filteredIds.size === 0" class="text-muted-foreground py-6 text-center text-sm">
          {{ emptyText }}
        </div>

        <div v-else class="flex-1 overflow-y-auto p-1" role="tree">
          <TreeSelectNode
            v-for="node in data"
            :key="node.value"
            :node="node"
            :depth="0"
            :multiple="multiple"
            :expanded-ids="expandedIds"
            :selected-values="selectedValues"
            :filtered-ids="filteredIds"
            @toggle="toggleNode"
            @select="selectNode"
          />
        </div>

        <div
          v-if="multiple && Array.isArray(modelValue) && modelValue.length"
          class="flex items-center justify-between border-t px-2 py-1.5 text-xs"
        >
          <span class="text-muted-foreground">{{ modelValue.length }} selected</span>
          <button
            type="button"
            class="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 rounded focus-visible:ring-2 focus-visible:outline-none"
            @click="clearAll"
          >
            Clear all
          </button>
        </div>
      </div>
    </PopoverContent>
  </Popover>
</template>

```

### `packages/registry-vue/components/tree-select/TreeSelectNode.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { ChevronRight } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import type { TreeSelectNode } from './types'

interface Props {
  node: TreeSelectNode
  depth: number
  multiple: boolean
  expandedIds: Set<string>
  selectedValues: Set<string>
  filteredIds: Set<string> | null
}

const props = defineProps<Props>()
const emit = defineEmits<{
  toggle: [node: TreeSelectNode]
  select: [node: TreeSelectNode]
}>()

const hasChildren = computed(() => !!(props.node.children && props.node.children.length))
const isExpanded = computed(() => props.expandedIds.has(props.node.value))
const isChecked = computed(() => {
  if (!props.multiple) return props.selectedValues.has(props.node.value)
  if (props.selectedValues.has(props.node.value)) return true
  // Indeterminate: some (not all) descendants selected
  if (!hasChildren.value) return false
  const descendants = collectValues(props.node)
  const selected = descendants.filter((v) => props.selectedValues.has(v))
  return selected.length > 0 && selected.length < descendants.length
})
const isFullyChecked = computed(() => {
  if (!props.multiple) return false
  if (props.selectedValues.has(props.node.value)) return true
  if (!hasChildren.value) return false
  const descendants = collectValues(props.node)
  return descendants.length > 0 && descendants.every((v) => props.selectedValues.has(v))
})
const isVisible = computed(() => !props.filteredIds || props.filteredIds.has(props.node.value))

function collectValues(node: TreeSelectNode): string[] {
  const vals: string[] = []
  const walk = (n: TreeSelectNode) => {
    if (n.children?.length) {
      for (const c of n.children) walk(c)
    } else {
      vals.push(n.value)
    }
  }
  walk(node)
  return vals
}

function handleToggle(e: Event) {
  e.stopPropagation()
  emit('toggle', props.node)
}

function handleSelect() {
  if (props.node.disabled) return
  emit('select', props.node)
}

function handleCheckboxChange(e: Event) {
  e.stopPropagation()
  if (props.node.disabled) return
  emit('select', props.node)
}

const indent = computed(() => `${props.depth * 20 + 8}px`)
</script>

<template>
  <div v-if="isVisible" role="treeitem" :aria-expanded="hasChildren ? isExpanded : undefined">
    <div
      :class="
        cn(
          'group relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md pr-2 text-sm transition-colors',
          'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
          node.disabled && 'cursor-not-allowed opacity-50',
          !multiple && selectedValues.has(node.value) && 'bg-accent text-accent-foreground font-medium',
        )
      "
      :style="{ paddingLeft: indent }"
      :tabindex="node.disabled ? -1 : 0"
      role="button"
      @click="handleSelect"
      @keydown.enter.prevent="handleSelect"
    >
      <button
        v-if="hasChildren"
        type="button"
        :class="
          cn(
            'focus-visible:ring-ring flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-150 focus-visible:ring-2 focus-visible:outline-none',
            'hover:bg-foreground/10',
            isExpanded && 'rotate-90',
          )
        "
        :aria-label="isExpanded ? 'Collapse' : 'Expand'"
        @click="handleToggle"
      >
        <ChevronRight class="text-muted-foreground size-3.5" aria-hidden="true" />
      </button>
      <span v-else class="size-4 shrink-0" />

      <input
        v-if="multiple"
        type="checkbox"
        :checked="isFullyChecked || isChecked"
        :indeterminate.prop="isChecked && !isFullyChecked"
        :disabled="node.disabled"
        class="border-input text-primary focus:ring-ring size-3.5 shrink-0 rounded focus:ring-1"
        @change="handleCheckboxChange"
        @click.stop
      />

      <span class="flex-1 truncate">{{ node.label }}</span>
    </div>

    <div v-if="hasChildren && isExpanded" role="group">
      <TreeSelectNode
        v-for="child in node.children"
        :key="child.value"
        :node="child"
        :depth="depth + 1"
        :multiple="multiple"
        :expanded-ids="expandedIds"
        :selected-values="selectedValues"
        :filtered-ids="filteredIds"
        @toggle="emit('toggle', $event)"
        @select="emit('select', $event)"
      />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/tree-select/types.ts`

```ts
export interface TreeSelectNode {
  value: string
  label: string
  disabled?: boolean
  children?: TreeSelectNode[]
  [key: string]: unknown
}

```

### `packages/registry-vue/components/tree-select/index.ts`

```ts
export { default as TreeSelect } from './TreeSelect.vue'
export { default as TreeSelectNode } from './TreeSelectNode.vue'
export type { TreeSelectNode } from './types'

```

## tree-table

- type: `registry:ui`
- description: Hierarchical data table with expandable parent/child rows. Supports tree-structured data, column configuration, expand/collapse with per-level indent, row selection checkboxes, a loading overlay, and an empty state. Built on the existing table primitives.
- npm deps: `lucide-vue-next`
- registry deps: `table`, `checkbox`, `spinner`

### `packages/registry-vue/components/tree-table/TreeTable.vue`

```vue
<script setup lang="ts" generic="T extends TreeTableRow">
import { computed, onMounted, ref, watch, type HTMLAttributes } from 'vue'
import { ChevronRight, FileBox } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Checkbox } from '@/components/ui/checkbox'
import { Spinner } from '@/components/ui/spinner'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import type { TreeTableColumn, TreeTableRow } from './types'

interface Props {
  /** Tree-structured row data. */
  data: TreeTableRow<T>[]
  /** Column configuration. */
  columns: TreeTableColumn<T>[]
  /** Indent per nesting level in pixels. Default 24. */
  indent?: number
  /** Expand all rows on mount. Default false. */
  defaultExpanded?: boolean
  /** Show row selection checkboxes. Default false. */
  selectable?: boolean
  /** Loading state — shows a spinner overlay. Default false. */
  loading?: boolean
  /** Empty state message. Default 'No data.'. */
  emptyText?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  indent: 24,
  defaultExpanded: false,
  selectable: false,
  loading: false,
  emptyText: 'No data.',
})

const emit = defineEmits<{
  'update:selected': [ids: string[]]
  select: [ids: string[]]
  expand: [id: string, expanded: boolean]
}>()

const expanded = ref<Set<string>>(new Set())
const selected = ref<Set<string>>(new Set())

interface FlatRow {
  row: TreeTableRow<T>
  depth: number
  hasChildren: boolean
}

const flatRows = computed<FlatRow[]>(() => {
  const out: FlatRow[] = []
  const walk = (rows: TreeTableRow<T>[], depth: number) => {
    for (const row of rows) {
      const hasChildren = !!row.children?.length
      out.push({ row, depth, hasChildren })
      if (hasChildren && expanded.value.has(row.id)) {
        walk(row.children as TreeTableRow<T>[], depth + 1)
      }
    }
  }
  walk(props.data, 0)
  return out
})

function toggleExpand(row: TreeTableRow<T>) {
  const next = new Set(expanded.value)
  if (next.has(row.id)) next.delete(row.id)
  else next.add(row.id)
  expanded.value = next
  emit('expand', row.id, next.has(row.id))
}

function toggleSelect(row: TreeTableRow<T>) {
  const next = new Set(selected.value)
  if (next.has(row.id)) next.delete(row.id)
  else next.add(row.id)
  selected.value = next
  const ids = [...next]
  emit('update:selected', ids)
  emit('select', ids)
}

function isSelected(id: string): boolean {
  return selected.value.has(id)
}

function isExpanded(id: string): boolean {
  return expanded.value.has(id)
}

function expandAll() {
  const next = new Set<string>()
  const walk = (rows: TreeTableRow<T>[]) => {
    for (const row of rows) {
      if (row.children?.length) {
        next.add(row.id)
        walk(row.children as TreeTableRow<T>[])
      }
    }
  }
  walk(props.data)
  expanded.value = next
}

function collapseAll() {
  expanded.value = new Set()
}

onMounted(() => {
  if (props.defaultExpanded) expandAll()
})

// Reset expanded/selected state when data identity changes.
watch(
  () => props.data,
  () => {
    if (props.defaultExpanded) expandAll()
  },
  { deep: false },
)

const isEmpty = computed(() => flatRows.value.length === 0)
</script>

<template>
  <div data-uipkge data-slot="tree-table" :class="cn('relative w-full', props.class)">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead v-if="selectable" class="w-10">
            <span class="sr-only">Select</span>
          </TableHead>
          <TableHead v-for="col in columns" :key="col.key" :class="cn(col.headerClass)">
            {{ col.label }}
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow
          v-for="fr in flatRows"
          :key="fr.row.id"
          :data-depth="fr.depth"
          :data-expanded="fr.hasChildren ? isExpanded(fr.row.id) : undefined"
          :data-selected="isSelected(fr.row.id) ? '' : undefined"
        >
          <!-- Selection checkbox -->
          <TableCell v-if="selectable" class="w-10">
            <Checkbox :model-value="isSelected(fr.row.id)" @update:model-value="toggleSelect(fr.row)" />
          </TableCell>

          <!-- Data cells -->
          <TableCell v-for="(col, ci) in columns" :key="col.key" :class="cn(ci === 0 && 'font-medium', col.cellClass)">
            <div class="flex items-center" :style="ci === 0 ? { paddingLeft: `${fr.depth * indent}px` } : {}">
              <!-- Expand toggle on the first column -->
              <button
                v-if="ci === 0 && fr.hasChildren"
                type="button"
                class="text-muted-foreground hover:bg-muted hover:text-foreground mr-1.5 flex size-5 shrink-0 items-center justify-center rounded"
                :aria-label="isExpanded(fr.row.id) ? 'Collapse' : 'Expand'"
                :aria-expanded="isExpanded(fr.row.id)"
                @click="toggleExpand(fr.row)"
              >
                <slot name="expand-icon" :expanded="isExpanded(fr.row.id)">
                  <ChevronRight
                    class="size-4 transition-transform duration-150"
                    :class="isExpanded(fr.row.id) ? 'rotate-90' : ''"
                  />
                </slot>
              </button>
              <span v-else-if="ci === 0" class="mr-1.5 w-5 shrink-0" />

              <slot :name="`cell-${col.key}`" :row="fr.row" :depth="fr.depth">
                {{ col.render ? col.render(fr.row as T) : fr.row[col.key] }}
              </slot>
            </div>
          </TableCell>
        </TableRow>

        <!-- Empty state -->
        <TableRow v-if="isEmpty && !loading">
          <TableCell :colspan="columns.length + (selectable ? 1 : 0)" class="h-24 text-center">
            <div class="text-muted-foreground flex flex-col items-center gap-2">
              <FileBox class="size-8" />
              <span class="text-sm">{{ emptyText }}</span>
            </div>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>

    <!-- Loading overlay -->
    <div v-if="loading" class="bg-background/60 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
      <Spinner size="lg" />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/tree-table/types.ts`

```ts
export interface TreeTableColumn<T = any> {
  /** Unique key matching a field on the row data. */
  key: string
  /** Header label. */
  label: string
  /** Optional class for the header cell. */
  headerClass?: string
  /** Optional class for body cells in this column. */
  cellClass?: string
  /** Custom cell renderer: receives the row and returns a string or VNode-friendly value. */
  render?: (row: T) => any
}

export interface TreeTableRow<T = any> {
  /** Unique id for the row. */
  id: string
  /** Row data fields keyed by column key. */
  [key: string]: any
  /** Child rows. */
  children?: TreeTableRow<T>[]
}

```

### `packages/registry-vue/components/tree-table/index.ts`

```ts
export { default as TreeTable } from './TreeTable.vue'
export type { TreeTableColumn, TreeTableRow } from './types'

```

## tree-view

- type: `registry:ui`
- description: Indented tree of expandable nodes — file browsers, taxonomy editors, nested settings. Discord-style elbow connectors, lazy-load branches, and full keyboard navigation.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/tree-view/TreeView.vue`

```vue
<script setup lang="ts">
import { onMounted, provide, ref, toRef, watch, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
import { TREE_VIEW_CONTEXT } from './context'
import type { TreeViewItem } from './types'

interface Props {
  items: TreeViewItem[]
  class?: HTMLAttributes['class']
  showIcons?: boolean
  showCheckboxes?: boolean
  defaultExpanded?: boolean
  selectedId?: string | null
}

const props = withDefaults(defineProps<Props>(), {
  showIcons: true,
  showCheckboxes: false,
  defaultExpanded: false,
  selectedId: null,
})

const emit = defineEmits<{
  select: [item: TreeViewItem]
  toggle: [item: TreeViewItem]
  'update:selectedId': [id: string | null]
}>()

const expandedIds = ref<Set<string>>(new Set())
const selectedId = ref<string | null>(props.selectedId)

watch(
  () => props.selectedId,
  (val) => {
    selectedId.value = val
  },
)

function toggle(item: TreeViewItem) {
  if (item.disabled) return
  const next = new Set(expandedIds.value)
  if (next.has(item.id)) next.delete(item.id)
  else next.add(item.id)
  expandedIds.value = next
  emit('toggle', item)
}

function select(item: TreeViewItem) {
  if (item.disabled) return
  selectedId.value = item.id
  emit('select', item)
  emit('update:selectedId', item.id)
}

provide(TREE_VIEW_CONTEXT, {
  expandedIds,
  selectedId,
  showIcons: toRef(props, 'showIcons'),
  showCheckboxes: toRef(props, 'showCheckboxes'),
  toggle,
  select,
})

onMounted(() => {
  if (!props.defaultExpanded) return
  const next = new Set<string>()
  const walk = (items: TreeViewItem[]) => {
    for (const it of items) {
      if (it.children?.length) {
        next.add(it.id)
        walk(it.children)
      }
    }
  }
  walk(props.items)
  expandedIds.value = next
})
</script>

<template>
  <div :class="cn('text-sm', props.class)" role="tree">
    <TreeViewNode v-for="(item, i) in items" :key="item.id" :item="item" :depth="0" :is-last="i === items.length - 1" />
  </div>
</template>

```

### `packages/registry-vue/components/tree-view/TreeViewNode.vue`

```vue
<script setup lang="ts">
import { computed, inject } from 'vue'
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { TREE_VIEW_CONTEXT } from './context'
import type { TreeViewItem } from './types'

interface Props {
  item: TreeViewItem
  depth: number
  isLast?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isLast: false,
})

const _maybeCtx = inject(TREE_VIEW_CONTEXT)
if (!_maybeCtx) throw new Error('TreeViewNode must be used inside <TreeView>')
const ctx: NonNullable<typeof _maybeCtx> = _maybeCtx

const isExpanded = computed(() => ctx.expandedIds.value.has(props.item.id))
const isSelected = computed(() => ctx.selectedId.value === props.item.id)
const hasChildren = computed(() => !!(props.item.children && props.item.children.length))

const Icon = computed(() => {
  if (!ctx.showIcons.value) return null
  if (props.item.icon) return props.item.icon
  if (!hasChildren.value) return File
  return isExpanded.value ? FolderOpen : Folder
})

function handleToggle(e: Event) {
  e.stopPropagation()
  ctx.toggle(props.item)
}

function handleSelect() {
  if (props.item.disabled) return
  ctx.select(props.item)
}

// 20px per level. Connector lives in parent's gutter (depth - 1).
const INDENT = 20
const rowPadLeft = computed(() => `${props.depth * INDENT + 4}px`)
const connectorLeft = computed(() => `${(props.depth - 1) * INDENT + 10}px`)
</script>

<template>
  <div role="treeitem" :aria-expanded="hasChildren ? isExpanded : undefined" class="relative">
    <!-- Discord-style elbow + trunk for non-root nodes. The elbow points
         from the parent's chevron column down to this row's center; the
         trunk continues to the next sibling at this depth (omitted on the
         last sibling). -->
    <span
      v-if="depth > 0"
      aria-hidden="true"
      class="border-border pointer-events-none absolute top-0 h-4 w-3 rounded-bl-md border-b border-l"
      :style="{ left: connectorLeft }"
    />
    <span
      v-if="depth > 0 && !isLast"
      aria-hidden="true"
      class="bg-border pointer-events-none absolute top-4 bottom-0 w-px"
      :style="{ left: connectorLeft }"
    />

    <!-- Row -->
    <div
      :class="
        cn(
          'group relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md pr-2 text-sm transition-colors',
          'hover:bg-accent hover:text-accent-foreground',
          'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
          item.disabled && 'cursor-not-allowed opacity-50',
          isSelected && 'bg-accent text-accent-foreground font-medium',
        )
      "
      :style="{ paddingLeft: rowPadLeft }"
      :tabindex="item.disabled ? -1 : 0"
      role="button"
      @click="handleSelect"
      @keydown.enter.prevent="handleSelect"
      @keydown.space.prevent="handleSelect"
    >
      <!-- Chevron (or 16px spacer for leaves so labels align) -->
      <button
        v-if="hasChildren"
        type="button"
        :class="
          cn(
            'focus-visible:ring-ring flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-150 focus-visible:ring-2 focus-visible:outline-none',
            'hover:bg-foreground/10',
            isExpanded && 'rotate-90',
          )
        "
        :aria-label="isExpanded ? 'Collapse' : 'Expand'"
        @click="handleToggle"
      >
        <ChevronRight class="text-muted-foreground size-3.5" aria-hidden="true" />
      </button>
      <span v-else class="size-4 shrink-0" />

      <!-- Checkbox -->
      <input
        v-if="ctx.showCheckboxes.value"
        type="checkbox"
        :checked="item.selected"
        :disabled="item.disabled"
        class="border-input bg-background text-primary focus:ring-ring focus-visible:ring-ring size-3.5 shrink-0 rounded focus:ring-1 focus-visible:ring-2 focus-visible:outline-none"
        @change="handleSelect"
        @click.stop
      />

      <!-- Icon -->
      <component
        :is="Icon"
        v-if="Icon"
        :class="cn('size-4 shrink-0', hasChildren ? 'text-primary' : 'text-muted-foreground')"
      />

      <!-- Label -->
      <span class="flex-1 truncate">{{ item.label }}</span>
    </div>

    <!-- Children -->
    <div v-if="hasChildren && isExpanded" role="group">
      <TreeViewNode
        v-for="(child, j) in item.children"
        :key="child.id"
        :item="child"
        :depth="depth + 1"
        :is-last="j === (item.children?.length ?? 0) - 1"
      />
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/tree-view/context.ts`

```ts
import type { InjectionKey, Ref } from 'vue'
import type { TreeViewItem } from './types'

export interface TreeViewContext {
  expandedIds: Ref<Set<string>>
  selectedId: Ref<string | null>
  showIcons: Ref<boolean>
  showCheckboxes: Ref<boolean>
  toggle: (item: TreeViewItem) => void
  select: (item: TreeViewItem) => void
}

export const TREE_VIEW_CONTEXT: InjectionKey<TreeViewContext> = Symbol('TreeViewContext')

```

### `packages/registry-vue/components/tree-view/types.ts`

```ts
import type { File } from 'lucide-vue-next'

export interface TreeViewItem {
  id: string
  label: string
  icon?: typeof File
  children?: TreeViewItem[]
  disabled?: boolean
  selected?: boolean
  expanded?: boolean
  [key: string]: unknown
}

```

### `packages/registry-vue/components/tree-view/index.ts`

```ts
export { default as TreeView } from './TreeView.vue'
export { default as TreeViewNode } from './TreeViewNode.vue'
export type { TreeViewItem } from './types'

```

## treemap-chart

- type: `registry:ui`
- description: Treemap wrapper around Apache ECharts. Hierarchical area-by-value visualization with nested and color-by-value variants. Theme-aware via registry tokens.
- npm deps: `echarts`, `vue-echarts`

### `packages/registry-vue/components/charts/treemap-chart/TreemapChart.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { TreemapChart as EChartsTreemapChart } from 'echarts/charts'
// VisualMapComponent registered alongside Tooltip so consumers can hand a
// `visualMap` config via the option escape hatch (color-by-value variant).
import { TooltipComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import { cn } from '@/lib/utils'
import { chartColors, chartTooltipBg, chartTooltipBorder, chartTooltipText } from '../useChartTheme'

interface TreeNode {
  name: string
  value?: number
  children?: TreeNode[]
}

interface Props {
  data: TreeNode[]
  height?: number | string
  /** Show breadcrumb at top when drilling into a sub-tree. Default false. */
  showBreadcrumb?: boolean
  option?: any
  class?: string
}

use([CanvasRenderer, EChartsTreemapChart, TooltipComponent, VisualMapComponent])

const props = withDefaults(defineProps<Props>(), {
  height: 320,
  showBreadcrumb: false,
})

const mergedOption = computed(() => {
  const series = [
    {
      type: 'treemap',
      // Explicit left/top/right/bottom anchor the layout at 0,0 of the
      // container. Without these, ECharts centres the treemap and the
      // (invisible) breadcrumb still reserves ~22px at the top -- shows
      // up as a phantom gap above the first rect.
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      width: 'auto',
      height: 'auto',
      roam: false,
      nodeClick: false,
      breadcrumb: { show: props.showBreadcrumb, height: 0 },
      label: {
        show: true,
        formatter: ({ name, value }: any) => (value ? `{b|${name}}\n{v|${value}}` : name),
        rich: {
          b: { color: '#fff', fontSize: 11, fontWeight: 600, lineHeight: 14 },
          v: { color: 'rgba(255,255,255,0.85)', fontSize: 10, fontWeight: 500, lineHeight: 12 },
        },
        overflow: 'truncate',
        ellipsis: '…',
      },
      labelLayout: { hideOverlap: false },
      upperLabel: { show: false },
      // gapWidth carves out the tile separators; an explicit borderColor
      // would render as a contrasting stripe on the consumer's theme
      // (white in dark mode, etc.). The gap reads as separation already.
      itemStyle: { borderWidth: 0, gapWidth: 2 },
      // The earlier `levels` config carried `colorSaturation` per depth
      // for nested trees, but it also implicitly cleared the series
      // `label` config at each level -- which meant flat data (the
      // common case) rendered as untitled coloured rectangles. Apply
      // saturation directly on the series so a single level config
      // doesn't blow away the labels.
      colorSaturation: [0.45, 0.7],
      data: props.data,
    },
  ]

  // Per-index series merge — partial overrides keep computed `type`/`data`.
  const userOption: any = props.option ?? {}
  const { series: userSeries, ...userRest } = userOption
  const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

  return {
    color: chartColors.value,
    tooltip: {
      formatter: (info: any) => {
        const parts = info.treePathInfo.map((n: any) => n.name).filter(Boolean)
        return `<strong>${parts.join(' / ')}</strong><br>${info.value?.toLocaleString?.() ?? info.value}`
      },
      backgroundColor: chartTooltipBg.value,
      borderColor: chartTooltipBorder.value,
      textStyle: { color: chartTooltipText.value, fontSize: 12 },
    },
    series: mergedSeries,
    ...userRest,
  }
})
</script>

<template>
  <div
    role="img"
    tabindex="0"
    :style="{ height: /^\d+$/.test(String(height)) ? `${height}px` : String(height) }"
    :class="cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', props.class)"
  >
    <VChart :option="mergedOption" :autoresize="true" class="size-full" />
  </div>
</template>

```

### `packages/registry-vue/components/charts/treemap-chart/index.ts`

```ts
export { default as TreemapChart } from './TreemapChart.vue'

```

### `packages/registry-vue/components/charts/useChartTheme.ts`

```ts
import { computed, ref, type ComputedRef } from 'vue'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump `themeKey` whenever `<html>` class/style changes (the typical
// shadcn dark-mode pivot) so every consuming `computed` re-resolves and
// downstream ECharts options re-paint.

const themeKey = ref(0)

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // computed pass returns the fallbacks below).
  requestAnimationFrame(() => themeKey.value++)
  new MutationObserver(() => themeKey.value++).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

export const chartColors: ComputedRef<string[]> = computed(() => {
  themeKey.value
  return Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!))
})

export const chartTextColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--muted-foreground', '#888888')
})

export const chartAxisColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartSplitLineColor: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#f0f0f0')
})

export const chartTooltipBg: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover', 'rgba(255,255,255,0.96)')
})

export const chartTooltipBorder: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--border', '#e5e5e5')
})

export const chartTooltipText: ComputedRef<string> = computed(() => {
  themeKey.value
  return resolveVar('--popover-foreground', '#333333')
})

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `props.option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

## use-board

- type: `registry:hook`
- description: State + handlers for the `@uipkge/board` compositional primitive. Returns a reactive `state` (draggingId / dragOverLaneId / justMovedId), `handlers` to bind on lanes and cards (onDragStart / onLaneDragOver / onLaneDragLeave / onLaneDrop / onDragEnd), and an imperative `moveItem(itemId, toLaneId, toIndex?)` — used by keyboard navigation, undo, or server-pushed updates. Drop math computes the insertion index from pointer Y vs each card's bounding-box midpoint. An `accepts` predicate gives consumers a per-lane veto. The composable doesn't mutate your lanes data directly — it emits `onChange({ itemId, from, to, index })` so you stay in control of the canonical store (Pinia, Drizzle, server). Imports the Board's shared types from `@/components/ui/board/context` so `npx shadcn-vue add @uipkge/board` and `npx shadcn-vue add @uipkge/use-board` produce a typed, drop-in pairing.
- registry deps: `board`

### `packages/registry-vue/bootstrap/use-board/useBoard.ts`

```ts
import { reactive, ref, type ComputedRef, type Ref } from 'vue'
import type { BoardAcceptsFn, BoardDropEvent } from '@/components/ui/board/context'

export interface UseBoardOptions<TItem extends { id: string }> {
  /** Reactive source of truth: lane id → items in that lane. */
  lanes: Ref<Record<string, TItem[]>> | ComputedRef<Record<string, TItem[]>>
  /** Optional accept predicate (runs in addition to per-card allowedLanes
   *  and per-lane disabled flags). Returning false rejects the drop. */
  accepts?: BoardAcceptsFn
  /** Fires on every successful move (DnD or imperative). */
  onChange?: (event: BoardDropEvent) => void
  /** ms before `state.justMovedId` clears. Default 600. */
  highlightMs?: number
}

export interface UseBoardReturn {
  state: {
    draggingId: string | null
    draggingIds: readonly string[]
    dragOverLaneId: string | null
    justMovedId: string | null
    selectedIds: ReadonlySet<string>
  }
  handlers: {
    onDragStart: (e: DragEvent, itemId: string, laneId: string) => void
    onLaneDragOver: (e: DragEvent, laneId: string) => void
    onLaneDragLeave: (laneId: string) => void
    onLaneDrop: (e: DragEvent, laneId: string) => void
    onDragEnd: () => void
  }
  /** Imperative — used by keyboard handlers, undo, server-pushed updates.
   *  Pass a single id OR an array of ids; arrays move as a group while
   *  preserving their relative order. */
  moveItem: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** Toggle one item in the selection set. When `additive=false` (the
   *  default for plain clicks), the call replaces the selection with
   *  just this item; when `true` (cmd/shift+click), the call adds or
   *  removes the item from the existing set. */
  toggleSelection: (itemId: string, additive?: boolean) => void
  clearSelection: () => void
  /** Per-card allowed-lanes registry — Board's `<BoardCard>` writes here
   *  on mount; lanes call `isLaneAcceptingFor` (exposed through context)
   *  to query. Exported for advanced consumers that want to drive it
   *  externally. */
  registerAllowedLanes: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes: (cardId: string) => void
  registerLaneDisabled: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled: (laneId: string) => void
  isLaneAcceptingFor: (laneId: string) => boolean
  accepts: BoardAcceptsFn
}

const ALWAYS = () => true

/**
 * Board state + DnD orchestration. Designed to back the `@uipkge/board`
 * compositional primitive but usable with any rendering layer — the lane
 * components only need to bind handlers and read the reactive state.
 *
 * Capabilities:
 *   - Insertion-index drop: pointer Y vs each card's bounding-box midpoint
 *   - Multi-item drag: grabbing a selected card drags the whole selection
 *   - Per-card `allowedLanes` allow-list (BoardCard registers on mount)
 *   - Per-lane `disabled` flag (BoardLane registers on mount)
 *   - `accepts` predicate runs in addition to the two above
 */
export function useBoard<TItem extends { id: string }>(opts: UseBoardOptions<TItem>): UseBoardReturn {
  const accepts: BoardAcceptsFn = opts.accepts ?? ALWAYS
  const highlightMs = opts.highlightMs ?? 600

  const state = reactive({
    draggingId: null as string | null,
    draggingIds: [] as readonly string[],
    dragOverLaneId: null as string | null,
    justMovedId: null as string | null,
    selectedIds: new Set<string>() as ReadonlySet<string>,
  })

  const sourceLaneByDragId = ref<string | null>(null)
  let _highlightTimer: ReturnType<typeof setTimeout> | null = null

  // Per-card allowed-lanes + per-lane disabled registries. Both are
  // reactive enough through Map mutation + array reassignment because
  // we only read them on event dispatch (not in templates).
  const allowedLanesByCard = new Map<string, readonly string[]>()
  const disabledLanes = new Set<string>()

  function findItem(itemId: string): { item: TItem; laneId: string; index: number } | null {
    const lanes = opts.lanes.value
    for (const laneId of Object.keys(lanes)) {
      const idx = lanes[laneId]!.findIndex((it) => it.id === itemId)
      if (idx !== -1) return { item: lanes[laneId]![idx]!, laneId, index: idx }
    }
    return null
  }

  function isAllowed(itemId: string, fromLaneId: string, toLaneId: string): boolean {
    if (disabledLanes.has(toLaneId)) return false
    const allow = allowedLanesByCard.get(itemId)
    if (allow && !allow.includes(toLaneId)) return false
    return accepts(itemId, fromLaneId, toLaneId)
  }

  function flashMoved(itemId: string) {
    state.justMovedId = itemId
    if (_highlightTimer) clearTimeout(_highlightTimer)
    _highlightTimer = setTimeout(() => {
      if (state.justMovedId === itemId) state.justMovedId = null
    }, highlightMs)
  }

  function moveItem(itemId: string | string[], toLaneId: string, toIndex?: number) {
    const ids = Array.isArray(itemId) ? itemId : [itemId]
    if (ids.length === 0) return

    // Resolve each, in DOM order across lanes (snapshot before mutation).
    const resolved = ids
      .map((id) => findItem(id))
      .filter((x): x is { item: TItem; laneId: string; index: number } => !!x)
    if (resolved.length === 0) return

    // All-or-nothing: if ANY item is rejected by the destination
    // (per-card allowedLanes / lane disabled / accepts predicate), the
    // whole move aborts. Matches the dragover visual which already
    // refuses to highlight as accepting when one item in the selection
    // isn't allowed — keeps single + multi-select drops feeling the same.
    const allAllowed = resolved.every((r) => isAllowed(r.item.id, r.laneId, toLaneId))
    if (!allAllowed) return
    const movable = resolved

    const lanes = { ...opts.lanes.value }
    // 1. Remove every movable item from its current lane (in reverse-index
    //    order per-lane so indices stay valid during splice).
    const byLane = new Map<string, number[]>()
    for (const r of movable) {
      if (!byLane.has(r.laneId)) byLane.set(r.laneId, [])
      byLane.get(r.laneId)!.push(r.index)
    }
    for (const [laneId, indices] of byLane.entries()) {
      const next = [...lanes[laneId]!]
      indices.sort((a, b) => b - a).forEach((idx) => next.splice(idx, 1))
      lanes[laneId] = next
    }

    // 2. Insert all movable items into the destination at toIndex, in their
    //    original cross-lane order.
    const inserts = movable.map((r) => r.item)
    const dest = [...(lanes[toLaneId] ?? [])]
    // If the target previously held some of the moved items, the index the
    // consumer asked for (toIndex) was computed against the pre-splice
    // layout. Clamp post-splice.
    const insertAt = Math.max(0, Math.min(dest.length, toIndex ?? dest.length))
    dest.splice(insertAt, 0, ...inserts)
    lanes[toLaneId] = dest
    ;(opts.lanes as Ref<Record<string, TItem[]>>).value = lanes

    flashMoved(movable[0]!.item.id)
    opts.onChange?.({
      itemId: movable[0]!.item.id,
      itemIds: movable.map((r) => r.item.id),
      from: movable[0]!.laneId,
      to: toLaneId,
      index: insertAt,
    })
  }

  function computeInsertIndex(e: DragEvent, laneId: string): number {
    const laneEl = (e.currentTarget as HTMLElement | null) ?? null
    if (!laneEl) return opts.lanes.value[laneId]?.length ?? 0
    const cards = Array.from(laneEl.querySelectorAll<HTMLElement>('[data-board-card]'))
    // Exclude every card currently being dragged from the insertion math —
    // those rows will close once we splice, and we want the pointer-relative
    // position among the remaining cards.
    const dragging = new Set(state.draggingIds)
    const otherCards = cards.filter((c) => {
      const id = c.getAttribute('data-board-card-id')
      return id ? !dragging.has(id) : true
    })
    for (let i = 0; i < otherCards.length; i++) {
      const rect = otherCards[i]!.getBoundingClientRect()
      const midpoint = rect.top + rect.height / 2
      if (e.clientY < midpoint) return i
    }
    return otherCards.length
  }

  function toggleSelection(itemId: string, additive = false) {
    const next = new Set(state.selectedIds)
    if (additive) {
      if (next.has(itemId)) next.delete(itemId)
      else next.add(itemId)
    } else {
      next.clear()
      next.add(itemId)
    }
    state.selectedIds = next
  }

  function clearSelection() {
    if (state.selectedIds.size === 0) return
    state.selectedIds = new Set<string>()
  }

  const handlers: UseBoardReturn['handlers'] = {
    onDragStart(e, itemId, laneId) {
      // If the grabbed card is part of the current selection, drag the
      // whole set; otherwise drag this one alone (and clear selection so
      // the next single click doesn't surprise the user).
      const inSelection = state.selectedIds.has(itemId)
      const ids = inSelection && state.selectedIds.size > 1 ? Array.from(state.selectedIds) : [itemId]
      if (!inSelection) clearSelection()
      state.draggingId = itemId
      state.draggingIds = ids
      sourceLaneByDragId.value = laneId
      if (e.dataTransfer) {
        e.dataTransfer.setData('text/plain', itemId)
        e.dataTransfer.effectAllowed = 'move'
      }
    },
    onLaneDragOver(e, laneId) {
      if (!state.draggingId) return
      const fromLane = sourceLaneByDragId.value ?? laneId
      // All dragging items must be allowed at the target — reject the
      // whole drop if any one is blocked.
      const allOk = state.draggingIds.every((id) => isAllowed(id, fromLane, laneId))
      // dragOverLaneId is set in BOTH branches so the lane can show its
      // rejecting visual (red ring) on hover, not just its accepting
      // visual. preventDefault only fires on accept — without it the
      // browser refuses the drop, exactly what we want for rejected hits.
      state.dragOverLaneId = laneId
      if (!allOk) {
        if (e.dataTransfer) e.dataTransfer.dropEffect = 'none'
        return
      }
      e.preventDefault()
      if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
    },
    onLaneDragLeave(laneId) {
      if (state.dragOverLaneId === laneId) state.dragOverLaneId = null
    },
    onLaneDrop(e, laneId) {
      e.preventDefault()
      const fallbackId = e.dataTransfer?.getData('text/plain') || state.draggingId
      const ids = state.draggingIds.length > 0 ? state.draggingIds : fallbackId ? [fallbackId] : []
      if (ids.length === 0) return
      const insertAt = computeInsertIndex(e, laneId)
      moveItem([...ids], laneId, insertAt)
      state.draggingId = null
      state.draggingIds = []
      state.dragOverLaneId = null
      sourceLaneByDragId.value = null
    },
    onDragEnd() {
      state.draggingId = null
      state.draggingIds = []
      state.dragOverLaneId = null
      sourceLaneByDragId.value = null
    },
  }

  return {
    state,
    handlers,
    moveItem,
    toggleSelection,
    clearSelection,
    accepts,
    registerAllowedLanes: (cardId, lanes) => {
      if (lanes && lanes.length > 0) allowedLanesByCard.set(cardId, lanes)
      else allowedLanesByCard.delete(cardId)
    },
    unregisterAllowedLanes: (cardId) => {
      allowedLanesByCard.delete(cardId)
    },
    registerLaneDisabled: (laneId, disabled) => {
      if (disabled) disabledLanes.add(laneId)
      else disabledLanes.delete(laneId)
    },
    unregisterLaneDisabled: (laneId) => {
      disabledLanes.delete(laneId)
    },
    isLaneAcceptingFor: (laneId) => {
      if (!state.draggingId) return false
      const fromLane = sourceLaneByDragId.value ?? laneId
      return state.draggingIds.every((id) => isAllowed(id, fromLane, laneId))
    },
  }
}

/** Type-only helper for consumers that want to type the lanes ref locally. */
export type BoardLanes<TItem extends { id: string }> = Record<string, TItem[]>

```

## use-kanban

- type: `registry:hook`
- description: Types (KanbanTask, KanbanColumn, CommentItem, FileItem), configs (priorityConfig with icons, assignee colour palette, tagPresets, fileIconMap), and helpers (getInitials, getDueStatus, formatDueDate, findTaskById, getTaskColumn). Shipped as a sibling to the kanban-board block so all the kanban Vue files import the same types and assignee/tag presets.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/bootstrap/use-kanban/useKanban.ts`

```ts
import { CircleAlert, ArrowUp, ArrowDown, Minus, FileText, FileSpreadsheet, FileImage, File } from 'lucide-vue-next'

export interface CommentItem {
  id: string
  author: string
  authorColor: string
  text: string
  time: string
}

export interface FileItem {
  id: string
  name: string
  size: string
  type: 'pdf' | 'spreadsheet' | 'image' | 'other'
}

export interface KanbanTask {
  id: string
  title: string
  description?: string
  priority: 'low' | 'medium' | 'high' | 'urgent'
  assignee: { name: string; color: string }
  tags: { label: string; color: string }[]
  dueDate?: string
  parentId?: string
  subtaskIds: string[]
  commentItems: CommentItem[]
  fileItems: FileItem[]
}

export interface KanbanColumn {
  id: string
  title: string
  color: string
  dotColor: string
  tasks: KanbanTask[]
}

export const priorityConfig: Record<string, { icon: any; class: string; label: string; bg: string }> = {
  urgent: { icon: CircleAlert, class: 'text-red-500', label: 'Urgent', bg: 'bg-red-500' },
  high: { icon: ArrowUp, class: 'text-orange-500', label: 'High', bg: 'bg-orange-500' },
  medium: { icon: Minus, class: 'text-yellow-500 dark:text-yellow-400', label: 'Medium', bg: 'bg-yellow-500' },
  low: { icon: ArrowDown, class: 'text-blue-400', label: 'Low', bg: 'bg-blue-400' },
}

export const assignees = {
  alice: { name: 'Alice Chen', color: 'bg-orange-500/15 text-orange-600 dark:text-orange-400' },
  bob: { name: 'Bob Martinez', color: 'bg-blue-500/15 text-blue-600 dark:text-blue-400' },
  carol: { name: 'Carol White', color: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' },
  david: { name: 'David Kim', color: 'bg-violet-500/15 text-violet-600 dark:text-violet-400' },
  eva: { name: 'Eva Johnson', color: 'bg-rose-500/15 text-rose-600 dark:text-rose-400' },
  frank: { name: 'Frank Lee', color: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400' },
}

export const tagPresets = {
  onboarding: { label: 'Onboarding', color: 'bg-sky-500/10 text-sky-600 dark:text-sky-400 ring-sky-500/20' },
  compliance: { label: 'Compliance', color: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20' },
  recruitment: {
    label: 'Recruitment',
    color: 'bg-violet-500/10 text-violet-600 dark:text-violet-400 ring-violet-500/20',
  },
  payroll: { label: 'Payroll', color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20' },
  training: { label: 'Training', color: 'bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-rose-500/20' },
  benefits: { label: 'Benefits', color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 ring-orange-500/20' },
  policy: { label: 'Policy', color: 'bg-slate-500/10 text-slate-600 dark:text-slate-400 ring-slate-500/20' },
}

export const fileIconMap: Record<string, any> = {
  pdf: FileText,
  spreadsheet: FileSpreadsheet,
  image: FileImage,
  other: File,
}

export function getInitials(name: string) {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()
}

export function getDueStatus(dueDate?: string): 'overdue' | 'soon' | 'normal' | null {
  if (!dueDate) return null
  const now = new Date()
  const due = new Date(dueDate + 'T00:00:00')
  const diffDays = Math.ceil((due.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  if (diffDays < 0) return 'overdue'
  if (diffDays <= 3) return 'soon'
  return 'normal'
}

export function formatDueDate(dueDate: string): string {
  const date = new Date(dueDate + 'T00:00:00')
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

export function getAssigneeKey(name: string): keyof typeof assignees {
  for (const [key, val] of Object.entries(assignees)) {
    if (val.name === name) return key as keyof typeof assignees
  }
  return 'alice'
}

export function findTaskById(columns: KanbanColumn[], taskId: string): KanbanTask | undefined {
  for (const col of columns) {
    const task = col.tasks.find((t) => t.id === taskId)
    if (task) return task
  }
  return undefined
}

export function getTaskColumn(columns: KanbanColumn[], taskId: string): KanbanColumn | undefined {
  return columns.find((col) => col.tasks.some((t) => t.id === taskId))
}

```

## use-month-grid

- type: `registry:hook`
- description: Headless month-grid + drag/shift range-select composable. Returns the 42-cell grid, today/cursor refs, range state, and mouse handlers. Domain-agnostic -- pair with EventCalendar or any month-shaped UI by reading the returned refs. Also exports isoDate / dateFromKey / dayDiff helpers.

### `packages/registry-vue/bootstrap/use-month-grid/useMonthGrid.ts`

```ts
// Headless month-grid + drag/shift range-select primitives.
// Domain-agnostic: knows nothing about events -- just dates, the 42-cell grid,
// and a normalized [start, end] range driven by mouse / shift-click. Pair with
// EventCalendar (or any month-shaped UI) by reading the returned refs/computeds.

import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

export type DateKey = string // YYYY-MM-DD

export interface UseMonthGridOptions {
  initialDate?: Date | DateKey
  weekStartsOn?: 0 | 1 // 0 = Sunday (default), 1 = Monday
}

export function isoDate(d: Date): DateKey {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

export function dateFromKey(k: DateKey): Date {
  return new Date(k + 'T00:00:00')
}

export function dayDiff(a: DateKey, b: DateKey): number {
  return Math.round((dateFromKey(b).getTime() - dateFromKey(a).getTime()) / 86400000)
}

export function useMonthGrid(options: UseMonthGridOptions = {}) {
  const weekStartsOn = options.weekStartsOn ?? 0
  const init = options.initialDate
    ? typeof options.initialDate === 'string'
      ? dateFromKey(options.initialDate)
      : options.initialDate
    : new Date()

  // "today" is frozen to the moment the composable is created -- predictable for tests / SSR.
  const today = new Date(init.getFullYear(), init.getMonth(), init.getDate())
  const todayKey = isoDate(today)

  const cursor = ref(new Date(init.getFullYear(), init.getMonth(), 1))

  const rangeAnchor = ref<DateKey>(todayKey)
  const rangeStart = ref<DateKey>(todayKey)
  const rangeEnd = ref<DateKey>(todayKey)
  const isDragging = ref(false)

  const monthLabel = computed(() => cursor.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }))

  const gridDays = computed(() => {
    const first = new Date(cursor.value.getFullYear(), cursor.value.getMonth(), 1)
    const offset = (first.getDay() - weekStartsOn + 7) % 7
    const start = new Date(first)
    start.setDate(first.getDate() - offset)
    const days: { date: Date; key: DateKey; inMonth: boolean }[] = []
    for (let i = 0; i < 42; i++) {
      const d = new Date(start)
      d.setDate(start.getDate() + i)
      days.push({
        date: d,
        key: isoDate(d),
        inMonth: d.getMonth() === cursor.value.getMonth(),
      })
    }
    return days
  })

  const weekdays = computed(() => {
    const base = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    return [...base.slice(weekStartsOn), ...base.slice(0, weekStartsOn)]
  })

  const rangeBounds = computed(() => {
    const a = rangeStart.value
    const b = rangeEnd.value
    return a <= b ? { lo: a, hi: b } : { lo: b, hi: a }
  })

  const rangeDayCount = computed(() => dayDiff(rangeBounds.value.lo, rangeBounds.value.hi) + 1)
  const isRange = computed(() => rangeBounds.value.lo !== rangeBounds.value.hi)

  function inRange(key: DateKey) {
    const { lo, hi } = rangeBounds.value
    return key >= lo && key <= hi
  }

  function prevMonth() {
    cursor.value = new Date(cursor.value.getFullYear(), cursor.value.getMonth() - 1, 1)
  }
  function nextMonth() {
    cursor.value = new Date(cursor.value.getFullYear(), cursor.value.getMonth() + 1, 1)
  }
  function goToToday() {
    cursor.value = new Date(today.getFullYear(), today.getMonth(), 1)
    rangeAnchor.value = todayKey
    rangeStart.value = todayKey
    rangeEnd.value = todayKey
  }
  function selectDay(key: DateKey) {
    rangeAnchor.value = key
    rangeStart.value = key
    rangeEnd.value = key
  }
  function selectWeekOf(key: DateKey) {
    const d = dateFromKey(key)
    const dow = (d.getDay() - weekStartsOn + 7) % 7
    const wkStart = new Date(d)
    wkStart.setDate(d.getDate() - dow)
    const wkEnd = new Date(wkStart)
    wkEnd.setDate(wkStart.getDate() + 6)
    rangeAnchor.value = isoDate(wkStart)
    rangeStart.value = isoDate(wkStart)
    rangeEnd.value = isoDate(wkEnd)
  }
  function clearRange() {
    rangeAnchor.value = todayKey
    rangeStart.value = todayKey
    rangeEnd.value = todayKey
  }

  function onCellMouseDown(key: DateKey, ev: MouseEvent) {
    if (ev.button !== 0) return // ignore right-click -- context menus handle it
    if (ev.shiftKey) {
      rangeEnd.value = key
      return
    }
    rangeAnchor.value = key
    rangeStart.value = key
    rangeEnd.value = key
    isDragging.value = true
  }
  function onCellMouseEnter(key: DateKey) {
    if (!isDragging.value) return
    rangeEnd.value = key
    rangeStart.value = rangeAnchor.value
  }
  function endDrag() {
    if (isDragging.value) isDragging.value = false
  }

  // Window listeners are needed because mouseup can fire outside any cell.
  // Guarded for SSR -- only registers on the client.
  if (typeof window !== 'undefined') {
    onMounted(() => {
      window.addEventListener('mouseup', endDrag)
      window.addEventListener('mouseleave', endDrag)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('mouseup', endDrag)
      window.removeEventListener('mouseleave', endDrag)
    })
  }

  return {
    today,
    todayKey,
    cursor,
    monthLabel,
    gridDays,
    weekdays,
    rangeAnchor,
    rangeStart,
    rangeEnd,
    rangeBounds,
    rangeDayCount,
    isRange,
    isDragging,
    inRange,
    prevMonth,
    nextMonth,
    goToToday,
    selectDay,
    selectWeekOf,
    clearRange,
    onCellMouseDown,
    onCellMouseEnter,
    endDrag,
  }
}

```

## use-theme

- type: `registry:hook`
- description: Framework-agnostic useTheme composable (cookie-backed ref, works in plain Vue / Vite / Nuxt) + an optional Nuxt Nitro plugin that inlines the dark-class assignment in <head> for zero-flash SSR. The composable reads/writes the uipkge-theme cookie directly via document.cookie; the plugin is only needed under Nuxt for SSR no-flash.

### `packages/registry-vue/bootstrap/use-theme/useTheme.ts`

```ts
import { ref, watch } from 'vue'

type Theme = 'light' | 'dark' | 'system'
const COOKIE_KEY = 'uipkge-theme'

// Framework-agnostic theme composable backed by a cookie (not localStorage)
// so the initial paint can match the saved theme. The cookie is read/written
// directly via document.cookie -- no Nuxt useCookie dependency -- which means
// this works in plain Vue, Vue+Vite, Nuxt, or any Vue setup.
//
// Under Nuxt, the optional Nitro server plugin in 00.theme.ts inlines a
// blocking <script> that sets the dark class on <html> BEFORE first paint
// (zero-flash SSR). That plugin reads the same cookie, so the SSR pass and
// the client agree on the initial theme. Without Nuxt, the composable still
// applies the dark class on mount -- there's just a one-frame window where
// the class isn't set yet.
//
// localStorage was intentionally avoided: it doesn't exist server-side, so an
// SSR pass would always render `system` and then the client would flip to the
// saved value, producing a hydration mismatch.

function readCookie(): Theme {
  if (typeof document === 'undefined') return 'system'
  const m = document.cookie.match(/(?:^|; )uipkge-theme=([^;]+)/)
  return (m ? decodeURIComponent(m[1]) : 'system') as Theme
}

function writeCookie(value: Theme) {
  if (typeof document === 'undefined') return
  document.cookie = `${COOKIE_KEY}=${encodeURIComponent(value)}; path=/; max-age=${60 * 60 * 24 * 365}; samesite=lax`
}

export function useTheme() {
  const theme = ref<Theme>(readCookie())

  function setTheme(next: Theme) {
    theme.value = next
  }

  function apply(next: Theme) {
    if (typeof window === 'undefined') return
    const isDark = next === 'dark' || (next === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
    document.documentElement.classList.toggle('dark', isDark)
  }

  if (typeof window !== 'undefined') {
    apply(theme.value)
    watch(theme, (next) => {
      writeCookie(next)
      apply(next)
    })
  }

  return { theme, setTheme }
}

```

### `packages/registry-vue/bootstrap/use-theme/00.theme.ts`

```ts
// Nitro server plugin -- injects an inline <script> into the SSR HTML
// head so the dark class lands on <html> BEFORE the browser paints.
// Also reads the cookie first so the SSR pass and the inline script
// agree on the initial theme; reading localStorage here would
// disagree with the server, which has no localStorage access.
//
// 'system' theme readers still need matchMedia (client-only). That's
// fine -- the script runs synchronously, so the dark class is set
// before <body> paints either way.
import { defineNitroPlugin } from 'nitropack/runtime'

const SCRIPT =
  'try{var m=document.cookie.match(/(?:^|; )uipkge-theme=([^;]+)/);var t=m?decodeURIComponent(m[1]):"system";var d=t==="dark"||(t==="system"&&window.matchMedia("(prefers-color-scheme: dark)").matches);if(d)document.documentElement.classList.add("dark");}catch(e){}'

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html) => {
    html.head.push(`<script>${SCRIPT}</script>`)
  })
})

```

## utils

- type: `registry:lib`
- description: Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.
- npm deps: `clsx`, `tailwind-merge`

### `packages/registry-vue/bootstrap/utils/utils.ts`

```ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

```

## vertical-tabs

- type: `registry:ui`
- description: Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.
- npm deps: `@vueuse/core`, `reka-ui`

### `packages/registry-vue/components/vertical-tabs/VerticalTabs.vue`

```vue
<script setup lang="ts">
import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  TabsRootProps & {
    class?: HTMLAttributes['class']
  }
>()
const emits = defineEmits<TabsRootEmits>()

const delegated = reactiveOmit(props, 'class', 'orientation')
const forwarded = useForwardPropsEmits(delegated, emits)
</script>

<template>
  <TabsRoot
    v-bind="{ 'data-slot': 'vertical-tabs', orientation: 'vertical', ...forwarded }"
    :class="cn('flex w-full gap-6', props.class)"
  >
    <slot />
  </TabsRoot>
</template>

```

### `packages/registry-vue/components/vertical-tabs/VerticalTabsList.vue`

```vue
<script setup lang="ts">
import type { TabsListProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { TabsList, useForwardProps } from 'reka-ui'
import { cn } from '@/lib/utils'

const props = defineProps<
  TabsListProps & {
    class?: HTMLAttributes['class']
  }
>()

const delegated = reactiveOmit(props, 'class')
const forwarded = useForwardProps(delegated)
</script>

<template>
  <TabsList
    data-uipkge
    data-slot="vertical-tabs-list"
    v-bind="forwarded"
    :class="cn('border-border flex w-56 shrink-0 flex-col gap-0.5 border-r pr-3', props.class)"
  >
    <slot />
  </TabsList>
</template>

```

### `packages/registry-vue/components/vertical-tabs/VerticalTabsSection.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

defineProps<{
  label: string
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    data-uipkge
    data-slot="vertical-tabs-section"
    :class="
      cn(
        'text-muted-foreground mt-3 mb-1 px-2 text-xs font-medium tracking-wider uppercase first:mt-0',
        $attrs.class as string,
      )
    "
  >
    {{ label }}
  </div>
</template>

```

### `packages/registry-vue/components/vertical-tabs/VerticalTabsTrigger.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { TabsTrigger } from 'reka-ui'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  value: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
})

const delegated = computed(() => {
  const { class: _, ...rest } = props
  return rest
})
</script>

<template>
  <TabsTrigger
    v-slot="slotProps"
    data-uipkge
    data-slot="vertical-tabs-trigger"
    v-bind="delegated"
    :class="
      cn(
        'group/trigger text-muted-foreground relative flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition-[color,background-color] duration-150',
        'hover:bg-muted/60 hover:text-foreground',
        'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
        'disabled:pointer-events-none disabled:opacity-50',
        'data-[state=active]:bg-muted data-[state=active]:text-foreground',
        '[&>svg]:size-4 [&>svg]:shrink-0',
        props.class,
      )
    "
    :disabled="props.disabled"
  >
    <span
      aria-hidden
      class="bg-primary absolute inset-y-1 left-0 w-0.5 rounded-full opacity-0 transition-opacity duration-150 group-data-[state=active]/trigger:opacity-100"
    />
    <slot v-bind="slotProps" />
  </TabsTrigger>
</template>

```

### `packages/registry-vue/components/vertical-tabs/VerticalTabsContent.vue`

```vue
<script setup lang="ts">
import { computed } from 'vue'
import type { HTMLAttributes } from 'vue'
import { TabsContent } from 'reka-ui'
import { cn } from '@/lib/utils'

interface Props {
  class?: HTMLAttributes['class']
  value: string
  forceMount?: boolean
}

const props = defineProps<Props>()

const delegated = computed(() => {
  const { class: _, ...rest } = props
  return rest
})
</script>

<template>
  <TabsContent
    v-slot="slotProps"
    data-uipkge
    data-slot="vertical-tabs-content"
    v-bind="delegated"
    :class="
      cn(
        'ring-offset-background focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:outline-none',
        props.class,
      )
    "
    :force-mount="props.forceMount"
  >
    <slot v-bind="slotProps" />
  </TabsContent>
</template>

```

### `packages/registry-vue/components/vertical-tabs/index.ts`

```ts
export { default as VerticalTabs } from './VerticalTabs.vue'
export { default as VerticalTabsList } from './VerticalTabsList.vue'
export { default as VerticalTabsSection } from './VerticalTabsSection.vue'
export { default as VerticalTabsTrigger } from './VerticalTabsTrigger.vue'
export { default as VerticalTabsContent } from './VerticalTabsContent.vue'

```

## video

- type: `registry:ui`
- description: Video player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, a progress bar, play/pause, skip, and volume control.
- npm deps: `lucide-vue-next`

### `packages/registry-vue/components/video/Video.vue`

```vue
<script setup lang="ts">
import { Maximize, Minimize, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from 'lucide-vue-next'
import { computed, onBeforeUnmount, onMounted, ref, watch, type HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  /** Video source URL. */
  src: string
  /** Poster image shown before playback. */
  poster?: string
  /** Autoplay on mount. Note: browsers may block autoplay with sound. */
  autoplay?: boolean
  /** Loop playback. */
  loop?: boolean
  /** Muted audio. */
  muted?: boolean
  /** Use native browser controls instead of the custom overlay. Default false. */
  nativeControls?: boolean
  /** Initial playback rate. Default 1. */
  playbackRate?: number
  /** Aspect ratio class or inline style value. Default '16/9'. */
  aspectRatio?: string
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  autoplay: false,
  loop: false,
  muted: false,
  nativeControls: false,
  playbackRate: 1,
  aspectRatio: '16/9',
})

const videoRef = ref<HTMLVideoElement | null>(null)
const containerRef = ref<HTMLElement | null>(null)

const playing = ref(false)
const current = ref(0)
const duration = ref(0)
const volume = ref(props.muted ? 0 : 1)
const isMuted = ref(props.muted)
const isFullscreen = ref(false)
const showControls = ref(true)
let hideTimer: ReturnType<typeof setTimeout> | null = null

function togglePlay() {
  const v = videoRef.value
  if (!v) return
  if (v.paused) v.play()
  else v.pause()
}

function onPlay() {
  playing.value = true
}
function onPause() {
  playing.value = false
}
function onTimeUpdate() {
  const v = videoRef.value
  if (!v) return
  current.value = v.currentTime
}
function onLoadedMetadata() {
  const v = videoRef.value
  if (!v) return
  duration.value = v.duration || 0
  v.playbackRate = props.playbackRate
  v.volume = volume.value
}
function onVolumeChange() {
  const v = videoRef.value
  if (!v) return
  volume.value = v.volume
  isMuted.value = v.muted
}

function seek(e: Event) {
  const v = videoRef.value
  if (!v) return
  const target = e.target as HTMLInputElement
  v.currentTime = Number(target.value)
}

function setVolume(e: Event) {
  const v = videoRef.value
  if (!v) return
  const target = e.target as HTMLInputElement
  v.volume = Number(target.value)
  v.muted = Number(target.value) === 0
}

function toggleMute() {
  const v = videoRef.value
  if (!v) return
  v.muted = !v.muted
}

function skip(seconds: number) {
  const v = videoRef.value
  if (!v) return
  v.currentTime = Math.min(Math.max(v.currentTime + seconds, 0), v.duration || 0)
}

function toggleFullscreen() {
  const el = containerRef.value
  if (!el) return
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    el.requestFullscreen()
  }
}

function onFullscreenChange() {
  isFullscreen.value = !!document.fullscreenElement
}

function onMouseMove() {
  showControls.value = true
  if (hideTimer) clearTimeout(hideTimer)
  hideTimer = setTimeout(() => {
    if (playing.value) showControls.value = false
  }, 2500)
}

function onMouseLeave() {
  if (hideTimer) clearTimeout(hideTimer)
  if (playing.value) showControls.value = false
}

function formatTime(s: number): string {
  if (!s || !isFinite(s)) return '0:00'
  const m = Math.floor(s / 60)
  const sec = Math.floor(s % 60)
  return `${m}:${sec.toString().padStart(2, '0')}`
}

const progress = computed(() => (duration.value > 0 ? (current.value / duration.value) * 100 : 0))

watch(
  () => props.playbackRate,
  (rate) => {
    if (videoRef.value) videoRef.value.playbackRate = rate
  },
)

watch(
  () => props.muted,
  (m) => {
    if (videoRef.value) videoRef.value.muted = m
  },
)

onMounted(() => {
  document.addEventListener('fullscreenchange', onFullscreenChange)
})

onBeforeUnmount(() => {
  document.removeEventListener('fullscreenchange', onFullscreenChange)
  if (hideTimer) clearTimeout(hideTimer)
})
</script>

<template>
  <div
    ref="containerRef"
    data-uipkge
    data-slot="video"
    :class="cn('group relative overflow-hidden rounded-lg bg-black', props.class)"
    :style="{ aspectRatio: aspectRatio }"
    @mousemove="onMouseMove"
    @mouseleave="onMouseLeave"
  >
    <video
      ref="videoRef"
      data-slot="video-element"
      class="size-full object-contain"
      :src="src"
      :poster="poster"
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      :controls="nativeControls"
      playsinline
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
      @volumechange="onVolumeChange"
      @click="togglePlay"
    />

    <!-- Custom controls overlay -->
    <div
      v-if="!nativeControls"
      data-slot="video-controls"
      :class="
        cn(
          'absolute inset-0 flex flex-col justify-between transition-opacity duration-200',
          showControls || !playing ? 'opacity-100' : 'opacity-0',
        )
      "
    >
      <!-- Top spacer / click target -->
      <div class="flex-1" @click="togglePlay" />

      <!-- Bottom controls bar -->
      <div class="bg-gradient-to-t from-black/80 to-transparent px-3 pt-6 pb-2">
        <!-- Progress bar -->
        <div class="mb-2 flex items-center gap-2">
          <span class="text-xs text-white/80 tabular-nums">{{ formatTime(current) }}</span>
          <input
            type="range"
            min="0"
            :max="duration || 0"
            step="0.1"
            :value="current"
            class="accent-primary [&::-webkit-slider-thumb]:bg-primary h-1 flex-1 cursor-pointer appearance-none rounded-full bg-white/30 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full"
            @input="seek"
          />
          <span class="text-xs text-white/80 tabular-nums">{{ formatTime(duration) }}</span>
        </div>

        <!-- Buttons row -->
        <div class="flex items-center gap-2">
          <button
            type="button"
            class="text-white/90 transition-colors hover:text-white"
            :aria-label="playing ? 'Pause' : 'Play'"
            @click="togglePlay"
          >
            <component :is="playing ? Pause : Play" class="size-5" />
          </button>
          <button
            type="button"
            class="text-white/90 transition-colors hover:text-white"
            aria-label="Rewind 10s"
            @click="skip(-10)"
          >
            <RotateCcw class="size-4" />
          </button>
          <button
            type="button"
            class="text-white/90 transition-colors hover:text-white"
            aria-label="Forward 10s"
            @click="skip(10)"
          >
            <RotateCw class="size-4" />
          </button>

          <!-- Volume -->
          <div class="group/volume flex items-center gap-1.5">
            <button
              type="button"
              class="text-white/90 transition-colors hover:text-white"
              :aria-label="isMuted ? 'Unmute' : 'Mute'"
              @click="toggleMute"
            >
              <component :is="isMuted || volume === 0 ? VolumeX : Volume2" class="size-4" />
            </button>
            <input
              type="range"
              min="0"
              max="1"
              step="0.05"
              :value="isMuted ? 0 : volume"
              class="accent-primary [&::-webkit-slider-thumb]:bg-primary h-1 w-0 cursor-pointer appearance-none rounded-full bg-white/30 transition-all duration-200 group-hover/volume:w-16 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full"
              @input="setVolume"
            />
          </div>

          <div class="flex-1" />

          <button
            type="button"
            class="text-white/90 transition-colors hover:text-white"
            :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
            @click="toggleFullscreen"
          >
            <component :is="isFullscreen ? Minimize : Maximize" class="size-4" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

```

### `packages/registry-vue/components/video/index.ts`

```ts
export { default as Video } from './Video.vue'

```

## virtual-list

- type: `registry:ui`
- description: Generic windowed scroller. Renders only visible items plus a small overscan, with fixed or dynamic item sizes. Use for long lists where most rows are off-screen.

### `packages/registry-vue/components/virtual-list/VirtualList.vue`

```vue
<script setup lang="ts" generic="T extends Record<string, any>">
import { computed, onMounted, ref, watch } from 'vue'
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    items: T[]
    itemSize: number | ((item: T, index: number) => number)
    height: number | string
    overscan?: number
    keyField?: string
    direction?: 'vertical' | 'horizontal'
    as?: string
    class?: HTMLAttributes['class']
  }>(),
  {
    overscan: 3,
    keyField: 'id',
    direction: 'vertical',
    as: 'div',
  },
)

const emits = defineEmits<{
  (e: 'scroll', event: Event): void
  (e: 'range-change', range: [number, number]): void
}>()

const scrollEl = ref<HTMLElement | null>(null)
const scrollOffset = ref(0)
const viewportSize = ref(0)

const isVertical = computed(() => props.direction === 'vertical')

const offsets = computed<number[]>(() => {
  const out: number[] = [0]
  for (let i = 0; i < props.items.length; i++) {
    const s = typeof props.itemSize === 'function' ? props.itemSize(props.items[i]!, i) : props.itemSize
    out.push(out[i]! + s)
  }
  return out
})

const totalSize = computed(() => offsets.value[props.items.length] ?? 0)

function findIndex(target: number): number {
  const o = offsets.value
  let lo = 0
  let hi = o.length - 1
  while (lo < hi) {
    const mid = (lo + hi + 1) >> 1
    if (o[mid]! <= target) lo = mid
    else hi = mid - 1
  }
  return lo
}

const range = computed<[number, number]>(() => {
  if (!props.items.length || viewportSize.value === 0) return [0, 0]
  const start = Math.max(0, findIndex(scrollOffset.value) - props.overscan)
  const end = Math.min(props.items.length, findIndex(scrollOffset.value + viewportSize.value) + 1 + props.overscan)
  return [start, end]
})

const visible = computed(() => props.items.slice(range.value[0], range.value[1]))
const offsetStart = computed(() => offsets.value[range.value[0]] ?? 0)

watch(range, (r) => emits('range-change', r))

function onScroll(e: Event) {
  const el = e.target as HTMLElement
  scrollOffset.value = isVertical.value ? el.scrollTop : el.scrollLeft
  emits('scroll', e)
}

function measure() {
  if (!scrollEl.value) return
  viewportSize.value = isVertical.value ? scrollEl.value.clientHeight : scrollEl.value.clientWidth
}

onMounted(() => {
  measure()
  if (typeof ResizeObserver !== 'undefined' && scrollEl.value) {
    const ro = new ResizeObserver(measure)
    ro.observe(scrollEl.value)
  }
})

watch(() => props.height, measure, { flush: 'post' })

function sizeOf(item: T, i: number) {
  return typeof props.itemSize === 'function' ? props.itemSize(item, i) : props.itemSize
}

function getKey(item: T, fallback: number): string | number {
  const k = item[props.keyField]
  return k ?? fallback
}

function scrollToOffset(px: number) {
  if (!scrollEl.value) return
  if (isVertical.value) scrollEl.value.scrollTop = px
  else scrollEl.value.scrollLeft = px
}

function scrollToIndex(i: number, options: { align?: 'start' | 'center' | 'end' } = {}) {
  const align = options.align ?? 'start'
  const start = offsets.value[i] ?? 0
  const size = (offsets.value[i + 1] ?? start) - start
  let target = start
  if (align === 'center') target = start - viewportSize.value / 2 + size / 2
  else if (align === 'end') target = start - viewportSize.value + size
  scrollToOffset(Math.max(0, target))
}

function getVisibleRange(): [number, number] {
  return range.value
}

defineExpose({ scrollToOffset, scrollToIndex, getVisibleRange })

const containerStyle = computed((): Record<string, string> => {
  const h = typeof props.height === 'number' ? `${props.height}px` : props.height
  return isVertical.value ? { height: h, overflowY: 'auto' } : { width: h, overflowX: 'auto' }
})

const innerStyle = computed(
  (): Record<string, string> =>
    isVertical.value
      ? { height: `${totalSize.value}px`, position: 'relative', width: '100%' }
      : { width: `${totalSize.value}px`, position: 'relative', height: '100%' },
)

const offsetStyle = computed(
  (): Record<string, string> =>
    isVertical.value
      ? { transform: `translateY(${offsetStart.value}px)` }
      : { transform: `translateX(${offsetStart.value}px)`, height: '100%', display: 'flex' },
)
</script>

<template>
  <component
    :is="as"
    ref="scrollEl"
    data-uipkge
    data-slot="virtual-list"
    :class="cn('w-full', props.class)"
    :style="containerStyle"
    @scroll.passive="onScroll"
  >
    <div :style="innerStyle">
      <div :style="offsetStyle">
        <div
          v-for="(item, i) in visible"
          :key="getKey(item, range[0] + i)"
          :style="
            isVertical
              ? { height: sizeOf(item, range[0] + i) + 'px' }
              : { width: sizeOf(item, range[0] + i) + 'px', flexShrink: 0 }
          "
        >
          <slot :item="item" :index="range[0] + i" />
        </div>
      </div>
    </div>
  </component>
</template>

```

### `packages/registry-vue/components/virtual-list/index.ts`

```ts
export { default as VirtualList } from './VirtualList.vue'

```

## watermark

- type: `registry:ui`
- description: Overlay watermark that repeats text or an image across the content area at a configurable angle. Supports rotate angle, gap between repeats, opacity, font size/color/weight, z-index, and pointer-event control. Wrap any content via the default slot.

### `packages/registry-vue/components/watermark/Watermark.vue`

```vue
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { cn } from '@/lib/utils'

const props = withDefaults(
  defineProps<{
    class?: HTMLAttributes['class']
    /** Text content for the watermark. Ignored when `image` is set. */
    content?: string
    /** Image URL. When set, repeats the image instead of text. */
    image?: string
    /** Rotation angle in degrees. */
    rotate?: number
    /** Gap between repeats in pixels (both x and y). */
    gap?: number
    /** Opacity 0-1. */
    opacity?: number
    /** Font size in pixels (text only). */
    fontSize?: number
    /** Font color (text only). */
    color?: string
    /** Font family (text only). */
    fontFamily?: string
    /** Font weight (text only). */
    fontWeight?: number | string
    /** z-index of the overlay. */
    zIndex?: number
    /** When true, the overlay captures pointer events (blocks interaction). Default false (pointer-events-none). */
    interactive?: boolean
  }>(),
  {
    content: '',
    rotate: -22,
    gap: 100,
    opacity: 0.08,
    fontSize: 16,
    color: 'currentColor',
    fontFamily: 'sans-serif',
    fontWeight: 'normal',
    zIndex: 9,
    interactive: false,
  },
)

const containerRef = ref<HTMLElement | null>(null)
const width = ref(0)
const height = ref(0)
let resizeObserver: ResizeObserver | null = null

function measure() {
  if (!containerRef.value) return
  const rect = containerRef.value.getBoundingClientRect()
  width.value = rect.width
  height.value = rect.height
}

onMounted(() => {
  measure()
  if (typeof ResizeObserver !== 'undefined' && containerRef.value) {
    resizeObserver = new ResizeObserver(() => measure())
    resizeObserver.observe(containerRef.value)
  }
})

onBeforeUnmount(() => {
  resizeObserver?.disconnect()
  resizeObserver = null
})

// Build a tiled SVG data URL that repeats the text/image across a tile of
// size (gap + contentSize). The SVG is then used as a background-image on
// the overlay div, rotated to the requested angle.
const watermarkUrl = computed(() => {
  if (!width.value || !height.value) return ''
  const gap = props.gap
  const fontSize = props.fontSize
  const text = props.content || ''
  const rotate = props.rotate

  if (props.image) {
    // For images we tile the image at its natural size within the gap.
    const tile = gap + 100
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}">
  <image href="${props.image}" x="${gap / 2}" y="${gap / 2}" width="100" height="100" opacity="${props.opacity}" transform="rotate(${rotate} ${tile / 2} ${tile / 2})"/>
</svg>`
    return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
  }

  if (!text) return ''

  // Estimate text width — rough heuristic, good enough for tiling.
  const textWidth = text.length * fontSize * 0.6
  const tileW = gap + textWidth
  const tileH = gap + fontSize * 1.5

  const escapedText = text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tileW}" height="${tileH}" viewBox="0 0 ${tileW} ${tileH}">
  <text x="${gap / 2}" y="${gap / 2 + fontSize}" font-size="${fontSize}" font-family="${props.fontFamily}" font-weight="${props.fontWeight}" fill="${props.color}" opacity="${props.opacity}" transform="rotate(${rotate} ${gap / 2} ${gap / 2 + fontSize / 2})">${escapedText}</text>
</svg>`
  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
})

const overlayStyle = computed(() => ({
  backgroundImage: watermarkUrl.value ? `url("${watermarkUrl.value}")` : undefined,
  backgroundRepeat: 'repeat',
  zIndex: props.zIndex,
  pointerEvents: props.interactive ? 'auto' : 'none',
}))
</script>

<template>
  <div ref="containerRef" data-uipkge data-slot="watermark" :class="cn('relative', props.class)">
    <slot />
    <div
      data-uipkge
      data-slot="watermark-overlay"
      class="absolute inset-0 overflow-hidden"
      :style="overlayStyle"
      aria-hidden="true"
    />
  </div>
</template>

```

### `packages/registry-vue/components/watermark/index.ts`

```ts
export { default as Watermark } from './Watermark.vue'

```

---

# React manifests

Each entry is the registry manifest plus the raw source of every file -- exactly what an installer copies into a consumer project.

## accordion

- type: `registry:ui`
- description: Vertically stacked, collapsible panels — one or many open at a time. Use for FAQs, settings groups, and any place where space is tight but content needs to stay browsable. Built on Radix UI with smooth animation and full keyboard support.
- npm deps: `@radix-ui/react-accordion`, `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/accordion/accordion.tsx`

```tsx
'use client'

import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import {
  accordionVariants,
  accordionItemVariants,
  accordionTriggerVariants,
} from './accordion.variants'

type AccordionVariant = 'default' | 'separated' | 'ghost'

// The Vue source threads the chosen variant from <Accordion> down to each
// <AccordionItem>/<AccordionTrigger> via provide/inject. React's equivalent is
// context — the Root sets it, Item/Trigger read it (default 'default').
const AccordionVariantContext = React.createContext<AccordionVariant>('default')

const Accordion = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & { variant?: AccordionVariant }
>(({ className, variant = 'default', ...props }, ref) => (
  <AccordionVariantContext.Provider value={variant}>
    <AccordionPrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="accordion"
      data-variant={variant}
      className={cn(accordionVariants({ variant }), className)}
      {...props}
    />
  </AccordionVariantContext.Provider>
))
Accordion.displayName = 'Accordion'

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => {
  const variant = React.useContext(AccordionVariantContext)
  return (
    <AccordionPrimitive.Item
      ref={ref}
      data-uipkge=""
      data-slot="accordion-item"
      className={cn(accordionItemVariants({ variant }), className)}
      {...props}
    />
  )
})
AccordionItem.displayName = 'AccordionItem'

const AccordionHeader = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Header>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Header
    ref={ref}
    data-uipkge=""
    data-slot="accordion-header"
    className={cn('flex', className)}
    {...props}
  />
))
AccordionHeader.displayName = 'AccordionHeader'

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => {
  const variant = React.useContext(AccordionVariantContext)
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        ref={ref}
        data-uipkge=""
        data-slot="accordion-trigger"
        className={cn(accordionTriggerVariants({ variant }), className)}
        {...props}
      >
        {children}
        <ChevronDown
          className="text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]/accordion-trigger:rotate-180"
          aria-hidden="true"
        />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
})
AccordionTrigger.displayName = 'AccordionTrigger'

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    data-uipkge=""
    data-slot="accordion-content"
    className={cn(
      'text-muted-foreground overflow-hidden text-sm',
      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
      className,
    )}
    {...props}
  >
    <div className="pt-0 pb-4">{children}</div>
  </AccordionPrimitive.Content>
))
AccordionContent.displayName = 'AccordionContent'

export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent }

```

### `packages/registry-react/components/accordion/accordion.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const accordionVariants = cva('w-full', {
  variants: {
    variant: {
      // Bottom-border between items (the classic shadcn look).
      default: '',
      // Each item is its own bordered card with a small gap between them.
      separated: 'space-y-2',
      // Borderless. Use when the parent container already provides framing.
      ghost: '',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

export const accordionItemVariants = cva('', {
  variants: {
    variant: {
      default: 'border-b border-border last:border-b-0',
      separated: 'rounded-md border border-border bg-card overflow-hidden',
      ghost: '',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

export const accordionTriggerVariants = cva(
  'group/accordion-trigger flex w-full items-center justify-between gap-3 text-sm font-medium text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/40 hover:text-primary disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'py-4',
        separated: 'px-4 py-3 hover:bg-muted/50',
        ghost: 'py-3',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type AccordionVariants = VariantProps<typeof accordionVariants>

export type AccordionItemVariants = VariantProps<typeof accordionItemVariants>

export type AccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>

```

### `packages/registry-react/components/accordion/index.ts`

```ts
export {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from './accordion'

// Re-export variant API from the sibling file (kept separate to avoid an
// import cycle and to give consumers a stable `accordionVariants` path).
export {
  accordionVariants,
  accordionItemVariants,
  accordionTriggerVariants,
  type AccordionVariants,
  type AccordionItemVariants,
  type AccordionTriggerVariants,
} from './accordion.variants'

```

## advance-select

- type: `registry:ui`
- description: Searchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `<select>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.
- npm deps: `lucide-react`
- registry deps: `popover`, `command`, `badge`, `select`

### `packages/registry-react/components/advance-select/advance-select.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, ChevronDown, Loader2, X } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
import { Badge } from '@/components/ui/badge'
import { cn } from '@/lib/utils'
import { readKey } from './types'
import type { AdvanceSelectFieldNames } from './types'

export interface AdvanceSelectProps<T extends Record<string, unknown> | string | number> {
  value?: unknown | unknown[]
  onValueChange?: (value: unknown | unknown[], option: T | T[]) => void
  options: T[]

  // Mode
  mode?: 'single' | 'multiple' | 'tags'

  // Field mapping
  fieldNames?: AdvanceSelectFieldNames

  // Appearance
  size?: 'sm' | 'default' | 'lg'
  variant?: 'outlined' | 'filled' | 'borderless'
  status?: 'default' | 'error' | 'warning'
  placeholder?: string

  // Search
  showSearch?: boolean
  searchValue?: string
  onSearchChange?: (value: string) => void
  autoClearSearchValue?: boolean
  filterOption?: boolean | ((input: string, option: T) => boolean)
  optionFilterProp?: string | string[]
  filterSort?: (optionA: T, optionB: T, info: { searchValue: string }) => number

  // Multiple/Tags
  maxCount?: number
  maxTagCount?: number
  maxTagTextLength?: number
  maxTagPlaceholder?: string | ((omittedValues: T[]) => string)
  tokenSeparators?: string[]
  hideSelected?: boolean
  allowCreate?: boolean

  // State
  disabled?: boolean
  loading?: boolean
  allowClear?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
  defaultOpen?: boolean
  defaultActiveFirstOption?: boolean

  // Customization
  notFoundContent?: React.ReactNode
  loadingText?: React.ReactNode
  listHeight?: number
  virtual?: boolean

  className?: string

  // Render slots
  prefix?: React.ReactNode
  suffix?: React.ReactNode
  suffixIcon?: React.ReactNode
  clearIcon?: React.ReactNode
  renderLabel?: (info: { value: unknown; label: string }) => React.ReactNode
  renderTag?: (info: {
    value: unknown
    label: string
    closable: boolean
    onClose: (e: React.MouseEvent | Event) => void
  }) => React.ReactNode
  renderOption?: (info: { option: T; index: number }) => React.ReactNode
  emptyContent?: React.ReactNode

  // Events
  onSelect?: (value: unknown, option: T) => void
  onDeselect?: (value: unknown, option: T) => void
  onClear?: () => void
  onFocus?: (event: React.FocusEvent) => void
  onBlur?: (event: React.FocusEvent) => void
  onPopupScroll?: (event: React.UIEvent) => void
  onInputKeyDown?: (event: React.KeyboardEvent) => void
}

const sizeClasses = {
  sm: 'h-8 text-xs px-2.5 py-1',
  default: 'h-9 text-sm px-3 py-1.5',
  lg: 'h-11 text-base px-4 py-2',
}

const variantClasses = {
  outlined:
    'border-input bg-transparent shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  filled:
    'border-transparent bg-muted/50 shadow-none focus-visible:bg-muted focus-visible:ring-ring/50 focus-visible:ring-[3px]',
  borderless:
    'border-transparent bg-transparent shadow-none focus-visible:bg-muted/30 focus-visible:ring-ring/50 focus-visible:ring-[3px]',
}

const statusClasses = {
  default: '',
  error:
    'border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 aria-invalid:border-destructive',
  warning: 'border-[var(--warning)] focus-visible:border-[var(--warning)] focus-visible:ring-[var(--warning)]/20',
}

function AdvanceSelect<T extends Record<string, unknown> | string | number>({
  value: modelValue,
  onValueChange,
  options,
  mode = 'single',
  fieldNames = {},
  size = 'default',
  variant = 'outlined',
  status = 'default',
  placeholder = 'Select...',
  showSearch = false,
  searchValue,
  onSearchChange,
  autoClearSearchValue = true,
  filterOption = true,
  optionFilterProp = 'label',
  filterSort,
  maxCount,
  maxTagCount,
  maxTagTextLength,
  maxTagPlaceholder,
  tokenSeparators = [],
  hideSelected = false,
  allowCreate = false,
  disabled = false,
  loading = false,
  allowClear = true,
  open,
  onOpenChange,
  defaultOpen = false,
  defaultActiveFirstOption = true,
  notFoundContent = 'No results.',
  loadingText = 'Loading...',
  listHeight = 300,
  virtual = true,
  className,
  prefix,
  suffix,
  suffixIcon,
  clearIcon,
  renderLabel,
  renderTag,
  renderOption,
  emptyContent,
  onSelect,
  onDeselect,
  onClear,
  onFocus,
  onBlur,
  onPopupScroll,
  onInputKeyDown,
}: AdvanceSelectProps<T>) {
  const isOpenControlled = open !== undefined
  const [internalOpen, setInternalOpen] = React.useState<boolean>(defaultOpen)
  const isOpen = isOpenControlled ? open : internalOpen

  function setOpen(v: boolean) {
    if (!isOpenControlled) setInternalOpen(v)
    onOpenChange?.(v)
  }

  const isQueryControlled = searchValue !== undefined
  const [internalQuery, setInternalQuery] = React.useState('')
  const query = isQueryControlled ? (searchValue as string) : internalQuery

  function setQuery(v: string) {
    if (!isQueryControlled) setInternalQuery(v)
    onSearchChange?.(v)
  }

  const valueKey = fieldNames.value ?? 'value'
  const labelKey = fieldNames.label ?? 'label'
  const groupKey = fieldNames.group ?? 'group'
  const disabledKey = fieldNames.disabled ?? 'disabled'

  const getValue = React.useCallback((o: T): unknown => readKey(o, valueKey, o), [valueKey])
  const getLabel = React.useCallback((o: T): string => String(readKey(o, labelKey, '')), [labelKey])
  const getGroup = React.useCallback(
    (o: T): string | undefined => {
      const g = readKey(o, groupKey)
      return g == null ? undefined : String(g)
    },
    [groupKey],
  )
  const isDisabledOption = React.useCallback((o: T): boolean => Boolean(readKey(o, disabledKey, false)), [disabledKey])

  const isMultiple = mode === 'multiple' || mode === 'tags'

  const selectedValues = React.useMemo<unknown[]>(() => {
    if (modelValue == null) return []
    if (isMultiple) {
      return Array.isArray(modelValue) ? modelValue : []
    }
    return [modelValue]
  }, [modelValue, isMultiple])

  const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues])

  const selectedOptions = React.useMemo<T[]>(() => {
    return selectedValues.map((v) => {
      const found = options.find((o) => getValue(o) === v)
      if (found) return found
      // For created tags not in options, create a minimal option object
      return { [labelKey]: String(v), [valueKey]: v } as T
    })
  }, [selectedValues, options, getValue, labelKey, valueKey])

  function getOptionByValue(v: unknown): T | undefined {
    return options.find((o) => getValue(o) === v)
  }

  function matchesFilter(o: T, q: string): boolean {
    if (typeof filterOption === 'function') {
      return filterOption(q, o)
    }
    if (filterOption === false) return true
    const label = getLabel(o).toLowerCase()
    const search = q.toLowerCase()
    const propsToSearch = Array.isArray(optionFilterProp) ? optionFilterProp : [optionFilterProp]
    for (const prop of propsToSearch) {
      if (prop === 'label' && label.includes(search)) return true
      const val = String(readKey(o, prop, '')).toLowerCase()
      if (val.includes(search)) return true
    }
    return false
  }

  const filteredOptions = React.useMemo<T[]>(() => {
    let result = options
    const q = query.trim()

    if (q) {
      result = result.filter((o) => matchesFilter(o, q))
    }

    if (hideSelected && isMultiple) {
      result = result.filter((o) => !selectedSet.has(getValue(o)))
    }

    if (q && filterSort) {
      result = [...result].sort((a, b) => filterSort(a, b, { searchValue: q }))
    }

    return result
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options, query, hideSelected, isMultiple, selectedSet, getValue, filterSort, filterOption, optionFilterProp])

  const grouped = React.useMemo(() => {
    const groups = new Map<string, T[]>()
    for (const opt of filteredOptions) {
      const key = getGroup(opt) ?? ''
      if (!groups.has(key)) groups.set(key, [])
      groups.get(key)!.push(opt)
    }
    return Array.from(groups, ([heading, items]) => ({ heading, items }))
  }, [filteredOptions, getGroup])

  const atMax = React.useMemo(() => {
    if (typeof maxCount !== 'number') return false
    const count = Array.isArray(modelValue) ? modelValue.length : modelValue ? 1 : 0
    return count >= maxCount
  }, [maxCount, modelValue])

  const visibleTags = React.useMemo<T[]>(() => {
    if (!isMultiple) return []
    const opts = selectedOptions
    if (typeof maxTagCount === 'number') {
      return opts.slice(0, maxTagCount)
    }
    return opts
  }, [isMultiple, selectedOptions, maxTagCount])

  const hiddenTagCount = React.useMemo(() => {
    if (!isMultiple) return 0
    const opts = selectedOptions
    if (typeof maxTagCount === 'number') {
      return Math.max(0, opts.length - maxTagCount)
    }
    return 0
  }, [isMultiple, selectedOptions, maxTagCount])

  function displayLabel(o: T): string {
    let label = getLabel(o)
    if (maxTagTextLength && label.length > maxTagTextLength) {
      label = label.slice(0, maxTagTextLength) + '...'
    }
    return label
  }

  function selectOption(option: T) {
    if (isDisabledOption(option)) return
    const v = getValue(option)

    if (!isMultiple) {
      onValueChange?.(v, option)
      onSelect?.(v, option)
      setOpen(false)
      if (autoClearSearchValue) setQuery('')
      return
    }

    const current = Array.isArray(modelValue) ? [...modelValue] : []
    if (selectedSet.has(v)) {
      const next = current.filter((x) => x !== v)
      onValueChange?.(next, option)
      onDeselect?.(v, option)
    } else {
      if (atMax) return
      const next = [...current, v]
      onValueChange?.(next, option)
      onSelect?.(v, option)
    }

    if (autoClearSearchValue) setQuery('')
  }

  function removeTag(value: unknown, event: React.MouseEvent | Event) {
    event.stopPropagation()
    if (disabled) return
    const current = Array.isArray(modelValue) ? [...modelValue] : []
    const next = current.filter((x) => x !== value)
    const option = getOptionByValue(value)
    onValueChange?.(next, option as T)
    if (option) onDeselect?.(value, option)
  }

  function clearAll(event?: React.MouseEvent | Event) {
    event?.stopPropagation()
    if (disabled) return
    onClear?.()
    if (isMultiple) {
      onValueChange?.([], [])
    } else {
      onValueChange?.(null, undefined as unknown as T)
    }
    setQuery('')
  }

  function createTag() {
    if (!allowCreate && mode !== 'tags') return
    const q = query.trim()
    if (!q) return
    const exists = options.some((o) => getLabel(o) === q || String(getValue(o)) === q)
    if (exists) return

    if (!isMultiple) {
      const newOption = { [labelKey]: q, [valueKey]: q } as T
      onValueChange?.(q, newOption)
      onSelect?.(q, newOption)
      setOpen(false)
      setQuery('')
      return
    }

    if (atMax) return
    const current = Array.isArray(modelValue) ? [...modelValue] : []
    const next = [...current, q]
    const newOption = { [labelKey]: q, [valueKey]: q } as T
    onValueChange?.(next, newOption)
    onSelect?.(q, newOption)
    setQuery('')
  }

  function handleInputKeydown(event: React.KeyboardEvent) {
    onInputKeyDown?.(event)
    if (event.key === 'Enter' && query.trim() && mode === 'tags') {
      event.preventDefault()
      createTag()
    }
    if (tokenSeparators.length && mode === 'tags') {
      if (tokenSeparators.includes(event.key)) {
        event.preventDefault()
        createTag()
      }
    }
  }

  // Clear query when the popover closes.
  React.useEffect(() => {
    if (!isOpen && autoClearSearchValue) setQuery('')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen])

  const triggerBaseClasses = cn(
    'flex w-full items-center justify-between gap-2 rounded-md border text-sm transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
    sizeClasses[size],
    variantClasses[variant],
    statusClasses[status],
    className,
  )

  const isEmpty = isMultiple
    ? !Array.isArray(modelValue) || modelValue.length === 0
    : modelValue == null || modelValue === ''

  const showClear = allowClear && !isEmpty && !disabled && !loading
  const showSearchInput = showSearch || mode === 'tags'

  return (
    <Popover open={isOpen} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          role="combobox"
          aria-expanded={isOpen}
          disabled={disabled || loading}
          data-uipkge=""
          data-slot="advance-select"
          className={triggerBaseClasses}
          onFocus={onFocus}
          onBlur={onBlur}
        >
          {/* Prefix */}
          {prefix && <span className="shrink-0">{prefix}</span>}

          {/* Multiple mode tags */}
          {isMultiple ? (
            <div
              className="flex flex-1 flex-nowrap items-center gap-1 overflow-x-auto"
              style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' } as React.CSSProperties}
            >
              {selectedOptions.length ? (
                <>
                  {visibleTags.map((opt) =>
                    renderTag ? (
                      <React.Fragment key={String(getValue(opt))}>
                        {renderTag({
                          value: getValue(opt),
                          label: displayLabel(opt),
                          closable: !disabled,
                          onClose: (e) => removeTag(getValue(opt), e),
                        })}
                      </React.Fragment>
                    ) : (
                      <Badge
                        key={String(getValue(opt))}
                        variant="secondary"
                        className="bg-muted text-foreground h-6 gap-1 pr-1 pl-2 text-xs font-normal"
                      >
                        <span className="truncate">{displayLabel(opt)}</span>
                        {!disabled && (
                          <button
                            type="button"
                            className="hover:bg-muted-foreground/20 rounded-full p-0.5 transition-colors"
                            aria-label={`Remove ${getLabel(opt)}`}
                            onClick={(e) => removeTag(getValue(opt), e)}
                          >
                            <X className="size-3" />
                          </button>
                        )}
                      </Badge>
                    ),
                  )}
                  {hiddenTagCount > 0 && (
                    <Badge variant="secondary" className="bg-muted text-foreground h-6 text-xs font-normal">
                      {typeof maxTagPlaceholder === 'function'
                        ? maxTagPlaceholder(selectedOptions.slice(maxTagCount ?? 0))
                        : maxTagPlaceholder
                          ? maxTagPlaceholder
                          : `+${hiddenTagCount}`}
                    </Badge>
                  )}
                </>
              ) : (
                <span className="text-muted-foreground truncate">{placeholder}</span>
              )}
            </div>
          ) : (
            /* Single mode display */
            renderLabel ? (
              renderLabel({
                value: modelValue,
                label: selectedOptions[0] ? getLabel(selectedOptions[0]) : '',
              })
            ) : (
              <span
                className={cn(
                  'flex-1 truncate text-left',
                  selectedOptions.length ? 'text-foreground' : 'text-muted-foreground',
                )}
              >
                {selectedOptions[0] ? getLabel(selectedOptions[0]) : placeholder}
              </span>
            )
          )}

          {/* Suffix area */}
          <span className="flex shrink-0 items-center gap-1">
            {suffix}

            {loading ? (
              <Loader2 className="text-muted-foreground size-4 animate-spin" />
            ) : showClear ? (
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground rounded transition-colors"
                aria-label="Clear selection"
                onClick={clearAll}
              >
                {clearIcon ?? <X className="size-4" aria-hidden="true" />}
              </button>
            ) : (
              suffixIcon ?? <ChevronDown className="text-muted-foreground size-4 opacity-50" />
            )}
          </span>
        </button>
      </PopoverTrigger>

      <PopoverContent
        className="p-0"
        align="start"
        sideOffset={4}
        style={{ width: 'var(--radix-popover-trigger-width)', maxHeight: `${listHeight}px` }}
        onScroll={onPopupScroll}
      >
        <Command shouldFilter={false} className="flex flex-col overflow-hidden">
          {showSearchInput && (
            <CommandInput
              value={query}
              onValueChange={setQuery}
              placeholder={placeholder}
              onKeyDown={handleInputKeydown}
            />
          )}

          <CommandList className="flex-1 overflow-y-auto">
            {!loading && filteredOptions.length === 0 && (
              <CommandEmpty>{emptyContent ?? notFoundContent}</CommandEmpty>
            )}

            {loading && filteredOptions.length === 0 && (
              <div className="py-6 text-center text-sm">{loadingText}</div>
            )}

            {grouped.map((group, gi) => (
              <React.Fragment key={group.heading || gi}>
                {gi > 0 && <CommandSeparator />}
                <CommandGroup heading={group.heading || undefined}>
                  {group.items.map((opt, idx) => (
                    <CommandItem
                      key={String(getValue(opt))}
                      value={String(getValue(opt))}
                      disabled={isDisabledOption(opt) || (atMax && !selectedSet.has(getValue(opt)))}
                      data-active={gi === 0 && idx === 0 && defaultActiveFirstOption ? 'true' : undefined}
                      style={
                        virtual && options.length > 100
                          ? ({ contentVisibility: 'auto' } as React.CSSProperties)
                          : undefined
                      }
                      onSelect={() => selectOption(opt)}
                    >
                      <Check
                        className={cn('mr-2 size-4 shrink-0', selectedSet.has(getValue(opt)) ? 'opacity-100' : 'opacity-0')}
                      />
                      {renderOption ? renderOption({ option: opt, index: idx }) : getLabel(opt)}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </React.Fragment>
            ))}

            {/* Create new option in tags mode */}
            {query.trim() && allowCreate && !options.some((o) => getLabel(o) === query.trim()) && (
              <CommandItem value={`create:${query}`} onSelect={createTag}>
                <Check className="mr-2 size-4 opacity-0" />
                Create &quot;{query.trim()}&quot;
              </CommandItem>
            )}
          </CommandList>

          {/* Footer for multiple mode */}
          {isMultiple && selectedOptions.length > 0 && (
            <div className="flex items-center justify-between border-t px-2 py-1.5 text-xs">
              <span className="text-muted-foreground">{selectedOptions.length} selected</span>
              <button type="button" className="text-muted-foreground hover:text-foreground" onClick={clearAll}>
                Clear all
              </button>
            </div>
          )}
        </Command>
      </PopoverContent>
    </Popover>
  )
}
AdvanceSelect.displayName = 'AdvanceSelect'

export { AdvanceSelect }

```

### `packages/registry-react/components/advance-select/types.ts`

```ts
/**
 * Shared option shape for `AdvanceSelect` and any future options-driven select.
 * Components accept this canonical shape OR any object shape if `fieldNames`
 * value/label keys are provided.
 */
export interface SelectOption<V = string> {
  label: string
  value: V
  disabled?: boolean
  /** Items sharing this key render under one heading. */
  group?: string
}

export interface AdvanceSelectFieldNames {
  label?: string
  value?: string
  group?: string
  disabled?: string
}

/**
 * Resolve `option[key]` with a default fallback. Used by AdvanceSelect so every
 * accessor obeys the configured value/label keys.
 */
export function readKey<T>(option: T, key: string, fallback?: unknown): unknown {
  if (option == null || typeof option !== 'object') return fallback
  const v = (option as Record<string, unknown>)[key]
  return v === undefined ? fallback : v
}

```

### `packages/registry-react/components/advance-select/index.ts`

```ts
export { AdvanceSelect, type AdvanceSelectProps } from './advance-select'
export { readKey, type AdvanceSelectFieldNames, type SelectOption } from './types'

```

## ai-llm-chat

- type: `registry:block`
- description: ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
- npm deps: `lucide-react`
- registry deps: `avatar`, `button`, `input`, `textarea`

### `packages/registry-react/blocks/ai-llm-chat/AiLlmChat.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  ArrowUp,
  Check,
  ChevronDown,
  Copy,
  MessageSquarePlus,
  MoreHorizontal,
  Paperclip,
  PanelLeftClose,
  RefreshCw,
  Search,
  Sparkles,
  Square,
  ThumbsDown,
  ThumbsUp,
  Code,
  Lightbulb,
  PenLine,
  BookOpen,
} from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'

type Role = 'user' | 'assistant'

interface Turn {
  id: string
  role: Role
  body: string
  code?: { lang: string; content: string }
  createdAt: Date
}

interface Thread {
  id: string
  title: string
  updatedAt: Date
  turns: Turn[]
}

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
const sevenDays = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)

const suggestions = [
  { icon: Code, label: 'Explain this code', body: 'Walk me through what `useRegistry()` does line by line.' },
  {
    icon: PenLine,
    label: 'Draft a release note',
    body: 'Write a release note for shipping the new inbox + chat blocks.',
  },
  {
    icon: Lightbulb,
    label: 'Brainstorm',
    body: 'Give me five ideas for verticals to build on top of the uipkge registry.',
  },
  {
    icon: BookOpen,
    label: 'Summarise',
    body: 'Summarise the CLAUDE.md "Primitive vs Block" boundary in three bullets.',
  },
]

const models = [
  { id: 'opus-4-7', label: 'Opus 4.7', hint: 'Most capable' },
  { id: 'sonnet-4-6', label: 'Sonnet 4.6', hint: 'Balanced' },
  { id: 'haiku-4-5', label: 'Haiku 4.5', hint: 'Fastest' },
]

const initialThreads: Thread[] = [
  {
    id: 't1',
    title: 'Designing the registry block boundary',
    updatedAt: new Date(now.getTime() - 12 * 60 * 1000),
    turns: [
      {
        id: 'u1',
        role: 'user',
        body: 'When should I extract a repeating tile pattern across blocks into a primitive?',
        createdAt: new Date(now.getTime() - 22 * 60 * 1000),
      },
      {
        id: 'a1',
        role: 'assistant',
        body: 'Short answer: almost never until you have 5+ distinct blocks calling for the *exact same* shape, and the extraction is slot-only with no layout opinion.\n\nThe trap is that StatCard-style primitives — ones that bake an "icon top-right, value below title, trend pill bottom-right" layout — look reusable but lock every block that consumes them. The user installing the block can\'t swap one tile into a chart-led tile without un-abstracting the primitive first.\n\nThe heuristic the CLAUDE.md spells out:',
        createdAt: new Date(now.getTime() - 21 * 60 * 1000),
      },
      {
        id: 'a1b',
        role: 'assistant',
        body: 'Here is the minimal check you can run on any candidate primitive:',
        code: {
          lang: 'ts',
          content:
            '// If the prop changes BEHAVIOR -> primitive (variant, disabled, multiple)\n// If the prop changes LAYOUT or WHICH FIELDS RENDER -> block territory\n//\n// Red flag: a primitive that accepts an `items` array of structured records\n// and renders them with a fixed shape. That is layout opinion in a prop.\ninterface KpiItem { title: string; value: string; icon: any; trend: number }\n//                ^ if you see this on a `registry:ui` item, stop.',
        },
        createdAt: new Date(now.getTime() - 20 * 60 * 1000),
      },
      {
        id: 'u2',
        role: 'user',
        body: 'And if the same 3 tiles repeat inside one block file?',
        createdAt: new Date(now.getTime() - 14 * 60 * 1000),
      },
      {
        id: 'a2',
        role: 'assistant',
        body: 'Leave them inline. The registry rule is "three similar lines is better than a premature abstraction." Blocks are supposed to read top-to-bottom at the call site — that is the whole reason a user installs a block instead of a primitive. The cost of writing the tile out three times is small; the cost of pre-abstracting and getting the shape slightly wrong is high (every consumer downstream pays for it).',
        createdAt: new Date(now.getTime() - 13 * 60 * 1000),
      },
    ],
  },
  {
    id: 't2',
    title: 'Tailwind v4 OKLCH dark mode tokens',
    updatedAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't3',
    title: 'Zero-downtime migration plan',
    updatedAt: yesterday,
    turns: [],
  },
  {
    id: 't4',
    title: 'Composing kanban + calendar in one view',
    updatedAt: new Date(now.getTime() - 30 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't5',
    title: 'shadcn-vue resolver circular warning',
    updatedAt: new Date(now.getTime() - 4 * 24 * 60 * 60 * 1000),
    turns: [],
  },
  {
    id: 't6',
    title: 'Cloudflare Pages preview env wiring',
    updatedAt: new Date(now.getTime() - 9 * 24 * 60 * 60 * 1000),
    turns: [],
  },
]

function formatTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

export interface AiLlmChatProps {
  onSend?: (body: string) => void
  onRegenerate?: (id: string) => void
  onStop?: () => void
}

export function AiLlmChat({ onSend, onRegenerate, onStop }: AiLlmChatProps = {}) {
  const [threads, setThreads] = React.useState<Thread[]>(initialThreads)
  const [activeId, setActiveId] = React.useState<string>('t1')
  const [draft, setDraft] = React.useState('')
  const [sidebarOpen, setSidebarOpen] = React.useState(true)
  const [sidebarSearch, setSidebarSearch] = React.useState('')
  const [modelOpen, setModelOpen] = React.useState(false)
  const [activeModel, setActiveModel] = React.useState(models[0])
  const [isStreaming, setIsStreaming] = React.useState(false)
  const [copiedId, setCopiedId] = React.useState<string | null>(null)
  const scrollRoot = React.useRef<HTMLDivElement | null>(null)
  const streamTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)

  const activeThread = threads.find((t) => t.id === activeId)!
  const turns = activeThread?.turns ?? []
  const isEmpty = turns.length === 0

  const filteredThreads = React.useMemo(() => {
    const q = sidebarSearch.trim().toLowerCase()
    return q ? threads.filter((t) => t.title.toLowerCase().includes(q)) : threads
  }, [threads, sidebarSearch])

  const groupedThreads = React.useMemo(() => {
    const today: Thread[] = []
    const ydy: Thread[] = []
    const week: Thread[] = []
    const earlier: Thread[] = []
    for (const t of [...filteredThreads].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())) {
      if (t.updatedAt >= todayStart) today.push(t)
      else if (t.updatedAt.toDateString() === yesterday.toDateString()) ydy.push(t)
      else if (t.updatedAt >= sevenDays) week.push(t)
      else earlier.push(t)
    }
    return { today, yesterday: ydy, week, earlier }
  }, [filteredThreads])

  function scrollToBottom() {
    if (!scrollRoot.current) return
    scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight
  }

  React.useEffect(() => {
    scrollToBottom()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeId, turns.length, isStreaming])

  function selectThread(id: string) {
    setActiveId(id)
  }

  function newChat() {
    const t: Thread = {
      id: `t${Date.now()}`,
      title: 'New chat',
      updatedAt: new Date(),
      turns: [],
    }
    setThreads((prev) => [t, ...prev])
    setActiveId(t.id)
    setDraft('')
  }

  function send(prefill?: string) {
    const body = (prefill ?? draft).trim()
    if (!body || isStreaming) return
    const userTurn: Turn = {
      id: `u${Date.now()}`,
      role: 'user',
      body,
      createdAt: new Date(),
    }
    setThreads((prev) =>
      prev.map((t) =>
        t.id === activeId
          ? {
              ...t,
              updatedAt: new Date(),
              title:
                t.title === 'New chat' ? body.slice(0, 48) + (body.length > 48 ? '…' : '') : t.title,
              turns: [...t.turns, userTurn],
            }
          : t,
      ),
    )
    setDraft('')
    onSend?.(body)
    setIsStreaming(true)
    streamTimer.current = setTimeout(() => {
      const assistantTurn: Turn = {
        id: `a${Date.now()}`,
        role: 'assistant',
        body: 'Here is a placeholder response. Wire `send()` up to your streaming endpoint and push assistant tokens onto the last turn as they arrive.',
        createdAt: new Date(),
      }
      setThreads((prev) =>
        prev.map((t) => (t.id === activeId ? { ...t, turns: [...t.turns, assistantTurn] } : t)),
      )
      setIsStreaming(false)
    }, 1400)
  }

  function stop() {
    if (streamTimer.current) clearTimeout(streamTimer.current)
    setIsStreaming(false)
    onStop?.()
  }

  function copyTurn(id: string, body: string) {
    if (typeof navigator !== 'undefined' && navigator.clipboard) {
      navigator.clipboard.writeText(body).catch(() => {})
    }
    setCopiedId(id)
    setTimeout(() => {
      setCopiedId((curr) => (curr === id ? null : curr))
    }, 1500)
  }

  function onComposerKey(e: React.KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      send()
    }
  }

  function selectModel(id: string) {
    const m = models.find((m) => m.id === id)
    if (m) setActiveModel(m)
    setModelOpen(false)
  }

  return (
    <div
      className="bg-background text-foreground grid h-[680px] w-full overflow-hidden rounded-xl border shadow-sm transition-[grid-template-columns]"
      style={{ gridTemplateColumns: sidebarOpen ? '260px 1fr' : '0px 1fr' }}
    >
      <aside className="bg-muted/30 flex min-w-0 flex-col overflow-hidden border-r">
        <div className="flex h-14 shrink-0 items-center gap-2 border-b px-3">
          <Button className="h-9 flex-1 justify-start gap-2 rounded-lg" variant="outline" onClick={newChat}>
            <MessageSquarePlus className="size-4" />
            New chat
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="size-8 shrink-0"
            aria-label="Collapse sidebar"
            onClick={() => setSidebarOpen(false)}
          >
            <PanelLeftClose className="size-4" />
          </Button>
        </div>
        <div className="px-3 pt-3 pb-2">
          <div className="relative">
            <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
            <input
              value={sidebarSearch}
              onChange={(e) => setSidebarSearch(e.target.value)}
              placeholder="Search chats"
              className="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-full rounded-lg border pl-8 text-xs shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]"
            />
          </div>
        </div>
        <div className="thread-scroll flex-1 overflow-y-auto pb-3">
          {(
            [
              ['Today', groupedThreads.today],
              ['Yesterday', groupedThreads.yesterday],
              ['Previous 7 days', groupedThreads.week],
              ['Earlier', groupedThreads.earlier],
            ] as const
          ).map(([key, group]) =>
            group.length > 0 ? (
              <React.Fragment key={key}>
                <p className="text-muted-foreground px-3 pt-3 pb-1 text-[10px] font-semibold tracking-widest uppercase">
                  {key}
                </p>
                {group.map((t) => (
                  <button
                    key={t.id}
                    className={[
                      'group flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-[13px] transition-colors',
                      t.id === activeId
                        ? 'bg-primary/10 text-foreground font-medium'
                        : 'text-foreground/80 hover:bg-muted/60',
                    ].join(' ')}
                    onClick={() => selectThread(t.id)}
                  >
                    <span className="truncate">{t.title}</span>
                    <MoreHorizontal className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
                  </button>
                ))}
              </React.Fragment>
            ) : null,
          )}
        </div>
        <div className="border-t px-3 py-3">
          <div className="flex items-center gap-2">
            <Avatar className="size-8">
              <AvatarFallback className="text-[11px] font-medium">U</AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1">
              <p className="truncate text-xs font-medium">You</p>
              <p className="text-muted-foreground truncate text-[10px]">Free plan</p>
            </div>
            <Button variant="ghost" size="icon" className="size-8" aria-label="Account menu">
              <MoreHorizontal className="size-4" />
            </Button>
          </div>
        </div>
      </aside>

      <section className="flex min-w-0 flex-col">
        <header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
          <div className="flex items-center gap-2">
            {!sidebarOpen && (
              <Button
                variant="ghost"
                size="icon"
                className="size-8"
                aria-label="Open sidebar"
                onClick={() => setSidebarOpen(true)}
              >
                <MessageSquarePlus className="size-4" />
              </Button>
            )}
            <div className="relative">
              <button
                className="hover:bg-muted/60 flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors"
                onClick={() => setModelOpen((v) => !v)}
              >
                <Sparkles className="text-primary size-3.5" />
                {activeModel.label}
                <ChevronDown className="text-muted-foreground size-3.5" />
              </button>
              {modelOpen && (
                <div className="bg-popover absolute top-full left-0 z-10 mt-1 w-56 overflow-hidden rounded-lg border p-1 shadow-lg">
                  {models.map((m) => (
                    <button
                      key={m.id}
                      className="hover:bg-muted/60 flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors"
                      onClick={() => selectModel(m.id)}
                    >
                      <div className="min-w-0">
                        <p className="font-medium">{m.label}</p>
                        <p className="text-muted-foreground text-[10px]">{m.hint}</p>
                      </div>
                      {m.id === activeModel.id && <Check className="text-primary size-3.5 shrink-0" />}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
          <Button variant="ghost" size="icon" className="size-8" aria-label="More options">
            <MoreHorizontal className="size-4" />
          </Button>
        </header>

        <div ref={scrollRoot} className="thread-scroll flex-1 overflow-y-auto">
          {isEmpty ? (
            <div className="mx-auto flex h-full max-w-2xl flex-col items-center justify-center gap-6 px-6">
              <div className="bg-primary/10 text-primary flex size-12 items-center justify-center rounded-full">
                <Sparkles className="size-6" />
              </div>
              <div className="text-center">
                <h2 className="text-xl font-semibold tracking-tight">How can I help today?</h2>
                <p className="text-muted-foreground mt-1 text-sm">Ask anything, or try one of these to get started.</p>
              </div>
              <div className="grid w-full grid-cols-2 gap-2">
                {suggestions.map((s) => {
                  const Icon = s.icon
                  return (
                    <button
                      key={s.label}
                      className="bg-card hover:bg-muted/60 group flex items-start gap-3 rounded-lg border p-3 text-left transition-colors"
                      onClick={() => send(s.body)}
                    >
                      <div className="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex size-8 shrink-0 items-center justify-center rounded-md transition-colors">
                        <Icon className="size-4" />
                      </div>
                      <div className="min-w-0">
                        <p className="text-foreground text-xs font-semibold">{s.label}</p>
                        <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">{s.body}</p>
                      </div>
                    </button>
                  )
                })}
              </div>
            </div>
          ) : (
            <div className="mx-auto max-w-3xl space-y-6 px-6 py-6">
              {turns.map((t) => (
                <div key={t.id} className="group">
                  {t.role === 'user' ? (
                    <div className="flex justify-end">
                      <div className="bg-primary/10 text-foreground max-w-[80%] rounded-2xl rounded-tr-md px-4 py-2.5 text-sm leading-relaxed">
                        {t.body}
                      </div>
                    </div>
                  ) : (
                    <div className="flex items-start gap-3">
                      <div className="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
                        <Sparkles className="size-3.5" />
                      </div>
                      <div className="min-w-0 flex-1 space-y-3">
                        <p className="text-foreground text-sm leading-relaxed whitespace-pre-wrap">{t.body}</p>
                        {t.code && (
                          <div className="bg-muted/60 overflow-hidden rounded-lg border">
                            <div className="bg-muted/80 text-muted-foreground flex items-center justify-between px-3 py-1.5 font-mono text-[10px]">
                              <span>{t.code.lang}</span>
                              <button
                                className="hover:text-foreground inline-flex items-center gap-1 transition-colors"
                                onClick={() => copyTurn(t.id + '-code', t.code!.content)}
                              >
                                {copiedId === t.id + '-code' ? (
                                  <Check className="text-success size-3" />
                                ) : (
                                  <Copy className="size-3" />
                                )}
                                {copiedId === t.id + '-code' ? 'Copied' : 'Copy'}
                              </button>
                            </div>
                            <pre className="overflow-x-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed">
                              <code>{t.code.content}</code>
                            </pre>
                          </div>
                        )}
                        <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                          <button
                            className="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] transition-colors"
                            onClick={() => copyTurn(t.id, t.body)}
                          >
                            {copiedId === t.id ? (
                              <Check className="text-success size-3" />
                            ) : (
                              <Copy className="size-3" />
                            )}
                            {copiedId === t.id ? 'Copied' : 'Copy'}
                          </button>
                          <button
                            className="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 items-center justify-center rounded-md transition-colors"
                            aria-label="Regenerate"
                            onClick={() => onRegenerate?.(t.id)}
                          >
                            <RefreshCw className="size-3" />
                          </button>
                          <button
                            className="text-muted-foreground hover:bg-muted hover:text-success inline-flex size-7 items-center justify-center rounded-md transition-colors"
                            aria-label="Good response"
                          >
                            <ThumbsUp className="size-3" />
                          </button>
                          <button
                            className="text-muted-foreground hover:bg-muted hover:text-destructive inline-flex size-7 items-center justify-center rounded-md transition-colors"
                            aria-label="Bad response"
                          >
                            <ThumbsDown className="size-3" />
                          </button>
                          <span className="text-muted-foreground ml-auto text-[10px] tabular-nums">
                            {formatTime(t.createdAt)}
                          </span>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              ))}

              {isStreaming && (
                <div className="flex items-start gap-3">
                  <div className="bg-primary/10 text-primary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full">
                    <Sparkles className="size-3.5" />
                  </div>
                  <div className="text-muted-foreground flex items-center gap-1.5 pt-1.5">
                    <span className="typing-dot" />
                    <span className="typing-dot" style={{ animationDelay: '0.15s' }} />
                    <span className="typing-dot" style={{ animationDelay: '0.3s' }} />
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="bg-muted/20 border-t px-4 py-3">
          <div className="mx-auto max-w-3xl">
            <div className="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4">
              <textarea
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                placeholder={`Message ${activeModel.label}`}
                rows={1}
                className="placeholder:text-muted-foreground/70 max-h-48 min-h-[48px] w-full resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none outline-none focus-visible:ring-0"
                onKeyDown={onComposerKey}
              />
              <div className="flex items-center justify-between gap-2 px-2 pb-2">
                <div className="flex items-center gap-0.5">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-muted-foreground hover:text-foreground size-8"
                    aria-label="Attach file"
                  >
                    <Paperclip className="size-4" />
                  </Button>
                  <span className="text-muted-foreground bg-muted ml-1 inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium">
                    <Sparkles className="text-primary size-3" />
                    {activeModel.label}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex">
                    <span>↵</span>
                  </kbd>
                  {isStreaming ? (
                    <Button
                      variant="outline"
                      className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                      aria-label="Stop generating"
                      onClick={stop}
                    >
                      <Square className="size-3 fill-current" />
                      Stop
                    </Button>
                  ) : (
                    <Button
                      className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                      disabled={!draft.trim()}
                      aria-label="Send"
                      onClick={() => send()}
                    >
                      Send
                      <ArrowUp className="size-3.5" />
                    </Button>
                  )}
                </div>
              </div>
            </div>
            <p className="text-muted-foreground/70 mt-2 text-center text-[10px]">
              AI can make mistakes. Verify important info.
            </p>
          </div>
        </div>
      </section>

      <style>{`
        .thread-scroll::-webkit-scrollbar {
          width: 6px;
        }
        .thread-scroll::-webkit-scrollbar-thumb {
          background: var(--border);
          border-radius: 3px;
        }
        .typing-dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 9999px;
          background: currentColor;
          opacity: 0.5;
          animation: typing-bounce 1s infinite ease-in-out;
        }
        @keyframes typing-bounce {
          0%,
          80%,
          100% {
            transform: translateY(0);
            opacity: 0.35;
          }
          40% {
            transform: translateY(-3px);
            opacity: 0.9;
          }
        }
      `}</style>
    </div>
  )
}

```

## alert

- type: `registry:ui`
- description: Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/alert/alert.tsx`

```tsx
import * as React from 'react'
import { AlertCircle, CheckCircle, Info, TriangleAlert } from 'lucide-react'
import { cn } from '@/lib/utils'
import { alertVariants, type AlertVariants } from './alert.variants'

export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertVariants {
  icon?: 'info' | 'warning' | 'error' | 'success'
  title?: string
  text?: string
}

const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
  ({ className, variant, icon, title, text, children, ...props }, ref) => (
    <div
      ref={ref}
      role="alert"
      data-uipkge=""
      data-slot="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    >
      {icon ? (
        <div data-uipkge="" data-slot="alert-icon" className="absolute top-4 left-4">
          {icon === 'error' ? (
            <AlertCircle className="size-4" aria-hidden="true" />
          ) : icon === 'success' ? (
            <CheckCircle className="size-4" aria-hidden="true" />
          ) : icon === 'warning' ? (
            <TriangleAlert className="size-4" aria-hidden="true" />
          ) : (
            <Info className="size-4" aria-hidden="true" />
          )}
        </div>
      ) : null}
      <div data-uipkge="" data-slot="alert-content" className="[&_p]:text-sm [&_p]:leading-relaxed">
        {title ? <p className="text-sm font-medium">{title}</p> : null}
        {text ? <p className="text-muted-foreground text-sm">{text}</p> : null}
        {children}
      </div>
    </div>
  ),
)
Alert.displayName = 'Alert'

export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
}

const AlertTitle = React.forwardRef<HTMLHeadingElement, AlertTitleProps>(
  ({ className, as: Comp = 'h5', ...props }, ref) => (
    <Comp
      ref={ref}
      data-uipkge=""
      data-slot="alert-title"
      className={cn('mb-1 text-sm leading-none font-medium tracking-tight', className)}
      {...props}
    />
  ),
)
AlertTitle.displayName = 'AlertTitle'

const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="alert-description"
      className={cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', className)}
      {...props}
    />
  ),
)
AlertDescription.displayName = 'AlertDescription'

export { Alert, AlertTitle, AlertDescription }

```

### `packages/registry-react/components/alert/alert.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Alert.vue` can `import { alertVariants } from
 * './alert.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const alertVariants = cva(
  'relative w-full rounded-lg border p-4 [&>svg]:text-foreground [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has([data-slot=alert-icon])]:pl-12 [&:has([data-slot=alert-description])]:pt-7',
  {
    variants: {
      variant: {
        default: 'bg-background text-foreground border-border',
        destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type AlertVariants = VariantProps<typeof alertVariants>

```

### `packages/registry-react/components/alert/index.ts`

```ts
export { Alert, AlertTitle, AlertDescription, type AlertProps, type AlertTitleProps } from './alert'

// Re-export variant API from the sibling file (kept separate to avoid the
// alert.tsx <-> index.ts circular import — mirrors the Vue registry).
export { alertVariants, type AlertVariants } from './alert.variants'

```

## alert-modal

- type: `registry:ui`
- description: Props-driven shortcut for confirm and destructive prompts — pass `title`, `description`, `actionLabel`, and a `tone` and you get a fully styled modal with a leading icon ring, action button, and optional async loading state. Skip it and use Dialog when you need a free-form modal instead.
- npm deps: `lucide-react`
- registry deps: `dialog`, `button`

### `packages/registry-react/components/alert-modal/alert-modal.tsx`

```tsx
'use client'

import * as React from 'react'
import { CircleAlert, CircleCheck, Info, TriangleAlert, type LucideIcon } from 'lucide-react'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type AlertIcon = 'info' | 'warning' | 'error' | 'success'

export interface AlertModalProps {
  /** Controlled open state. Pair with `onOpenChange`. */
  open?: boolean
  onOpenChange?: (open: boolean) => void
  /** Title rendered in the header. Override with the `title` node if you need markup. */
  title?: React.ReactNode
  /** Description rendered under the title. */
  description?: React.ReactNode
  /** Label for the primary action button. */
  actionLabel?: React.ReactNode
  /** Label for the cancel button. Pass null to hide. */
  cancelLabel?: React.ReactNode | null
  /** Visual tone — colors the icon and action button. */
  tone?: 'default' | 'destructive' | 'success' | 'warning'
  /** Quick icon shortcut, a custom icon component, or a rendered node. */
  icon?: AlertIcon | LucideIcon | React.ReactNode | null
  /** Show a spinner on the action button and disable both buttons. */
  loading?: boolean
  /** Disable the primary action without a spinner. */
  actionDisabled?: boolean
  className?: string
  onAction?: (event: React.MouseEvent) => void
  onCancel?: (event: React.MouseEvent) => void
  /** Element that opens the modal. Rendered as the trigger when provided. */
  trigger?: React.ReactNode
  /** Optional free-form body content between the header and the action row. */
  children?: React.ReactNode
  /** Replace the default action/cancel button row. */
  actions?: React.ReactNode
}

const builtInIcons: Record<AlertIcon, LucideIcon> = {
  info: Info,
  success: CircleCheck,
  warning: TriangleAlert,
  error: CircleAlert,
}

function isAlertIcon(value: unknown): value is AlertIcon {
  return value === 'info' || value === 'success' || value === 'warning' || value === 'error'
}

const iconColorClasses: Record<NonNullable<AlertModalProps['tone']>, string> = {
  destructive: 'text-destructive',
  success: 'text-success',
  warning: 'text-warning',
  default: 'text-muted-foreground',
}

const actionToneClasses: Record<NonNullable<AlertModalProps['tone']>, string> = {
  destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
  success: 'bg-success text-success-foreground hover:bg-success/90',
  warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
  default: '',
}

const AlertModal = ({
  open,
  onOpenChange,
  title = '',
  description = '',
  actionLabel = 'Continue',
  cancelLabel = 'Cancel',
  tone = 'default',
  icon = null,
  loading = false,
  actionDisabled = false,
  className,
  onAction,
  onCancel,
  trigger,
  children,
  actions,
}: AlertModalProps) => {
  const isControlled = open !== undefined
  const [internalOpen, setInternalOpen] = React.useState<boolean>(open ?? false)
  const effectiveOpen = isControlled ? open : internalOpen

  function setOpen(value: boolean) {
    if (!isControlled) setInternalOpen(value)
    onOpenChange?.(value)
  }

  const resolvedIcon = React.useMemo<React.ReactNode>(() => {
    if (!icon) return null
    if (isAlertIcon(icon)) {
      const IconComp = builtInIcons[icon]
      return <IconComp className="size-5" />
    }
    if (typeof icon === 'function') {
      const IconComp = icon as LucideIcon
      return <IconComp className="size-5" />
    }
    return icon
  }, [icon])

  function handleAction(e: React.MouseEvent) {
    if (loading || actionDisabled) {
      e.preventDefault()
      return
    }
    onAction?.(e)
  }

  function handleCancel(e: React.MouseEvent) {
    onCancel?.(e)
  }

  return (
    <Dialog open={effectiveOpen} onOpenChange={setOpen}>
      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}

      <DialogContent
        role="alertdialog"
        showCloseButton={false}
        className={cn(className)}
      >
        <div className="flex flex-col gap-2 text-center sm:text-left">
          {resolvedIcon && (
            <div
              className={cn(
                'bg-muted mb-2 flex size-10 items-center justify-center rounded-full',
                iconColorClasses[tone],
              )}
            >
              {resolvedIcon}
            </div>
          )}
          <DialogTitle className="text-lg font-semibold">{title}</DialogTitle>
          {description && <DialogDescription className="text-muted-foreground text-sm">{description}</DialogDescription>}
        </div>

        {children && <div className="text-sm">{children}</div>}

        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
          {actions ?? (
            <>
              {cancelLabel != null && (
                <DialogClose asChild>
                  <Button variant="outline" disabled={loading} onClick={handleCancel}>
                    {cancelLabel}
                  </Button>
                </DialogClose>
              )}
              <Button
                disabled={loading || actionDisabled}
                aria-busy={loading}
                className={actionToneClasses[tone]}
                onClick={handleAction}
              >
                {loading && (
                  <span
                    className="mr-2 inline-block size-3.5 animate-spin rounded-full border-2 border-current border-t-transparent"
                    aria-hidden="true"
                  />
                )}
                {actionLabel}
              </Button>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}
AlertModal.displayName = 'AlertModal'

export { AlertModal }

```

### `packages/registry-react/components/alert-modal/index.ts`

```ts
export { AlertModal, type AlertModalProps } from './alert-modal'

```

## analytics-overview

- type: `registry:block`
- description: Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
- npm deps: `echarts`, `echarts-for-react`
- registry deps: `raw-chart`

### `packages/registry-react/blocks/analytics-overview/AnalyticsOverview.tsx`

```tsx
'use client'

// Two-pane analytics dashboard: a combo chart (stacked bars with a
// dot overlay on a dual y-axis) sits above an interactive drill-down
// line chart. Click a bar in the top pane to filter the bottom pane
// to that route. The block bakes in a realistic dummy dataset; swap
// `routes`, `partners`, and `drillSeries` with your own to repoint.
//
// Built on raw ECharts rather than `BarChart` because combo charts
// (bar + scatter + dual y-axes) sit outside the opinionated wrapper's
// single-series-type contract -- this is the documented escape hatch.
// We register the chart types this block needs at module load (mirroring
// the wrappers in `@/components/ui/charts`) and read palette tokens from
// `useChartTheme()` so the colours stay in sync with the rest of the registry.
import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart as EBar, ScatterChart as EScatter, LineChart as ELine } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent, MarkLineComponent } from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { useChartTheme } from '@/components/ui/charts'

use([CanvasRenderer, EBar, EScatter, ELine, GridComponent, TooltipComponent, LegendComponent, MarkLineComponent])

// Each route declares the per-partner volume (stack segments) + the
// avg overlay value (dot on the right y-axis).
const partners = ['ALPHA', 'BETA', 'GAMMA', 'DELTA', 'EPSILON'] as const
type Partner = (typeof partners)[number]

interface Route {
  id: string
  label: string
  volumes: Record<Partner, number>
  overlay: number
}

const routes: Route[] = [
  {
    id: 'r1',
    label: 'NODE A → NODE B',
    volumes: { ALPHA: 90, BETA: 25, GAMMA: 18, DELTA: 12, EPSILON: 8 },
    overlay: 12,
  },
  {
    id: 'r2',
    label: 'NODE C → NODE D',
    volumes: { ALPHA: 4, BETA: 100, GAMMA: 14, DELTA: 12, EPSILON: 24 },
    overlay: 14.7,
  },
  {
    id: 'r3',
    label: 'NODE E → NODE F',
    volumes: { ALPHA: 14, BETA: 38, GAMMA: 18, DELTA: 32, EPSILON: 28 },
    overlay: 8,
  },
  { id: 'r4', label: 'NODE G → NODE H', volumes: { ALPHA: 130, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 0 }, overlay: 6 },
  { id: 'r5', label: 'NODE I → NODE J', volumes: { ALPHA: 0, BETA: 0, GAMMA: 60, DELTA: 0, EPSILON: 70 }, overlay: 17 },
  { id: 'r6', label: 'NODE K → NODE L', volumes: { ALPHA: 60, BETA: 50, GAMMA: 16, DELTA: 0, EPSILON: 0 }, overlay: 8 },
  { id: 'r7', label: 'NODE M → NODE N', volumes: { ALPHA: 70, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 0 }, overlay: 22 },
  { id: 'r8', label: 'NODE O → NODE P', volumes: { ALPHA: 0, BETA: 0, GAMMA: 0, DELTA: 0, EPSILON: 110 }, overlay: 29 },
  { id: 'r9', label: 'NODE Q → NODE R', volumes: { ALPHA: 40, BETA: 0, GAMMA: 60, DELTA: 0, EPSILON: 0 }, overlay: 19 },
  {
    id: 'r10',
    label: 'NODE S → NODE T',
    volumes: { ALPHA: 60, BETA: 30, GAMMA: 0, DELTA: 0, EPSILON: 0 },
    overlay: 23,
  },
]

// Drill-down monthly series for a few partners. In a real app you'd
// fetch this per-route on selection; the dummy block shows the same
// shape regardless of which route is active.
const drillMonths = ['Mar 2026', 'Apr 2026', 'May 2026']
const drillSeries: Record<string, number[]> = {
  ALPHA: [22, 25, 20],
  GAMMA: [19, 17, 18],
  EPSILON: [-1, 29, -1], // sparse point — left out of line by NaN-like handling
}

export function AnalyticsOverview() {
  const theme = useChartTheme()
  const [overviewMetric, setOverviewMetric] = React.useState<'overlay' | 'volume'>('overlay')
  const [activeRoute, setActiveRoute] = React.useState<string | null>(null)
  const [drillView, setDrillView] = React.useState<'Month' | 'Quarter'>('Month')

  const overviewOption = React.useMemo(() => {
    const x = routes.map((r) => r.label)
    const stacks = partners.map((p, i) => ({
      name: p,
      type: 'bar' as const,
      stack: 'vol',
      barMaxWidth: 36,
      emphasis: { focus: 'series' as const },
      itemStyle: { color: theme.colors[i % theme.colors.length] },
      data: routes.map((r) => r.volumes[p]),
    }))
    const overlay = {
      name: 'Avg metric',
      type: 'scatter' as const,
      yAxisIndex: 1,
      symbolSize: 12,
      itemStyle: { color: theme.colors[2], borderColor: 'var(--background)', borderWidth: 2 },
      data: routes.map((r) => r.overlay),
    }

    return {
      color: theme.colors,
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: theme.tooltipBg,
        borderColor: theme.tooltipBorder,
        textStyle: { color: theme.tooltipText, fontSize: 12 },
      },
      legend: {
        top: 8,
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        textStyle: { color: theme.textColor, fontSize: 11 },
      },
      grid: { left: 56, right: 56, top: 42, bottom: 72, containLabel: false },
      xAxis: {
        type: 'category' as const,
        data: x,
        axisLine: { lineStyle: { color: theme.axisColor } },
        axisLabel: {
          interval: 0,
          rotate: 35,
          fontSize: 10,
          color: theme.textColor,
          formatter: (val: string) => val.replace(' → ', '\n'),
        },
        axisTick: { show: false },
      },
      yAxis: [
        {
          type: 'value' as const,
          name: 'Volume',
          nameTextStyle: { color: theme.textColor, fontSize: 10 },
          splitLine: { lineStyle: { color: theme.splitLineColor } },
          axisLabel: { color: theme.textColor, fontSize: 10 },
        },
        {
          type: 'value' as const,
          name: 'Metric',
          nameTextStyle: { color: theme.textColor, fontSize: 10 },
          splitLine: { show: false },
          axisLabel: { color: theme.textColor, fontSize: 10 },
        },
      ],
      series: [...stacks, overlay],
    }
  }, [theme])

  const drillOption = React.useMemo(() => {
    const series = Object.entries(drillSeries).map(([name, values], i) => ({
      name,
      type: 'line' as const,
      smooth: true,
      symbolSize: 8,
      connectNulls: false,
      lineStyle: { width: 2, color: theme.colors[i % theme.colors.length] },
      itemStyle: { color: theme.colors[i % theme.colors.length] },
      data: values.map((v) => (v < 0 ? null : v)),
    }))

    return {
      color: theme.colors,
      tooltip: {
        trigger: 'axis',
        backgroundColor: theme.tooltipBg,
        borderColor: theme.tooltipBorder,
        textStyle: { color: theme.tooltipText, fontSize: 12 },
      },
      legend: {
        top: 8,
        icon: 'circle',
        itemWidth: 8,
        itemHeight: 8,
        textStyle: { color: theme.textColor, fontSize: 11 },
      },
      grid: { left: 48, right: 24, top: 42, bottom: 48, containLabel: false },
      xAxis: {
        type: 'category' as const,
        data: drillMonths,
        boundaryGap: false,
        axisLine: { lineStyle: { color: theme.axisColor } },
        axisLabel: { color: theme.textColor, fontSize: 11 },
        axisTick: { show: false },
      },
      yAxis: {
        type: 'value' as const,
        splitLine: { lineStyle: { color: theme.splitLineColor } },
        axisLabel: { color: theme.textColor, fontSize: 11, formatter: (v: number) => `${v}d` },
      },
      series,
    }
  }, [theme])

  const activeLabel = routes.find((r) => r.id === activeRoute)?.label ?? null

  function onOverviewClick(params: any) {
    if (!params?.name) return
    const r = routes.find((rt) => rt.label === params.name)
    if (r) setActiveRoute(r.id)
  }

  function resetDrill() {
    setActiveRoute(null)
  }

  return (
    <div className="space-y-6">
      {/* Overview pane */}
      <section className="bg-card border-border rounded-lg border p-5">
        <div className="mb-3 flex items-start justify-between gap-4">
          <div>
            <h2 className="text-[15px] font-semibold tracking-tight text-[var(--accent-tint)]">Overview</h2>
            <p className="text-muted-foreground mt-1 text-xs">
              <span className="text-foreground font-medium">Metric</span> measures the avg performance signal aggregated
              per route.
            </p>
          </div>
          <div className="text-muted-foreground text-xs">
            <span>Performance Metric:</span>
            <select
              value={overviewMetric}
              onChange={(e) => setOverviewMetric(e.target.value as 'overlay' | 'volume')}
              className="border-border text-foreground ml-2 rounded-md border bg-transparent px-2 py-1 font-medium"
            >
              <option value="overlay">Avg metric</option>
              <option value="volume">Total volume</option>
            </select>
          </div>
        </div>
        <div role="img" tabIndex={0} style={{ height: '320px' }} className="focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none">
          <ReactECharts
            echarts={echartsCore as any}
            option={overviewOption}
            notMerge
            lazyUpdate
            onEvents={{ click: onOverviewClick }}
            style={{ width: '100%', height: '100%' }}
          />
        </div>
        <p className="text-muted-foreground mt-2 text-[11px]">Click a bar to drill into that route&apos;s monthly trend.</p>
      </section>

      {/* Drill-down pane */}
      <section className="bg-card border-border rounded-lg border p-5">
        <div className="mb-3 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <h3 className="text-[15px] font-semibold tracking-tight">
              {activeLabel ? (
                <>
                  <span className="text-muted-foreground font-normal">Drill-down:</span>
                  <span className="text-foreground ml-1">{activeLabel}</span>
                </>
              ) : (
                <span className="text-muted-foreground font-normal">Select a route above to drill in</span>
              )}
            </h3>
            {activeRoute && (
              <button
                type="button"
                className="border-border text-muted-foreground hover:text-foreground rounded-md border px-2 py-1 font-mono text-[11px] transition hover:border-[var(--accent-tint-soft)]"
                onClick={resetDrill}
              >
                ← Back to Overview
              </button>
            )}
          </div>
          <div className="text-muted-foreground text-xs">
            <span>View By:</span>
            <select
              value={drillView}
              onChange={(e) => setDrillView(e.target.value as 'Month' | 'Quarter')}
              className="border-border text-foreground ml-2 rounded-md border bg-transparent px-2 py-1 font-medium"
            >
              <option value="Month">Month</option>
              <option value="Quarter">Quarter</option>
            </select>
          </div>
        </div>
        {activeRoute ? (
          <div role="img" tabIndex={0} style={{ height: '280px' }} className="focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none">
            <ReactECharts
              echarts={echartsCore as any}
              option={drillOption}
              notMerge
              lazyUpdate
              style={{ width: '100%', height: '100%' }}
            />
          </div>
        ) : (
          <div className="text-muted-foreground border-border grid h-[260px] place-items-center rounded-md border border-dashed text-xs">
            No route selected. Click a bar above.
          </div>
        )}
      </section>
    </div>
  )
}

```

## anchor

- type: `registry:ui`
- description: In-page navigation list with scroll-spy. Renders a vertical list of links; the active item highlights as the user scrolls through anchored sections.

### `packages/registry-react/components/anchor/anchor.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface AnchorItem {
  href: string
  title: string
  children?: AnchorItem[]
}

interface AnchorContextValue {
  activeHref: string | null
  setActive: (href: string) => void
  register: (href: string) => void
  unregister: (href: string) => void
  scrollContainerRef: React.MutableRefObject<HTMLElement | Window>
  offsetTopRef: React.MutableRefObject<number>
}

const AnchorContext = React.createContext<AnchorContextValue | null>(null)

export interface AnchorProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
  items?: AnchorItem[]
  offsetTop?: number
  bounds?: number
  scrollContainer?: HTMLElement | string | null
  affix?: boolean
  onChange?: (href: string) => void
}

const Anchor = React.forwardRef<HTMLElement, AnchorProps>(
  (
    {
      className,
      items = [],
      offsetTop = 0,
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      bounds = 5,
      scrollContainer = null,
      affix = false,
      onChange,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    const [activeHref, setActiveHref] = React.useState<string | null>(null)
    const activeHrefRef = React.useRef<string | null>(null)
    const registeredRef = React.useRef<Set<string>>(new Set())
    const observerRef = React.useRef<IntersectionObserver | null>(null)
    const observedRef = React.useRef<Map<string, Element>>(new Map())
    const scrollContainerRef = React.useRef<HTMLElement | Window>(
      typeof window !== 'undefined' ? window : (null as unknown as Window),
    )
    const offsetTopRef = React.useRef(offsetTop)
    const onChangeRef = React.useRef(onChange)

    React.useEffect(() => {
      offsetTopRef.current = offsetTop
    }, [offsetTop])
    React.useEffect(() => {
      onChangeRef.current = onChange
    }, [onChange])

    const setActive = React.useCallback((href: string) => {
      activeHrefRef.current = href
      setActiveHref(href)
      onChangeRef.current?.(href)
    }, [])

    const resolveContainer = React.useCallback((): HTMLElement | Window => {
      if (!scrollContainer) return window
      if (typeof scrollContainer === 'string') {
        return (document.querySelector(scrollContainer) as HTMLElement) ?? window
      }
      return scrollContainer
    }, [scrollContainer])

    const rebuildObserver = React.useCallback(() => {
      if (observerRef.current) {
        observerRef.current.disconnect()
        observedRef.current.clear()
      }
      const container = scrollContainerRef.current
      const root = container === window ? null : (container as HTMLElement)
      observerRef.current = new IntersectionObserver(
        (entries) => {
          const intersecting = entries.filter((e) => e.isIntersecting)
          if (intersecting.length === 0) return
          intersecting.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
          const id = '#' + intersecting[0]!.target.id
          if (id !== activeHrefRef.current) {
            activeHrefRef.current = id
            setActiveHref(id)
            onChangeRef.current?.(id)
          }
        },
        {
          root,
          rootMargin: `-${offsetTopRef.current}px 0px -60% 0px`,
          threshold: [0, 1],
        },
      )
      for (const href of registeredRef.current) {
        const el = document.querySelector(href)
        if (el) {
          observedRef.current.set(href, el)
          observerRef.current.observe(el)
        }
      }
    }, [])

    const register = React.useCallback((href: string) => {
      registeredRef.current.add(href)
      if (!observerRef.current) return
      const el = document.querySelector(href)
      if (el && !observedRef.current.has(href)) {
        observedRef.current.set(href, el)
        observerRef.current.observe(el)
      }
    }, [])

    const unregister = React.useCallback((href: string) => {
      registeredRef.current.delete(href)
      const el = observedRef.current.get(href)
      if (el && observerRef.current) observerRef.current.unobserve(el)
      observedRef.current.delete(href)
    }, [])

    React.useEffect(() => {
      scrollContainerRef.current = resolveContainer()
      rebuildObserver()
      return () => {
        observerRef.current?.disconnect()
        observerRef.current = null
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [scrollContainer])

    const ctx = React.useMemo<AnchorContextValue>(
      () => ({ activeHref, setActive, register, unregister, scrollContainerRef, offsetTopRef }),
      [activeHref, setActive, register, unregister],
    )

    return (
      <AnchorContext.Provider value={ctx}>
        <nav
          ref={ref}
          data-uipkge=""
          data-slot="anchor"
          aria-label="Table of contents"
          className={cn('border-border flex flex-col gap-1 border-l text-sm', affix && 'sticky', className)}
          style={affix ? { top: `${offsetTop}px`, ...style } : style}
          {...props}
        >
          {items.length
            ? items.map((item) => (
                <AnchorLink key={item.href} href={item.href} title={item.title}>
                  {(item.children ?? []).map((child) => (
                    <AnchorLink key={child.href} href={child.href} title={child.title} />
                  ))}
                </AnchorLink>
              ))
            : children}
        </nav>
      </AnchorContext.Provider>
    )
  },
)
Anchor.displayName = 'Anchor'

export interface AnchorLinkProps {
  href: string
  title: string
  className?: string
  children?: React.ReactNode
}

const AnchorLink = React.forwardRef<HTMLDivElement, AnchorLinkProps>(
  ({ href, title, className, children }, ref) => {
    const ctx = React.useContext(AnchorContext)
    if (!ctx) throw new Error('AnchorLink must be used inside <Anchor>.')

    const isActive = ctx.activeHref === href

    React.useEffect(() => {
      ctx.register(href)
      return () => ctx.unregister(href)
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [href])

    const onClick = (e: React.MouseEvent) => {
      e.preventDefault()
      const el = document.querySelector(href) as HTMLElement | null
      if (!el) return
      const offset = ctx.offsetTopRef.current
      const container = ctx.scrollContainerRef.current
      const smooth = !window.matchMedia('(prefers-reduced-motion: reduce)').matches
      const behavior: ScrollBehavior = smooth ? 'smooth' : 'auto'
      if (container === window) {
        const top = el.getBoundingClientRect().top + window.scrollY - offset
        window.scrollTo({ top, behavior })
      } else {
        const c = container as HTMLElement
        const top = el.getBoundingClientRect().top - c.getBoundingClientRect().top + c.scrollTop - offset
        c.scrollTo({ top, behavior })
      }
      history.replaceState(null, '', href)
      ctx.setActive(href)
    }

    return (
      <div ref={ref} data-uipkge="" data-slot="anchor-link" className="flex flex-col">
        <a
          href={href}
          aria-current={isActive ? 'location' : undefined}
          className={cn(
            'text-muted-foreground -ml-px block border-l-2 border-transparent py-2 pl-3 transition-colors',
            'hover:text-foreground',
            'focus-visible:ring-ring rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
            isActive && 'border-primary text-foreground font-medium',
            className,
          )}
          onClick={onClick}
        >
          {title}
        </a>
        {children ? <div className="ml-3">{children}</div> : null}
      </div>
    )
  },
)
AnchorLink.displayName = 'AnchorLink'

export { Anchor, AnchorLink }

```

### `packages/registry-react/components/anchor/index.ts`

```ts
export { Anchor, AnchorLink, type AnchorItem, type AnchorProps, type AnchorLinkProps } from './anchor'

```

## area-chart

- type: `registry:ui`
- description: React mirror of @uipkge/area-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/area-chart/AreaChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// AreaChart
// ─────────────────────────────────────────────────────────────────────────

export interface AreaChartProps {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  className?: string
}

export const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(
  ({ data, xField = 'x', yField = 'y', height = 300, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const fields = Array.isArray(yField) ? yField : [yField]
      const xData = data.map((d) => d[xField])

      const series = fields.map((field, i) => ({
        name: field,
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: { opacity: 0.15 },
        lineStyle: { width: 2 },
        itemStyle: { color: theme.colors[i % theme.colors.length] },
        data: data.map((d) => d[field]),
      }))

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        legend: userLegend,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      const baseLegend: any =
        fields.length > 1
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : { show: false }

      return {
        color: theme.colors,
        grid: mergeOptionBlock(
          { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
          userGrid,
        ),
        tooltip: mergeOptionBlock(
          {
            trigger: 'axis',
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend, userLegend),
        xAxis: mergeOptionBlock(
          {
            type: 'category',
            data: xData,
            axisLine: { lineStyle: { color: theme.axisColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisTick: { show: false },
          },
          userXAxis,
        ),
        yAxis: mergeOptionBlock(
          {
            type: 'value',
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { show: false },
            axisTick: { show: false },
          },
          userYAxis,
        ),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, xField, yField, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
AreaChart.displayName = 'AreaChart'

```

### `packages/registry-react/components/charts/area-chart/index.ts`

```ts
export { AreaChart, type AreaChartProps } from './AreaChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## aspect-ratio

- type: `registry:ui`
- description: Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.
- npm deps: `@radix-ui/react-aspect-ratio`

### `packages/registry-react/components/aspect-ratio/AspectRatio.tsx`

```tsx
'use client'

import * as React from 'react'
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'

const AspectRatio = React.forwardRef<
  React.ElementRef<typeof AspectRatioPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>
>(({ ...props }, ref) => (
  <AspectRatioPrimitive.Root ref={ref} data-uipkge="" data-slot="aspect-ratio" {...props} />
))
AspectRatio.displayName = 'AspectRatio'

export { AspectRatio }

```

### `packages/registry-react/components/aspect-ratio/index.ts`

```ts
export { AspectRatio } from './AspectRatio'

```

## auth-mfa

- type: `registry:block`
- description: Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.
- npm deps: `lucide-react`
- registry deps: `card`, `button`, `pin-input`

### `packages/registry-react/blocks/auth-mfa/AuthMfa.tsx`

```tsx
'use client'

import * as React from 'react'
import { ShieldCheck, RotateCw } from 'lucide-react'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { PinInput, PinInputGroup, PinInputSlot } from '@/components/ui/pin-input'

export interface AuthMfaProps {
  title?: string
  description?: string
  continueHref?: string
  recoveryHref?: string
  demoCode?: string
  onVerify?: (code: string) => void
  onResend?: () => void
  onContinue?: () => void
}

export function AuthMfa({
  title = 'Two-step verification',
  description = 'Enter the 6-digit code from your authenticator app.',
  continueHref = '/',
  recoveryHref = '#',
  demoCode = '123456',
  onVerify,
  onResend,
  onContinue,
}: AuthMfaProps) {
  const [code, setCode] = React.useState('')
  const [verifying, setVerifying] = React.useState(false)
  const [verified, setVerified] = React.useState(false)
  const [error, setError] = React.useState('')
  const [resendIn, setResendIn] = React.useState(0)

  React.useEffect(() => {
    if (code.length === 6) {
      setError('')
      setVerifying(true)
      onVerify?.(code)
      const timer = setTimeout(() => {
        setVerifying(false)
        if (code === demoCode) setVerified(true)
        else {
          setError(`Invalid code. Try ${demoCode} for the demo.`)
          setCode('')
        }
      }, 700)
      return () => clearTimeout(timer)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [code])

  function startResendCooldown() {
    setResendIn(30)
    onResend?.()
    const t = setInterval(() => {
      setResendIn((prev) => {
        if (prev <= 1) {
          clearInterval(t)
          return 0
        }
        return prev - 1
      })
    }, 1000)
  }

  return (
    <div className="bg-background flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-sm">
        {!verified ? (
          <>
            <CardHeader className="text-center">
              <div className="bg-primary/10 text-primary mx-auto mb-2 flex size-12 items-center justify-center rounded-full">
                <ShieldCheck className="size-6" />
              </div>
              <CardTitle className="text-2xl">{title}</CardTitle>
              <CardDescription>{description}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-center">
                <PinInput value={code} onChange={setCode} disabled={verifying}>
                  <PinInputGroup>
                    {Array.from({ length: 6 }).map((_, i) => (
                      <PinInputSlot key={i} index={i} />
                    ))}
                  </PinInputGroup>
                </PinInput>
              </div>
              {verifying && <p className="text-muted-foreground text-center text-sm">Verifying…</p>}
              {error && <p className="text-destructive text-center text-sm">{error}</p>}
              <div className="text-center">
                {resendIn === 0 ? (
                  <button
                    type="button"
                    className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs underline-offset-4 hover:underline"
                    onClick={startResendCooldown}
                  >
                    <RotateCw className="size-3" />Resend code
                  </button>
                ) : (
                  <p className="text-muted-foreground text-xs">Resend available in {resendIn}s</p>
                )}
              </div>
            </CardContent>
            <CardFooter className="justify-center">
              <p className="text-muted-foreground text-xs">
                Lost your device?{' '}
                <a href={recoveryHref} className="text-foreground underline-offset-4 hover:underline">
                  Use a recovery code
                </a>
              </p>
            </CardFooter>
          </>
        ) : (
          <CardContent className="space-y-4 pt-6 text-center">
            <div className="bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full">
              <ShieldCheck className="size-6" />
            </div>
            <div className="space-y-1">
              <h3 className="text-lg font-semibold">Verified</h3>
              <p className="text-muted-foreground text-sm">You're all set. Continuing to your dashboard…</p>
            </div>
            <a href={continueHref} onClick={() => onContinue?.()}>
              <Button className="w-full">Continue</Button>
            </a>
          </CardContent>
        )}
      </Card>
    </div>
  )
}

```

## auth-password-reset

- type: `registry:block`
- description: Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.
- npm deps: `lucide-react`
- registry deps: `card`, `input`, `label`, `button`

### `packages/registry-react/blocks/auth-password-reset/AuthPasswordReset.tsx`

```tsx
'use client'

import * as React from 'react'
import { ArrowLeft, MailCheck } from 'lucide-react'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

type Stage = 'request' | 'sent' | 'reset' | 'done'

export interface AuthPasswordResetProps {
  signInHref?: string
  onRequest?: (email: string) => void
  onReset?: (password: string) => void
}

export function AuthPasswordReset({
  signInHref = '/login',
  onRequest,
  onReset,
}: AuthPasswordResetProps) {
  const [stage, setStage] = React.useState<Stage>('request')

  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [confirm, setConfirm] = React.useState('')
  const passwordsMatch = !confirm || password === confirm

  function submitRequest(e: React.FormEvent) {
    e.preventDefault()
    if (!email) return
    onRequest?.(email)
    setStage('sent')
  }

  function submitReset(e: React.FormEvent) {
    e.preventDefault()
    if (!password || !passwordsMatch) return
    onReset?.(password)
    setStage('done')
  }

  return (
    <div className="bg-background flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-sm">
        {stage === 'request' && (
          <>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Forgot password?</CardTitle>
              <CardDescription>Enter your email and we'll send you a reset link.</CardDescription>
            </CardHeader>
            <CardContent>
              <form className="space-y-4" onSubmit={submitRequest}>
                <div className="grid gap-2">
                  <Label htmlFor="reset-email">Email</Label>
                  <Input
                    id="reset-email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    type="email"
                    placeholder="you@company.com"
                    required
                  />
                </div>
                <Button type="submit" className="w-full">
                  Send reset link
                </Button>
              </form>
            </CardContent>
            <CardFooter className="justify-center">
              <a
                href={signInHref}
                className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm"
              >
                <ArrowLeft className="size-3" />Back to sign in
              </a>
            </CardFooter>
          </>
        )}

        {stage === 'sent' && (
          <CardContent className="space-y-4 pt-6 text-center">
            <div className="bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full">
              <MailCheck className="size-6" />
            </div>
            <div className="space-y-1">
              <h3 className="text-lg font-semibold">Check your inbox</h3>
              <p className="text-muted-foreground text-sm">
                We've sent a reset link to <span className="text-foreground font-medium">{email}</span>.
              </p>
            </div>
            <Button variant="outline" className="w-full" onClick={() => setStage('reset')}>
              Open reset form (demo)
            </Button>
            <button
              className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
              onClick={() => setStage('request')}
            >
              Wrong email?
            </button>
          </CardContent>
        )}

        {stage === 'reset' && (
          <>
            <CardHeader className="text-center">
              <CardTitle className="text-2xl">Set new password</CardTitle>
              <CardDescription>Pick a strong password you haven't used before.</CardDescription>
            </CardHeader>
            <CardContent>
              <form className="space-y-4" onSubmit={submitReset}>
                <div className="grid gap-2">
                  <Label htmlFor="reset-pw">New password</Label>
                  <Input
                    id="reset-pw"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    type="password"
                    autoComplete="new-password"
                    required
                  />
                </div>
                <div className="grid gap-2">
                  <Label htmlFor="reset-confirm">Confirm password</Label>
                  <Input
                    id="reset-confirm"
                    value={confirm}
                    onChange={(e) => setConfirm(e.target.value)}
                    type="password"
                    autoComplete="new-password"
                    aria-invalid={!passwordsMatch}
                    required
                  />
                  {!passwordsMatch && <p className="text-destructive text-xs">Passwords don't match.</p>}
                </div>
                <Button type="submit" className="w-full">
                  Reset password
                </Button>
              </form>
            </CardContent>
          </>
        )}

        {stage === 'done' && (
          <CardContent className="space-y-4 pt-6 text-center">
            <div className="bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full">
              <MailCheck className="size-6" />
            </div>
            <div className="space-y-1">
              <h3 className="text-lg font-semibold">All set</h3>
              <p className="text-muted-foreground text-sm">
                Your password has been updated. You can now sign in with the new password.
              </p>
            </div>
            <a href={signInHref}>
              <Button className="w-full">Continue to sign in</Button>
            </a>
          </CardContent>
        )}
      </Card>
    </div>
  )
}

```

## auth-sign-in

- type: `registry:block`
- description: Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.
- npm deps: `lucide-react`
- registry deps: `card`, `input`, `label`, `button`, `checkbox`, `separator`

### `packages/registry-react/blocks/auth-sign-in/AuthSignIn.tsx`

```tsx
'use client'

import * as React from 'react'
const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)

const Chrome = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0012 23z" />
    <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 010-4.2V7.06H2.18a11 11 0 000 9.88l3.66-2.84z" />
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 002.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
  </svg>
)
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

type OauthProvider = 'github' | 'google'

export interface AuthSignInProps {
  title?: string
  description?: string
  signUpHref?: string
  forgotPasswordHref?: string
  oauthProviders?: OauthProvider[]
  onSubmit?: (payload: { email: string; password: string; remember: boolean }) => void
  onOauth?: (provider: OauthProvider) => void
}

export function AuthSignIn({
  title = 'Welcome back',
  description = 'Sign in to your account to continue',
  signUpHref = '/sign-up',
  forgotPasswordHref = '/forgot-password',
  oauthProviders = ['github', 'google'],
  onSubmit,
  onOauth,
}: AuthSignInProps) {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [remember, setRemember] = React.useState(false)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    onSubmit?.({ email, password, remember })
  }

  return (
    <div className="bg-background flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">{title}</CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                placeholder="you@company.com"
                autoComplete="email"
                required
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <a
                  href={forgotPasswordHref}
                  className="text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline"
                >
                  Forgot password?
                </a>
              </div>
              <Input
                id="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                autoComplete="current-password"
                required
              />
            </div>
            <div className="flex items-center gap-2">
              <Checkbox
                id="remember"
                checked={remember}
                onCheckedChange={(checked) => setRemember(checked === true)}
              />
              <Label htmlFor="remember" className="text-sm font-normal">
                Remember me for 30 days
              </Label>
            </div>
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>

          {oauthProviders.length > 0 && (
            <>
              <div className="my-6 flex items-center gap-3">
                <Separator className="flex-1" />
                <span className="text-muted-foreground text-xs uppercase">or continue with</span>
                <Separator className="flex-1" />
              </div>
              <div className={`grid gap-2 ${oauthProviders.length > 1 ? 'sm:grid-cols-2' : ''}`}>
                {oauthProviders.includes('github') && (
                  <Button variant="outline" type="button" onClick={() => onOauth?.('github')}>
                    <Github className="mr-2 size-4" />
                    GitHub
                  </Button>
                )}
                {oauthProviders.includes('google') && (
                  <Button variant="outline" type="button" onClick={() => onOauth?.('google')}>
                    <Chrome className="mr-2 size-4" />
                    Google
                  </Button>
                )}
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="justify-center">
          <p className="text-muted-foreground text-sm">
            Don&apos;t have an account?{' '}
            <a href={signUpHref} className="text-foreground font-medium underline-offset-4 hover:underline">
              Sign up
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

```

## auth-sign-up

- type: `registry:block`
- description: Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.
- npm deps: `lucide-react`
- registry deps: `card`, `input`, `label`, `button`, `checkbox`, `separator`

### `packages/registry-react/blocks/auth-sign-up/AuthSignUp.tsx`

```tsx
'use client'

import * as React from 'react'
const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)

const Chrome = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" aria-hidden="true">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0012 23z" />
    <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 010-4.2V7.06H2.18a11 11 0 000 9.88l3.66-2.84z" />
    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 002.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
  </svg>
)
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

type OauthProvider = 'github' | 'google'

export interface AuthSignUpProps {
  title?: string
  description?: string
  signInHref?: string
  termsHref?: string
  privacyHref?: string
  oauthProviders?: OauthProvider[]
  onSubmit?: (payload: { name: string; email: string; password: string }) => void
  onOauth?: (provider: OauthProvider) => void
}

export function AuthSignUp({
  title = 'Create your account',
  description = 'Start your 14-day free trial. No credit card required.',
  signInHref = '/login',
  termsHref = '#',
  privacyHref = '#',
  oauthProviders = ['github', 'google'],
  onSubmit,
  onOauth,
}: AuthSignUpProps) {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [confirm, setConfirm] = React.useState('')
  const [accept, setAccept] = React.useState(false)

  const passwordsMatch = !confirm || password === confirm
  const canSubmit = Boolean(name && email && password && passwordsMatch && accept)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!canSubmit) return
    onSubmit?.({ name, email, password })
  }

  return (
    <div className="bg-background flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">{title}</CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        <CardContent>
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="grid gap-2">
              <Label htmlFor="signup-name">Full name</Label>
              <Input
                id="signup-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                autoComplete="name"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="signup-email">Email</Label>
              <Input
                id="signup-email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                placeholder="you@company.com"
                autoComplete="email"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="signup-password">Password</Label>
              <Input
                id="signup-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                autoComplete="new-password"
                required
              />
              <p className="text-muted-foreground text-xs">8+ characters, mix of letters, numbers and symbols.</p>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="signup-confirm">Confirm password</Label>
              <Input
                id="signup-confirm"
                value={confirm}
                onChange={(e) => setConfirm(e.target.value)}
                type="password"
                autoComplete="new-password"
                aria-invalid={!passwordsMatch}
                required
              />
              {!passwordsMatch && <p className="text-destructive text-xs">Passwords don&apos;t match.</p>}
            </div>
            <div className="flex items-start gap-2">
              <Checkbox
                id="signup-accept"
                checked={accept}
                onCheckedChange={(checked) => setAccept(checked === true)}
              />
              <Label htmlFor="signup-accept" className="text-sm leading-snug font-normal">
                I agree to the{' '}
                <a href={termsHref} className="text-foreground underline-offset-4 hover:underline">
                  Terms of Service
                </a>{' '}
                and{' '}
                <a href={privacyHref} className="text-foreground underline-offset-4 hover:underline">
                  Privacy Policy
                </a>
                .
              </Label>
            </div>
            <Button type="submit" className="w-full" disabled={!canSubmit}>
              Create account
            </Button>
          </form>

          {oauthProviders.length > 0 && (
            <>
              <div className="my-6 flex items-center gap-3">
                <Separator className="flex-1" />
                <span className="text-muted-foreground text-xs uppercase">or continue with</span>
                <Separator className="flex-1" />
              </div>
              <div className={`grid gap-2 ${oauthProviders.length > 1 ? 'sm:grid-cols-2' : ''}`}>
                {oauthProviders.includes('github') && (
                  <Button variant="outline" type="button" onClick={() => onOauth?.('github')}>
                    <Github className="mr-2 size-4" />
                    GitHub
                  </Button>
                )}
                {oauthProviders.includes('google') && (
                  <Button variant="outline" type="button" onClick={() => onOauth?.('google')}>
                    <Chrome className="mr-2 size-4" />
                    Google
                  </Button>
                )}
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="justify-center">
          <p className="text-muted-foreground text-sm">
            Already have an account?{' '}
            <a href={signInHref} className="text-foreground font-medium underline-offset-4 hover:underline">
              Sign in
            </a>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

```

## avatar

- type: `registry:ui`
- description: Round or rounded-square user image with a fallback that shows initials or an icon when the image is missing or fails to load. Sizes from xs to 2xl, optional status dot, and a group composition for stacked avatar lists.
- npm deps: `class-variance-authority`, `@radix-ui/react-avatar`

### `packages/registry-react/components/avatar/avatar.tsx`

```tsx
'use client'

import * as React from 'react'
import * as AvatarPrimitive from '@radix-ui/react-avatar'
import { cn } from '@/lib/utils'
import { avatarVariants, avatarFallbackVariants } from './avatar.variants'

/* ------------------------------------------------------------------ */
/* Avatar (Root)                                                       */
/* ------------------------------------------------------------------ */

export interface AvatarProps
  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'color'> {
  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
  rounded?: 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
  color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'
  variant?: 'default' | 'outlined' | 'soft'
  tile?: boolean
  disabled?: boolean
  loading?: boolean
}

const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
  ({ className, size, rounded, color, variant, tile = false, disabled = false, loading = false, ...props }, ref) => (
    <AvatarPrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="avatar"
      className={cn(
        avatarVariants({ size, rounded, color, variant }),
        tile ? 'rounded-none' : '',
        disabled ? 'opacity-50 cursor-not-allowed' : '',
        loading ? 'animate-pulse' : '',
        className,
      )}
      {...props}
    />
  ),
)
Avatar.displayName = 'Avatar'

/* ------------------------------------------------------------------ */
/* AvatarImage                                                         */
/* ------------------------------------------------------------------ */

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image
    ref={ref}
    data-uipkge=""
    data-slot="avatar-image"
    className={cn('aspect-square size-full object-cover', className)}
    {...props}
  />
))
AvatarImage.displayName = 'AvatarImage'

/* ------------------------------------------------------------------ */
/* AvatarFallback                                                      */
/* ------------------------------------------------------------------ */

export interface AvatarFallbackProps
  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'color'> {
  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
  color?: 'default' | 'primary' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info' | 'error' | 'muted'
  text?: string
}

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  AvatarFallbackProps
>(({ className, size = 'default', color = 'default', text, children, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    data-uipkge=""
    data-slot="avatar-fallback"
    className={cn(avatarFallbackVariants({ size, color }), className)}
    {...props}
  >
    {text ?? children}
  </AvatarPrimitive.Fallback>
))
AvatarFallback.displayName = 'AvatarFallback'

/* ------------------------------------------------------------------ */
/* AvatarGroup — custom layout wrapper (not a Radix primitive)         */
/* ------------------------------------------------------------------ */

const overflowSizeClasses: Record<NonNullable<AvatarGroupProps['size']>, string> = {
  xs: 'size-4 text-[8px]',
  sm: 'size-6 text-xs',
  default: 'size-8 text-sm',
  lg: 'size-12 text-base',
  xl: 'size-16 text-lg',
  '2xl': 'size-20 text-xl',
}

export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  max?: number
  overlap?: boolean
  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'
  total?: number
  /** Custom overflow indicator. Receives the hidden count; replaces the
   *  default `+N` badge when provided. */
  overflow?: (count: number) => React.ReactNode
}

const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
  ({ className, max, overlap = true, size = 'default', total, overflow, children, ...props }, ref) => {
    const items = React.Children.toArray(children)
    const count = items.length
    const showOverflow = max != null && count > max
    const visible = showOverflow ? items.slice(0, max) : items
    const overflowCount = count - (max ?? count) + 1

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="avatar-group"
        className={cn('flex items-center', overlap ? '-space-x-2' : 'gap-1', className)}
        {...props}
      >
        {visible}
        {showOverflow ? (
          <div
            className={cn(
              'bg-muted ring-background relative flex shrink-0 overflow-hidden rounded-full ring-2',
              overflowSizeClasses[size],
            )}
          >
            {overflow ? (
              overflow(overflowCount)
            ) : (
              <span className="flex size-full items-center justify-center font-medium">+{overflowCount}</span>
            )}
          </div>
        ) : null}
      </div>
    )
  },
)
AvatarGroup.displayName = 'AvatarGroup'

export { Avatar, AvatarImage, AvatarFallback, AvatarGroup }

```

### `packages/registry-react/components/avatar/avatar.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts` or inline in the SFC) so `Avatar.vue` / `AvatarFallback.vue`
 * can `import { avatarVariants } from './avatar.variants'` without
 * creating a circular dependency back through the index. The circular
 * form caused intermittent `$setup.avatarVariants is not a function`
 * errors during dev SSR.
 */
export const avatarVariants = cva('relative flex shrink-0 overflow-hidden', {
  variants: {
    size: {
      xs: 'size-4',
      sm: 'size-6',
      default: 'size-8',
      lg: 'size-12',
      xl: 'size-16',
      '2xl': 'size-20',
    },
    rounded: {
      none: 'rounded-none',
      sm: 'rounded-sm',
      default: 'rounded-full',
      md: 'rounded-md',
      lg: 'rounded-lg',
      xl: 'rounded-xl',
      '2xl': 'rounded-2xl',
      '3xl': 'rounded-3xl',
      full: 'rounded-full',
    },
    color: {
      default: '',
      primary: 'bg-primary text-primary-foreground',
      secondary: 'bg-secondary text-secondary-foreground',
      destructive: 'bg-destructive text-destructive-foreground',
      success: 'bg-[var(--success)] text-white dark:text-black',
      warning: 'bg-[var(--warning)] text-black',
      info: 'bg-[var(--info)] text-white dark:text-black',
      error: 'bg-destructive text-white dark:text-black',
      muted: 'bg-muted text-muted-foreground',
    },
    variant: {
      default: '',
      outlined: 'border-2 border-current',
      soft: 'bg-opacity-20',
    },
  },
  compoundVariants: [
    { color: 'primary', variant: 'soft', class: 'bg-primary/20 text-primary' },
    { color: 'secondary', variant: 'soft', class: 'bg-secondary/20 text-secondary-foreground' },
    { color: 'destructive', variant: 'soft', class: 'bg-destructive/20 text-destructive' },
    { color: 'success', variant: 'soft', class: 'bg-[var(--success)]/20 text-[var(--success)]' },
    { color: 'warning', variant: 'soft', class: 'bg-[var(--warning)]/20 text-[var(--warning)]' },
    { color: 'info', variant: 'soft', class: 'bg-[var(--info)]/20 text-[var(--info)]' },
    { color: 'error', variant: 'soft', class: 'bg-destructive/20 text-destructive' },
  ],
  defaultVariants: {
    size: 'default',
    rounded: 'default',
    color: 'default',
  },
})

export type AvatarVariants = VariantProps<typeof avatarVariants>

export const avatarFallbackVariants = cva(
  'flex size-full items-center justify-center rounded-full bg-muted font-medium',
  {
    variants: {
      size: {
        xs: 'text-[8px]',
        sm: 'text-xs',
        default: 'text-sm',
        lg: 'text-base',
        xl: 'text-lg',
        '2xl': 'text-xl',
      },
      color: {
        default: '',
        primary: 'bg-primary text-primary-foreground',
        secondary: 'bg-secondary text-secondary-foreground',
        destructive: 'bg-destructive text-destructive-foreground',
        success: 'bg-[var(--success)] text-white dark:text-black',
        warning: 'bg-[var(--warning)] text-black',
        info: 'bg-[var(--info)] text-white dark:text-black',
        error: 'bg-destructive text-white dark:text-black',
        muted: 'bg-muted text-muted-foreground',
      },
    },
    defaultVariants: {
      size: 'default',
      color: 'default',
    },
  },
)

export type AvatarFallbackVariants = VariantProps<typeof avatarFallbackVariants>

```

### `packages/registry-react/components/avatar/index.ts`

```ts
export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, type AvatarProps, type AvatarFallbackProps, type AvatarGroupProps } from './avatar'

// Re-export variant API from the sibling file (kept separate to mirror the
// Vue registry convention and avoid a component <-> index circular import).
export {
  avatarVariants,
  avatarFallbackVariants,
  type AvatarVariants,
  type AvatarFallbackVariants,
} from './avatar.variants'

```

## back-top

- type: `registry:ui`
- description: Scroll-to-top floating button. Appears after the target container scrolls past a threshold and smooth-scrolls back on click. Supports custom target container, visibility threshold, scroll behavior, custom icon slot, four edge anchors, size variants, and edge offset.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/back-top/BackTop.tsx`

```tsx
import * as React from 'react'
import { ArrowUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import { backTopVariants, type BackTopVariants } from './back-top.variants'

export interface BackTopProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'content'> {
  /** Visibility threshold in pixels. Button appears once scroll passes it. */
  threshold?: number
  /** Target container. Defaults to the window. Pass a CSS selector or an HTMLElement. */
  target?: string | HTMLElement | Window
  /** Scroll behavior: 'smooth' or 'auto' (instant). */
  behavior?: ScrollBehavior
  /** Size variant. */
  size?: BackTopVariants['size']
  /** Edge anchor position. */
  position?: BackTopVariants['position']
  /** Distance from the viewport edge (px). */
  offset?: number
  /** Use absolute positioning (for section-level containers) instead of fixed (viewport). */
  absolute?: boolean
  /** Accessible label. */
  ariaLabel?: string
  /** Override the default arrow icon. */
  icon?: React.ReactNode
  /** Fired whenever visibility toggles. */
  onVisible?: (visible: boolean) => void
}

type ScrollTarget = HTMLElement | Window | null

const BackTop = React.forwardRef<HTMLButtonElement, BackTopProps>(
  (
    {
      className,
      threshold = 200,
      target,
      behavior = 'smooth',
      size = 'default',
      position = 'bottom-right',
      offset = 24,
      absolute = false,
      ariaLabel = 'Scroll to top',
      icon,
      onVisible,
      onClick,
      style,
      ...props
    },
    ref,
  ) => {
    const [visible, setVisible] = React.useState(false)
    // Keep the button mounted during the exit animation, then unmount.
    const [mounted, setMounted] = React.useState(false)
    const [dataState, setDataState] = React.useState<'open' | 'closed'>('closed')
    const currentTargetRef = React.useRef<ScrollTarget>(null)
    const onVisibleRef = React.useRef(onVisible)
    onVisibleRef.current = onVisible

    function resolveTarget(): ScrollTarget {
      if (typeof window === 'undefined') return null
      if (target === undefined || target === null) return window
      if (typeof target === 'string') {
        const el = document.querySelector<HTMLElement>(target)
        return el ?? window
      }
      return target
    }

    function getScrollTop(el: HTMLElement | Window): number {
      if (el === window) {
        return window.scrollY ?? document.documentElement.scrollTop ?? document.body.scrollTop ?? 0
      }
      return (el as HTMLElement).scrollTop
    }

    function scrollToTop(el: HTMLElement | Window) {
      if (el === window) {
        window.scrollTo({ top: 0, behavior })
      } else {
        ;(el as HTMLElement).scrollTo({ top: 0, behavior })
      }
    }

    const handleScroll = React.useCallback(() => {
      const current = currentTargetRef.current
      if (!current) return
      const scrollTop = getScrollTop(current)
      const next = scrollTop > threshold
      setVisible((prev) => {
        if (next !== prev) {
          onVisibleRef.current?.(next)
          return next
        }
        return prev
      })
    }, [threshold])

    const handleClick = React.useCallback(
      (e: React.MouseEvent<HTMLButtonElement>) => {
        onClick?.(e)
        const current = currentTargetRef.current
        if (current) scrollToTop(current)
      },
      [onClick, behavior],
    )

    // Mount/unmount with exit animation, mirroring the Vue <Transition name="back-top">.
    React.useEffect(() => {
      if (visible) {
        setMounted(true)
        setDataState('open')
        return
      }
      if (mounted) {
        setDataState('closed')
        const t = window.setTimeout(() => setMounted(false), 200)
        return () => window.clearTimeout(t)
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [visible])

    // Attach scroll listeners; re-resolve when the target prop changes.
    React.useEffect(() => {
      currentTargetRef.current = resolveTarget()
      const current = currentTargetRef.current
      if (!current) return
      current.addEventListener('scroll', handleScroll, { passive: true })
      // If target is a container, also listen to window scroll for safety on resize.
      if (current !== window) {
        window.addEventListener('scroll', handleScroll, { passive: true })
      }
      handleScroll()
      return () => {
        current.removeEventListener('scroll', handleScroll)
        if (current !== window) {
          window.removeEventListener('scroll', handleScroll)
        }
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [target, handleScroll])

    const positionStyle = React.useMemo<React.CSSProperties>(() => {
      const o = `${offset}px`
      switch (position) {
        case 'bottom-left':
          return { left: o, bottom: o }
        case 'top-right':
          return { right: o, top: o }
        case 'top-left':
          return { left: o, top: o }
        default:
          return { right: o, bottom: o }
      }
    }, [position, offset])

    if (!mounted) return null

    return (
      <button
        ref={ref}
        data-uipkge=""
        data-slot="back-top"
        data-state={dataState}
        data-size={size ?? undefined}
        data-position={position ?? undefined}
        type="button"
        aria-label={ariaLabel}
        className={cn(backTopVariants({ size, position }), absolute ? 'absolute' : 'fixed', className)}
        style={{ ...positionStyle, ...style }}
        onClick={handleClick}
        {...props}
      >
        {icon ?? <ArrowUp aria-hidden="true" />}
      </button>
    )
  },
)
BackTop.displayName = 'BackTop'

export { BackTop }

```

### `packages/registry-react/components/back-top/back-top.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `BackTop.tsx` can `import { backTopVariants } from
 * './back-top.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern.
 */
export const backTopVariants = cva(
  'inline-flex items-center justify-center rounded-full border bg-background text-foreground shadow-lg transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none cursor-pointer motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 [&_svg:not([class*=size-])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0',
  {
    variants: {
      size: {
        sm: 'size-8 [&_svg:not([class*=size-])]:size-4',
        default: 'size-10',
        lg: 'size-12 [&_svg:not([class*=size-])]:size-6',
      },
      position: {
        'bottom-right': '',
        'bottom-left': '',
        'top-right': '',
        'top-left': '',
      },
    },
    defaultVariants: {
      size: 'default',
      position: 'bottom-right',
    },
  },
)

export type BackTopVariants = VariantProps<typeof backTopVariants>

```

### `packages/registry-react/components/back-top/index.ts`

```ts
export { BackTop, type BackTopProps } from './BackTop'
export { backTopVariants, type BackTopVariants } from './back-top.variants'

```

## badge

- type: `registry:ui`
- description: Small inline label for status, counts, or tags — sits beside other content, not as a standalone control. Seven variants: `default`, `secondary`, `destructive`, `outline`, `success`, `warning`, `info`.
- npm deps: `class-variance-authority`, `@radix-ui/react-slot`

### `packages/registry-react/components/badge/Badge.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { badgeVariants, type BadgeVariants } from './badge.variants'

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, BadgeVariants {
  /** Render the child element as the badge (e.g. an <a>) instead of a <span>. */
  asChild?: boolean
}

const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'span'
    return (
      <Comp
        ref={ref}
        data-uipkge=""
        data-slot="badge"
        className={cn(badgeVariants({ variant }), className)}
        {...props}
      />
    )
  },
)
Badge.displayName = 'Badge'

export { Badge }

```

### `packages/registry-react/components/badge/badge.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors duration-200 overflow-hidden',
  {
    variants: {
      variant: {
        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
        success:
          'border-transparent bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] [a&]:hover:bg-[var(--success)]/20',
        warning:
          'border-transparent bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] [a&]:hover:bg-[var(--warning)]/20',
        info: 'border-transparent bg-[var(--info)]/10 text-[var(--info)] dark:text-[var(--info)] [a&]:hover:bg-[var(--info)]/20',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type BadgeVariants = VariantProps<typeof badgeVariants>

```

### `packages/registry-react/components/badge/index.ts`

```ts
export { Badge, type BadgeProps } from './Badge'
export { badgeVariants, type BadgeVariants } from './badge.variants'

```

## bar-chart

- type: `registry:ui`
- description: React mirror of @uipkge/bar-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/bar-chart/BarChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// BarChart
// ─────────────────────────────────────────────────────────────────────────

export interface BarChartProps {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  className?: string
}

export const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(
  ({ data, xField = 'x', yField = 'y', height = 300, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const fields = Array.isArray(yField) ? yField : [yField]
      const xData = data.map((d) => d[xField])

      const series = fields.map((field, i) => ({
        name: field,
        type: 'bar',
        barMaxWidth: 32,
        itemStyle: { color: theme.colors[i % theme.colors.length] },
        data: data.map((d) => d[field]),
      }))

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        legend: userLegend,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      const baseLegend: any =
        fields.length > 1
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : { show: false }

      return {
        color: theme.colors,
        grid: mergeOptionBlock(
          { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
          userGrid,
        ),
        tooltip: mergeOptionBlock(
          {
            trigger: 'axis',
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend, userLegend),
        xAxis: mergeOptionBlock(
          {
            type: 'category',
            data: xData,
            axisLine: { lineStyle: { color: theme.axisColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisTick: { show: false },
          },
          userXAxis,
        ),
        yAxis: mergeOptionBlock(
          {
            type: 'value',
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { show: false },
            axisTick: { show: false },
          },
          userYAxis,
        ),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, xField, yField, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
BarChart.displayName = 'BarChart'

```

### `packages/registry-react/components/charts/bar-chart/index.ts`

```ts
export { BarChart, type BarChartProps } from './BarChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## bento-01

- type: `registry:block`
- description: Four-tile bento grid (4 cols × 2 rows on lg). One large 2×2 hero tile with a mini progress + stats illustration; one wide 2×1 secondary tile; two square 1×1 tiles (a big-number setup-time stat and a compliance line). Each tile is a raw Card with the content spelled out inline — swap any one without affecting the others.
- npm deps: `lucide-react`
- registry deps: `badge`, `card`

### `packages/registry-react/blocks/bento-01/Bento01.tsx`

```tsx
import { Activity, Clock, ShieldCheck, Sparkles } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'

export function Bento01() {
  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-24">
        <div className="mb-12 max-w-2xl space-y-3">
          <p className="text-primary text-sm font-medium tracking-widest uppercase">Built for scale</p>
          <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">A workspace your team grows into, not out of.</h2>
          <p className="text-muted-foreground text-lg">
            Four surfaces that work end-to-end. Replace any one without touching the rest.
          </p>
        </div>

        <div className="grid gap-4 lg:grid-cols-4 lg:grid-rows-2">
          <Card className="lg:col-span-2 lg:row-span-2">
            <CardContent className="flex h-full flex-col gap-6 p-8">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                  <Sparkles className="size-5" />
                </div>
                <Badge variant="secondary">New</Badge>
              </div>
              <div className="space-y-3">
                <h3 className="text-2xl font-semibold tracking-tight">AI-assisted reviews</h3>
                <p className="text-muted-foreground">
                  Draft 360 feedback in seconds. The assistant reads your goals, your 1:1 notes and your peer reviews,
                  then writes a first pass you can edit. Every suggestion cites the source so nothing comes out of
                  nowhere.
                </p>
              </div>

              <div className="bg-muted/30 mt-auto rounded-lg border p-5">
                <div className="text-muted-foreground flex items-center justify-between text-xs">
                  <span>Draft quality</span>
                  <span className="font-mono">92 / 100</span>
                </div>
                <div className="bg-muted mt-3 h-2 overflow-hidden rounded-full">
                  <div className="bg-primary h-full w-[92%] rounded-full" />
                </div>
                <div className="mt-4 grid grid-cols-3 gap-3 text-center text-xs">
                  <div>
                    <p className="text-foreground font-mono text-base">12</p>
                    <p className="text-muted-foreground">Goals</p>
                  </div>
                  <div>
                    <p className="text-foreground font-mono text-base">34</p>
                    <p className="text-muted-foreground">1:1 notes</p>
                  </div>
                  <div>
                    <p className="text-foreground font-mono text-base">8</p>
                    <p className="text-muted-foreground">Peers</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="lg:col-span-2 lg:row-span-1">
            <CardContent className="flex h-full items-start gap-5 p-6">
              <div className="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg">
                <Activity className="size-5" />
              </div>
              <div className="space-y-2">
                <h3 className="text-lg font-semibold tracking-tight">Real-time activity</h3>
                <p className="text-muted-foreground text-sm">
                  Every event — hire, promotion, time-off, payroll run — streams into a single timeline you can filter by
                  team, person or module.
                </p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="flex h-full flex-col justify-between gap-4 p-6">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <Clock className="size-5" />
              </div>
              <div>
                <p className="text-3xl font-semibold tracking-tight">12 min</p>
                <p className="text-muted-foreground mt-1 text-sm">Average setup time</p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="flex h-full flex-col justify-between gap-4 p-6">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <ShieldCheck className="size-5" />
              </div>
              <div>
                <p className="text-sm font-semibold tracking-tight">SOC 2 · ISO 27001 · GDPR</p>
                <p className="text-muted-foreground mt-1 text-sm">Encrypted at rest, audited quarterly.</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}

```

## block-ui

- type: `registry:ui`
- description: Overlay that blocks interaction during loading. Wraps content and shows a spinner + message overlay. The blocking prop toggles the blocked state with configurable overlay opacity, color, background blur, and custom icon/message slots. Composes the spinner primitive.
- npm deps: `class-variance-authority`
- registry deps: `spinner`

### `packages/registry-react/components/block-ui/BlockUi.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { blockUiVariants } from './block-ui.variants'
import { Spinner } from '@/components/ui/spinner'

export interface BlockUiProps extends React.HTMLAttributes<HTMLDivElement> {
  /** When true, the overlay is shown and the wrapped content is blocked. */
  blocking?: boolean
  /** Plain-text or rich message shown under the icon. Ignored when a message
   *  render prop is supplied via children. */
  message?: React.ReactNode
  opacity?: number
  overlayColor?: string
  blur?: boolean
  showSpinner?: boolean
  /** Custom icon node replacing the default Spinner (Vue #icon slot). */
  icon?: React.ReactNode
  /** Custom message node replacing the `message` string (Vue #message slot). */
  messageSlot?: React.ReactNode
}

const BlockUi = React.forwardRef<HTMLDivElement, BlockUiProps>(
  (
    {
      className,
      children,
      blocking = false,
      message = 'Loading...',
      opacity = 0.6,
      overlayColor = '',
      blur = false,
      showSpinner = true,
      icon,
      messageSlot,
      ...props
    },
    ref,
  ) => {
    const overlayStyle: React.CSSProperties = React.useMemo(() => {
      const style: React.CSSProperties = { opacity }
      if (overlayColor) style.backgroundColor = overlayColor
      return style
    }, [opacity, overlayColor])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="block-ui"
        data-blocked={blocking ? '' : undefined}
        className={cn(blockUiVariants(), className)}
        {...props}
      >
        {/* Wrapped content */}
        <div
          className={cn(
            'block-ui-content',
            blur && blocking && 'pointer-events-none blur-[2px] transition-[filter]',
          )}
        >
          {children}
        </div>

        {/* Blocking overlay */}
        {blocking && (
          <div
            className="absolute inset-0 z-50 flex flex-col items-center justify-center gap-3"
            role="status"
            aria-live="polite"
            aria-busy="true"
          >
            {/* Background layer (opacity only affects this layer) */}
            <div
              className={cn('absolute inset-0', !overlayColor && 'bg-background')}
              style={overlayStyle}
            />
            {/* Content layer (spinner + message stay fully opaque) */}
            {icon ?? (showSpinner && <Spinner size="lg" />)}
            {messageSlot ? (
              <div className="text-foreground text-sm font-medium">{messageSlot}</div>
            ) : (
              message && <p className="text-foreground text-sm font-medium">{message}</p>
            )}
          </div>
        )}
      </div>
    )
  },
)
BlockUi.displayName = 'BlockUi'

export { BlockUi }

```

### `packages/registry-react/components/block-ui/block-ui.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const blockUiVariants = cva('relative inline-block')

export type BlockUiVariants = VariantProps<typeof blockUiVariants>

```

### `packages/registry-react/components/block-ui/index.ts`

```ts
export { BlockUi, type BlockUiProps } from './BlockUi'
export { blockUiVariants, type BlockUiVariants } from './block-ui.variants'

```

## board

- type: `registry:ui`
- description: Six small composable components for any board / kanban / sortable-list surface — opinionated about drop targeting and animation, agnostic about layout, data, and chrome. Drop `<Board>` around a grid of `<BoardLane>` columns; nest `<BoardLaneHeader>`, `<BoardLaneBody>`, `<BoardLaneEmpty>`, and `<BoardCard>` items inside each lane. State lives in a sibling `useBoard()` hook (insertion-index drop math, keyboard a11y, accept predicate). Cards use native HTML5 drag-and-drop (draggable + onDragStart / onLaneDragOver / onLaneDrop) — the lane components emit drag events up to the consumer, which threads them through useBoard and feeds the resulting state back in as props. Three-level React context (board → lane → card) mirrors the Timeline / Card sub-component pattern.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/board/board.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import {
  BoardCardContext,
  BoardContext,
  BoardLaneContext,
  useBoardContext,
  useBoardLaneContext,
  type BoardAcceptsFn,
  type BoardContextValue,
  type BoardDensity,
  type BoardOrientation,
} from './context'
import { boardCardVariants, boardLaneVariants } from './board.variants'

/* ------------------------------------------------------------------ */
/* Board (Root)                                                        */
/* ------------------------------------------------------------------ */

const ALWAYS_ACCEPT: BoardAcceptsFn = () => true
const NOOP = () => {}

export interface BoardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
  orientation?: BoardOrientation
  density?: BoardDensity
  /** Animation preset class applied by BoardLaneBody. Defaults to `motion-list`. */
  motion?: string
  /** Predicate run per drop. Defaults to always-accept. */
  accepts?: BoardAcceptsFn
  /** Imperative move from a parent's useBoard hook. */
  moveItem?: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** External state — pass `state.draggingId` etc. from useBoard. */
  draggingId?: string | null
  draggingIds?: readonly string[]
  dragOverLaneId?: string | null
  justMovedId?: string | null
  selectedIds?: ReadonlySet<string>
  /** Optional toggle/clearSelection from useBoard so the primitive can
   *  expose selection mutations through context (consumed by BoardCard
   *  click handler). Both default to no-ops, so Board still works with
   *  consumers that don't wire selection. */
  toggleSelection?: (itemId: string, additive?: boolean) => void
  clearSelection?: () => void
  registerAllowedLanes?: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes?: (cardId: string) => void
  registerLaneDisabled?: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled?: (laneId: string) => void
  isLaneAcceptingFor?: (laneId: string) => boolean
  children?: React.ReactNode
}

const EMPTY_IDS: readonly string[] = []
const EMPTY_SELECTION: ReadonlySet<string> = new Set<string>()

const Board = React.forwardRef<HTMLDivElement, BoardProps>(
  (
    {
      className,
      orientation = 'horizontal',
      density = 'default',
      motion = 'motion-list',
      accepts = ALWAYS_ACCEPT,
      moveItem = NOOP,
      draggingId = null,
      draggingIds = EMPTY_IDS,
      dragOverLaneId = null,
      justMovedId = null,
      selectedIds = EMPTY_SELECTION,
      toggleSelection = NOOP,
      clearSelection = NOOP,
      registerAllowedLanes = NOOP,
      unregisterAllowedLanes = NOOP,
      registerLaneDisabled = NOOP,
      unregisterLaneDisabled = NOOP,
      isLaneAcceptingFor = () => true,
      children,
      ...props
    },
    ref,
  ) => {
    const ctx = React.useMemo<BoardContextValue>(
      () => ({
        orientation,
        density,
        motion,
        draggingId,
        draggingIds,
        dragOverLaneId,
        justMovedId,
        selectedIds,
        accepts,
        moveItem,
        toggleSelection,
        clearSelection,
        registerAllowedLanes,
        unregisterAllowedLanes,
        registerLaneDisabled,
        unregisterLaneDisabled,
        isLaneAcceptingFor,
      }),
      [
        orientation,
        density,
        motion,
        draggingId,
        draggingIds,
        dragOverLaneId,
        justMovedId,
        selectedIds,
        accepts,
        moveItem,
        toggleSelection,
        clearSelection,
        registerAllowedLanes,
        unregisterAllowedLanes,
        registerLaneDisabled,
        unregisterLaneDisabled,
        isLaneAcceptingFor,
      ],
    )

    return (
      <BoardContext.Provider value={ctx}>
        <div
          ref={ref}
          data-uipkge=""
          data-slot="board"
          data-orientation={orientation}
          className={cn('w-full', className)}
          {...props}
        >
          {children}
        </div>
      </BoardContext.Provider>
    )
  },
)
Board.displayName = 'Board'

/* ------------------------------------------------------------------ */
/* BoardLane                                                           */
/* ------------------------------------------------------------------ */

export interface BoardLaneRenderProps {
  isDragOver: boolean
  isAccepting: boolean
  disabled: boolean
}

export interface BoardLaneProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'id'> {
  id: string
  tone?: 'default' | 'plain'
  /** Disable drops on this lane. Cards inside still render and stay
   *  draggable; only the drop target is inert + visually dimmed. */
  disabled?: boolean
  onLaneDragOver?: (e: React.DragEvent<HTMLDivElement>) => void
  onLaneDrop?: (e: React.DragEvent<HTMLDivElement>) => void
  onLaneDragLeave?: () => void
  children?: React.ReactNode | ((props: BoardLaneRenderProps) => React.ReactNode)
}

const BoardLane = React.forwardRef<HTMLDivElement, BoardLaneProps>(
  (
    {
      id,
      className,
      tone = 'default',
      disabled = false,
      onLaneDragOver,
      onLaneDrop,
      onLaneDragLeave,
      children,
      ...props
    },
    ref,
  ) => {
    const board = useBoardContext()

    // Register the lane's disabled flag; keep it in sync when id/disabled change.
    React.useEffect(() => {
      board.registerLaneDisabled(id, disabled)
      return () => board.unregisterLaneDisabled(id)
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id, disabled])

    const isDragOver = board.dragOverLaneId === id
    const isAccepting = (() => {
      if (!board.draggingId) return false
      if (disabled) return false
      return board.isLaneAcceptingFor(id)
    })()

    const laneCtx = React.useMemo(
      () => ({ laneId: id, isDragOver, isAccepting, disabled }),
      [id, isDragOver, isAccepting, disabled],
    )

    const state: 'idle' | 'over' | 'rejecting' = !isDragOver ? 'idle' : isAccepting ? 'over' : 'rejecting'

    // Emit unconditionally so the hook can set dragOverLaneId
    // (drives the rejecting-ring visual). The hook's isAllowed
    // checks the disabled-lane registry and refuses preventDefault when
    // it should — the browser's own refuse-to-drop semantics + our
    // rejecting visual cover the rest.
    function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
      onLaneDragOver?.(e)
    }
    function handleDrop(e: React.DragEvent<HTMLDivElement>) {
      if (disabled) {
        e.preventDefault()
        return
      }
      onLaneDrop?.(e)
    }
    function handleDragLeave() {
      onLaneDragLeave?.()
    }

    return (
      <BoardLaneContext.Provider value={laneCtx}>
        <div
          ref={ref}
          data-uipkge=""
          data-slot="board-lane"
          data-board-lane=""
          data-lane-id={id}
          data-state={state}
          data-disabled={disabled || undefined}
          aria-disabled={disabled || undefined}
          className={cn(
            boardLaneVariants({ tone, state }),
            // Disabled lane dims only the lane chrome (border, background,
            // header). Cards inside stay legible — the rejection signal is
            // carried by the no-drop cursor + the missing accept-ring.
            disabled && 'opacity-80 [&>[data-slot=board-lane-header]]:opacity-60',
            className,
          )}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onDragLeave={handleDragLeave}
          {...props}
        >
          {typeof children === 'function' ? children({ isDragOver, isAccepting, disabled }) : children}
        </div>
      </BoardLaneContext.Provider>
    )
  },
)
BoardLane.displayName = 'BoardLane'

/* ------------------------------------------------------------------ */
/* BoardLaneHeader                                                     */
/* ------------------------------------------------------------------ */

const BoardLaneHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="board-lane-header"
      className={cn('flex items-center justify-between gap-2', className)}
      {...props}
    />
  ),
)
BoardLaneHeader.displayName = 'BoardLaneHeader'

/* ------------------------------------------------------------------ */
/* BoardLaneBody                                                       */
/* ------------------------------------------------------------------ */

export interface BoardLaneBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Override the animation preset class. Defaults to the board-level motion preset. */
  motion?: string
}

const BoardLaneBody = React.forwardRef<HTMLDivElement, BoardLaneBodyProps>(
  ({ className, motion, children, ...props }, ref) => {
    const board = React.useContext(BoardContext)
    const motionName = motion ?? board?.motion ?? 'motion-list'
    return (
      // Inner padding (py-1 / px-0.5) reserves breathing room for the
      // per-card hover-lift (-translate-y-0.5), the focus / drag / moved
      // rings (ring-2 + ring-offset-1 ≈ 3px outward), and the hover
      // shadow halo. Without it, the first / last cards' hover state
      // crops against the overflow-y-auto edge. pr-1 still wins on the
      // right so the thin scrollbar has a gutter.
      <div
        ref={ref}
        data-uipkge=""
        data-slot="board-lane-body"
        className={cn(
          'flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-0.5 py-1 pr-1 [scrollbar-width:thin]',
          className,
        )}
        {...props}
      >
        {/* The Vue source wraps cards in a TransitionGroup for enter/leave/move
            animations (the `motion-list` preset). React has no built-in
            equivalent — the per-card transitions live on the card variants
            (transform/box-shadow/opacity). The motion preset class is still
            applied so consumers can target it with their own keyframes. */}
        <div className={cn('relative flex flex-col gap-2', motionName)}>{children}</div>
      </div>
    )
  },
)
BoardLaneBody.displayName = 'BoardLaneBody'

/* ------------------------------------------------------------------ */
/* BoardLaneEmpty                                                      */
/* ------------------------------------------------------------------ */

export interface BoardLaneEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show only when this is true (consumer wires from `lane.length === 0`). */
  when?: boolean
}

const BoardLaneEmpty = React.forwardRef<HTMLDivElement, BoardLaneEmptyProps>(
  ({ className, when, children, ...props }, ref) => {
    if (when === false) return null
    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="board-lane-empty"
        className={cn(
          'text-muted-foreground/70 border-border/60 rounded-lg border border-dashed py-6 text-center text-xs',
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  },
)
BoardLaneEmpty.displayName = 'BoardLaneEmpty'

/* ------------------------------------------------------------------ */
/* BoardCard                                                           */
/* ------------------------------------------------------------------ */

export interface BoardCardProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onDragStart' | 'onDragEnd' | 'onClick'> {
  id: string
  /** Disable keyboard grab (e.g. for read-only boards). Default: enabled. */
  keyboardDraggable?: boolean
  /** Disable the card entirely — non-draggable, non-clickable, dimmed.
   *  Use for cards locked by a workflow rule or a server policy. */
  disabled?: boolean
  /** Per-card allow-list. When set, the card can only be dropped into
   *  these lane ids; useBoard rejects any other target silently. Omit
   *  to allow every lane the global `accepts` predicate permits. */
  allowedLanes?: readonly string[]
  /** Show the click-to-select chrome (ring + cmd/shift-click multi-select).
   *  Default true. Turn off for read-only or single-tap-to-open boards. */
  selectable?: boolean
  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void
  onDragEnd?: () => void
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
}

const BoardCard = React.forwardRef<HTMLDivElement, BoardCardProps>(
  (
    {
      id,
      className,
      keyboardDraggable = true,
      disabled = false,
      allowedLanes,
      selectable = true,
      onDragStart,
      onDragEnd,
      onClick,
      children,
      ...props
    },
    ref,
  ) => {
    const board = useBoardContext()
    const lane = useBoardLaneContext()

    const [isKeyboardGrabbed, setIsKeyboardGrabbed] = React.useState(false)

    const cardElRef = React.useRef<HTMLDivElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLDivElement | null) => {
        cardElRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
      },
      [ref],
    )

    // Either source of truth wins — `draggingIds` is the multi-select-aware
    // list, `draggingId` is the single-anchor (backward-compat for consumers
    // that don't pass the multi state through). Keyboard-grabbed adds the
    // same visual without touching parent state.
    const isDragging = board.draggingIds.includes(id) || board.draggingId === id || isKeyboardGrabbed
    const isJustMoved = board.justMovedId === id
    const isSelected = board.selectedIds.has(id)

    const cardCtx = React.useMemo(
      () => ({ cardId: id, laneId: lane.laneId, isDragging, isJustMoved, isSelected, disabled }),
      [id, lane.laneId, isDragging, isJustMoved, isSelected, disabled],
    )

    // Per-card allowed-lanes registry. Re-run if the id OR the list changes.
    React.useEffect(() => {
      board.registerAllowedLanes(id, allowedLanes)
      return () => board.unregisterAllowedLanes(id)
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id, allowedLanes])

    const state: 'idle' | 'dragging' | 'moved' = isDragging ? 'dragging' : isJustMoved ? 'moved' : 'idle'

    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
      if (disabled) return
      // Enter activates the card (default action) — emits onClick for the
      // consumer to open a detail panel / navigate / etc. Native <button>
      // gets this for free; we re-emit because the card root is a
      // <div role="button"> (chosen so consumers can nest <button>/links
      // inside the card without violating "no interactive content in a
      // button").
      if (e.key === 'Enter') {
        e.preventDefault()
        onClick?.(
          new MouseEvent('click', { bubbles: true, cancelable: true }) as unknown as React.MouseEvent<HTMLDivElement>,
        )
        return
      }
      if (!keyboardDraggable) return
      if (e.key === ' ') {
        e.preventDefault()
        setIsKeyboardGrabbed((v) => !v)
        return
      }
      if (e.key === 'Escape' && isKeyboardGrabbed) {
        e.preventDefault()
        setIsKeyboardGrabbed(false)
        return
      }
      if (!isKeyboardGrabbed) return
      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
        e.preventDefault()
        const allLanes = Array.from(document.querySelectorAll<HTMLElement>('[data-board-lane]')).filter(
          (el) => !el.hasAttribute('data-disabled'),
        )
        const currentIdx = allLanes.findIndex((el) => el.dataset.laneId === lane.laneId)
        if (currentIdx === -1 || allLanes.length === 0) return
        const delta = e.key === 'ArrowLeft' ? -1 : 1
        const nextLane = allLanes[(currentIdx + delta + allLanes.length) % allLanes.length]
        if (nextLane?.dataset.laneId) {
          board.moveItem(id, nextLane.dataset.laneId)
          requestAnimationFrame(() => {
            const moved = document.querySelector<HTMLElement>(`[data-board-card-id="${id}"]`)
            moved?.focus()
          })
        }
        return
      }
      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        e.preventDefault()
        const laneEl = cardElRef.current?.closest('[data-board-lane]')
        if (!laneEl) return
        const cards = Array.from(laneEl.querySelectorAll<HTMLElement>('[data-board-card]'))
        const currentIdx = cards.findIndex((el) => el.dataset.boardCardId === id)
        if (currentIdx === -1) return
        const delta = e.key === 'ArrowUp' ? -1 : 1
        const targetIdx = Math.max(0, Math.min(cards.length - 1, currentIdx + delta))
        if (targetIdx !== currentIdx) board.moveItem(id, lane.laneId, targetIdx)
      }
    }

    function handleDragStart(e: React.DragEvent<HTMLDivElement>) {
      if (disabled) {
        e.preventDefault()
        return
      }
      onDragStart?.(e)
    }
    function handleDragEnd() {
      onDragEnd?.()
    }
    function handleClick(e: React.MouseEvent<HTMLDivElement>) {
      if (disabled) {
        e.preventDefault()
        return
      }
      // Cmd/Ctrl/Shift+click toggles the selection (multi-select for drag);
      // plain click clears any selection and just emits to the consumer
      // (typically opens a detail Sheet).
      if (selectable && (e.metaKey || e.ctrlKey || e.shiftKey)) {
        e.preventDefault()
        board.toggleSelection(id, true)
        return
      }
      if (board.draggingIds.includes(id)) return
      if (board.selectedIds.size > 0) board.clearSelection()
      onClick?.(e)
    }

    return (
      // Root is `<div role="button">` rather than `<button type="button">`
      // so consumers can nest interactive content (buttons, links, menus)
      // inside cards. The HTML5 spec forbids interactive content inside a
      // <button>; browsers silently de-nest the inner element which
      // breaks its events. Enter is wired manually in handleKeyDown to match
      // the native button default-action behaviour.
      <BoardCardContext.Provider value={cardCtx}>
        <div
          ref={setRefs}
          role="button"
          data-uipkge=""
          data-slot="board-card"
          data-board-card=""
          data-board-card-id={id}
          data-state={state}
          data-selected={isSelected || undefined}
          data-disabled={disabled || undefined}
          aria-disabled={disabled || undefined}
          aria-pressed={selectable ? isSelected : undefined}
          className={cn(
            boardCardVariants({ state }),
            isSelected && 'ring-primary/60 ring-offset-background ring-2 ring-offset-1',
            disabled && 'pointer-events-none cursor-not-allowed opacity-50 shadow-none grayscale hover:translate-y-0',
            className,
          )}
          draggable={disabled ? false : true}
          tabIndex={disabled ? -1 : 0}
          aria-roledescription={keyboardDraggable && !disabled ? 'draggable card' : undefined}
          onClick={handleClick}
          onKeyDown={handleKeyDown}
          onDragStart={handleDragStart}
          onDragEnd={handleDragEnd}
          {...props}
        >
          {children}
        </div>
      </BoardCardContext.Provider>
    )
  },
)
BoardCard.displayName = 'BoardCard'

export { Board, BoardLane, BoardLaneHeader, BoardLaneBody, BoardLaneEmpty, BoardCard }

```

### `packages/registry-react/components/board/board.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file so consuming SFCs avoid the
 * circular-dep trap when importing from `index.ts`. Same pattern as
 * `timeline.variants.ts` / `card.variants.ts`.
 */

export const boardLaneVariants = cva(
  'flex min-h-0 flex-col gap-3 rounded-xl border p-3 motion-safe:transition-[background-color,border-color,box-shadow] motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)]',
  {
    variants: {
      tone: {
        default: 'bg-muted/30',
        plain: 'bg-transparent',
      },
      // Visual weight of `over` and `rejecting` deliberately matches so
      // the eye reads them as the same kind of signal (drop intent),
      // differing only in tone (primary = OK, destructive = NO).
      state: {
        idle: '',
        over: 'border-primary/60 bg-primary/5 ring-2 ring-primary/30 ring-offset-1 ring-offset-background',
        rejecting:
          'border-destructive/40 bg-destructive/5 ring-2 ring-destructive/30 ring-offset-1 ring-offset-background',
      },
    },
    defaultVariants: { tone: 'default', state: 'idle' },
  },
)

export const boardCardVariants = cva(
  'bg-card hover:border-primary/40 group block w-full cursor-grab rounded-md border p-2 text-left outline-none motion-safe:transition-[transform,box-shadow,opacity,border-color] motion-safe:duration-200 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:border-primary/60 focus-visible:ring-2 focus-visible:ring-primary/30 active:cursor-grabbing',
  {
    variants: {
      state: {
        idle: 'shadow-sm motion-safe:hover:-translate-y-0.5 hover:shadow-md',
        dragging: 'scale-95 opacity-40 shadow-none',
        moved: 'shadow-sm ring-2 ring-primary/50 ring-offset-1 ring-offset-background',
      },
    },
    defaultVariants: { state: 'idle' },
  },
)

export type BoardLaneVariantsProps = VariantProps<typeof boardLaneVariants>
export type BoardCardVariantsProps = VariantProps<typeof boardCardVariants>

```

### `packages/registry-react/components/board/context.ts`

```ts
import * as React from 'react'

export type BoardOrientation = 'horizontal' | 'vertical'
export type BoardDensity = 'compact' | 'default' | 'comfortable'

/** Drop event emitted by useBoard handlers. */
export interface BoardDropEvent {
  /** First (anchor) item moved. For multi-item drops, see `itemIds`. */
  itemId: string
  /** All items moved in this drop, in their final visual order. */
  itemIds: string[]
  from: string
  to: string
  /** Insertion index of the first item in the target lane. */
  index: number
}

/** Predicate consumers pass to control which items each lane accepts. */
export type BoardAcceptsFn = (itemId: string, fromLaneId: string, toLaneId: string) => boolean

export interface BoardContextValue {
  orientation: BoardOrientation
  density: BoardDensity
  /** Animation preset class name. Defaults to `motion-list` (the @uipkge motion preset). */
  motion: string
  /** Currently-grabbed primary card id (pointer drag OR keyboard grab). */
  draggingId: string | null
  /** All cards being dragged this turn — usually `[draggingId]`, but
   *  expands to the full selection when the user grabs one of a multi-
   *  selected set. Lanes read this to compute drop math (the dragged
   *  cards are excluded from the insertion-index walk). */
  draggingIds: readonly string[]
  /** Lane currently under the pointer/keyboard cursor. */
  dragOverLaneId: string | null
  /** Card that just landed — used by consumers for a momentary highlight. */
  justMovedId: string | null
  /** Multi-select set. Click-and-drag any selected card moves the whole
   *  set; click a non-selected card to drag that one alone. */
  selectedIds: ReadonlySet<string>
  /** Predicate run by lanes; defaults to always-accept. */
  accepts: BoardAcceptsFn
  /** Imperative move — used by keyboard handlers + external callers. */
  moveItem: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** Toggle one item in the selection set (or replace it if `additive` is false). */
  toggleSelection: (itemId: string, additive?: boolean) => void
  /** Drop the entire selection. */
  clearSelection: () => void
  /** Per-card allow-list registry. BoardCard registers its own `allowedLanes`
   *  on mount; lanes consult this to short-circuit rejected drops without
   *  the consumer having to encode the rule inside `accepts`. */
  registerAllowedLanes: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes: (cardId: string) => void
  /** Whether the lane's drops are accepted for the dragging item, given
   *  the current `accepts` + per-card allowedLanes + lane disabled state. */
  isLaneAcceptingFor: (laneId: string) => boolean
  /** Lane disabled registry — lanes call register/unregister; useBoard +
   *  isLaneAcceptingFor read from it. */
  registerLaneDisabled: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled: (laneId: string) => void
}

export const BoardContext = React.createContext<BoardContextValue | null>(null)

export function useBoardContext(): BoardContextValue {
  const ctx = React.useContext(BoardContext)
  if (!ctx) throw new Error('<BoardCard> / <BoardLane> must be a descendant of <Board>.')
  return ctx
}

export interface BoardLaneContextValue {
  laneId: string
  isDragOver: boolean
  isAccepting: boolean
  disabled: boolean
}

export const BoardLaneContext = React.createContext<BoardLaneContextValue | null>(null)

export function useBoardLaneContext(): BoardLaneContextValue {
  const ctx = React.useContext(BoardLaneContext)
  if (!ctx) throw new Error('<BoardCard> must be a descendant of <BoardLane>.')
  return ctx
}

export interface BoardCardContextValue {
  cardId: string
  laneId: string
  isDragging: boolean
  isJustMoved: boolean
  isSelected: boolean
  disabled: boolean
}

export const BoardCardContext = React.createContext<BoardCardContextValue | null>(null)

```

### `packages/registry-react/components/board/index.ts`

```ts
export {
  Board,
  BoardLane,
  BoardLaneHeader,
  BoardLaneBody,
  BoardLaneEmpty,
  BoardCard,
  type BoardProps,
  type BoardLaneProps,
  type BoardLaneRenderProps,
  type BoardLaneBodyProps,
  type BoardLaneEmptyProps,
  type BoardCardProps,
} from './board'

export {
  BoardContext,
  BoardLaneContext,
  BoardCardContext,
  useBoardContext,
  useBoardLaneContext,
  type BoardAcceptsFn,
  type BoardContextValue,
  type BoardCardContextValue,
  type BoardDensity,
  type BoardDropEvent,
  type BoardLaneContextValue,
  type BoardOrientation,
} from './context'

export {
  boardCardVariants,
  boardLaneVariants,
  type BoardCardVariantsProps,
  type BoardLaneVariantsProps,
} from './board.variants'

```

## bottom-navigation

- type: `registry:ui`
- description: Mobile bottom tab bar with icon + label items. Supports value/defaultValue for the active item, an active color, fixed positioning at the viewport bottom, badges on items, and a `to` prop for link integration.
- npm deps: `lucide-react`

### `packages/registry-react/components/bottom-navigation/BottomNavigation.tsx`

```tsx
import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface BottomNavItem {
  /** Unique value identifying this tab. Used with value/defaultValue. */
  value: string
  /** Label shown under the icon. */
  label: string
  /** Lucide icon component. */
  icon: LucideIcon
  /** Optional badge count or text shown on the icon. */
  badge?: string | number
  /** Link destination (renders an anchor instead of a button). */
  to?: string
}

export interface BottomNavigationProps extends React.HTMLAttributes<HTMLElement> {
  /** Tab items. */
  items: BottomNavItem[]
  /** Active item value (controlled). */
  value?: string
  /** Initial active item value (uncontrolled). */
  defaultValue?: string
  /** Active item color — a Tailwind text color class. Default 'text-primary'. */
  activeColor?: string
  /** Fixed positioning at the viewport bottom. Default true. */
  fixed?: boolean
  /** Show an active indicator pill behind the icon. Default true. */
  showIndicator?: boolean
  /** Safe-area padding for notched devices (iOS). Default true. */
  safeArea?: boolean
  /** Called when the active item changes. */
  onValueChange?: (value: string) => void
  /** Called when an item is selected, receiving the full item. */
  onSelect?: (item: BottomNavItem) => void
}

const BottomNavigation = React.forwardRef<HTMLElement, BottomNavigationProps>(
  (
    {
      className,
      items,
      value,
      defaultValue = '',
      activeColor = 'text-primary',
      fixed = true,
      showIndicator = true,
      safeArea = true,
      onValueChange,
      onSelect,
      ...props
    },
    ref,
  ) => {
    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState(defaultValue)
    const active = isControlled ? value : internal

    const handleSelect = (item: BottomNavItem) => {
      if (!isControlled) setInternal(item.value)
      onValueChange?.(item.value)
      onSelect?.(item)
    }

    return (
      <nav
        data-uipkge=""
        data-slot="bottom-navigation"
        data-fixed={fixed ? '' : undefined}
        ref={ref as React.Ref<HTMLElement>}
        className={cn(
          'border-border bg-background/95 z-50 flex items-stretch justify-around border-t backdrop-blur-sm',
          fixed ? 'fixed inset-x-0 bottom-0' : 'relative',
          safeArea && 'pb-[env(safe-area-inset-bottom)]',
          className,
        )}
        {...props}
      >
        {items.map((item) => {
          const isActive = active === item.value
          const Icon = item.icon
          const itemClass = cn(
            'focus-visible:ring-ring/50 relative flex flex-1 flex-col items-center justify-center gap-0.5 pt-2 pb-1.5 text-xs transition-colors duration-200 outline-none focus-visible:ring-[3px]',
            isActive ? activeColor : 'text-muted-foreground hover:text-foreground',
          )
          const inner = (
            <>
              {showIndicator && isActive ? (
                <span
                  className="bg-primary/10 absolute top-1 h-8 w-14 rounded-full transition-opacity duration-200"
                  aria-hidden="true"
                />
              ) : null}
              <span className="relative flex items-center justify-center">
                <Icon
                  className={cn('size-5 transition-transform duration-200', isActive && 'scale-110')}
                />
                {item.badge !== undefined && item.badge !== '' ? (
                  <span className="bg-destructive text-destructive-foreground absolute -top-1.5 -right-2 flex min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-4 font-medium">
                    {item.badge}
                  </span>
                ) : null}
              </span>
              <span
                className={cn(
                  'max-w-full truncate px-1 transition-opacity duration-200',
                  isActive && 'font-medium',
                )}
              >
                {item.label}
              </span>
            </>
          )
          if (item.to) {
            return (
              <a
                key={item.value}
                data-slot="bottom-navigation-item"
                data-active={isActive ? '' : undefined}
                aria-current={isActive ? 'page' : undefined}
                href={item.to}
                className={itemClass}
                onClick={(e) => {
                  // Let the browser handle the navigation; still notify state.
                  handleSelect(item)
                  // Consumers using a router can call preventDefault in onSelect.
                  if (e.defaultPrevented) return
                }}
              >
                {inner}
              </a>
            )
          }
          return (
            <button
              key={item.value}
              data-slot="bottom-navigation-item"
              data-active={isActive ? '' : undefined}
              aria-current={isActive ? 'page' : undefined}
              type="button"
              className={itemClass}
              onClick={() => handleSelect(item)}
            >
              {inner}
            </button>
          )
        })}
      </nav>
    )
  },
)
BottomNavigation.displayName = 'BottomNavigation'

export { BottomNavigation }

```

### `packages/registry-react/components/bottom-navigation/index.ts`

```ts
export { BottomNavigation, type BottomNavigationProps, type BottomNavItem } from './BottomNavigation'

```

## boxplot-chart

- type: `registry:ui`
- description: React mirror of @uipkge/boxplot-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/boxplot-chart/BoxplotChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// BoxplotChart
// ─────────────────────────────────────────────────────────────────────────

interface BoxRow {
  category: string
  /** [min, Q1, median, Q3, max] */
  values: [number, number, number, number, number]
}

export interface BoxplotChartProps {
  data: BoxRow[]
  /** Render horizontally (categories on y-axis). Default false. */
  horizontal?: boolean
  height?: number | string
  option?: any
  className?: string
}

export const BoxplotChart = React.forwardRef<HTMLDivElement, BoxplotChartProps>(
  ({ data, horizontal = false, height = 320, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const cats = data.map((d) => d.category)
      const values = data.map((d) => d.values)

      const valueAxis = {
        type: 'value' as const,
        scale: true,
        splitLine: { lineStyle: { color: theme.splitLineColor } },
        axisLabel: { color: theme.textColor, fontSize: 11 },
        axisLine: { lineStyle: { color: theme.axisColor } },
        axisTick: { show: false },
      }
      const catAxis = {
        type: 'category' as const,
        data: cats,
        axisLine: { lineStyle: { color: theme.axisColor } },
        axisLabel: { color: theme.textColor, fontSize: 11 },
        axisTick: { show: false },
      }

      const series = [
        {
          type: 'boxplot',
          data: values,
          itemStyle: { color: theme.colors[0], borderColor: theme.colors[1] },
        },
      ]

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        grid: mergeOptionBlock({ left: 16, right: 16, top: 24, bottom: 24, containLabel: true }, userGrid),
        tooltip: mergeOptionBlock(
          {
            trigger: 'item',
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        xAxis: mergeOptionBlock(horizontal ? valueAxis : catAxis, userXAxis),
        yAxis: mergeOptionBlock(horizontal ? catAxis : valueAxis, userYAxis),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, horizontal, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
BoxplotChart.displayName = 'BoxplotChart'

```

### `packages/registry-react/components/charts/boxplot-chart/index.ts`

```ts
export { BoxplotChart, type BoxplotChartProps } from './BoxplotChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## breadcrumb

- type: `registry:ui`
- description: Hierarchical wayfinding strip that shows a user’s position in a nested page tree. Built from `<BreadcrumbList>` and `<BreadcrumbItem>` primitives so you can drop in custom separators, dropdowns for collapsed parents, and ellipsis for overflow.
- npm deps: `@radix-ui/react-slot`, `lucide-react`

### `packages/registry-react/components/breadcrumb/breadcrumb.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { ChevronRight, MoreHorizontal } from 'lucide-react'
import { cn } from '@/lib/utils'

const Breadcrumb = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<'nav'>>(
  ({ className, ...props }, ref) => (
    <nav
      ref={ref}
      aria-label="breadcrumb"
      data-uipkge=""
      data-slot="breadcrumb"
      className={className}
      {...props}
    />
  ),
)
Breadcrumb.displayName = 'Breadcrumb'

const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
  ({ className, ...props }, ref) => (
    <ol
      ref={ref}
      data-uipkge=""
      data-slot="breadcrumb-list"
      className={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)}
      {...props}
    />
  ),
)
BreadcrumbList.displayName = 'BreadcrumbList'

const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
  ({ className, ...props }, ref) => (
    <li
      ref={ref}
      data-uipkge=""
      data-slot="breadcrumb-item"
      className={cn('inline-flex items-center gap-1.5', className)}
      {...props}
    />
  ),
)
BreadcrumbItem.displayName = 'BreadcrumbItem'

export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {
  /** Render the child element as the link (merging props/styles) instead of
   *  emitting an <a> — the React equivalent of reka-ui's as-child. */
  asChild?: boolean
}

const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
  ({ className, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'a'
    return (
      <Comp
        ref={ref}
        data-uipkge=""
        data-slot="breadcrumb-link"
        className={cn(
          'hover:text-foreground focus-visible:outline-ring rounded-sm underline-offset-4 transition-colors duration-200 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2',
          className,
        )}
        {...props}
      />
    )
  },
)
BreadcrumbLink.displayName = 'BreadcrumbLink'

const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      data-uipkge=""
      data-slot="breadcrumb-page"
      aria-current="page"
      className={cn('text-foreground cursor-default font-normal', className)}
      {...props}
    />
  ),
)
BreadcrumbPage.displayName = 'BreadcrumbPage'

const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentPropsWithoutRef<'li'>) => (
  <li
    data-uipkge=""
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    className={cn('[&>svg]:size-3.5', className)}
    {...props}
  >
    {children ?? <ChevronRight />}
  </li>
)
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'

const BreadcrumbEllipsis = ({ children, className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
  <span
    data-uipkge=""
    data-slot="breadcrumb-ellipsis"
    className={cn('flex size-11 items-center justify-center', className)}
    {...props}
  >
    {children ?? <MoreHorizontal className="size-4" aria-hidden="true" />}
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}

```

### `packages/registry-react/components/breadcrumb/index.ts`

```ts
export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
  type BreadcrumbLinkProps,
} from './breadcrumb'

```

## button

- type: `registry:ui`
- description: The primary clickable primitive — six variants (default, destructive, outline, secondary, ghost, link), seven sizes (default, sm, lg, xs, icon, icon-sm, icon-lg), and an as-child mode that lets you render a Link or anchor with full button styling.
- npm deps: `class-variance-authority`, `@radix-ui/react-slot`

### `packages/registry-react/components/button/Button.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { buttonVariants, type ButtonVariants } from './button.variants'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
  /** Render the child element as the button (merging props/styles) instead of
   *  emitting a <button> — the React equivalent of reka-ui's as-child. Use it
   *  to give a Next.js <Link> or <a> full button styling. */
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        data-uipkge=""
        data-slot="button"
        data-variant={variant ?? undefined}
        data-size={size ?? undefined}
        className={cn(buttonVariants({ variant, size }), className)}
        ref={ref}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'

export { Button }

```

### `packages/registry-react/components/button/button.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Button.vue` can `import { buttonVariants } from
 * './button.variants'` without creating a circular dependency through the
 * index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const buttonVariants = cva(
  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 active:scale-[0.97] active:duration-100 touch-manipulation disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        xs: 'h-7 rounded-md gap-1 px-2 has-[>svg]:px-1.5 text-xs',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ButtonVariants = VariantProps<typeof buttonVariants>

```

### `packages/registry-react/components/button/index.ts`

```ts
export { Button, type ButtonProps } from './Button'
export { buttonVariants, type ButtonVariants } from './button.variants'

```

## calendar

- type: `registry:ui`
- description: Single-month calendar grid for date selection, built on react-day-picker. Pair it with a Popover or use it inline. Supports min/max bounds, disabled dates, and locale formatting.
- npm deps: `react-day-picker`, `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/calendar/Calendar.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { DayPicker } from 'react-day-picker'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

export type CalendarProps = React.ComponentProps<typeof DayPicker>

/**
 * Single-month calendar grid for date selection, built on react-day-picker v9.
 * This is the React mirror of the reka-ui-based Vue Calendar — the cell sizes,
 * selected / today / outside / range states, and outline nav chevrons are mapped
 * 1:1 from the Vue registry's Tailwind class strings via react-day-picker's
 * `classNames` map. Pair it with a Popover or use it inline.
 */
function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      data-uipkge=""
      data-slot="calendar"
      showOutsideDays={showOutsideDays}
      className={cn('p-3', className)}
      classNames={{
        // react-day-picker v10 renders <Nav> as the FIRST child of .rdp-months
        // (a sibling of the month, NOT inside month_caption). The nav is
        // `absolute inset-x-0 top-0`, so .rdp-months MUST be `relative` or the
        // chevrons escape to the nearest positioned ancestor (Popover / Story
        // card) and float away from the calendar. With months relative + an h-9
        // caption, the nav overlays the caption row, prev/next pinned to the
        // inset-x edges — matching the Vue header (CalendarHeader > absolute nav).
        // No mt-4 here: in Vue that margin sits on the grid wrapper (below the
        // header), but rdp's .rdp-months wraps the nav + caption too, so a top
        // margin would push the whole header down 16px. The caption→grid gap is
        // the Month's gap-4 below.
        months: 'relative flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0',
        // `flex-1`: react-day-picker wraps the grid in an extra Month div
        // (Months > Month > grid) that Vue doesn't have (Vue's grid table is the
        // direct flex child with w-full). Without flex-1 the Month collapses to
        // the grid's intrinsic width in the sm:flex-row track, so the grid stays
        // narrow and the centered caption drifts left of the calendar. flex-1
        // makes the Month fill its track → full-width grid + truly centered label,
        // matching Vue, and splits evenly for a multi-month calendar.
        month: 'flex flex-1 flex-col gap-4',
        // Label-height (no h-9): Vue's CalendarHeader is sized to the heading and
        // the size-9 nav buttons overflow below it. Matching that height aligns the
        // nav's top-0 with the caption label (Vue parity) instead of the buttons
        // sitting 8px high against a 36px caption box.
        month_caption: 'flex items-center justify-center',
        caption_label: 'text-sm font-medium',
        nav: 'absolute inset-x-0 top-0 flex items-center justify-between gap-1',
        button_previous: cn(
          buttonVariants({ variant: 'outline' }),
          'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
        ),
        button_next: cn(
          buttonVariants({ variant: 'outline' }),
          'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
        ),
        month_grid: 'w-full border-collapse space-y-1',
        weekdays: 'flex',
        weekday: 'text-muted-foreground flex-1 rounded-md text-xs font-normal',
        week: 'mt-2 flex w-full',
        day: cn(
          'relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20',
          '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
          '[&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',
        ),
        day_button: cn(
          buttonVariants({ variant: 'ghost' }),
          'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',
        ),
        selected:
          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground',
        today: '[&:not([aria-selected])]:bg-accent [&:not([aria-selected])]:text-accent-foreground',
        outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
        disabled: 'text-muted-foreground opacity-50',
        range_start: 'day-range-start rounded-l-md',
        range_end: 'day-range-end rounded-r-md',
        range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
        hidden: 'invisible',
        ...classNames,
      }}
      formatters={{
        // Vue's reka-ui calendar renders narrow (single-letter) weekday labels;
        // react-day-picker defaults to short 'cccccc' (two-letter "Mo"). Emit the
        // locale's narrow name so weekdays match Vue across locales (incl. ja).
        formatWeekdayName: (weekday, options) =>
          weekday.toLocaleDateString(options?.locale?.code, { weekday: 'narrow' }),
        ...props.formatters,
      }}
      components={{
        Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) =>
          orientation === 'left' ? (
            <ChevronLeft className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
          ) : (
            <ChevronRight className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
          ),
      }}
      {...props}
    />
  )
}
Calendar.displayName = 'Calendar'

export { Calendar }

```

### `packages/registry-react/components/calendar/index.ts`

```ts
export { Calendar, type CalendarProps } from './Calendar'

```

## calendar-heatmap

- type: `registry:ui`
- description: React mirror of @uipkge/calendar-heatmap — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/calendar-heatmap/CalendarHeatmap.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// CalendarHeatmap
// ─────────────────────────────────────────────────────────────────────────

export interface CalendarHeatmapProps {
  /** [date string YYYY-MM-DD, value] tuples. */
  data: [string, number][]
  range: string | [string, string]
  height?: number | string
  /** Cell colour ramp [from, to] - default: chart-1 from light to saturated. */
  colorRange?: [string, string]
  option?: any
  className?: string
}

export const CalendarHeatmap = React.forwardRef<HTMLDivElement, CalendarHeatmapProps>(
  ({ data, range, height = 200, colorRange = ['#fef3c7', '#d97706'], option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const maxValue = data.reduce((m, [, v]) => Math.max(m, v), 0) || 1

      return {
        color: theme.colors,
        tooltip: {
          position: 'top',
          formatter: (p: any) => `<strong>${p.value[0]}</strong><br>${p.value[1]} contributions`,
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        visualMap: {
          show: false,
          min: 0,
          max: maxValue,
          inRange: { color: colorRange },
        },
        calendar: {
          top: 24,
          left: 36,
          right: 12,
          cellSize: ['auto', 14],
          range,
          itemStyle: { color: theme.splitLineColor, borderWidth: 0 },
          splitLine: { show: false },
          dayLabel: {
            color: theme.textColor,
            fontSize: 10,
            firstDay: 1,
            nameMap: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
          },
          monthLabel: { color: theme.textColor, fontSize: 10, fontWeight: 600 },
          yearLabel: { show: false },
        },
        series: (() => {
          const series = [{ type: 'heatmap', coordinateSystem: 'calendar', data }]
          const userSeries = (option as any)?.series
          return Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series
        })(),
        // Strip `series` from the rest spread so the merge above isn't clobbered.
        ...(() => {
          const { series: _, ...rest } = (option as any) ?? {}
          return rest
        })(),
      }
    }, [data, range, colorRange, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
CalendarHeatmap.displayName = 'CalendarHeatmap'

```

### `packages/registry-react/components/charts/calendar-heatmap/index.ts`

```ts
export { CalendarHeatmap, type CalendarHeatmapProps } from './CalendarHeatmap'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## candlestick-chart

- type: `registry:ui`
- description: React mirror of @uipkge/candlestick-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/candlestick-chart/CandlestickChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// CandlestickChart
// ─────────────────────────────────────────────────────────────────────────

interface Candle {
  date: string
  open: number
  close: number
  low: number
  high: number
}

export interface CandlestickChartProps {
  data: Candle[]
  height?: number | string
  /** Show the bottom data-zoom slider. Default false. */
  zoom?: boolean
  option?: any
  className?: string
}

export const CandlestickChart = React.forwardRef<HTMLDivElement, CandlestickChartProps>(
  ({ data, height = 320, zoom = false, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      // ECharts candle data shape: [open, close, low, high].
      const candleData = data.map((c) => [c.open, c.close, c.low, c.high])
      const dates = data.map((c) => c.date)

      const series = [
        {
          type: 'candlestick',
          data: candleData,
          itemStyle: {
            // Bullish (close >= open) -> teal (chart-2). Bearish -> orange (chart-4).
            color: theme.colors[1],
            color0: theme.colors[3],
            borderColor: theme.colors[1],
            borderColor0: theme.colors[3],
          },
        },
      ]

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        grid: mergeOptionBlock(
          { left: 16, right: 16, top: 24, bottom: zoom ? 60 : 24, containLabel: true },
          userGrid,
        ),
        tooltip: mergeOptionBlock(
          {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        xAxis: mergeOptionBlock(
          {
            type: 'category',
            data: dates,
            axisLine: { lineStyle: { color: theme.axisColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisTick: { show: false },
          },
          userXAxis,
        ),
        yAxis: mergeOptionBlock(
          {
            type: 'value',
            scale: true,
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { show: false },
            axisTick: { show: false },
          },
          userYAxis,
        ),
        dataZoom: zoom ? [{ type: 'slider', bottom: 8, height: 18 }, { type: 'inside' }] : undefined,
        series: mergedSeries,
        ...userRest,
      }
    }, [data, zoom, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
CandlestickChart.displayName = 'CandlestickChart'

```

### `packages/registry-react/components/charts/candlestick-chart/index.ts`

```ts
export { CandlestickChart, type CandlestickChartProps } from './CandlestickChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## card

- type: `registry:ui`
- description: Bordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/card/card.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { cardVariants, type CardVariants } from './card.variants'

export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, CardVariants {}

const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    data-uipkge=""
    data-slot="card"
    className={cn(cardVariants({ variant }), 'overflow-hidden', className)}
    {...props}
  />
))
Card.displayName = 'Card'

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="card-header" className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
  ),
)
CardHeader.displayName = 'CardHeader'

const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      data-uipkge=""
      data-slot="card-title"
      className={cn('leading-none font-semibold tracking-tight', className)}
      {...props}
    />
  ),
)
CardTitle.displayName = 'CardTitle'

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} data-uipkge="" data-slot="card-description" className={cn('text-muted-foreground text-sm', className)} {...props} />
  ),
)
CardDescription.displayName = 'CardDescription'

const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="card-action"
      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
      {...props}
    />
  ),
)
CardAction.displayName = 'CardAction'

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="card-content" className={cn('p-6 pt-0', className)} {...props} />
  ),
)
CardContent.displayName = 'CardContent'

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="card-footer" className={cn('flex items-center p-6 pt-0', className)} {...props} />
  ),
)
CardFooter.displayName = 'CardFooter'

export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter }

```

### `packages/registry-react/components/card/card.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'`
 * without creating a circular dependency back through the index. The circular
 * form caused intermittent `$setup.cardVariants is not a function` errors
 * during dev SSR when several `<Card>` instances rendered in a v-for before
 * the module graph had fully resolved.
 */
export const cardVariants = cva(
  'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150',
  {
    variants: {
      variant: {
        default: 'border-border',
        elevated: 'border-transparent shadow-md hover:shadow-md',
        outline: 'border-2',
        ghost: 'border-transparent shadow-none hover:bg-muted/50',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

export type CardVariants = VariantProps<typeof cardVariants>

```

### `packages/registry-react/components/card/index.ts`

```ts
export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps } from './card'
export { cardVariants, type CardVariants } from './card.variants'

```

## carousel

- type: `registry:ui`
- description: Horizontal or vertical scroller with previous/next controls. Built on embla-carousel-react (the official shadcn carousel pattern) and wired through a React context. Drop in images, cards, or any custom slide content.
- npm deps: `embla-carousel-react`, `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/carousel/carousel.tsx`

```tsx
'use client'

/**
 * Carousel
 *
 * A flexible carousel / slider for cycling through content, built on
 * embla-carousel-react (the official shadcn carousel pattern). All parts are
 * consolidated into this single file and wired through a React context that
 * holds the embla api.
 *
 * Tailwind class strings are kept 1:1 with the Vue registry's carousel so the
 * two frameworks render identically.
 *
 * @example - Basic carousel with images
 * <Carousel>
 *   <CarouselContent>
 *     {images.map((img) => (
 *       <CarouselItem key={img.id}>
 *         <img src={img.src} alt={img.alt} className="w-full h-full object-cover" />
 *       </CarouselItem>
 *     ))}
 *   </CarouselContent>
 * </Carousel>
 *
 * @example - Carousel with navigation controls
 * <Carousel opts={{ loop: true }}>
 *   <CarouselContent>
 *     {slides.map((slide) => (
 *       <CarouselItem key={slide.id}>
 *         <SlideContent content={slide} />
 *       </CarouselItem>
 *     ))}
 *   </CarouselContent>
 *   <CarouselPrevious />
 *   <CarouselNext />
 * </Carousel>
 *
 * @example - Vertical carousel
 * <Carousel orientation="vertical">
 *   <CarouselContent>
 *     {items.map((item) => (
 *       <CarouselItem key={item}>{item}</CarouselItem>
 *     ))}
 *   </CarouselContent>
 * </Carousel>
 */
import * as React from 'react'
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from 'embla-carousel-react'
import { ChevronLeft, ChevronRight } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

export interface CarouselProps {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: 'horizontal' | 'vertical'
  setApi?: (api: CarouselApi) => void
}

interface CarouselContextProps extends CarouselProps {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: CarouselApi
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
  orientation: 'horizontal' | 'vertical'
}

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />')
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = 'horizontal',
      opts,
      setApi,
      plugins,
      className,
      children,
      ...props
    },
    ref,
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === 'horizontal' ? 'x' : 'y',
      },
      plugins,
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
    const [canScrollNext, setCanScrollNext] = React.useState(false)

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) return
      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'ArrowLeft') {
          event.preventDefault()
          scrollPrev()
        } else if (event.key === 'ArrowRight') {
          event.preventDefault()
          scrollNext()
        }
      },
      [scrollPrev, scrollNext],
    )

    React.useEffect(() => {
      if (!api || !setApi) return
      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) return
      onSelect(api)
      api.on('reInit', onSelect)
      api.on('select', onSelect)

      return () => {
        api?.off('select', onSelect)
      }
    }, [api, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api,
          opts,
          orientation:
            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          data-uipkge=""
          data-slot="carousel"
          onKeyDownCapture={handleKeyDown}
          className={cn(
            'relative overflow-hidden',
            orientation === 'horizontal' ? 'w-full' : 'h-full flex-col',
            className,
          )}
          role="region"
          aria-roledescription="carousel"
          aria-label="Carousel"
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  },
)
Carousel.displayName = 'Carousel'

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div
      ref={carouselRef}
      data-uipkge=""
      data-slot="carousel-content"
      className={cn(
        orientation === 'horizontal'
          ? 'flex overflow-x-auto scroll-smooth snap-x snap-mandatory'
          : 'flex flex-col overflow-y-auto snap-y snap-mandatory',
        'relative h-full w-full',
        '[-ms-overflow-style:none] [scrollbar-width:none]',
        '[&::-webkit-scrollbar]:hidden',
      )}
      aria-orientation={orientation}
      role="group"
    >
      <div
        ref={ref}
        className={cn(
          'flex',
          // w-full clamps the track to the viewport width. Without it the track's
          // min-width:auto sizes to the slides' intrinsic content and overflows the
          // viewport, so basis-full slides resolve against the wider track and
          // render too big — inflating aspect-ratio slide heights vs Vue (whose
          // CarouselContent is a single w-full div). Keeps the two frameworks 1:1.
          orientation === 'horizontal' ? 'w-full' : 'flex-col',
          className,
        )}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = 'CarouselContent'

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { orientation } = useCarousel()

  return (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="carousel-item"
      className={cn(
        'flex shrink-0 grow-0 basis-full flex-col',
        orientation === 'horizontal' ? 'w-full' : 'h-full',
        'snap-start',
        'relative',
        className,
      )}
      role="group"
      aria-roledescription="slide"
      {...props}
    />
  )
})
CarouselItem.displayName = 'CarouselItem'

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button> & { label?: string }
>(
  (
    { className, variant = 'outline', size = 'icon', label = 'Previous slide', children, ...props },
    ref,
  ) => {
    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
    const isHorizontal = orientation !== 'vertical'

    return (
      <Button
        ref={ref}
        type="button"
        variant={variant}
        size={size}
        className={cn(
          'absolute z-10 size-8 shrink-0 rounded-full',
          'bg-background/80 border shadow-md backdrop-blur-sm',
          'hover:bg-accent hover:text-accent-foreground',
          'disabled:pointer-events-none disabled:opacity-50',
          isHorizontal
            ? 'top-1/2 -left-3 -translate-y-1/2'
            : '-top-3 left-1/2 -translate-x-1/2 rotate-90',
          className,
        )}
        disabled={!canScrollPrev}
        aria-label={label}
        onClick={scrollPrev}
        {...props}
      >
        {children ?? <ChevronLeft className="size-4" aria-hidden="true" />}
      </Button>
    )
  },
)
CarouselPrevious.displayName = 'CarouselPrevious'

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button> & { label?: string }
>(
  (
    { className, variant = 'outline', size = 'icon', label = 'Next slide', children, ...props },
    ref,
  ) => {
    const { orientation, scrollNext, canScrollNext } = useCarousel()
    const isHorizontal = orientation !== 'vertical'

    return (
      <Button
        ref={ref}
        type="button"
        variant={variant}
        size={size}
        className={cn(
          'absolute z-10 size-8 shrink-0 rounded-full',
          'bg-background/80 border shadow-md backdrop-blur-sm',
          'hover:bg-accent hover:text-accent-foreground',
          'disabled:pointer-events-none disabled:opacity-50',
          isHorizontal
            ? 'top-1/2 -right-3 -translate-y-1/2'
            : '-bottom-3 left-1/2 -translate-x-1/2 rotate-90',
          className,
        )}
        disabled={!canScrollNext}
        aria-label={label}
        onClick={scrollNext}
        {...props}
      >
        {children ?? <ChevronRight className="size-4" aria-hidden="true" />}
      </Button>
    )
  },
)
CarouselNext.displayName = 'CarouselNext'

const CarouselHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-uipkge=""
    data-slot="carousel-header"
    className={cn('flex items-center justify-between px-1 pb-2', className)}
    {...props}
  />
))
CarouselHeader.displayName = 'CarouselHeader'

const CarouselFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    data-uipkge=""
    data-slot="carousel-footer"
    className={cn('flex items-center justify-between px-1 pt-2', className)}
    {...props}
  />
))
CarouselFooter.displayName = 'CarouselFooter'

const CarouselIndicators = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { api } = useCarousel()
  const [snaps, setSnaps] = React.useState<number[]>([])
  const [selectedIndex, setSelectedIndex] = React.useState(0)

  React.useEffect(() => {
    if (!api) return
    const onUpdate = () => {
      setSnaps(api.scrollSnapList())
      setSelectedIndex(api.selectedScrollSnap())
    }
    onUpdate()
    api.on('reInit', onUpdate)
    api.on('select', onUpdate)
    return () => {
      api?.off('reInit', onUpdate)
      api?.off('select', onUpdate)
    }
  }, [api])

  if (!api) return null

  return (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="carousel-indicators"
      className={cn('flex items-center justify-center gap-1.5 py-2', className)}
      role="tablist"
      aria-label="Carousel navigation"
      {...props}
    >
      {snaps.map((_, index) => (
        <button
          key={index}
          type="button"
          role="tab"
          aria-label={`Go to slide ${index + 1}`}
          aria-selected={index === selectedIndex}
          className={cn(
            'h-2 w-2 rounded-full transition-all duration-200',
            index === selectedIndex
              ? 'bg-primary w-6'
              : 'bg-muted-foreground/30 hover:bg-muted-foreground/50',
          )}
          onClick={() => api.scrollTo(index)}
        />
      ))}
    </div>
  )
})
CarouselIndicators.displayName = 'CarouselIndicators'

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselHeader,
  CarouselFooter,
  CarouselIndicators,
  useCarousel,
}

```

### `packages/registry-react/components/carousel/index.ts`

```ts
export {
  type CarouselApi,
  type CarouselProps,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  CarouselHeader,
  CarouselFooter,
  CarouselIndicators,
  useCarousel,
} from './carousel'

```

## cascade-select

- type: `registry:ui`
- description: Hierarchical cascading select where each level selection determines the next level options. Displays the selected path as labels. Supports search, clearable, disabled, and loading states.
- npm deps: `lucide-react`
- registry deps: `popover`

### `packages/registry-react/components/cascade-select/CascadeSelect.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, ChevronDown, ChevronRight, Loader2, Search, X } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'
import type { CascadeOption } from './types'

export interface CascadeSelectProps {
  value?: string[] | null
  defaultValue?: string[] | null
  onValueChange?: (value: string[] | null) => void
  onChange?: (value: string[] | null, path: CascadeOption[]) => void
  onClear?: () => void
  options: CascadeOption[]
  placeholder?: string
  searchable?: boolean
  clearable?: boolean
  disabled?: boolean
  loading?: boolean
  size?: 'sm' | 'default' | 'lg'
  separator?: string
  searchPlaceholder?: string
  emptyText?: string
  className?: string
}

function findPathIndices(options: CascadeOption[], values: string[]): number[] {
  const indices: number[] = []
  let current = options
  for (const val of values) {
    const idx = current.findIndex((o) => o.value === val)
    if (idx === -1) return indices
    indices.push(idx)
    const next = current[idx].children
    if (!next?.length) break
    current = next
  }
  return indices
}

function buildPathFromIndices(options: CascadeOption[], indices: number[]): CascadeOption[] {
  const path: CascadeOption[] = []
  let current = options
  for (const idx of indices) {
    if (idx == null || !current[idx]) break
    const opt = current[idx]
    path.push(opt)
    if (!opt.children?.length) break
    current = opt.children
  }
  return path
}

const sizeClasses = {
  sm: 'h-8 text-xs px-2.5',
  default: 'h-9 text-sm px-3',
  lg: 'h-11 text-base px-4',
}

const CascadeSelect = React.forwardRef<HTMLButtonElement, CascadeSelectProps>(
  (
    {
      value: modelValue,
      defaultValue = null,
      onValueChange,
      onChange,
      onClear,
      options,
      placeholder = 'Select...',
      searchable = true,
      clearable = true,
      disabled = false,
      loading = false,
      size = 'default',
      separator = ' / ',
      searchPlaceholder = 'Search...',
      emptyText = 'No options.',
      className,
    },
    ref,
  ) => {
    const isControlled = modelValue !== undefined
    const [internalValue, setInternalValue] = React.useState<string[] | null>(defaultValue)
    const currentValue = isControlled ? modelValue : internalValue

    const [isOpen, setIsOpen] = React.useState(false)
    const [activePath, setActivePath] = React.useState<number[]>([])
    const [search, setSearch] = React.useState('')

    // Sync active path with value when opened
    React.useEffect(() => {
      if (isOpen && currentValue?.length) {
        setActivePath(findPathIndices(options, currentValue))
      } else if (isOpen) {
        setActivePath([])
      }
      if (!isOpen) setSearch('')
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isOpen])

    function commitValue(values: string[] | null, path: CascadeOption[]) {
      if (!isControlled) setInternalValue(values)
      onValueChange?.(values)
      onChange?.(values, path)
    }

    function getOptionsAtLevel(level: number): CascadeOption[] {
      let current = options
      for (let i = 0; i < level; i++) {
        const idx = activePath[i]
        if (idx == null || !current[idx]?.children?.length) return []
        current = current[idx].children!
      }
      return current
    }

    function selectAtLevel(level: number, index: number) {
      const option = getOptionsAtLevel(level)[index]
      if (option?.disabled) return
      const next = [...activePath]
      next[level] = index
      next.splice(level + 1)
      setActivePath(next)

      // If leaf node, emit the value
      if (!option?.children?.length) {
        const path = buildPathFromIndices(options, next)
        const values = path.map((p) => p.value)
        commitValue(values, path)
        setIsOpen(false)
      }
    }

    const selectedPath = React.useMemo<CascadeOption[]>(() => {
      if (!currentValue?.length) return []
      return buildPathFromIndices(options, findPathIndices(options, currentValue))
    }, [currentValue, options])

    const displayLabel = React.useMemo(() => {
      if (selectedPath.length === 0) return placeholder
      return selectedPath.map((p) => p.label).join(separator)
    }, [selectedPath, placeholder, separator])

    const hasValue = selectedPath.length > 0

    function clearAll(event?: React.MouseEvent | React.KeyboardEvent) {
      event?.stopPropagation()
      if (disabled) return
      onClear?.()
      commitValue(null, [])
      setActivePath([])
    }

    // Search: flatten the tree and match
    const searchResults = React.useMemo<{ path: CascadeOption[]; values: string[] }[] | null>(() => {
      const q = search.trim().toLowerCase()
      if (!q) return null
      const results: { path: CascadeOption[]; values: string[] }[] = []
      const walk = (opts: CascadeOption[], path: CascadeOption[], values: string[]) => {
        for (const opt of opts) {
          const newPath = [...path, opt]
          const newValues = [...values, opt.value]
          if (opt.label.toLowerCase().includes(q) && !opt.children?.length) {
            results.push({ path: newPath, values: newValues })
          }
          if (opt.children?.length) {
            walk(opt.children, newPath, newValues)
          }
        }
      }
      walk(options, [], [])
      return results
    }, [search, options])

    function selectSearchResult(result: { path: CascadeOption[]; values: string[] }) {
      commitValue(result.values, result.path)
      setIsOpen(false)
      setSearch('')
    }

    const levels = React.useMemo<{ options: CascadeOption[]; level: number }[]>(() => {
      const result: { options: CascadeOption[]; level: number }[] = [{ options, level: 0 }]
      for (let i = 0; i < activePath.length; i++) {
        const idx = activePath[i]
        const current = result[i].options
        if (idx == null || !current[idx]?.children?.length) break
        result.push({ options: current[idx].children!, level: i + 1 })
      }
      return result
    }, [activePath, options])

    const triggerClasses = cn(
      'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none',
      'hover:border-ring/50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
      'disabled:cursor-not-allowed disabled:opacity-50',
      sizeClasses[size],
      className,
    )

    return (
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <PopoverTrigger asChild>
          <button
            ref={ref}
            type="button"
            role="combobox"
            aria-expanded={isOpen}
            disabled={disabled || loading}
            data-uipkge=""
            data-slot="cascade-select"
            className={triggerClasses}
          >
            <span className={cn('flex-1 truncate text-left', hasValue ? 'text-foreground' : 'text-muted-foreground')}>
              {displayLabel}
            </span>
            <span className="flex shrink-0 items-center gap-1">
              {loading ? (
                <Loader2 className="text-muted-foreground size-4 animate-spin" />
              ) : clearable && hasValue && !disabled ? (
                <span
                  role="button"
                  tabIndex={0}
                  aria-label="Clear"
                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex size-4 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  onClick={(e) => clearAll(e)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault()
                      clearAll(e)
                    }
                  }}
                >
                  <X className="size-4" />
                </span>
              ) : (
                <ChevronDown
                  className={cn(
                    'text-muted-foreground size-4 shrink-0 transition-transform duration-200',
                    isOpen && 'rotate-180',
                  )}
                />
              )}
            </span>
          </button>
        </PopoverTrigger>

        <PopoverContent
          className="p-0"
          align="start"
          sideOffset={4}
          style={{ width: 'var(--radix-popover-trigger-width)' }}
        >
          <div className="flex max-h-80 flex-col">
            {searchable && (
              <div className="border-b p-2">
                <div className="relative">
                  <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
                  <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder={searchPlaceholder}
                    aria-label="Search options"
                    className="border-input focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent pl-8 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
                  />
                </div>
              </div>
            )}

            {loading ? (
              <div className="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
                <Loader2 className="size-4 animate-spin" />
                Loading...
              </div>
            ) : searchResults ? (
              <div className="flex-1 overflow-y-auto p-1">
                {searchResults.length === 0 ? (
                  <div className="text-muted-foreground py-6 text-center text-sm">{emptyText}</div>
                ) : (
                  searchResults.map((result, i) => (
                    <button
                      key={i}
                      type="button"
                      className="hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 flex w-full items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:outline-none"
                      onClick={() => selectSearchResult(result)}
                    >
                      <span className="flex-1 truncate">{result.path.map((p) => p.label).join(separator)}</span>
                    </button>
                  ))
                )}
              </div>
            ) : (
              <div className="flex flex-1 overflow-x-auto overflow-y-hidden">
                {levels.map((lvl) => (
                  <div
                    key={lvl.level}
                    className="max-w-56 min-w-44 shrink-0 overflow-y-auto border-r p-1 last:border-r-0"
                  >
                    {lvl.options.map((opt, idx) => (
                      <button
                        key={opt.value}
                        type="button"
                        disabled={opt.disabled}
                        className={cn(
                          'flex w-full items-center justify-between gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none',
                          'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
                          'disabled:cursor-not-allowed disabled:opacity-50',
                          activePath[lvl.level] === idx && 'bg-accent text-accent-foreground font-medium',
                        )}
                        onClick={() => selectAtLevel(lvl.level, idx)}
                      >
                        <span className="flex-1 truncate">{opt.label}</span>
                        {activePath[lvl.level] === idx && !opt.children?.length ? (
                          <Check className="size-4 shrink-0" />
                        ) : opt.children?.length ? (
                          <ChevronRight className="text-muted-foreground size-3.5 shrink-0" />
                        ) : null}
                      </button>
                    ))}
                  </div>
                ))}
              </div>
            )}
          </div>
        </PopoverContent>
      </Popover>
    )
  },
)
CascadeSelect.displayName = 'CascadeSelect'

export { CascadeSelect }

```

### `packages/registry-react/components/cascade-select/types.ts`

```ts
export interface CascadeOption {
  value: string
  label: string
  disabled?: boolean
  children?: CascadeOption[]
  [key: string]: unknown
}

```

### `packages/registry-react/components/cascade-select/index.ts`

```ts
export { CascadeSelect, type CascadeSelectProps } from './CascadeSelect'
export { type CascadeOption } from './types'

```

## charts

- type: `registry:ui`
- description: Meta-bundle that installs every chart wrapper at once -- 23 charts spanning cartesian (area / bar / line / scatter / candlestick / theme-river), circular (pie / radar / gauge / segmented-gauge), hierarchy (treemap / funnel / smooth-funnel / sunburst / tree), flow (sankey / graph / parallel), distribution (boxplot), specialty (heatmap / calendar-heatmap / sparkline), and the raw escape hatch. Each is also installable on its own.
- registry deps: `area-chart`, `bar-chart`, `boxplot-chart`, `calendar-heatmap`, `candlestick-chart`, `funnel-chart`, `gauge-chart`, `graph-chart`, `heatmap`, `line-chart`, `parallel-chart`, `pie-chart`, `radar-chart`, `raw-chart`, `sankey-chart`, `scatter-chart`, `segmented-gauge`, `smooth-funnel`, `sparkline`, `sunburst-chart`, `theme-river`, `tree-chart`, `treemap-chart`

## chat-thread

- type: `registry:block`
- description: Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
- npm deps: `lucide-react`
- registry deps: `avatar`, `button`, `textarea`

### `packages/registry-react/blocks/chat-thread/ChatThread.tsx`

```tsx
'use client'

import * as React from 'react'
import { ArrowRight, AtSign, Paperclip, Phone, Smile, Video, MoreVertical, Check, CheckCheck } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'

type MessageStatus = 'sent' | 'delivered' | 'read'

interface Message {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: MessageStatus
}

const now = new Date()
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const peer = {
  name: 'Marcus Rivera',
  handle: '@marcus',
  avatarUrl: '',
  initials: 'MR',
  online: true,
  lastSeen: 'Active now',
}

const initialMessages: Message[] = [
  {
    id: 'm1',
    author: 'them',
    body: 'Hey — did you get a chance to look at the onboarding doc?',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 14 * 60 * 1000),
  },
  {
    id: 'm2',
    author: 'me',
    body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 21 * 60 * 1000),
    status: 'read',
  },
  {
    id: 'm3',
    author: 'them',
    body: 'Perfect. Drop them in the doc and I will action this afternoon.',
    sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 23 * 60 * 1000),
  },
  {
    id: 'm4',
    author: 'me',
    body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',
    sentAt: new Date(now.getTime() - 42 * 60 * 1000),
    status: 'read',
  },
  {
    id: 'm5',
    author: 'them',
    body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',
    sentAt: new Date(now.getTime() - 8 * 60 * 1000),
  },
]

function dayLabel(d: Date): string {
  const sameDay = d.toDateString() === now.toDateString()
  if (sameDay) return 'Today'
  const sameYesterday = d.toDateString() === yesterday.toDateString()
  if (sameYesterday) return 'Yesterday'
  return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

export function ChatThread() {
  const [messages, setMessages] = React.useState<Message[]>(initialMessages)
  const [draft, setDraft] = React.useState('')
  const [peerTyping, setPeerTyping] = React.useState(false)
  const scrollRoot = React.useRef<HTMLDivElement | null>(null)
  const composerRef = React.useRef<HTMLTextAreaElement | null>(null)
  // Keep `send` referenced by the native keydown listener fresh without
  // re-binding on every keystroke.
  const sendRef = React.useRef<() => void>(() => {})

  const groupedMessages = React.useMemo(() => {
    const groups: Array<{ label: string; items: Message[] }> = []
    for (const m of messages) {
      const label = dayLabel(m.sentAt)
      const last = groups[groups.length - 1]
      if (last && last.label === label) last.items.push(m)
      else groups.push({ label, items: [m] })
    }
    return groups
  }, [messages])

  function scrollToBottom() {
    if (!scrollRoot.current) return
    scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight
  }

  React.useEffect(() => {
    scrollToBottom()
  }, [messages])

  function send() {
    const body = draft.trim()
    if (!body) return
    setMessages((prev) => [
      ...prev,
      {
        id: `m${Date.now()}`,
        author: 'me',
        body,
        sentAt: new Date(),
        status: 'sent',
      },
    ])
    setDraft('')
    setPeerTyping(true)
    window.setTimeout(() => {
      setPeerTyping(false)
    }, 1800)
  }

  // The Textarea primitive's `onKeyDown` prop fires with no event, so attach a
  // native keydown listener to the underlying <textarea> to implement
  // Enter-to-send / Shift+Enter-for-newline.
  React.useEffect(() => {
    sendRef.current = send
  })

  React.useEffect(() => {
    const el = composerRef.current
    if (!el) return
    function onComposerKey(e: KeyboardEvent) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        sendRef.current()
      }
    }
    el.addEventListener('keydown', onComposerKey)
    return () => el.removeEventListener('keydown', onComposerKey)
  }, [])

  return (
    <div className="bg-card text-card-foreground flex h-[680px] w-full flex-col overflow-hidden rounded-xl border shadow-sm">
      <header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
        <div className="flex min-w-0 items-center gap-3">
          <div className="relative">
            <Avatar className="size-9">
              {peer.avatarUrl && <AvatarImage src={peer.avatarUrl} alt={peer.name} />}
              <AvatarFallback className="text-xs font-medium">{peer.initials}</AvatarFallback>
            </Avatar>
            {peer.online && (
              <span className="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
            )}
          </div>
          <div className="min-w-0">
            <p className="truncate text-sm font-semibold tracking-tight">{peer.name}</p>
            <p className="text-muted-foreground truncate text-xs">{peer.lastSeen}</p>
          </div>
        </div>
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" className="size-8" aria-label="Voice call">
            <Phone className="size-4" />
          </Button>
          <Button variant="ghost" size="icon" className="size-8" aria-label="Video call">
            <Video className="size-4" />
          </Button>
          <Button variant="ghost" size="icon" className="size-8" aria-label="More options">
            <MoreVertical className="size-4" />
          </Button>
        </div>
      </header>

      <div ref={scrollRoot} className="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
        {groupedMessages.map((group) => (
          <div key={group.label} className="space-y-3">
            <div className="flex items-center justify-center">
              <span className="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-[10px] font-medium tracking-wide uppercase">
                {group.label}
              </span>
            </div>
            {group.items.map((m) => (
              <div
                key={m.id}
                className={`flex items-end gap-2 ${m.author === 'me' ? 'justify-end' : 'justify-start'}`}
              >
                {m.author === 'them' && (
                  <Avatar className="size-7">
                    <AvatarFallback className="text-[10px]">{peer.initials}</AvatarFallback>
                  </Avatar>
                )}
                <div
                  className={`flex max-w-[78%] flex-col gap-1 ${m.author === 'me' ? 'items-end' : 'items-start'}`}
                >
                  <div
                    className={`rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm ${
                      m.author === 'me'
                        ? 'bg-primary text-primary-foreground rounded-br-md'
                        : 'bg-muted text-foreground rounded-bl-md'
                    }`}
                  >
                    {m.body}
                  </div>
                  <div className="text-muted-foreground flex items-center gap-1 px-1 text-[10px] tabular-nums">
                    <span>{formatTime(m.sentAt)}</span>
                    {m.author === 'me' && m.status === 'read' && <CheckCheck className="text-info size-3" />}
                    {m.author === 'me' && m.status === 'delivered' && <CheckCheck className="size-3" />}
                    {m.author === 'me' && m.status === 'sent' && <Check className="size-3" />}
                  </div>
                </div>
              </div>
            ))}
          </div>
        ))}

        {peerTyping && (
          <div className="flex items-end gap-2">
            <Avatar className="size-7">
              <AvatarFallback className="text-[10px]">{peer.initials}</AvatarFallback>
            </Avatar>
            <div className="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
              <span className="typing-dot" />
              <span className="typing-dot" style={{ animationDelay: '0.15s' }} />
              <span className="typing-dot" style={{ animationDelay: '0.3s' }} />
            </div>
          </div>
        )}
      </div>

      <div className="bg-muted/20 border-t px-4 py-3">
        <div className="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4">
          <Textarea
            ref={composerRef}
            value={draft}
            onValueChange={setDraft}
            placeholder={`Message ${peer.name.split(' ')[0]}`}
            rows={1}
            variant="plain"
            className="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
          />
          <div className="flex items-center justify-between gap-2 px-2 pb-2">
            <div className="flex items-center gap-0.5">
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-foreground size-8"
                aria-label="Attach file"
              >
                <Paperclip className="size-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-foreground size-8"
                aria-label="Emoji"
              >
                <Smile className="size-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-foreground size-8"
                aria-label="Mention"
              >
                <AtSign className="size-4" />
              </Button>
            </div>
            <div className="flex items-center gap-2">
              <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex">
                <span>↵</span>
              </kbd>
              <Button
                className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                disabled={!draft.trim()}
                aria-label="Send"
                onClick={send}
              >
                Send
                <ArrowRight className="size-3.5" />
              </Button>
            </div>
          </div>
        </div>
        <p className="text-muted-foreground/70 mt-2 text-center text-[10px]">
          <kbd className="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">Enter</kbd>
          {' '}to send
          <span className="mx-1.5 opacity-50">·</span>
          <kbd className="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">Shift</kbd>
          {' '}+{' '}
          <kbd className="bg-muted/60 rounded px-1 py-0.5 font-mono text-[9px]">↵</kbd>
          {' '}for newline
        </p>
      </div>

      <style>{`
        .chat-scroll::-webkit-scrollbar {
          width: 6px;
        }
        .chat-scroll::-webkit-scrollbar-thumb {
          background: var(--border);
          border-radius: 3px;
        }
        .typing-dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 9999px;
          background: currentColor;
          opacity: 0.5;
          animation: typing-bounce 1s infinite ease-in-out;
        }
        @keyframes typing-bounce {
          0%,
          80%,
          100% {
            transform: translateY(0);
            opacity: 0.35;
          }
          40% {
            transform: translateY(-3px);
            opacity: 0.9;
          }
        }
      `}</style>
    </div>
  )
}

```

## chat-two-pane

- type: `registry:block`
- description: Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
- npm deps: `lucide-react`
- registry deps: `avatar`, `button`, `input`, `textarea`

### `packages/registry-react/blocks/chat-two-pane/ChatTwoPane.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  ArrowRight,
  AtSign,
  Paperclip,
  Phone,
  Smile,
  Video,
  MoreVertical,
  Search,
  Pin,
  CheckCheck,
  SquarePen,
  Filter,
} from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'

interface Conversation {
  id: string
  name: string
  initials: string
  avatarUrl?: string
  lastMessage: string
  lastAt: Date
  unread: number
  online: boolean
  pinned?: boolean
  muted?: boolean
}

interface Message {
  id: string
  author: 'me' | 'them'
  body: string
  sentAt: Date
  status?: 'sent' | 'delivered' | 'read'
}

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const initialConversations: Conversation[] = [
  {
    id: 'c1',
    name: 'Marcus Rivera',
    initials: 'MR',
    lastMessage: 'Yes! I will bring the kanban deck. Want to push it to 10:30?',
    lastAt: new Date(now.getTime() - 8 * 60 * 1000),
    unread: 2,
    online: true,
    pinned: true,
  },
  {
    id: 'c2',
    name: 'Sarah Connor',
    initials: 'SC',
    lastMessage: 'Approved — feel free to take Mar 15-18 off.',
    lastAt: new Date(now.getTime() - 52 * 60 * 1000),
    unread: 0,
    online: true,
  },
  {
    id: 'c3',
    name: 'Design Team',
    initials: 'DT',
    lastMessage: 'Priya: pushed the new color tokens to staging.',
    lastAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    unread: 5,
    online: false,
    pinned: true,
  },
  {
    id: 'c4',
    name: 'Alice Johnson',
    initials: 'AJ',
    lastMessage: 'Thanks! Will follow up after lunch.',
    lastAt: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    unread: 0,
    online: false,
  },
  {
    id: 'c5',
    name: 'Engineering',
    initials: 'EN',
    lastMessage: 'Devon: deploy is green, going home.',
    lastAt: yesterday,
    unread: 0,
    online: false,
    muted: true,
  },
  {
    id: 'c6',
    name: 'Priya Shah',
    initials: 'PS',
    lastMessage: 'Sent the spec — let me know what you think.',
    lastAt: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    unread: 0,
    online: false,
  },
  {
    id: 'c7',
    name: 'Devon Patel',
    initials: 'DP',
    lastMessage: 'You: pushed the fix, should be live in 10.',
    lastAt: new Date(now.getTime() - 50 * 60 * 60 * 1000),
    unread: 0,
    online: true,
  },
]

const initialMessagesByConvo: Record<string, Message[]> = {
  c1: [
    {
      id: 'm1',
      author: 'them',
      body: 'Hey — did you get a chance to look at the onboarding doc?',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000),
    },
    {
      id: 'm2',
      author: 'me',
      body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 7 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm3',
      author: 'them',
      body: 'Perfect. Drop them in the doc and I will action this afternoon.',
      sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 9 * 60 * 1000),
    },
    {
      id: 'm4',
      author: 'me',
      body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',
      sentAt: new Date(now.getTime() - 42 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm5',
      author: 'them',
      body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',
      sentAt: new Date(now.getTime() - 8 * 60 * 1000),
    },
  ],
  c2: [
    {
      id: 'm1',
      author: 'me',
      body: 'Hey Sarah — submitting time-off for Mar 15-18.',
      sentAt: new Date(now.getTime() - 95 * 60 * 1000),
      status: 'read',
    },
    {
      id: 'm2',
      author: 'them',
      body: 'Approved — feel free to take Mar 15-18 off.',
      sentAt: new Date(now.getTime() - 52 * 60 * 1000),
    },
  ],
  c3: [
    {
      id: 'm1',
      author: 'them',
      body: 'Priya: pushed the new color tokens to staging. Reviews welcome.',
      sentAt: new Date(now.getTime() - 3 * 60 * 60 * 1000),
    },
  ],
  c4: [
    {
      id: 'm1',
      author: 'them',
      body: 'Thanks! Will follow up after lunch.',
      sentAt: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    },
  ],
  c5: [{ id: 'm1', author: 'them', body: 'Devon: deploy is green, going home.', sentAt: yesterday }],
  c6: [
    {
      id: 'm1',
      author: 'them',
      body: 'Sent the spec — let me know what you think.',
      sentAt: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    },
  ],
  c7: [
    {
      id: 'm1',
      author: 'me',
      body: 'pushed the fix, should be live in 10.',
      sentAt: new Date(now.getTime() - 50 * 60 * 60 * 1000),
      status: 'read',
    },
  ],
}

function dayLabel(d: Date): string {
  if (d.toDateString() === now.toDateString()) return 'Today'
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })
}

function formatTime(d: Date): string {
  return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
}

function formatConvoTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000))
  if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' })
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

export function ChatTwoPane() {
  const [conversations, setConversations] = React.useState<Conversation[]>(initialConversations)
  // Mutable per-conversation message store. A version counter forces re-render
  // when a thread is mutated in place (mirrors the Vue object mutation model).
  const messagesByConvo = React.useRef<Record<string, Message[]>>(initialMessagesByConvo)
  const [, setMsgVersion] = React.useState(0)
  const [search, setSearch] = React.useState('')
  const [activeId, setActiveId] = React.useState<string>('c1')
  const [draft, setDraft] = React.useState('')
  const [peerTyping, setPeerTyping] = React.useState(false)
  const scrollRoot = React.useRef<HTMLDivElement | null>(null)
  const composerRef = React.useRef<HTMLTextAreaElement | null>(null)
  const sendRef = React.useRef<() => void>(() => {})

  const activeConvo = React.useMemo(
    () => conversations.find((c) => c.id === activeId)!,
    [conversations, activeId],
  )
  const activeMessages = React.useMemo<Message[]>(
    () => messagesByConvo.current[activeId] ?? [],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [activeId, peerTyping, draft],
  )

  const filteredConvos = React.useMemo(() => {
    const q = search.trim().toLowerCase()
    const list = q
      ? conversations.filter((c) => c.name.toLowerCase().includes(q) || c.lastMessage.toLowerCase().includes(q))
      : conversations
    return [...list].sort((a, b) => {
      if (a.pinned !== b.pinned) return a.pinned ? -1 : 1
      return b.lastAt.getTime() - a.lastAt.getTime()
    })
  }, [conversations, search])

  const groupedMessages = React.useMemo(() => {
    const groups: Array<{ label: string; items: Message[] }> = []
    for (const m of activeMessages) {
      const label = dayLabel(m.sentAt)
      const last = groups[groups.length - 1]
      if (last && last.label === label) last.items.push(m)
      else groups.push({ label, items: [m] })
    }
    return groups
  }, [activeMessages])

  function scrollToBottom() {
    if (!scrollRoot.current) return
    scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight
  }

  function selectConvo(id: string) {
    setActiveId(id)
    setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, unread: 0 } : c)))
  }

  // Scroll to bottom whenever the active thread changes.
  React.useEffect(() => {
    scrollToBottom()
  }, [activeId])

  function send() {
    const body = draft.trim()
    if (!body) return
    const list = messagesByConvo.current[activeId] ?? []
    list.push({ id: `m${Date.now()}`, author: 'me', body, sentAt: new Date(), status: 'sent' })
    messagesByConvo.current[activeId] = list
    setDraft('')
    setConversations((prev) =>
      prev.map((c) => (c.id === activeId ? { ...c, lastMessage: `You: ${body}`, lastAt: new Date() } : c)),
    )
    setMsgVersion((v) => v + 1)
    requestAnimationFrame(scrollToBottom)
    setPeerTyping(true)
    window.setTimeout(() => setPeerTyping(false), 1600)
  }

  // The Textarea primitive's `onKeyDown` prop fires with no event, so attach a
  // native keydown listener to the underlying <textarea> for Enter-to-send.
  React.useEffect(() => {
    sendRef.current = send
  })

  React.useEffect(() => {
    const el = composerRef.current
    if (!el) return
    function onComposerKey(e: KeyboardEvent) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        sendRef.current()
      }
    }
    el.addEventListener('keydown', onComposerKey)
    return () => el.removeEventListener('keydown', onComposerKey)
  }, [])

  return (
    <div className="bg-card text-card-foreground grid h-[680px] w-full grid-cols-[280px_1fr] overflow-hidden rounded-xl border shadow-sm">
      <aside className="bg-muted/30 flex min-w-0 flex-col border-r">
        <div className="flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
          <h2 className="text-sm font-semibold tracking-tight">Messages</h2>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="size-8" aria-label="Filter">
              <Filter className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="New conversation">
              <SquarePen className="size-4" />
            </Button>
          </div>
        </div>
        <div className="px-3 pt-3 pb-2">
          <div className="relative">
            <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search"
              className="h-8 rounded-lg pl-8 text-xs"
            />
          </div>
        </div>
        <div className="convo-scroll flex-1 overflow-y-auto pb-3">
          {filteredConvos.map((c) => (
            <button
              key={c.id}
              className={`flex w-full items-start gap-3 px-3 py-2.5 text-left transition-colors ${
                c.id === activeId ? 'bg-primary/10' : 'hover:bg-muted/60'
              }`}
              onClick={() => selectConvo(c.id)}
            >
              <div className="relative shrink-0">
                <Avatar className="size-9">
                  {c.avatarUrl && <AvatarImage src={c.avatarUrl} alt={c.name} />}
                  <AvatarFallback className="text-[11px]">{c.initials}</AvatarFallback>
                </Avatar>
                {c.online && (
                  <span className="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
                )}
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-1.5">
                  <p className={`truncate text-[13px] ${c.unread > 0 ? 'font-semibold' : 'font-medium'}`}>
                    {c.name}
                  </p>
                  <span className="text-muted-foreground shrink-0 text-[10px] tabular-nums">
                    {formatConvoTime(c.lastAt)}
                  </span>
                </div>
                <div className="mt-0.5 flex items-center justify-between gap-1.5">
                  <p className={`truncate text-xs ${c.unread > 0 ? 'text-foreground/80' : 'text-muted-foreground'}`}>
                    {c.lastMessage}
                  </p>
                  <div className="flex shrink-0 items-center gap-1">
                    {c.pinned && <Pin className="text-muted-foreground size-3" />}
                    {c.unread > 0 && (
                      <span className="bg-primary text-primary-foreground inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold tabular-nums">
                        {c.unread}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>
      </aside>

      <section className="flex min-w-0 flex-col">
        <header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
          <div className="flex min-w-0 items-center gap-3">
            <div className="relative">
              <Avatar className="size-9">
                <AvatarFallback className="text-xs font-medium">{activeConvo.initials}</AvatarFallback>
              </Avatar>
              {activeConvo.online && (
                <span className="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
              )}
            </div>
            <div className="min-w-0">
              <p className="truncate text-sm font-semibold tracking-tight">{activeConvo.name}</p>
              <p className="text-muted-foreground truncate text-xs">
                {activeConvo.online ? 'Active now' : 'Active 2h ago'}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="size-8" aria-label="Voice call">
              <Phone className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="Video call">
              <Video className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="More options">
              <MoreVertical className="size-4" />
            </Button>
          </div>
        </header>

        <div ref={scrollRoot} className="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
          {groupedMessages.map((group) => (
            <div key={group.label} className="space-y-3">
              <div className="flex items-center justify-center">
                <span className="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-[10px] font-medium tracking-wide uppercase">
                  {group.label}
                </span>
              </div>
              {group.items.map((m) => (
                <div
                  key={m.id}
                  className={`flex items-end gap-2 ${m.author === 'me' ? 'justify-end' : 'justify-start'}`}
                >
                  {m.author === 'them' && (
                    <Avatar className="size-7">
                      <AvatarFallback className="text-[10px]">{activeConvo.initials}</AvatarFallback>
                    </Avatar>
                  )}
                  <div
                    className={`flex max-w-[78%] flex-col gap-1 ${m.author === 'me' ? 'items-end' : 'items-start'}`}
                  >
                    <div
                      className={`rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm ${
                        m.author === 'me'
                          ? 'bg-primary text-primary-foreground rounded-br-md'
                          : 'bg-muted text-foreground rounded-bl-md'
                      }`}
                    >
                      {m.body}
                    </div>
                    <div className="text-muted-foreground flex items-center gap-1 px-1 text-[10px] tabular-nums">
                      <span>{formatTime(m.sentAt)}</span>
                      {m.author === 'me' && m.status === 'read' && <CheckCheck className="text-info size-3" />}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ))}

          {peerTyping && (
            <div className="flex items-end gap-2">
              <Avatar className="size-7">
                <AvatarFallback className="text-[10px]">{activeConvo.initials}</AvatarFallback>
              </Avatar>
              <div className="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
                <span className="typing-dot" />
                <span className="typing-dot" style={{ animationDelay: '0.15s' }} />
                <span className="typing-dot" style={{ animationDelay: '0.3s' }} />
              </div>
            </div>
          )}
        </div>

        <div className="bg-muted/20 border-t px-4 py-3">
          <div className="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4">
            <Textarea
              ref={composerRef}
              value={draft}
              onValueChange={setDraft}
              placeholder={`Message ${activeConvo.name.split(' ')[0]}`}
              rows={1}
              inputClassName="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none focus-visible:ring-0"
            />
            <div className="flex items-center justify-between gap-2 px-2 pb-2">
              <div className="flex items-center gap-0.5">
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Attach file"
                >
                  <Paperclip className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Emoji"
                >
                  <Smile className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-muted-foreground hover:text-foreground size-8"
                  aria-label="Mention"
                >
                  <AtSign className="size-4" />
                </Button>
              </div>
              <div className="flex items-center gap-2">
                <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex">
                  <span>↵</span>
                </kbd>
                <Button
                  className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                  disabled={!draft.trim()}
                  aria-label="Send"
                  onClick={send}
                >
                  Send
                  <ArrowRight className="size-3.5" />
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        .chat-scroll::-webkit-scrollbar,
        .convo-scroll::-webkit-scrollbar {
          width: 6px;
        }
        .chat-scroll::-webkit-scrollbar-thumb,
        .convo-scroll::-webkit-scrollbar-thumb {
          background: var(--border);
          border-radius: 3px;
        }
        .typing-dot {
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 9999px;
          background: currentColor;
          opacity: 0.5;
          animation: typing-bounce 1s infinite ease-in-out;
        }
        @keyframes typing-bounce {
          0%,
          80%,
          100% {
            transform: translateY(0);
            opacity: 0.35;
          }
          40% {
            transform: translateY(-3px);
            opacity: 0.9;
          }
        }
      `}</style>
    </div>
  )
}

```

## checkbox

- type: `registry:ui`
- description: Standalone or in-form binary toggle, built on Radix UI. Supports indeterminate state for tri-state lists, sizes, and proper keyboard / screen-reader behavior. Pair with Label for clickable text.
- npm deps: `@radix-ui/react-checkbox`, `lucide-react`

### `packages/registry-react/components/checkbox/checkbox.tsx`

```tsx
'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
import { Check, Minus, Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface CheckboxProps
  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'defaultChecked'> {
  /** The controlled checked state of the checkbox. */
  checked?: boolean | 'indeterminate'
  /** The default checked state when uncontrolled. */
  defaultChecked?: boolean | 'indeterminate'
  /** The value given as data when submitted with a name. */
  value?: string
  /** Id of the element */
  id?: string
  /** Size of the checkbox */
  size?: 'sm' | 'md' | 'lg'
  /** Custom color for the checked state - matches Vuetify color system */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Label text displayed next to the checkbox */
  label?: string
  /** Hint text shown below the checkbox */
  hint?: string
  /** Error message to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** When `true`, prevents the user from interacting with the checkbox */
  disabled?: boolean
  /** When `true`, shows an indeterminate state */
  indeterminate?: boolean
  /** Density of the checkbox - affects spacing */
  density?: 'compact' | 'default' | 'comfortable'
  /** When `true`, the icon is hidden */
  hideIcon?: boolean
  /** Loading state - shows a spinner */
  loading?: boolean
  /** Label position - before or after the checkbox */
  labelPosition?: 'before' | 'after'
  /** Whether the checkbox appears flat (no elevation) */
  flat?: boolean
  /** Inline text style */
  inline?: boolean
  /** Name attribute for form submission */
  name?: string
}

// Size classes
const sizeClasses = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-5',
}

const iconSizes = {
  sm: 'size-2.5',
  md: 'size-3.5',
  lg: 'size-4',
}

// Color classes for checked state
const colorClasses: Record<string, string> = {
  primary:
    'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary',
  secondary:
    'data-[state=checked]:bg-secondary data-[state=checked]:border-secondary data-[state=indeterminate]:bg-secondary data-[state=indeterminate]:border-secondary',
  success:
    'data-[state=checked]:bg-[var(--success)] data-[state=checked]:border-[var(--success)] data-[state=indeterminate]:bg-[var(--success)] data-[state=indeterminate]:border-[var(--success)]',
  warning:
    'data-[state=checked]:bg-[var(--warning)] data-[state=checked]:border-[var(--warning)] data-[state=indeterminate]:bg-[var(--warning)] data-[state=indeterminate]:border-[var(--warning)]',
  error:
    'data-[state=checked]:bg-destructive data-[state=checked]:border-destructive data-[state=indeterminate]:bg-destructive data-[state=indeterminate]:border-destructive',
  info: 'data-[state=checked]:bg-[var(--info)] data-[state=checked]:border-[var(--info)] data-[state=indeterminate]:bg-[var(--info)] data-[state=indeterminate]:border-[var(--info)]',
}

// Density classes
const densityClasses = {
  compact: 'gap-1',
  default: 'gap-2',
  comfortable: 'gap-3',
}

const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
  (
    {
      className,
      checked,
      defaultChecked,
      value,
      id,
      size = 'md',
      color = 'primary',
      label,
      hint,
      errorMessages,
      error,
      disabled,
      indeterminate,
      density = 'default',
      hideIcon = false,
      loading,
      labelPosition = 'after',
      flat = false,
      inline = false,
      name,
      children,
      ...props
    },
    ref,
  ) => {
    const hasError =
      Boolean(error) ||
      Boolean(errorMessages && (typeof errorMessages === 'string' ? errorMessages : errorMessages.length > 0))

    // Determine if the checkbox is in an indeterminate state
    const isIndeterminate = Boolean(indeterminate) || checked === 'indeterminate'

    const resolvedChecked: boolean | 'indeterminate' | undefined = isIndeterminate ? 'indeterminate' : checked

    const checkboxClasses = cn(
      'peer border-input data-[state=checked]:text-primary-foreground data-[state=indeterminate]:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 rounded-[4px] border shadow-xs transition-colors duration-200 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
      sizeClasses[size],
      colorClasses[color] || colorClasses.primary,
      hasError &&
        'border-destructive data-[state=checked]:!bg-destructive data-[state=checked]:!border-destructive data-[state=indeterminate]:!bg-destructive data-[state=indeterminate]:!border-destructive',
      flat && 'shadow-none',
      className,
    )

    const labelClasses = cn(
      'cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
      hasError ? 'text-destructive' : '',
      disabled && 'cursor-not-allowed opacity-50',
    )

    return (
      <div className={cn('flex items-start', densityClasses[density], inline ? 'inline-flex' : 'flex-col')}>
        {label && labelPosition === 'before' && (
          <label htmlFor={id} className={cn('mr-2', labelClasses)}>
            {label}
          </label>
        )}

        <div className="flex items-center">
          <CheckboxPrimitive.Root
            ref={ref}
            data-slot="checkbox"
            id={id}
            value={value}
            name={name}
            disabled={disabled}
            checked={resolvedChecked}
            defaultChecked={defaultChecked}
            className={checkboxClasses}
            {...props}
          >
            <CheckboxPrimitive.Indicator
              data-uipkge=""
              data-slot="checkbox-indicator"
              forceMount={isIndeterminate || hideIcon ? true : undefined}
              className="grid place-content-center text-current transition-none"
            >
              {children ?? (
                <>
                  {loading ? (
                    <Loader2 className={cn(iconSizes[size], 'animate-spin')} />
                  ) : isIndeterminate ? (
                    <Minus className={iconSizes[size]} />
                  ) : !hideIcon ? (
                    <Check className={iconSizes[size]} />
                  ) : null}
                </>
              )}
            </CheckboxPrimitive.Indicator>
          </CheckboxPrimitive.Root>

          {label && labelPosition === 'after' && (
            <label htmlFor={id} className={cn('ml-2', labelClasses)}>
              {label}
            </label>
          )}
        </div>

        {hint && !hasError && <p className="text-muted-foreground mt-1 text-xs">{hint}</p>}

        {hasError && (
          <div className="mt-1 flex flex-col gap-0.5">
            {typeof errorMessages === 'string' ? (
              <p className="text-destructive text-xs">{errorMessages}</p>
            ) : (
              errorMessages?.map((msg, i) => (
                <p key={i} className="text-destructive text-xs">
                  {msg}
                </p>
              ))
            )}
          </div>
        )}
      </div>
    )
  },
)
Checkbox.displayName = 'Checkbox'

export interface CheckboxOption {
  label: string
  value: string
  disabled?: boolean
}

export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
  /** The value of the checkbox items that should be checked when initially rendered. */
  defaultValue?: string[]
  /** The controlled value of checked items. */
  value?: string[]
  /** Called when the checked items change. */
  onValueChange?: (value: string[]) => void
  /** When `true`, prevents the user from interacting with the checkboxes. */
  disabled?: boolean
  /** Specifies whether the checkbox group is in an error state */
  error?: boolean
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Label for the group */
  label?: string
  /** Hint text for the group */
  hint?: string
  /** The orientation of the checkboxes */
  orientation?: 'horizontal' | 'vertical'
  /** Whether to show a border around the group */
  bordered?: boolean
  /** Density of the checkboxes */
  density?: 'compact' | 'default' | 'comfortable'
  /** Options to render as checkboxes automatically */
  options?: (string | CheckboxOption)[]
  /** Name attribute for all checkboxes in the group */
  name?: string
  /** Inline layout (alias for horizontal) */
  inline?: boolean
}

const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
  (
    {
      className,
      defaultValue,
      value,
      onValueChange,
      disabled,
      error,
      errorMessages,
      label,
      hint,
      orientation = 'vertical',
      bordered = false,
      density = 'default',
      options,
      name,
      inline,
      children,
      ...props
    },
    ref,
  ) => {
    const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue ?? [])
    const isControlled = value !== undefined
    const selected = isControlled ? value : internalValue

    const setSelected = React.useCallback(
      (next: string[]) => {
        if (!isControlled) setInternalValue(next)
        onValueChange?.(next)
      },
      [isControlled, onValueChange],
    )

    const toggle = React.useCallback(
      (optionValue: string, checked: boolean | 'indeterminate') => {
        const isChecked = checked === true
        const next = isChecked ? [...selected, optionValue] : selected.filter((v) => v !== optionValue)
        setSelected(next)
      },
      [selected, setSelected],
    )

    const actualOrientation = inline ? 'horizontal' : orientation

    return (
      <div
        ref={ref}
        data-slot="checkbox-group"
        role="group"
        data-orientation={actualOrientation}
        className={cn(
          'flex flex-col gap-2',
          actualOrientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
          bordered && 'rounded-lg border p-4',
          className,
        )}
        {...props}
      >
        {label && <label className="text-sm font-medium">{label}</label>}

        {hint && !error && <p className="text-muted-foreground text-xs">{hint}</p>}

        <div
          className={cn(
            'flex gap-4',
            actualOrientation === 'horizontal' ? 'flex-row flex-wrap items-center' : 'flex-col',
          )}
        >
          {options && options.length > 0
            ? options.map((option, i) => {
                const optValue = typeof option === 'string' ? option : option.value
                const optLabel = typeof option === 'string' ? option : option.label
                const optDisabled = typeof option === 'string' ? undefined : option.disabled
                return (
                  <Checkbox
                    key={i}
                    value={optValue}
                    label={optLabel}
                    disabled={disabled || optDisabled}
                    name={name}
                    density={density}
                    checked={selected.includes(optValue)}
                    onCheckedChange={(checked) => toggle(optValue, checked)}
                  />
                )
              })
            : children}
        </div>

        {(error || errorMessages) && (
          <div className="flex flex-col gap-0.5">
            {typeof errorMessages === 'string' ? (
              <p className="text-destructive text-xs">{errorMessages}</p>
            ) : (
              errorMessages?.map((msg, i) => (
                <p key={i} className="text-destructive text-xs">
                  {msg}
                </p>
              ))
            )}
          </div>
        )}
      </div>
    )
  },
)
CheckboxGroup.displayName = 'CheckboxGroup'

export { Checkbox, CheckboxGroup }

```

### `packages/registry-react/components/checkbox/index.ts`

```ts
export {
  Checkbox,
  CheckboxGroup,
  type CheckboxProps,
  type CheckboxGroupProps,
  type CheckboxOption,
} from './checkbox'

```

## checkout-flow

- type: `registry:block`
- description: Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
- npm deps: `lucide-react`
- registry deps: `payment-card`, `payment-form`, `button`, `input`, `label`, `stepper`, `separator`

### `packages/registry-react/blocks/checkout-flow/CheckoutFlow.tsx`

```tsx
'use client'

import * as React from 'react'
import { ArrowLeft, Minus, Plus, Trash2 } from 'lucide-react'
import { PaymentCard } from '@/components/ui/payment-card'
import { Button } from '@/components/ui/button'
import { Stepper } from '@/components/ui/stepper'
import { Separator } from '@/components/ui/separator'
import { PaymentForm } from '@/components/blocks/PaymentForm'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'
interface PaymentPayload {
  number: string
  name: string
  expiry: string
  cvc: string
  brand: CardBrand
}

interface CartItem {
  id: string
  name: string
  image?: string
  qty: number
  price: number
}

export interface CheckoutFlowProps {
  items: CartItem[]
  currency?: string
  shippingFee?: number
  taxRate?: number
  onSubmit?: (data: PaymentPayload) => Promise<{ orderId: string }>
  onComplete?: (payload: { orderId: string }) => void
  onCancel?: () => void
}

type Step = 'cart' | 'payment' | 'confirm' | 'success' | 'error'

interface Particle {
  id: number
  x: number
  y: number
  vx: number
  vy: number
  rot: number
  vr: number
  color: string
  size: number
}

const STYLE_ID = 'checkout-flow-styles'
const STYLE_CONTENT = `
.checkout-flow-anim-forward,
.checkout-flow-anim-back {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}
.checkout-flow-anim-forward {
  animation-name: checkout-flow-forward;
}
.checkout-flow-anim-back {
  animation-name: checkout-flow-back;
}
@keyframes checkout-flow-forward {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes checkout-flow-back {
  from { transform: translateX(-24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.checkout-flow-check-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkout-flow-check-draw 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms forwards;
}
@keyframes checkout-flow-check-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-flow-anim-forward,
  .checkout-flow-anim-back {
    animation-duration: 0ms;
  }
  .checkout-flow-check-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
}
`

const stepperSteps = [{ id: 'cart', title: 'Cart' }, { id: 'payment', title: 'Payment' }, { id: 'confirm', title: 'Confirm' }]

export function CheckoutFlow({
  items,
  currency = 'USD',
  shippingFee = 0,
  taxRate = 0,
  onSubmit,
  onComplete,
  onCancel,
}: CheckoutFlowProps) {
  const [step, setStep] = React.useState<Step>('cart')
  const [direction, setDirection] = React.useState<'forward' | 'back'>('forward')

  const [cart, setCart] = React.useState<CartItem[]>(() => items.map((i) => ({ ...i })))
  const [paymentPayload, setPaymentPayload] = React.useState<PaymentPayload | null>(null)
  const [orderId, setOrderId] = React.useState<string | null>(null)
  const [lastError, setLastError] = React.useState<Error | null>(null)
  const [placing, setPlacing] = React.useState(false)

  // Mirror Vue's watch(() => props.items): reset the working cart when the
  // incoming items prop changes.
  React.useEffect(() => {
    setCart(items.map((i) => ({ ...i })))
  }, [items])

  // Inject keyframes + reduced-motion rules once.
  React.useEffect(() => {
    if (typeof document === 'undefined') return
    if (document.getElementById(STYLE_ID)) return
    const el = document.createElement('style')
    el.id = STYLE_ID
    el.textContent = STYLE_CONTENT
    document.head.appendChild(el)
  }, [])

  function go(next: Step) {
    const order: Record<Step, number> = { cart: 0, payment: 1, confirm: 2, success: 3, error: 3 }
    setDirection(order[next] >= order[step] ? 'forward' : 'back')
    setStep(next)
  }

  const subtotal = React.useMemo(() => cart.reduce((s, i) => s + i.qty * i.price, 0), [cart])
  const tax = React.useMemo(() => subtotal * taxRate, [subtotal, taxRate])
  const total = React.useMemo(() => subtotal + shippingFee + tax, [subtotal, shippingFee, tax])

  const fmt = (n: number) => {
    try {
      return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n)
    } catch {
      return `${currency} ${n.toFixed(2)}`
    }
  }

  const stepIndex = step === 'cart' ? 1 : step === 'payment' ? 2 : 3

  function dec(item: CartItem) {
    if (item.qty > 1) setCart((prev) => prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty - 1 } : i)))
  }
  function inc(item: CartItem) {
    setCart((prev) => prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty + 1 } : i)))
  }
  function remove(item: CartItem) {
    setCart((prev) => prev.filter((i) => i.id !== item.id))
  }

  async function placeOrder() {
    if (!paymentPayload || placing) return
    setPlacing(true)
    try {
      let nextOrderId: string
      if (onSubmit) {
        const res = await onSubmit(paymentPayload)
        nextOrderId = res?.orderId ?? Math.random().toString(36).slice(2, 10).toUpperCase()
      } else {
        nextOrderId = Math.random().toString(36).slice(2, 10).toUpperCase()
      }
      setOrderId(nextOrderId)
      onComplete?.({ orderId: nextOrderId })
      go('success')
    } catch (err) {
      setLastError(err instanceof Error ? err : new Error(String(err)))
      go('error')
    } finally {
      setPlacing(false)
    }
  }

  function onPaymentSuccess() {
    go('confirm')
  }

  function captureFormPayload(payload: PaymentPayload) {
    setPaymentPayload(payload)
  }

  // Confetti — 60 particles, simple physics, ~1.8s
  const [particles, setParticles] = React.useState<Particle[]>([])
  const confettiRaf = React.useRef<number | null>(null)
  const reducedMotion =
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
      : false

  const fireConfetti = React.useCallback(() => {
    if (reducedMotion) return
    // Pull theme tokens at runtime so confetti follows the active palette
    // (light/dark mode + any consumer theme override). Falls back to a
    // sensible default if the variable isn't defined.
    const cs = typeof window !== 'undefined' ? getComputedStyle(document.documentElement) : null
    const tok = (name: string, fallback: string) => cs?.getPropertyValue(name).trim() || fallback
    const colors = [
      tok('--chart-1', 'oklch(0.65 0.18 145)'),
      tok('--chart-2', 'oklch(0.6 0.22 260)'),
      tok('--chart-3', 'oklch(0.7 0.16 75)'),
      tok('--chart-4', 'oklch(0.65 0.2 330)'),
      tok('--chart-5', 'oklch(0.6 0.22 30)'),
      tok('--primary', 'oklch(0.55 0.22 260)'),
    ]
    const initial: Particle[] = Array.from({ length: 60 }, (_, id) => ({
      id,
      x: 50,
      y: 40,
      vx: (Math.random() - 0.5) * 12,
      vy: -Math.random() * 14 - 4,
      rot: Math.random() * 360,
      vr: (Math.random() - 0.5) * 20,
      color: colors[Math.floor(Math.random() * colors.length)],
      size: 4 + Math.random() * 6,
    }))
    setParticles(initial)
    const start = performance.now()
    const tick = (now: number) => {
      const elapsed = now - start
      if (elapsed > 1800) {
        setParticles([])
        confettiRaf.current = null
        return
      }
      setParticles((prev) =>
        prev.map((p) => ({
          ...p,
          x: p.x + p.vx * 0.25,
          y: p.y + p.vy * 0.25,
          vy: p.vy + 0.45,
          rot: p.rot + p.vr,
        })),
      )
      confettiRaf.current = requestAnimationFrame(tick)
    }
    confettiRaf.current = requestAnimationFrame(tick)
  }, [reducedMotion])

  React.useEffect(() => {
    if (step === 'success') fireConfetti()
  }, [step, fireConfetti])

  React.useEffect(() => {
    return () => {
      if (confettiRaf.current) cancelAnimationFrame(confettiRaf.current)
    }
  }, [])

  const animClass = direction === 'forward' ? 'checkout-flow-anim-forward' : 'checkout-flow-anim-back'

  return (
    <div className="bg-card text-card-foreground mx-auto w-full max-w-3xl overflow-hidden rounded-xl border shadow-sm">
      {/* Stepper header (hidden on end states) */}
      {step !== 'success' && step !== 'error' && (
        <div className="bg-muted/30 border-b px-6 py-4">
          <Stepper steps={stepperSteps} value={stepIndex} />
        </div>
      )}

      <div className="relative min-h-[420px]">
        {/* CART */}
        {step === 'cart' && (
          <div key="cart" className={`p-6 ${animClass}`}>
            <h3 className="mb-4 text-lg font-semibold">Your cart</h3>

            {cart.length === 0 ? (
              <div className="text-muted-foreground py-12 text-center text-sm">Your cart is empty.</div>
            ) : (
              <ul className="divide-border divide-y">
                {cart.map((item) => (
                  <li key={item.id} className="flex items-center gap-3 py-3">
                    <div className="bg-muted size-14 shrink-0 overflow-hidden rounded-md">
                      {item.image && <img src={item.image} alt={item.name} className="size-full object-cover" />}
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-sm font-medium">{item.name}</p>
                      <p className="text-muted-foreground text-xs">{fmt(item.price)} each</p>
                    </div>
                    <div className="flex items-center gap-1">
                      <Button variant="outline" size="icon-sm" aria-label="Decrease" onClick={() => dec(item)}>
                        <Minus className="size-3.5" />
                      </Button>
                      <span className="w-8 text-center text-sm tabular-nums">{item.qty}</span>
                      <Button variant="outline" size="icon-sm" aria-label="Increase" onClick={() => inc(item)}>
                        <Plus className="size-3.5" />
                      </Button>
                    </div>
                    <div className="w-20 text-right text-sm font-medium tabular-nums">{fmt(item.qty * item.price)}</div>
                    <Button variant="ghost" size="icon-sm" aria-label="Remove" onClick={() => remove(item)}>
                      <Trash2 className="text-muted-foreground size-4" />
                    </Button>
                  </li>
                ))}
              </ul>
            )}

            <Separator className="my-4" />

            <dl className="space-y-1.5 text-sm">
              <div className="flex justify-between">
                <dt className="text-muted-foreground">Subtotal</dt>
                <dd>{fmt(subtotal)}</dd>
              </div>
              {shippingFee > 0 && (
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Shipping</dt>
                  <dd>{fmt(shippingFee)}</dd>
                </div>
              )}
              {taxRate > 0 && (
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Tax</dt>
                  <dd>{fmt(tax)}</dd>
                </div>
              )}
              <div className="flex justify-between border-t pt-2 text-base font-semibold">
                <dt>Total</dt>
                <dd>{fmt(total)}</dd>
              </div>
            </dl>

            <div className="mt-5 flex justify-between">
              <Button variant="ghost" onClick={() => onCancel?.()}>
                Cancel
              </Button>
              <Button disabled={cart.length === 0} onClick={() => go('payment')}>
                Continue to payment →
              </Button>
            </div>
          </div>
        )}

        {/* PAYMENT */}
        {step === 'payment' && (
          <div key="payment" className={`p-6 ${animClass}`}>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground mb-3 inline-flex items-center gap-1 text-sm"
              onClick={() => go('cart')}
            >
              <ArrowLeft className="size-3.5" /> Back to cart
            </button>
            <PaymentForm
              amount={total}
              currency={currency}
              onBrandChange={(b) => {
                /* parent could react */ void b
              }}
              onSuccess={onPaymentSuccess}
              onSubmit={async (payload) => {
                captureFormPayload(payload) /* defer real call to confirm step */
              }}
            />
          </div>
        )}

        {/* CONFIRM */}
        {step === 'confirm' && (
          <div key="confirm" className={`p-6 ${animClass}`}>
            <h3 className="mb-4 text-lg font-semibold">Review your order</h3>

            <div className="mb-4 flex items-start gap-4 rounded-lg border p-4">
              {paymentPayload && (
                <PaymentCard
                  number={paymentPayload.number}
                  name={paymentPayload.name}
                  expiry={paymentPayload.expiry}
                  brand={paymentPayload.brand}
                  variant="compact"
                  flip={false}
                />
              )}
              <div className="min-w-0 flex-1 text-sm">
                <p className="font-medium">Paying with card ending {paymentPayload?.number.slice(-4)}</p>
                <p className="text-muted-foreground">
                  {paymentPayload?.name} · expires {paymentPayload?.expiry}
                </p>
                <button className="text-primary mt-2 text-xs underline" onClick={() => go('payment')}>
                  Change payment method
                </button>
              </div>
            </div>

            <ul className="divide-border divide-y border-y">
              {cart.map((item) => (
                <li key={item.id} className="flex justify-between py-2 text-sm">
                  <span className="truncate">
                    {item.qty} × {item.name}
                  </span>
                  <span className="tabular-nums">{fmt(item.qty * item.price)}</span>
                </li>
              ))}
            </ul>

            <dl className="mt-3 space-y-1 text-sm">
              <div className="flex justify-between">
                <dt className="text-muted-foreground">Subtotal</dt>
                <dd>{fmt(subtotal)}</dd>
              </div>
              {shippingFee > 0 && (
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Shipping</dt>
                  <dd>{fmt(shippingFee)}</dd>
                </div>
              )}
              {taxRate > 0 && (
                <div className="flex justify-between">
                  <dt className="text-muted-foreground">Tax</dt>
                  <dd>{fmt(tax)}</dd>
                </div>
              )}
              <div className="flex justify-between border-t pt-2 text-base font-semibold">
                <dt>Total</dt>
                <dd>{fmt(total)}</dd>
              </div>
            </dl>

            <div className="mt-5 flex justify-between">
              <Button variant="outline" onClick={() => go('payment')}>
                <ArrowLeft className="mr-1.5 size-4" /> Back
              </Button>
              <Button disabled={placing} onClick={placeOrder}>
                {placing ? 'Placing order…' : `Place order · ${fmt(total)}`}
              </Button>
            </div>
          </div>
        )}

        {/* SUCCESS */}
        {step === 'success' && (
          <div key="success" className={`relative flex flex-col items-center px-6 py-14 text-center ${animClass}`}>
            {/* Confetti layer */}
            <div className="pointer-events-none absolute inset-0 overflow-hidden">
              {particles.map((p) => (
                <div
                  key={p.id}
                  className="absolute"
                  style={{
                    left: p.x + '%',
                    top: p.y + '%',
                    width: p.size + 'px',
                    height: p.size + 'px',
                    background: p.color,
                    transform: `rotate(${p.rot}deg)`,
                    borderRadius: '2px',
                  }}
                />
              ))}
            </div>

            <div className="bg-primary/10 ring-primary/30 relative grid size-20 place-items-center rounded-full ring-2">
              <svg
                viewBox="0 0 52 52"
                className="text-primary size-12"
                fill="none"
                stroke="currentColor"
                strokeWidth="4"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="M14 27 L23 36 L40 18" pathLength={100} className="checkout-flow-check-draw" />
              </svg>
            </div>
            <h3 className="mt-5 text-xl font-semibold">Order placed</h3>
            <p className="text-muted-foreground mt-1 text-sm">Thanks — a confirmation will be sent shortly.</p>
            <div className="bg-muted mt-4 inline-flex rounded-md px-3 py-1.5 font-mono text-sm">#{orderId}</div>
            <Button variant="outline" className="mt-6" onClick={() => onCancel?.()}>
              Back to home
            </Button>
          </div>
        )}

        {/* ERROR */}
        {step === 'error' && (
          <div key="error" className={`flex flex-col items-center px-6 py-14 text-center ${animClass}`}>
            <div className="bg-destructive/10 ring-destructive/30 relative grid size-20 place-items-center rounded-full ring-2">
              <svg
                viewBox="0 0 52 52"
                className="text-destructive size-12"
                fill="none"
                stroke="currentColor"
                strokeWidth="4"
                strokeLinecap="round"
                aria-hidden="true"
              >
                <path d="M16 16 L36 36 M36 16 L16 36" pathLength={100} className="checkout-flow-check-draw" />
              </svg>
            </div>
            <h3 className="mt-5 text-xl font-semibold">Payment failed</h3>
            <p className="text-muted-foreground mt-1 max-w-xs text-sm">
              {lastError?.message || 'Something went wrong while charging your card.'}
            </p>
            <div className="mt-6 flex gap-2">
              <Button variant="outline" onClick={() => onCancel?.()}>
                Cancel
              </Button>
              <Button onClick={() => go('payment')}>Try again</Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

```

## chip

- type: `registry:ui`
- description: Compact, removable tag — typically used inside `tags-input` or as a filter pill. Seven variants (`default`, `filled`, `outlined`, `elevated`, `success`, `warning`, `destructive`), three sizes, and an optional close button.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/chip/chip.tsx`

```tsx
'use client'

import * as React from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { chipVariants, type ChipVariants } from './chip.variants'

export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClose'>, ChipVariants {
  closable?: boolean
  onClose?: () => void
}

const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(
  ({ className, variant, size, closable, onClose, children, ...props }, ref) => (
    <span ref={ref} className={cn(chipVariants({ variant, size }), className)} {...props}>
      {children}
      {closable ? (
        <button
          type="button"
          aria-label={`Remove ${children ? '' : 'item'}`}
          className="focus-visible:ring-ring hover:bg-foreground/10 ml-0.5 inline-flex min-h-6 min-w-6 items-center justify-center rounded-full focus-visible:ring-1 focus-visible:outline-none"
          onClick={(e) => {
            e.stopPropagation()
            onClose?.()
          }}
        >
          <X className="size-3" aria-hidden="true" />
        </button>
      ) : null}
    </span>
  ),
)
Chip.displayName = 'Chip'

export interface ChipGroupRenderProps {
  selected: string[]
  multiple: boolean
  filter: boolean
  isSelected: (value: string) => boolean
  toggle: (value: string) => void
}

export interface ChipGroupProps {
  className?: string
  selected?: string[]
  multiple?: boolean
  filter?: boolean
  column?: boolean
  mandatory?: boolean
  max?: number
  disabled?: boolean
  onSelectedChange?: (value: string[]) => void
  children?: (props: ChipGroupRenderProps) => React.ReactNode
}

const ChipGroup = React.forwardRef<HTMLDivElement, ChipGroupProps>(
  (
    {
      className,
      selected = [],
      multiple = false,
      filter = false,
      column = false,
      mandatory = false,
      max,
      disabled = false,
      onSelectedChange,
      children,
    },
    ref,
  ) => {
    const isSelected = (value: string) => selected.includes(value)

    const toggle = (value: string) => {
      if (disabled) return

      let newSelected: string[]

      if (multiple) {
        if (isSelected(value)) {
          newSelected = selected.filter((v) => v !== value)
        } else {
          if (max && selected.length >= max) {
            newSelected = [...selected.slice(1), value]
          } else {
            newSelected = [...selected, value]
          }
        }
      } else {
        if (isSelected(value) && !mandatory) {
          newSelected = []
        } else {
          newSelected = [value]
        }
      }

      onSelectedChange?.(newSelected)
    }

    return (
      <div
        ref={ref}
        className={cn('flex flex-wrap gap-2', column && 'flex-col', filter && 'flex-wrap', className)}
        data-chip-group="true"
        data-multiple={multiple || undefined}
        data-filter={filter || undefined}
      >
        {children?.({ selected, multiple, filter, isSelected, toggle })}
      </div>
    )
  },
)
ChipGroup.displayName = 'ChipGroup'

export { Chip, ChipGroup }

```

### `packages/registry-react/components/chip/chip.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const chipVariants = cva(
  'inline-flex items-center justify-center gap-1 rounded-full text-xs font-medium w-fit whitespace-nowrap shrink-0 transition-colors duration-200 overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
  {
    variants: {
      variant: {
        default: 'bg-muted text-muted-foreground hover:bg-muted/80',
        filled: 'bg-primary text-primary-foreground hover:bg-primary/90',
        outlined: 'border border-current bg-transparent hover:bg-accent',
        elevated: 'bg-primary/10 text-primary shadow-sm hover:bg-primary/20',
        success: 'bg-[var(--success)]/10 text-[var(--success)] dark:text-[var(--success)] hover:bg-[var(--success)]/20',
        warning: 'bg-[var(--warning)]/10 text-[var(--warning)] dark:text-[var(--warning)] hover:bg-[var(--warning)]/20',
        destructive: 'bg-destructive/10 text-destructive dark:text-destructive hover:bg-destructive/20',
      },
      size: {
        sm: 'h-6 px-2 text-xs',
        default: 'h-7 px-2.5 text-xs',
        lg: 'h-8 px-3 text-sm',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ChipVariants = VariantProps<typeof chipVariants>

```

### `packages/registry-react/components/chip/index.ts`

```ts
export { Chip, ChipGroup, type ChipProps, type ChipGroupProps, type ChipGroupRenderProps } from './chip'
export { chipVariants, type ChipVariants } from './chip.variants'

```

## circular-progress

- type: `registry:ui`
- description: Radial/circular progress indicator. Supports value (0-100), size presets or custom pixel size, stroke thickness, custom arc and track colors, indeterminate spinning mode, a label slot for center content, and a show-value prop that renders the percentage in the center.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/circular-progress/CircularProgress.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { circularProgressVariants } from './circular-progress.variants'

export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Progress value 0-100. Ignored when indeterminate is true. */
  value?: number
  /** Diameter in pixels. */
  size?: 'sm' | 'default' | 'lg' | number
  /** Stroke thickness in pixels. */
  thickness?: number
  /** Progress arc color. Defaults to primary. */
  color?: string
  /** Track (background ring) color. */
  trackColor?: string
  /** Indeterminate spinning mode. */
  indeterminate?: boolean
  /** Show the numeric value in the center. */
  showValue?: boolean
  /** Suffix appended to the value (e.g. '%'). */
  suffix?: string
  /** Accessible label. */
  ariaLabel?: string
}

const sizePxMap = {
  sm: 40,
  default: 56,
  lg: 80,
} as const

const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>(
  (
    {
      className,
      value = 0,
      size = 'default',
      thickness = 8,
      color,
      trackColor,
      indeterminate = false,
      showValue = false,
      suffix = '%',
      ariaLabel = 'Progress',
      children,
      ...props
    },
    ref,
  ) => {
    const sizePx = React.useMemo(() => {
      if (typeof size === 'number') return size
      return sizePxMap[size] ?? 56
    }, [size])

    const normalizedValue = React.useMemo(() => Math.min(100, Math.max(0, value)), [value])

    const radius = React.useMemo(() => (sizePx - thickness) / 2, [sizePx, thickness])
    const circumference = React.useMemo(() => 2 * Math.PI * radius, [radius])
    const strokeDashoffset = React.useMemo(() => {
      if (indeterminate) return circumference * 0.25
      return circumference * (1 - normalizedValue / 100)
    }, [indeterminate, circumference, normalizedValue])

    const resolvedColor = React.useMemo(() => color || 'var(--primary)', [color])
    const resolvedTrackColor = React.useMemo(() => trackColor || 'var(--muted)', [trackColor])

    const viewBox = React.useMemo(() => `0 0 ${sizePx} ${sizePx}`, [sizePx])
    const center = React.useMemo(() => sizePx / 2, [sizePx])

    const fontSize = React.useMemo(() => {
      const s = sizePx
      if (s <= 40) return 'text-xs'
      if (s <= 56) return 'text-sm'
      return 'text-base'
    }, [sizePx])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="circular-progress"
        data-size={typeof size === 'string' ? size : 'custom'}
        data-indeterminate={indeterminate ? 'true' : 'false'}
        className={cn(circularProgressVariants(), className)}
        style={{ width: `${sizePx}px`, height: `${sizePx}px` }}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={indeterminate ? undefined : normalizedValue}
        aria-label={ariaLabel}
        {...props}
      >
        <style>{`
@media (prefers-reduced-motion: no-preference) {
  .animate-spin-circular {
    animation: spin-circular 1.4s linear infinite;
  }
}

@keyframes spin-circular {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
`}</style>
        <svg width={sizePx} height={sizePx} viewBox={viewBox} className="block">
          {/* Track */}
          <circle
            cx={center}
            cy={center}
            r={radius}
            fill="none"
            stroke={resolvedTrackColor}
            strokeWidth={thickness}
          />
          {/* Progress arc */}
          <g
            transform={indeterminate ? undefined : `rotate(-90 ${center} ${center})`}
            className={indeterminate ? 'animate-spin-circular' : ''}
            style={indeterminate ? { transformBox: 'fill-box', transformOrigin: 'center' } : undefined}
          >
            <circle
              cx={center}
              cy={center}
              r={radius}
              fill="none"
              stroke={resolvedColor}
              strokeWidth={thickness}
              strokeLinecap="round"
              strokeDasharray={circumference}
              strokeDashoffset={strokeDashoffset}
              className={!indeterminate ? 'transition-[stroke-dashoffset] duration-500 ease-out' : ''}
            />
          </g>
        </svg>

        {showValue || children ? (
          <div className="absolute inset-0 flex items-center justify-center">
            {children ? (
              children
            ) : (
              <span className={cn('text-foreground font-medium tabular-nums', fontSize)}>
                {Math.round(normalizedValue)}
                {suffix}
              </span>
            )}
          </div>
        ) : null}
      </div>
    )
  },
)
CircularProgress.displayName = 'CircularProgress'

export { CircularProgress }

```

### `packages/registry-react/components/circular-progress/circular-progress.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `CircularProgress.tsx` can `import { circularProgressVariants } from
 * './circular-progress.variants'` without creating a circular dependency through
 * the index. See card.variants.ts for the same pattern + the SSR symptom that
 * motivated the split.
 */
export const circularProgressVariants = cva('relative inline-flex items-center justify-center')

export type CircularProgressVariants = VariantProps<typeof circularProgressVariants>

```

### `packages/registry-react/components/circular-progress/index.ts`

```ts
export { CircularProgress, type CircularProgressProps } from './CircularProgress'
export { circularProgressVariants, type CircularProgressVariants } from './circular-progress.variants'

```

## clipboard

- type: `registry:ui`
- description: Copy-to-clipboard button with success/error feedback. Swaps the icon to a check on success, shows a tooltip with configurable feedback text, supports a visible label, disabled state, a custom timeout for feedback reset, and copy/success/error events. Includes a legacy execCommand fallback for non-secure contexts. Composes the tooltip primitive.
- npm deps: `lucide-react`, `@radix-ui/react-tooltip`
- registry deps: `tooltip`

### `packages/registry-react/components/clipboard/Clipboard.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, Copy } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'

export type ClipboardState = 'idle' | 'success' | 'error'

export interface ClipboardProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
  /** Text to copy to the clipboard. */
  text?: string
  /** Optional visible label next to the icon. */
  label?: string
  /** Disable the button (no copy, no tooltip). */
  disabled?: boolean
  /** Hide the copy icon (useful when a label is shown). */
  hideIcon?: boolean
  /** Tooltip text shown on hover before copying. */
  tooltip?: string
  /** Feedback text shown after a successful copy. */
  successText?: string
  /** Feedback text shown after a failed copy. */
  errorText?: string
  /** How long (ms) the success/error feedback stays before resetting. */
  timeout?: number
  /** Show the feedback as a tooltip rather than swapping the icon. */
  feedbackTooltip?: boolean
  /** Fired before the copy attempt with the text being copied. */
  onCopy?: (text: string) => void
  /** Fired after a successful copy. */
  onSuccess?: (text: string) => void
  /** Fired after a failed copy. */
  onError?: (error: Error) => void
  /** Render-prop children receiving the current state, or static nodes. */
  children?: React.ReactNode | ((state: ClipboardState) => React.ReactNode)
}

const Clipboard = React.forwardRef<HTMLButtonElement, ClipboardProps>(
  (
    {
      text = '',
      label = '',
      disabled = false,
      hideIcon = false,
      tooltip = 'Copy',
      successText = 'Copied!',
      errorText = 'Failed',
      timeout = 2000,
      feedbackTooltip = true,
      onCopy,
      onSuccess,
      onError,
      className,
      children,
      onClick,
      ...props
    },
    ref,
  ) => {
    const [state, setState] = React.useState<ClipboardState>('idle')
    const resetTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)

    const setFeedback = React.useCallback(
      (nextState: ClipboardState) => {
        setState(nextState)
        if (resetTimer.current) clearTimeout(resetTimer.current)
        resetTimer.current = setTimeout(() => {
          setState('idle')
        }, timeout)
      },
      [timeout],
    )

    // Match the Vue onBeforeUnmount fix: clear any pending reset timer on unmount.
    React.useEffect(() => {
      return () => {
        if (resetTimer.current) clearTimeout(resetTimer.current)
      }
    }, [])

    const copy = React.useCallback(
      async (e: React.MouseEvent<HTMLButtonElement>) => {
        if (disabled) return
        onClick?.(e)
        const value = text
        onCopy?.(value)
        try {
          if (navigator.clipboard?.writeText) {
            const write = navigator.clipboard.writeText(value)
            setFeedback('success')
            await write
          } else {
            // Legacy fallback for non-secure contexts.
            const ta = document.createElement('textarea')
            ta.value = value
            ta.style.position = 'fixed'
            ta.style.opacity = '0'
            document.body.appendChild(ta)
            ta.select()
            document.execCommand('copy')
            document.body.removeChild(ta)
            setFeedback('success')
          }
          onSuccess?.(value)
        } catch (err) {
          setFeedback('error')
          onError?.(err as Error)
        }
      },
      [disabled, text, onCopy, onSuccess, onError, onClick, setFeedback],
    )

    const currentTooltip = state === 'success' ? successText : state === 'error' ? errorText : tooltip

    return (
      <TooltipProvider delayDuration={300}>
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              type="button"
              ref={ref}
              data-uipkge=""
              data-slot="clipboard"
              data-feedback-state={state}
              disabled={disabled}
              aria-label={currentTooltip}
              onClick={copy}
              className={cn(
                'inline-flex items-center gap-1.5 rounded-md text-sm transition-colors',
                'text-muted-foreground hover:text-foreground',
                'focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
                'disabled:cursor-not-allowed disabled:opacity-50',
                className,
              )}
              {...props}
            >
              {!hideIcon && (
                <span data-slot="clipboard-icon" className="inline-flex">
                  {state === 'success' ? <Check className="size-4 text-emerald-500" /> : <Copy className="size-4" />}
                </span>
              )}
              {label && <span data-slot="clipboard-label">{label}</span>}
              {typeof children === 'function' ? children(state) : children}
            </button>
          </TooltipTrigger>
          {(feedbackTooltip || state === 'idle') && <TooltipContent>{currentTooltip}</TooltipContent>}
        </Tooltip>
      </TooltipProvider>
    )
  },
)
Clipboard.displayName = 'Clipboard'

export { Clipboard }

```

### `packages/registry-react/components/clipboard/index.ts`

```ts
export { Clipboard, type ClipboardProps, type ClipboardState } from './Clipboard'

```

## code-block

- type: `registry:ui`
- description: Read-only code preview with a header, optional filename, copy button, and `<pre>`-rendered content. Use for installation snippets, API examples, and snippets you want users to copy verbatim.
- npm deps: `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/code-block/CodeBlock.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, ChevronDown, ChevronUp, Copy } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

export interface CodeBlockProps {
  /** Source code to display. */
  code: string
  /** Language label shown in the header. */
  language?: string
  /** Render line numbers in the gutter. */
  showLineNumbers?: boolean
  /** Maximum height of the code body before scrolling kicks in. */
  maxHeight?: string
  /** Render expanded on first paint. Default true. */
  defaultExpanded?: boolean
  /** Show the language label / copy / collapse header. */
  showHeader?: boolean
  className?: string
}

function CodeBlock({
  code,
  language = 'tsx',
  showLineNumbers = true,
  maxHeight = '400px',
  defaultExpanded = true,
  showHeader = true,
  className,
}: CodeBlockProps) {
  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded)
  const [copied, setCopied] = React.useState(false)

  const lines = React.useMemo(() => code.replace(/\s+$/, '').split('\n'), [code])

  async function copyToClipboard() {
    try {
      await navigator.clipboard.writeText(code)
      setCopied(true)
      setTimeout(() => setCopied(false), 1600)
    } catch (e) {
      console.warn('Clipboard write failed', e)
    }
  }

  return (
    <div
      data-uipkge=""
      data-slot="code-block"
      className={cn('group border-border bg-muted/20 relative overflow-hidden rounded-lg border', className)}
    >
      {/* Header */}
      {showHeader && (
        <div className="border-border bg-muted/40 flex items-center justify-between gap-2 border-b px-3 py-2">
          <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">{language}</span>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="xs" className="h-7 gap-1.5 px-2" onClick={copyToClipboard}>
              {copied ? (
                <Check className="text-success size-3" aria-hidden="true" />
              ) : (
                <Copy className="size-3" aria-hidden="true" />
              )}
              <span className="text-xs">{copied ? 'Copied' : 'Copy'}</span>
            </Button>
            <Button
              variant="ghost"
              size="xs"
              className="h-7 gap-1.5 px-2"
              onClick={() => setIsExpanded((v) => !v)}
            >
              {isExpanded ? (
                <ChevronUp className="size-3" aria-hidden="true" />
              ) : (
                <ChevronDown className="size-3" aria-hidden="true" />
              )}
              <span className="text-xs">{isExpanded ? 'Hide' : 'Show'} code</span>
            </Button>
          </div>
        </div>
      )}

      {/* Code body. We render line-by-line so the gutter and the code stay in
          sync without measuring text height. The renderer is intentionally
          plain: code is displayed as-is and the consumer can layer their own
          syntax highlighter (shiki, prism, hljs) on top by replacing this
          file or by wrapping it in their own component. */}
      {isExpanded && (
        <div
          className="bg-background/40 overflow-auto font-mono text-sm leading-relaxed"
          style={{ maxHeight }}
        >
          <pre className="m-0 flex">
            {showLineNumbers && (
              <div
                aria-hidden="true"
                className="text-muted-foreground/60 sticky left-0 select-none border-r border-border/60 bg-muted/30 px-3 py-3 text-right tabular-nums"
              >
                {lines.map((_, i) => (
                  <div key={i}>{i + 1}</div>
                ))}
              </div>
            )}
            <code className="block flex-1 px-4 py-3">
              {lines.map((line, i) => (
                <React.Fragment key={i}>
                  <span>{line || ' '}</span>
                  {i < lines.length - 1 && <br />}
                </React.Fragment>
              ))}
            </code>
          </pre>
        </div>
      )}
    </div>
  )
}

export { CodeBlock }

```

### `packages/registry-react/components/code-block/index.ts`

```ts
export { CodeBlock, type CodeBlockProps } from './CodeBlock'

```

## collapsible

- type: `registry:ui`
- description: Headless single-region show/hide primitive. Use it when Accordion is overkill — a single toggle reveals one panel of content. Smooth height animation built in.
- npm deps: `@radix-ui/react-collapsible`

### `packages/registry-react/components/collapsible/collapsible.tsx`

```tsx
'use client'

import * as React from 'react'
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'

const Collapsible = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.Root ref={ref} data-uipkge="" data-slot="collapsible" {...props} />
))
Collapsible.displayName = CollapsiblePrimitive.Root.displayName

const CollapsibleTrigger = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleTrigger
    ref={ref}
    data-uipkge=""
    data-slot="collapsible-trigger"
    {...props}
  />
))
CollapsibleTrigger.displayName = CollapsiblePrimitive.CollapsibleTrigger.displayName

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent
    ref={ref}
    data-uipkge=""
    data-slot="collapsible-content"
    {...props}
  />
))
CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

```

### `packages/registry-react/components/collapsible/index.ts`

```ts
export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible'

```

## color-picker

- type: `registry:ui`
- description: Hex / RGB color input with a popover swatch grid. Supports controlled and uncontrolled modes, alpha channel, and a recent-colors row.

### `packages/registry-react/components/color-picker/color-picker.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

const DEFAULT_PRESETS = [
  '#ef4444',
  '#f97316',
  '#eab308',
  '#22c55e',
  '#14b8a6',
  '#3b82f6',
  '#8b5cf6',
  '#ec4899',
  '#ffffff',
  '#d4d4d4',
  '#737373',
  '#171717',
]

export interface ColorPickerProps {
  value?: string
  onValueChange?: (value: string) => void
  disabled?: boolean
  /** Override the swatches shown below the color input. Pass [] to hide entirely. */
  presets?: string[]
  /** Hide the hex text field next to the color trigger. */
  hideHexInput?: boolean
  className?: string
}

const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
  ({ value, onValueChange, disabled, presets = DEFAULT_PRESETS, hideHexInput = false, className }, ref) => {
    const swatches = presets ?? []

    return (
      <div ref={ref} className={cn('space-y-3', className)}>
        {/* Color trigger + hex field */}
        <div className="flex items-center gap-2">
          <div
            className="border-input relative h-10 w-10 shrink-0 overflow-hidden rounded-md border shadow-xs"
            style={{ backgroundColor: value || '#ffffff' }}
          >
            <input
              type="color"
              value={value || '#ffffff'}
              disabled={disabled}
              aria-label="Pick color"
              className="absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
              onInput={(e) => onValueChange?.((e.target as HTMLInputElement).value)}
            />
          </div>
          {!hideHexInput && (
            <input
              type="text"
              value={value || ''}
              placeholder="#000000"
              disabled={disabled}
              className="bg-background border-input text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-10 flex-1 rounded-md border px-3 text-sm uppercase shadow-xs outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
              onChange={(e) => onValueChange?.(e.target.value)}
            />
          )}
        </div>

        {/* Preset swatches */}
        {swatches.length > 0 && (
          <div className="flex flex-wrap gap-1.5">
            {swatches.map((color) => (
              <button
                type="button"
                key={color}
                disabled={disabled}
                aria-label={`Select ${color}`}
                style={{ backgroundColor: color }}
                className={cn(
                  'ring-offset-background focus-visible:ring-ring/40 size-6 shrink-0 rounded-md shadow-sm transition-transform outline-none hover:scale-110 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
                  value?.toLowerCase() === color.toLowerCase()
                    ? 'ring-foreground ring-2 ring-offset-2'
                    : 'ring-border/50 ring-1',
                  color.toLowerCase() === '#ffffff' && 'ring-border',
                )}
                onClick={() => onValueChange?.(color)}
              />
            ))}
          </div>
        )}
      </div>
    )
  },
)
ColorPicker.displayName = 'ColorPicker'

export { ColorPicker }

```

### `packages/registry-react/components/color-picker/index.ts`

```ts
export { ColorPicker, type ColorPickerProps } from './color-picker'

```

## command

- type: `registry:ui`
- description: Searchable command palette à la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and fuzzy filtering. Use as a global launcher (mounted in a Dialog) or inline as a typeahead select.
- npm deps: `cmdk`, `lucide-react`, `@radix-ui/react-dialog`

### `packages/registry-react/components/command/command.tsx`

```tsx
'use client'

import * as React from 'react'
import { Command as CommandPrimitive } from 'cmdk'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { Search } from 'lucide-react'
import { cn } from '@/lib/utils'

const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
  <CommandPrimitive
    ref={ref}
    data-uipkge=""
    data-slot="command"
    className={cn(
      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
      className,
    )}
    {...props}
  />
))
Command.displayName = CommandPrimitive.displayName

interface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
  title?: string
  description?: string
}

const CommandDialog = ({
  title = 'Command Palette',
  description = 'Search for a command to run...',
  children,
  ...props
}: CommandDialogProps) => (
  <DialogPrimitive.Root {...props}>
    <DialogPrimitive.Portal>
      <DialogPrimitive.Overlay
        data-uipkge=""
        data-slot="command-dialog-overlay"
        className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
      />
      <DialogPrimitive.Content
        data-uipkge=""
        data-slot="command-dialog"
        className="bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-lg border p-0 shadow-lg duration-200"
      >
        <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>
        <DialogPrimitive.Description className="sr-only">{description}</DialogPrimitive.Description>
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-1 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
          {children}
        </Command>
      </DialogPrimitive.Content>
    </DialogPrimitive.Portal>
  </DialogPrimitive.Root>
)

const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
  <div data-uipkge="" data-slot="command-input-wrapper" cmdk-input-wrapper="" className="flex h-9 items-center gap-2 border-b px-3">
    <Search className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
    <CommandPrimitive.Input
      ref={ref}
      data-uipkge=""
      data-slot="command-input"
      className={cn(
        'placeholder:text-muted-foreground focus-visible:ring-ring/40 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    />
  </div>
))
CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.List
    ref={ref}
    data-uipkge=""
    data-slot="command-list"
    className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
    {...props}
  />
))
CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Empty
    ref={ref}
    data-uipkge=""
    data-slot="command-empty"
    className={cn('py-6 text-center text-sm', className)}
    {...props}
  />
))
CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Group
    ref={ref}
    data-uipkge=""
    data-slot="command-group"
    className={cn(
      'text-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
      className,
    )}
    {...props}
  />
))
CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Separator
    ref={ref}
    data-uipkge=""
    data-slot="command-separator"
    className={cn('bg-border -mx-1 h-px', className)}
    {...props}
  />
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <CommandPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="command-item"
    className={cn(
      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  />
))
CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
  <span
    data-uipkge=""
    data-slot="command-shortcut"
    className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
    {...props}
  />
)
CommandShortcut.displayName = 'CommandShortcut'

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}

```

### `packages/registry-react/components/command/index.ts`

```ts
export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
} from './command'

```

## command-palette

- type: `registry:block`
- description: Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and calls `onSelect`. `showTrigger={false}` hides the inline button so the consumer can control open state from elsewhere.
- npm deps: `lucide-react`
- registry deps: `command`, `kbd`

### `packages/registry-react/blocks/command-palette/CommandPalette.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  LayoutDashboard,
  FileText,
  Inbox,
  Settings,
  Users,
  KanbanSquare,
  Search,
  type LucideIcon,
} from 'lucide-react'
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'

export interface CommandPaletteItem {
  label: string
  value?: string
  hint?: string
  icon?: LucideIcon
  onSelect?: () => void
}

export interface CommandPaletteGroup {
  heading: string
  items: CommandPaletteItem[]
}

export interface CommandPaletteProps {
  groups?: CommandPaletteGroup[]
  placeholder?: string
  triggerLabel?: string
  showTrigger?: boolean
  onSelect?: (item: CommandPaletteItem) => void
}

const defaultGroups: CommandPaletteGroup[] = [
  {
    heading: 'Navigate',
    items: [
      { label: 'Dashboard', hint: '/dashboard', icon: LayoutDashboard },
      { label: 'Inbox', hint: '/inbox', icon: Inbox },
      { label: 'Kanban', hint: '/kanban', icon: KanbanSquare },
      { label: 'Team', hint: '/team', icon: Users },
    ],
  },
  {
    heading: 'Settings',
    items: [
      { label: 'Profile', hint: '/profile', icon: FileText },
      { label: 'Settings', hint: '/settings', icon: Settings },
    ],
  },
]

export function CommandPalette({
  groups = defaultGroups,
  placeholder = 'Search pages, commands…',
  triggerLabel = 'Search pages, commands…',
  showTrigger = true,
  onSelect,
}: CommandPaletteProps) {
  const [open, setOpen] = React.useState(false)
  const [triggerShortcut, setTriggerShortcut] = React.useState('⌘K')

  function pick(item: CommandPaletteItem) {
    setOpen(false)
    item.onSelect?.()
    onSelect?.(item)
  }

  React.useEffect(() => {
    function onKeydown(e: KeyboardEvent) {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((prev) => !prev)
      }
    }
    window.addEventListener('keydown', onKeydown)
    return () => window.removeEventListener('keydown', onKeydown)
  }, [])

  React.useEffect(() => {
    if (typeof navigator === 'undefined') return
    setTriggerShortcut(/Mac|iPhone|iPad/i.test(navigator.platform) ? '⌘K' : 'Ctrl K')
  }, [])

  return (
    <>
      {showTrigger && (
        <button
          type="button"
          className="bg-secondary/50 hover:bg-secondary text-muted-foreground focus-visible:ring-ring relative hidden h-8 w-full items-center gap-2 rounded-lg border border-transparent px-2.5 text-sm shadow-none transition-colors focus-visible:ring-1 focus-visible:outline-none sm:flex md:w-[220px] lg:w-[300px]"
          aria-label="Open command palette"
          onClick={() => setOpen(true)}
        >
          <Search className="size-3.5 shrink-0" />
          <span className="flex-1 truncate text-left">{triggerLabel}</span>
          <kbd className="bg-muted/80 text-muted-foreground pointer-events-none flex h-5 items-center justify-center rounded-md border px-1.5 font-mono text-[10px] font-medium">
            <span>{triggerShortcut}</span>
          </kbd>
        </button>
      )}

      <CommandDialog
        open={open}
        onOpenChange={setOpen}
        title="Command palette"
        description="Search pages and run commands"
      >
        <CommandInput placeholder={placeholder} />
        <CommandList className="max-h-[480px]">
          <CommandEmpty>No matches.</CommandEmpty>
          {groups.map((group, gi) => (
            <React.Fragment key={group.heading}>
              <CommandGroup heading={group.heading}>
                {group.items.map((item) => {
                  const Icon = item.icon
                  return (
                    <CommandItem
                      key={`${group.heading}-${item.label}`}
                      value={`${group.heading} ${item.label} ${item.hint ?? ''}`}
                      onSelect={() => pick(item)}
                    >
                      {Icon && <Icon className="size-4" />}
                      <span>{item.label}</span>
                      {item.hint && (
                        <CommandShortcut className="text-muted-foreground/70">{item.hint}</CommandShortcut>
                      )}
                    </CommandItem>
                  )
                })}
              </CommandGroup>
              {gi < groups.length - 1 && <CommandSeparator />}
            </React.Fragment>
          ))}
        </CommandList>
      </CommandDialog>
    </>
  )
}

```

## contact-01

- type: `registry:block`
- description: Two-column contact section. Left column has eyebrow, headline, lede, three icon-prefixed contact rows (email / phone / office), and a map placeholder. Right column is a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state after submit. Emits "submit" with the form payload.
- npm deps: `lucide-react`
- registry deps: `button`, `card`, `input`, `label`, `select`, `textarea`

### `packages/registry-react/blocks/contact-01/Contact01.tsx`

```tsx
'use client'

import * as React from 'react'
import { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'

export interface Contact01Props {
  onSubmit?: (payload: {
    name: string
    email: string
    company: string
    subject: string
    message: string
  }) => void
}

export function Contact01({ onSubmit }: Contact01Props) {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [company, setCompany] = React.useState('')
  const [subject, setSubject] = React.useState('sales')
  const [message, setMessage] = React.useState('')
  const [sent, setSent] = React.useState(false)

  const canSubmit = !!name && !!email && !!message

  function submit(e: React.FormEvent) {
    e.preventDefault()
    if (!canSubmit) return
    onSubmit?.({ name, email, company, subject, message })
    setSent(true)
  }

  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-24">
        <div className="grid gap-10 lg:grid-cols-2 lg:items-start">
          <div className="space-y-6">
            <p className="text-primary text-sm font-medium tracking-widest uppercase">Contact</p>
            <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Talk to a human</h2>
            <p className="text-muted-foreground text-lg">
              Tell us a bit about your team and we'll show you how we'd fit. Average reply: 4 hours.
            </p>

            <div className="space-y-3 pt-4">
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 text-primary rounded-lg p-2">
                  <Mail className="size-4" />
                </div>
                <div>
                  <p className="text-muted-foreground text-xs uppercase">Email</p>
                  <a href="mailto:hello@acme.test" className="text-sm font-medium hover:underline"> hello@acme.test </a>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 text-primary rounded-lg p-2">
                  <Phone className="size-4" />
                </div>
                <div>
                  <p className="text-muted-foreground text-xs uppercase">Phone</p>
                  <p className="text-sm font-medium">+1 (415) 555-0142</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="bg-primary/10 text-primary rounded-lg p-2">
                  <MapPin className="size-4" />
                </div>
                <div>
                  <p className="text-muted-foreground text-xs uppercase">Office</p>
                  <p className="text-sm font-medium">120 Howard St, San Francisco</p>
                </div>
              </div>
            </div>

            <div className="bg-muted/40 mt-6 flex h-48 items-center justify-center rounded-lg border border-dashed">
              <p className="text-muted-foreground text-sm">Map placeholder</p>
            </div>
          </div>

          <Card>
            {!sent ? (
              <>
                <CardHeader>
                  <CardTitle>Send us a message</CardTitle>
                  <CardDescription>We reply during business hours (PT)</CardDescription>
                </CardHeader>
                <CardContent>
                  <form className="space-y-4" onSubmit={submit}>
                    <div className="grid gap-4 sm:grid-cols-2">
                      <div className="grid gap-2">
                        <Label htmlFor="contact-name">Name</Label>
                        <Input id="contact-name" value={name} onChange={(e) => setName(e.target.value)} required />
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="contact-email">Work email</Label>
                        <Input id="contact-email" value={email} onChange={(e) => setEmail(e.target.value)} type="email" required />
                      </div>
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="contact-company">Company</Label>
                      <Input id="contact-company" value={company} onChange={(e) => setCompany(e.target.value)} />
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="contact-subject">I'm interested in</Label>
                      <Select value={subject} onValueChange={setSubject}>
                        <SelectTrigger id="contact-subject">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="sales">Talking to sales</SelectItem>
                          <SelectItem value="support">Customer support</SelectItem>
                          <SelectItem value="partnership">Partnerships</SelectItem>
                          <SelectItem value="other">Something else</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="contact-message">Message</Label>
                      <Textarea id="contact-message" value={message} onValueChange={setMessage} placeholder="How can we help?" required />
                    </div>
                    <Button type="submit" className="w-full" disabled={!canSubmit}>
                      Send message
                      <Send className="ml-2 size-4" />
                    </Button>
                  </form>
                </CardContent>
              </>
            ) : (
              <CardContent className="space-y-4 pt-8 text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-[var(--success)]/10 text-[var(--success)]">
                  <CheckCircle2 className="size-6" />
                </div>
                <div className="space-y-1">
                  <h3 className="text-lg font-semibold">Message sent</h3>
                  <p className="text-muted-foreground text-sm">Thanks {name}, we'll be in touch within a few hours.</p>
                </div>
                <Button variant="outline" onClick={() => setSent(false)}>Send another</Button>
              </CardContent>
            )}
          </Card>
        </div>
      </div>
    </section>
  )
}

```

## contact-us

- type: `registry:block`
- description: Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
- npm deps: `lucide-react`
- registry deps: `button`, `card`, `input`, `label`, `select`, `textarea`, `map`

### `packages/registry-react/blocks/contact-us/ContactUs.tsx`

```tsx
'use client'

/**
 * Contact section — two columns. Left: eyebrow, headline, lede, icon-prefixed
 * contact rows, and a live map pinned to your office (pass `accessToken` +
 * `location`; falls back to a styled placeholder without a token). Right: a
 * Card-wrapped form (name / email / company / subject / message) that swaps to
 * a success state after submit. Emits "submit" with the payload.
 */
import * as React from 'react'
import { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { Map, MapMarker } from '@/components/ui/map'

export interface ContactUsProps {
  /** Mapbox token. Without it the map area shows a styled placeholder. */
  accessToken?: string
  /** Office [lng, lat]. */
  location?: [number, number]
  locationLabel?: string
  onSubmit?: (payload: {
    name: string
    email: string
    company: string
    subject: string
    message: string
  }) => void
}

export function ContactUs({
  accessToken = '',
  location = [-122.4194, 37.7749],
  locationLabel = 'San Francisco, CA',
  onSubmit,
}: ContactUsProps) {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [company, setCompany] = React.useState('')
  const [subject, setSubject] = React.useState('sales')
  const [message, setMessage] = React.useState('')
  const [sent, setSent] = React.useState(false)

  const canSubmit = !!name && !!email && !!message

  function submit() {
    if (!canSubmit) return
    onSubmit?.({ name, email, company, subject, message })
    setSent(true)
  }

  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid gap-10 lg:grid-cols-2 lg:items-start">
          {/* Left: copy + contact rows + map */}
          <div className="space-y-6">
            <p className="text-primary text-sm font-medium uppercase tracking-widest">Contact</p>
            <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Talk to our team</h2>
            <p className="text-muted-foreground max-w-md">
              Questions about pricing, onboarding, or a custom plan? Send a note and we'll get back within one business day.
            </p>

            <ul className="space-y-3">
              <li className="flex items-center gap-3">
                <span className="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><Mail className="size-4" /></span>
                <span className="text-sm">hello@example.com</span>
              </li>
              <li className="flex items-center gap-3">
                <span className="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><Phone className="size-4" /></span>
                <span className="text-sm">+1 (555) 010-2030</span>
              </li>
              <li className="flex items-center gap-3">
                <span className="bg-muted text-foreground flex size-9 items-center justify-center rounded-lg"><MapPin className="size-4" /></span>
                <span className="text-sm">{locationLabel}</span>
              </li>
            </ul>

            <div className="h-56 overflow-hidden rounded-xl border">
              {accessToken ? (
                <Map accessToken={accessToken} center={location} zoom={11} muted className="size-full">
                  <MapMarker longitude={location[0]} latitude={location[1]} anchor="bottom">
                    <svg viewBox="0 0 24 24" width="26" height="34" className="text-primary drop-shadow">
                      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" stroke="#fff" strokeWidth="1.5" />
                      <circle cx="12" cy="9" r="2.6" fill="#fff" />
                    </svg>
                  </MapMarker>
                </Map>
              ) : (
                <div className="bg-muted text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
                  <MapPin className="size-4" /> {locationLabel}
                </div>
              )}
            </div>
          </div>

          {/* Right: form */}
          <Card>
            {!sent ? (
              <>
                <CardHeader>
                  <CardTitle>Send a message</CardTitle>
                  <CardDescription>We'll route it to the right person.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-1.5">
                      <Label htmlFor="cu-name">Name</Label>
                      <Input id="cu-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Jane Cooper" />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="cu-email">Email</Label>
                      <Input id="cu-email" value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="jane@company.com" />
                    </div>
                  </div>
                  <div className="space-y-1.5">
                    <Label htmlFor="cu-company">Company</Label>
                    <Input id="cu-company" value={company} onChange={(e) => setCompany(e.target.value)} placeholder="Acme Inc." />
                  </div>
                  <div className="space-y-1.5">
                    <Label>Subject</Label>
                    <Select value={subject} onValueChange={setSubject}>
                      <SelectTrigger><SelectValue placeholder="Choose a topic" /></SelectTrigger>
                      <SelectContent>
                        <SelectItem value="sales">Sales</SelectItem>
                        <SelectItem value="support">Support</SelectItem>
                        <SelectItem value="partnership">Partnership</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-1.5">
                    <Label htmlFor="cu-message">Message</Label>
                    <Textarea id="cu-message" value={message} onValueChange={setMessage} rows={4} placeholder="How can we help?" />
                  </div>
                  <Button className="w-full" disabled={!canSubmit} onClick={submit}>
                    <Send className="size-4" /> Send message
                  </Button>
                </CardContent>
              </>
            ) : (
              <CardContent className="flex flex-col items-center gap-3 py-16 text-center">
                <span className="bg-success/10 text-success flex size-12 items-center justify-center rounded-full"><CheckCircle2 className="size-6" /></span>
                <p className="text-lg font-semibold">Message sent</p>
                <p className="text-muted-foreground max-w-xs text-sm">Thanks, {name} — we'll reply to {email} within one business day.</p>
                <Button variant="outline" onClick={() => setSent(false)}>Send another</Button>
              </CardContent>
            )}
          </Card>
        </div>
      </div>
    </section>
  )
}

```

## context-menu

- type: `registry:ui`
- description: Right-click menu — same primitives as Dropdown Menu but triggered by `contextmenu` events. Drop on any element you want to attach row actions, file-system style operations, or copy/paste menus to.
- npm deps: `@radix-ui/react-context-menu`, `lucide-react`

### `packages/registry-react/components/context-menu/context-menu.tsx`

```tsx
'use client'

import * as React from 'react'
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'
import { cn } from '@/lib/utils'

function ContextMenu(props: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
  return <ContextMenuPrimitive.Root data-uipkge="" data-slot="context-menu" {...props} />
}

function ContextMenuGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return <ContextMenuPrimitive.Group data-uipkge="" data-slot="context-menu-group" {...props} />
}

function ContextMenuRadioGroup(props: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
  return <ContextMenuPrimitive.RadioGroup data-uipkge="" data-slot="context-menu-radio-group" {...props} />
}

function ContextMenuSub(props: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  return <ContextMenuPrimitive.Sub data-uipkge="" data-slot="context-menu-sub" {...props} />
}

const ContextMenuPortal = ContextMenuPrimitive.Portal

const ContextMenuTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>
>(({ ...props }, ref) => (
  <ContextMenuPrimitive.Trigger ref={ref} data-uipkge="" data-slot="context-menu-trigger" {...props} />
))
ContextMenuTrigger.displayName = ContextMenuPrimitive.Trigger.displayName

const ContextMenuContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Portal>
    <ContextMenuPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="context-menu-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
        className,
      )}
      {...props}
    />
  </ContextMenuPrimitive.Portal>
))
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName

const ContextMenuItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
    inset?: boolean
    variant?: 'default' | 'destructive'
  }
>(({ className, inset, variant = 'default', ...props }, ref) => (
  <ContextMenuPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-item"
    data-inset={inset ? '' : undefined}
    data-variant={variant}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  />
))
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName

const ContextMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <ContextMenuPrimitive.CheckboxItem
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-checkbox-item"
    checked={checked}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Check className="size-4" aria-hidden="true" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.CheckboxItem>
))
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName

const ContextMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <ContextMenuPrimitive.RadioItem
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-radio-item"
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <ContextMenuPrimitive.ItemIndicator>
        <Circle className="size-2 fill-current" />
      </ContextMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </ContextMenuPrimitive.RadioItem>
))
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName

const ContextMenuLabel = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
>(({ className, inset, ...props }, ref) => (
  <ContextMenuPrimitive.Label
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-label"
    data-inset={inset ? '' : undefined}
    className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
    {...props}
  />
))
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName

const ContextMenuSeparator = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.Separator
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-separator"
    className={cn('bg-border -mx-1 my-1 h-px', className)}
    {...props}
  />
))
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName

function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
  return (
    <span
      data-uipkge=""
      data-slot="context-menu-shortcut"
      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
      {...props}
    />
  )
}

const ContextMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
>(({ className, inset, children, ...props }, ref) => (
  <ContextMenuPrimitive.SubTrigger
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-sub-trigger"
    data-inset={inset ? '' : undefined}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto" />
  </ContextMenuPrimitive.SubTrigger>
))
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName

const ContextMenuSubContent = React.forwardRef<
  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <ContextMenuPrimitive.SubContent
    ref={ref}
    data-uipkge=""
    data-slot="context-menu-sub-content"
    className={cn(
      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
      className,
    )}
    {...props}
  />
))
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
  ContextMenuPortal,
}

```

### `packages/registry-react/components/context-menu/index.ts`

```ts
export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
  ContextMenuPortal,
} from './context-menu'

```

## conversion-funnel

- type: `registry:block`
- description: Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
- registry deps: `smooth-funnel`

### `packages/registry-react/blocks/conversion-funnel/ConversionFunnel.tsx`

```tsx
/**
 * Conversion funnel: SmoothFunnel chart with count strip above and
 * stage-name + retention-from-previous strip below.
 *
 * Works for any drop-off flow with 3-6 stages: hiring (applied ->
 * hired), e-commerce (sessions -> purchases), onboarding (signed up
 * -> activated), etc. Reads as a single horizontal "flow":
 *
 *   72K        38.2K       16.8K       5.6K
 *   ╔══════╗╔════════╗╔══════════╗╔══════════╗
 *   ║ 100% ║║  53%   ║║   23%    ║║    8%    ║
 *   ╚══════╝╚════════╝╚══════════╝╚══════════╝
 *   Views      Cart        Checkout    Purchase
 *              -> 53%       -> 44%      -> 33%
 *
 * The middle pill (inside each band) shows the share OF THE TOP
 * stage (100%, 53%, 23%, ...). The bottom retention number shows the
 * stage-to-stage conversion -- usually the more actionable signal.
 */
import * as React from 'react'
import { cn } from '@/lib/utils'
import { SmoothFunnel } from '@/components/ui/charts/smooth-funnel'

interface Stage {
  name: string
  value: number
}

export interface ConversionFunnelProps {
  data: Stage[]
  /** SmoothFunnel container height. Defaults to 180. */
  height?: number | string
  /** Override colour palette. Defaults to the registry's chart-1..N
   *  OKLCH tokens via CSS variables (so light/dark + theme-customizer
   *  flips ripple through without any JS). Pass a literal hex array to
   *  override. */
  colors?: string[]
  /** Compact number formatter for the count strip (default toLocaleString). */
  format?: (n: number) => string
  /** Hide the retention-from-previous footer on each non-first stage. */
  hideRetention?: boolean
  className?: string
}

const DEFAULT_PALETTE = [
  'var(--chart-1)',
  'var(--chart-2)',
  'var(--chart-3)',
  'var(--chart-4)',
  'var(--chart-5)',
  'var(--chart-1)',
]

export function ConversionFunnel({
  data,
  height = 180,
  colors,
  format,
  hideRetention = false,
  className,
}: ConversionFunnelProps) {
  const palette = colors ?? DEFAULT_PALETTE
  const fmt = (v: number) => (format ? format(v) : v.toLocaleString())
  const retention = (i: number) => {
    if (i === 0) return null
    const prev = data[i - 1]?.value ?? 1
    return Math.round((data[i]!.value / prev) * 100)
  }

  return (
    <div data-uipkge="" data-slot="conversion-funnel" className={cn('space-y-2', className)}>
      {/* Top: per-stage count */}
      <div
        className="grid px-2 text-center"
        style={{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }}
      >
        {data.map((stage) => (
          <div key={`top-${stage.name}`} className="text-foreground text-base font-bold tabular-nums">
            {fmt(stage.value)}
          </div>
        ))}
      </div>

      {/* Funnel SVG */}
      <SmoothFunnel data={data} height={height} colors={palette} />

      {/* Bottom: stage name + retention from previous */}
      <div
        className="grid px-2 text-center"
        style={{ gridTemplateColumns: `repeat(${data.length}, minmax(0, 1fr))` }}
      >
        {data.map((stage, i) => (
          <div key={`bot-${stage.name}`} className="space-y-0.5">
            <p className="text-muted-foreground text-xs">{stage.name}</p>
            {!hideRetention && retention(i) !== null && (
              <p className="text-info text-[10px] font-semibold tabular-nums">→ {retention(i)}% retained</p>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

```

## cost-breakdown

- type: `registry:block`
- description: Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
- npm deps: `echarts`, `echarts-for-react`
- registry deps: `bar-chart`, `pie-chart`

### `packages/registry-react/blocks/cost-breakdown/CostBreakdown.tsx`

```tsx
'use client'

// Three-panel cost breakdown: a stacked-by-week bar over time on top,
// and two side-by-side categorical pie charts below (cost share by
// lane + by carrier). The patterns repeat across spend dashboards;
// swap `weeklySeries`, `byLane`, and `byCarrier` to repoint.
//
// All three panels are theme-aware: bar colors come from
// chartColors via the wrappers; pies surface inline value labels so
// the panels read at a glance without leaning on the legend alone.
import * as React from 'react'
import { BarChart, PieChart } from '@/components/ui/charts'

interface WeekRow {
  week: string
  detentionOrigin: number
  combinedDndOrigin: number
  demurrageOrigin: number
  detentionDest: number
  demurrageDest: number
  combinedDndDest: number
}

// 17 weeks of cost data. Heavy spike in mid-Feb mirrors a closing
// quarter cleanup or a port-disruption incident.
const weeklySeries: WeekRow[] = [
  {
    week: 'Jan 26 - Feb 1',
    detentionOrigin: 2800,
    combinedDndOrigin: 0,
    demurrageOrigin: 0,
    detentionDest: 0,
    demurrageDest: 0,
    combinedDndDest: 0,
  },
  {
    week: 'Feb 2 - Feb 8',
    detentionOrigin: 1100,
    combinedDndOrigin: 0,
    demurrageOrigin: 0,
    detentionDest: 0,
    demurrageDest: 0,
    combinedDndDest: 0,
  },
  {
    week: 'Feb 9 - Feb 15',
    detentionOrigin: 1800,
    combinedDndOrigin: 3100,
    demurrageOrigin: 800,
    detentionDest: 1800,
    demurrageDest: 4300,
    combinedDndDest: 1100,
  },
  {
    week: 'Feb 16 - Feb 22',
    detentionOrigin: 0,
    combinedDndOrigin: 22000,
    demurrageOrigin: 12500,
    detentionDest: 0,
    demurrageDest: 1900,
    combinedDndDest: 35500,
  },
  {
    week: 'Feb 23 - Mar 1',
    detentionOrigin: 0,
    combinedDndOrigin: 0,
    demurrageOrigin: 3300,
    detentionDest: 800,
    demurrageDest: 6800,
    combinedDndDest: 4400,
  },
  {
    week: 'Mar 2 - Mar 8',
    detentionOrigin: 2400,
    combinedDndOrigin: 0,
    demurrageOrigin: 6400,
    detentionDest: 1200,
    demurrageDest: 2800,
    combinedDndDest: 6600,
  },
  {
    week: 'Mar 9 - Mar 15',
    detentionOrigin: 0,
    combinedDndOrigin: 0,
    demurrageOrigin: 600,
    detentionDest: 1300,
    demurrageDest: 5300,
    combinedDndDest: 5400,
  },
  {
    week: 'Mar 16 - Mar 22',
    detentionOrigin: 5400,
    combinedDndOrigin: 0,
    demurrageOrigin: 6000,
    detentionDest: 600,
    demurrageDest: 4200,
    combinedDndDest: 1400,
  },
  {
    week: 'Mar 23 - Mar 29',
    detentionOrigin: 0,
    combinedDndOrigin: 11000,
    demurrageOrigin: 4900,
    detentionDest: 0,
    demurrageDest: 4300,
    combinedDndDest: 2200,
  },
  {
    week: 'Mar 30 - Apr 5',
    detentionOrigin: 7700,
    combinedDndOrigin: 14000,
    demurrageOrigin: 5400,
    detentionDest: 1700,
    demurrageDest: 6300,
    combinedDndDest: 7200,
  },
  {
    week: 'Apr 6 - Apr 12',
    detentionOrigin: 1200,
    combinedDndOrigin: 3100,
    demurrageOrigin: 1500,
    detentionDest: 0,
    demurrageDest: 4800,
    combinedDndDest: 6300,
  },
  {
    week: 'Apr 13 - Apr 19',
    detentionOrigin: 0,
    combinedDndOrigin: 3300,
    demurrageOrigin: 3200,
    detentionDest: 3500,
    demurrageDest: 5000,
    combinedDndDest: 5700,
  },
  {
    week: 'Apr 20 - Apr 26',
    detentionOrigin: 1700,
    combinedDndOrigin: 5300,
    demurrageOrigin: 2500,
    detentionDest: 600,
    demurrageDest: 3800,
    combinedDndDest: 4800,
  },
  {
    week: 'Apr 27 - May 3',
    detentionOrigin: 6000,
    combinedDndOrigin: 15000,
    demurrageOrigin: 5500,
    detentionDest: 600,
    demurrageDest: 800,
    combinedDndDest: 2400,
  },
  {
    week: 'May 4 - May 10',
    detentionOrigin: 1900,
    combinedDndOrigin: 2200,
    demurrageOrigin: 3300,
    detentionDest: 3500,
    demurrageDest: 3700,
    combinedDndDest: 1100,
  },
  {
    week: 'May 11 - May 17',
    detentionOrigin: 1900,
    combinedDndOrigin: 1200,
    demurrageOrigin: 800,
    detentionDest: 700,
    demurrageDest: 600,
    combinedDndDest: 1200,
  },
]

const stackKeys = [
  { key: 'detentionOrigin', label: 'Detention at origin' },
  { key: 'combinedDndOrigin', label: 'Combined at origin' },
  { key: 'demurrageOrigin', label: 'Demurrage at origin' },
  { key: 'detentionDest', label: 'Detention at destination' },
  { key: 'demurrageDest', label: 'Demurrage at destination' },
  { key: 'combinedDndDest', label: 'Combined at destination' },
] as const

const stackedOption = {
  series: stackKeys.map(() => ({ stack: 'total' as const })),
  yAxis: {
    type: 'value' as const,
    axisLabel: { formatter: (v: number) => (v >= 1000 ? `$${Math.round(v / 1000)}K` : `$${v}`) },
  },
}

const byLane = [
  { name: 'LANE-01', value: 119800 },
  { name: 'LANE-02', value: 39000 },
  { name: 'LANE-03', value: 53100 },
  { name: 'LANE-04', value: 32000 },
  { name: 'LANE-05', value: 24700 },
  { name: 'LANE-06', value: 23500 },
  { name: 'LANE-07', value: 20300 },
  { name: 'LANE-08', value: 18300 },
  { name: 'LANE-09', value: 14700 },
  { name: 'OTHER', value: 8100 },
]

const byCarrier = [
  { name: 'C-ALPHA', value: 144200 },
  { name: 'C-BETA', value: 69800 },
  { name: 'C-GAMMA', value: 32700 },
  { name: 'C-DELTA', value: 31800 },
  { name: 'C-EPSILON', value: 27800 },
  { name: 'C-ZETA', value: 22600 },
  { name: 'OTHER', value: 10100 },
]

const totalAll = weeklySeries.reduce(
  (acc, w) =>
    acc +
    w.detentionOrigin +
    w.combinedDndOrigin +
    w.demurrageOrigin +
    w.detentionDest +
    w.demurrageDest +
    w.combinedDndDest,
  0,
)

const pieOption = {
  legend: { show: false },
  series: [
    {
      radius: ['0%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `$${(p.value / 1000).toFixed(1)}k\n(${p.percent}%)`,
        fontSize: 10,
        color: 'var(--background)',
      },
      labelLine: { show: false },
    },
  ],
}

const fmtUsd = (n: number) => `$${(n / 1000).toFixed(1)}k`

export function CostBreakdown() {
  return (
    <div className="space-y-6">
      {/* Weekly trend (top) */}
      <section className="bg-card border-border rounded-lg border p-5">
        <div className="mb-3 flex items-baseline justify-between gap-4">
          <div>
            <h3 className="text-[15px] font-semibold tracking-tight">Cost per day</h3>
            <p className="text-muted-foreground mt-0.5 text-xs">17-week rollup. Hover a stack to inspect the breakdown.</p>
          </div>
          <div className="text-right">
            <div className="text-muted-foreground font-mono text-xs tracking-wider uppercase">Total</div>
            <div className="text-lg font-semibold tabular-nums">{fmtUsd(totalAll)}</div>
          </div>
        </div>
        <BarChart
          data={weeklySeries}
          xField="week"
          yField={[
            'detentionOrigin',
            'combinedDndOrigin',
            'demurrageOrigin',
            'detentionDest',
            'demurrageDest',
            'combinedDndDest',
          ]}
          option={stackedOption}
          height="320"
        />
      </section>

      {/* Dual pie breakdown (bottom) */}
      <div className="grid gap-6 lg:grid-cols-2">
        <section className="bg-card border-border rounded-lg border p-5">
          <h3 className="text-[15px] font-semibold tracking-tight">Cost share by lane</h3>
          <p className="text-muted-foreground mt-0.5 mb-4 text-xs">Top 9 lanes + a grouped 'Other' bucket.</p>
          <PieChart data={byLane} option={pieOption} height="320" />
        </section>

        <section className="bg-card border-border rounded-lg border p-5">
          <h3 className="text-[15px] font-semibold tracking-tight">Cost share by carrier</h3>
          <p className="text-muted-foreground mt-0.5 mb-4 text-xs">Top 6 carriers + a grouped 'Other' bucket.</p>
          <PieChart data={byCarrier} option={pieOption} height="320" />
        </section>
      </div>
    </div>
  )
}

```

## countdown

- type: `registry:ui`
- description: Countdown timer that shows time remaining to a target date. Supports DD:HH:MM:SS, HH:MM:SS, MM:SS, and SS formats plus custom token formats, render props for days/hours/minutes/seconds, a label, leading-zero padding, a custom separator, paused state, and on-finish/tick events.

### `packages/registry-react/components/countdown/Countdown.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

type Format = 'DD:HH:MM:SS' | 'HH:MM:SS' | 'MM:SS' | 'SS'

export interface CountdownRenderProps {
  days: number
  hours: number
  minutes: number
  seconds: number
  display: string
  finished: boolean
}

export interface CountdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
  /** Target date/time. Accepts a Date, ISO string, or epoch ms number. */
  target: Date | string | number
  /** Display format. Custom tokens: DD days, HH hours, MM minutes, SS seconds. */
  format?: Format | string
  /** Pause the countdown. */
  paused?: boolean
  /** Optional label rendered above the countdown. */
  label?: string
  /** Show leading zeros (e.g. 05 vs 5). */
  pad?: boolean
  /** Separator between units. */
  separator?: string
  /** Fired once when the countdown reaches zero. */
  onFinish?: () => void
  /** Fired every tick with the remaining ms. */
  onTick?: (remaining: number) => void
  /** Render-prop override for the whole display. Receives all parts + display string. */
  children?: ((props: CountdownRenderProps) => React.ReactNode) | React.ReactNode
  /** Render-prop override for the days unit. */
  renderDays?: (days: number) => React.ReactNode
  /** Render-prop override for the hours unit. */
  renderHours?: (hours: number) => React.ReactNode
  /** Render-prop override for the minutes unit. */
  renderMinutes?: (minutes: number) => React.ReactNode
  /** Render-prop override for the seconds unit. */
  renderSeconds?: (seconds: number) => React.ReactNode
}

const Countdown = React.forwardRef<HTMLDivElement, CountdownProps>(
  (
    {
      target,
      format = 'DD:HH:MM:SS',
      paused = false,
      label = '',
      pad = true,
      separator = ':',
      onFinish,
      onTick,
      children,
      renderDays,
      renderHours,
      renderMinutes,
      renderSeconds,
      className,
      ...props
    },
    ref,
  ) => {
    const [now, setNow] = React.useState(() => Date.now())
    const [finished, setFinished] = React.useState(false)

    const targetMs = React.useMemo(() => {
      if (target instanceof Date) return target.getTime()
      if (typeof target === 'number') return target
      return new Date(target).getTime()
    }, [target])

    const remainingMs = Math.max(0, targetMs - now)

    const parts = React.useMemo(() => {
      const total = remainingMs
      const days = Math.floor(total / 86_400_000)
      const hours = Math.floor((total % 86_400_000) / 3_600_000)
      const minutes = Math.floor((total % 3_600_000) / 60_000)
      const seconds = Math.floor((total % 60_000) / 1000)
      return { days, hours, minutes, seconds }
    }, [remainingMs])

    const pad2 = React.useCallback((n: number) => (pad ? String(n).padStart(2, '0') : String(n)), [pad])

    const display = React.useMemo(() => {
      const f = format
      const { days, hours, minutes, seconds } = parts
      const sep = separator
      if (f === 'DD:HH:MM:SS') return `${pad2(days)}${sep}${pad2(hours)}${sep}${pad2(minutes)}${sep}${pad2(seconds)}`
      if (f === 'HH:MM:SS') return `${pad2(days * 24 + hours)}${sep}${pad2(minutes)}${sep}${pad2(seconds)}`
      if (f === 'MM:SS') return `${pad2(days * 24 * 60 + hours * 60 + minutes)}${sep}${pad2(seconds)}`
      if (f === 'SS') return pad2(Math.floor(remainingMs / 1000))
      // Custom token format: replace DD, HH, MM, SS tokens.
      return f
        .replace('DD', pad2(days))
        .replace('HH', pad2(hours))
        .replace('MM', pad2(minutes))
        .replace('SS', pad2(seconds))
    }, [format, parts, separator, pad2, remainingMs])

    // Keep latest callbacks without retriggering the interval effect.
    const onFinishRef = React.useRef(onFinish)
    const onTickRef = React.useRef(onTick)
    onFinishRef.current = onFinish
    onTickRef.current = onTick

    React.useEffect(() => {
      if (paused) return
      const timer = setInterval(() => {
        const next = Date.now()
        const remaining = Math.max(0, targetMs - next)
        onTickRef.current?.(remaining)
        if (remaining <= 0) {
          setFinished(true)
          onFinishRef.current?.()
        }
        setNow(next)
      }, 1000)
      return () => clearInterval(timer)
    }, [paused, targetMs])

    // Reset finished state when the target changes.
    React.useEffect(() => {
      setFinished(false)
      setNow(Date.now())
    }, [targetMs])

    const renderProps: CountdownRenderProps = {
      ...parts,
      display,
      finished,
    }

    const renderDefault = () => {
      const f = format
      return (
        <>
          {f.includes('DD') &&
            (renderDays ? (
              renderDays(parts.days)
            ) : (
              <span data-slot="countdown-days" className="text-foreground text-2xl font-semibold">
                {pad2(parts.days)}
              </span>
            ))}
          {f.includes('DD') && f.includes('HH') && <span className="text-muted-foreground text-2xl">{separator}</span>}
          {f.includes('HH') &&
            (renderHours ? (
              renderHours(parts.hours)
            ) : (
              <span data-slot="countdown-hours" className="text-foreground text-2xl font-semibold">
                {pad2(parts.hours)}
              </span>
            ))}
          {f.includes('HH') && f.includes('MM') && <span className="text-muted-foreground text-2xl">{separator}</span>}
          {f.includes('MM') &&
            (renderMinutes ? (
              renderMinutes(parts.minutes)
            ) : (
              <span data-slot="countdown-minutes" className="text-foreground text-2xl font-semibold">
                {pad2(parts.minutes)}
              </span>
            ))}
          {f.includes('MM') && f.includes('SS') && <span className="text-muted-foreground text-2xl">{separator}</span>}
          {f.includes('SS') &&
            (renderSeconds ? (
              renderSeconds(parts.seconds)
            ) : (
              <span data-slot="countdown-seconds" className="text-foreground text-2xl font-semibold">
                {pad2(parts.seconds)}
              </span>
            ))}
        </>
      )
    }

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="countdown"
        data-finished={finished}
        data-paused={paused}
        className={cn('inline-flex flex-col gap-1', className)}
        {...props}
      >
        {label && (
          <span
            data-slot="countdown-label"
            className="text-muted-foreground text-xs font-medium tracking-wide uppercase"
          >
            {label}
          </span>
        )}
        <div data-slot="countdown-display" className="flex items-baseline gap-1 font-mono tabular-nums">
          {typeof children === 'function' ? children(renderProps) : (children ?? renderDefault())}
        </div>
      </div>
    )
  },
)
Countdown.displayName = 'Countdown'

export { Countdown }

```

### `packages/registry-react/components/countdown/index.ts`

```ts
export { Countdown, type CountdownProps, type CountdownRenderProps } from './Countdown'

```

## cta-01

- type: `registry:block`
- description: Centered call-to-action section. Soft gradient backdrop, large headline, supporting copy, primary + outline buttons, and a fine-print line for trial / cancel terms.
- npm deps: `lucide-react`
- registry deps: `button`

### `packages/registry-react/blocks/cta-01/Cta01.tsx`

```tsx
import { ArrowRight } from 'lucide-react'
import { Button } from '@/components/ui/button'

export function Cta01() {
  return (
    <section className="bg-background relative overflow-hidden">
      <div className="from-primary/15 via-background to-background pointer-events-none absolute inset-0 -z-10 bg-gradient-to-br" />
      <div className="bg-primary/10 pointer-events-none absolute right-1/4 -bottom-40 size-[500px] rounded-full blur-3xl" />

      <div className="mx-auto max-w-4xl px-6 py-24 text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          Ready to give your team a Monday they'll actually look forward to?
        </h2>
        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
          Set up takes 12 minutes. Migrate from your current tool with one CSV upload.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <Button size="lg">
            Start free trial
            <ArrowRight className="ml-2 size-4" />
          </Button>
          <Button size="lg" variant="outline">Book a demo</Button>
        </div>
        <p className="text-muted-foreground mt-4 text-xs">14-day free trial · No credit card required · Cancel anytime</p>
      </div>
    </section>
  )
}

```

## dashboard-layout

- type: `registry:block`
- description: Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.
- npm deps: `lucide-react`
- registry deps: `sidebar-02`, `command-palette`, `notifications-popover`, `theme-switch`, `use-theme`, `sidebar`, `breadcrumb`, `button`, `separator`

### `packages/registry-react/blocks/dashboard-layout/DashboardLayout.tsx`

```tsx
'use client'

// Full dashboard shell — collapsible sidebar + sticky topbar (sidebar
// trigger, breadcrumb, theme switch, notifications) + main content
// children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.
//
// NOTE (React port): the Vue original composes the `sidebar-02`,
// `command-palette`, and `notifications-popover` blocks, which don't yet
// exist in the React registry. Until they're ported, the sidebar body is a
// minimal inline nav and notifications is a plain Bell button. Swap them for
// the dedicated blocks once available — the topbar/inset structure here is
// the faithful 1:1 of the Vue shell.
import * as React from 'react'
import { Bell, LayoutDashboard, Users, Settings } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from '@/components/ui/sidebar'
import { ThemeSwitch } from '@/components/ui/theme-switch'

interface Crumb {
  label: string
  href?: string
}

export interface DashboardLayoutProps {
  breadcrumbs?: Crumb[]
  user?: { name: string; email: string; avatar?: string }
  onProfileSelect?: (key: string) => void
  onCommandSelect?: (item: { label: string; hint?: string }) => void
  children?: React.ReactNode
}

const NAV = [
  { label: 'Dashboard', icon: LayoutDashboard },
  { label: 'People', icon: Users },
  { label: 'Settings', icon: Settings },
]

export function DashboardLayout({
  breadcrumbs = [{ label: 'Dashboard' }],
  children,
}: DashboardLayoutProps) {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon">
        <SidebarHeader />
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {NAV.map((item) => (
                  <SidebarMenuItem key={item.label}>
                    <SidebarMenuButton tooltip={item.label}>
                      <item.icon />
                      <span>{item.label}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between border-b px-4 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <Breadcrumb>
              <BreadcrumbList>
                {breadcrumbs.map((crumb, i) => (
                  <React.Fragment key={i}>
                    <BreadcrumbItem className={i === 0 ? 'hidden md:block' : ''}>
                      {crumb.href && i < breadcrumbs.length - 1 ? (
                        <BreadcrumbLink
                          href={crumb.href}
                          className="text-muted-foreground/70 hover:text-foreground transition-colors"
                        >
                          {crumb.label}
                        </BreadcrumbLink>
                      ) : (
                        <BreadcrumbPage className="font-medium">{crumb.label}</BreadcrumbPage>
                      )}
                    </BreadcrumbItem>
                    {i < breadcrumbs.length - 1 && (
                      <BreadcrumbSeparator className={i === 0 ? 'hidden md:block' : ''} />
                    )}
                  </React.Fragment>
                ))}
              </BreadcrumbList>
            </Breadcrumb>
          </div>
          <div className="flex items-center gap-1 px-2 sm:gap-3">
            <div className="flex items-center gap-0.5">
              <ThemeSwitch variant="icon-only" />
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground hover:text-foreground relative size-8 rounded-lg"
                aria-label="Notifications"
              >
                <Bell className="size-4" />
              </Button>
              {/* ProfileMenu removed from header: the sidebar's NavUser
                  footer already owns the profile/account affordance. The
                  block still accepts a `user` prop + `onProfileSelect` so
                  consumers can wire those into the sidebar or a custom slot. */}
            </div>
          </div>
        </header>
        <main className="flex flex-1 flex-col px-4 pt-4 pb-4 lg:px-6 lg:pt-6 lg:pb-6">{children}</main>
      </SidebarInset>
    </SidebarProvider>
  )
}

```

## data-list

- type: `registry:ui`
- description: Vertical key/value list for showing read-only metadata — invoice details, settings summaries, profile fields. Pair items in label/value rows; supports inline edit triggers and trailing actions per row.

### `packages/registry-react/components/data-list/data-list.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

const DataList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('flex flex-col', className)} {...props} />
  ),
)
DataList.displayName = 'DataList'

const DataListItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'flex flex-row items-center justify-between border-b py-4 transition-colors duration-200 first:pt-0 last:border-0 last:pb-0',
        className,
      )}
      {...props}
    />
  ),
)
DataListItem.displayName = 'DataListItem'

export { DataList, DataListItem }

```

### `packages/registry-react/components/data-list/index.ts`

```ts
export { DataList, DataListItem } from './data-list'

```

## data-table

- type: `registry:ui`
- description: Full-feature table with sorting, filtering, column pinning, pagination, row selection, and an opinionated header/toolbar. Built on TanStack Table — pass `columns` + `data` and configure as needed.
- npm deps: `@tanstack/react-table`, `react-day-picker`, `lucide-react`
- registry deps: `badge`, `button`, `card`, `command`, `dropdown-menu`, `input`, `label`, `popover`, `range-calendar`, `select`, `separator`, `sheet`, `table`

### `packages/registry-react/components/data-table/DataTable.tsx`

```tsx
'use client'

import * as React from 'react'
import type {
  ColumnDef,
  ColumnFiltersState,
  ColumnPinningState,
  FilterFn,
  SortingState,
  VisibilityState,
  ExpandedState,
  GroupingState,
  Table as TanstackTable,
  Row,
} from '@tanstack/react-table'
import {
  flexRender,
  getCoreRowModel,
  getExpandedRowModel,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from '@tanstack/react-table'
import type { DateRange } from 'react-day-picker'
// `valueUpdater` lives next to the low-level table primitive (which
// data-table depends on transitively via registryDependencies). Keep
// `@/lib/utils` reserved for the cn() helper shipped by the init
// bootstrap -- importing valueUpdater from there would force every
// consumer to hand-edit lib/utils.ts on install.
import { valueUpdater } from '@/components/ui/table/utils'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

import { DataTableToolbar } from './DataTableToolbar'
import { DataTableFilterSheet } from './DataTableFilterSheet'
import { DataTablePagination } from './DataTablePagination'
import { type FilterDefinition, type FilterOption, resolveOption } from './types'
import { isoToDate, dateToIso } from './date-utils'

export type { FilterDefinition, FilterOption }

interface DateRangeValue {
  from?: string
  to?: string
}

export interface DataTableState {
  page: number
  pageSize: number
  sortBy: string
  sortOrder: 'asc' | 'desc'
  filters: Record<string, any>
  search: string
}

export interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  filterColumn?: string
  filterPlaceholder?: string
  filters?: FilterDefinition[]
  filterMode?: 'inline' | 'modal' | 'popover'
  /** Show the global search input. Default true. */
  enableSearch?: boolean
  /** Show the View column-visibility dropdown. Default false. */
  enableColumnVisibility?: boolean
  /** Show the pagination footer. Default true. */
  enablePagination?: boolean
  /** Hide the entire toolbar (search + filters + view). Default false. */
  hideToolbar?: boolean
  /** Show Export-CSV button in toolbar. Default false. */
  enableExport?: boolean
  /** Infinite-scroll mode: calls `onFetchMore` when last row enters viewport,
   *  hides the pagination footer. Combine with append-on-success on the
   *  consumer side. */
  infinite?: boolean
  /** Allow drag-to-resize on column borders. */
  enableResize?: boolean
  /** Initial column pinning. Each column id is pinned to the given side. */
  defaultColumnPinning?: { left?: string[]; right?: string[] }
  /** Allow drag-to-reorder on column headers. */
  enableReorder?: boolean
  /** Initial column ids to group by. Pass an empty array to disable grouping. */
  defaultGrouping?: string[]
  /** Virtual-scrolling mode (CSS content-visibility based). Best with large
   *  datasets and `maxHeight` for a scroll container. */
  virtual?: boolean
  /** Sticky header — keeps `<thead>` visible when scrolling. Pair with `maxHeight`. */
  stickyHeader?: boolean
  /** Density of cell padding: 'compact' | 'cozy' | 'comfortable'. Default cozy.
   *  Treated as the INITIAL density when `enableDensityToggle` is on; the user
   *  can override it at runtime from the toolbar. */
  density?: 'compact' | 'cozy' | 'comfortable'
  /** Show the density toggle in the toolbar. Default false. */
  enableDensityToggle?: boolean
  /** Strip the DataTable's borders.
   *  - `'inner'` removes toolbar bottom-divider, pagination top-divider,
   *    and filter-sheet section bgs/borders. The outer container border
   *    is kept.
   *  - `'full'` additionally removes the outer container border + rounded
   *    corners so the table renders completely flat on the canvas. */
  borderless?: 'inner' | 'full'
  /** Where the toolbar renders. `'inside'` (default) lives inside the
   *  bordered container; `'above'` floats outside it. */
  toolbarPosition?: 'inside' | 'above'
  /** Where the pagination footer renders. `'inside'` (default) or `'below'`. */
  paginationPosition?: 'inside' | 'below'
  /** Max height; enables vertical scroll inside the card. */
  maxHeight?: string
  /** Row click — when set, rows become clickable + cursor-pointer. */
  onRowClick?: (row: TData) => void
  /** Server-side mode: total row count from API (enables manual pagination) */
  totalRows?: number
  /** Server-side mode: loading state indicator */
  loading?: boolean
  /** Emitted when server-side state changes (pagination, sorting, filters) */
  onStateChange?: (state: DataTableState) => void
  /** Infinite-scroll: last row entered viewport, time to load more */
  onFetchMore?: () => void
  /** Custom empty-state content (replaces "No results."). */
  emptyState?: React.ReactNode
  /** Expanded-row content. Receives the original row + the TanStack row. */
  renderExpanded?: (row: TData, tanstackRow: Row<TData>) => React.ReactNode
  /** Bulk action bar content (shown above the table when rows are selected). */
  renderBulkActions?: (rows: Row<TData>[], clear: () => void) => React.ReactNode
  /** Footer (<tfoot>) content. */
  renderFooter?: (rows: Row<TData>[]) => React.ReactNode
  /** Extra toolbar controls (e.g. group-by selector). */
  toolbarExtra?: React.ReactNode
  /** Consumer-supplied custom filter UI inside the filter surface. */
  customFilters?: React.ReactNode
}

export interface DataTableHandle<TData> {
  table: TanstackTable<TData>
  exportCsv: () => void
  exportJson: () => void
}

function DataTableInner<TData, TValue>(
  props: DataTableProps<TData, TValue>,
  forwardedRef: React.Ref<DataTableHandle<TData>>,
) {
  const {
    columns,
    data,
    filterColumn = '',
    filterPlaceholder = 'Filter...',
    filters = [],
    filterMode = 'modal',
    enableSearch = true,
    enableColumnVisibility = false,
    enablePagination = true,
    hideToolbar = false,
    enableExport = false,
    infinite = false,
    enableResize = false,
    defaultColumnPinning = { left: [], right: [] },
    enableReorder = false,
    defaultGrouping = [],
    virtual = false,
    stickyHeader = false,
    density = 'cozy',
    enableDensityToggle = false,
    borderless,
    toolbarPosition = 'inside',
    paginationPosition = 'inside',
    maxHeight = '',
    onRowClick,
    totalRows = -1,
    loading = false,
    onStateChange,
    onFetchMore,
    emptyState,
    renderExpanded,
    renderBulkActions,
    renderFooter,
    toolbarExtra,
    customFilters,
  } = props

  // User-mutable density -- initial value from prop, toggleable via toolbar
  // when `enableDensityToggle` is on. Sync the prop so parents can still
  // drive it externally.
  const [currentDensity, setCurrentDensity] = React.useState<'compact' | 'cozy' | 'comfortable'>(density)
  React.useEffect(() => {
    setCurrentDensity(density)
  }, [density])

  // `borderless` is an enum (`'inner'` vs `'full'`); children only need a
  // boolean "should I drop my borders?".
  const dropInnerBorders = !!borderless

  const densityClass =
    currentDensity === 'compact'
      ? '[&_td]:py-1.5 [&_td]:px-3 [&_td]:text-xs [&_th]:h-8 [&_th]:px-3 [&_th]:text-xs'
      : currentDensity === 'comfortable'
        ? '[&_td]:py-3 [&_th]:h-12'
        : // cozy -- tightens TableCell/TableHead defaults (py-3 / h-12)
          '[&_td]:py-2 [&_th]:h-10'

  const isServerSide = totalRows >= 0
  const [isFilterSheetOpen, setIsFilterSheetOpen] = React.useState(false)

  // ── Filter snapshot (restore on close without apply) ───────────────────
  const filterSnapshot = React.useRef<ColumnFiltersState | null>(null)
  const dateRangeSnapshot = React.useRef<Record<string, DateRangeValue> | null>(null)
  const filterApplied = React.useRef(false)

  // ── Timers ──────────────────────────────────────────────────────────────
  const searchDebounceTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)
  const paginationEmitTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)

  // Custom filter functions for multiselect and date range
  const multiSelectFilterFn: FilterFn<TData> = (row, columnId, filterValue: string[]) => {
    if (!filterValue || filterValue.length === 0) return true
    const cellValue = String(row.getValue(columnId)).toLowerCase()
    return filterValue.some((v: string) => v.toLowerCase() === cellValue)
  }

  const dateRangeFilterFn: FilterFn<TData> = (row, columnId, filterValue: DateRangeValue) => {
    if (!filterValue) return true
    const { from, to } = filterValue
    if (!from && !to) return true
    const cellValue = String(row.getValue(columnId))
    if (from && cellValue < from) return false
    if (to && cellValue > to) return false
    return true
  }

  // Augment columns with custom filter functions based on filter definitions
  const processedColumns = React.useMemo(() => {
    return columns.map((col) => {
      const colId = (col as any).accessorKey || (col as any).id
      const filter = filters.find((f) => f.column === colId)
      if (!filter) return col
      if (filter.type === 'multiselect') return { ...col, filterFn: multiSelectFilterFn }
      if (filter.type === 'date') return { ...col, filterFn: dateRangeFilterFn }
      return col
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [columns, filters])

  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})
  const [expanded, setExpanded] = React.useState<ExpandedState>({})
  const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
    left: defaultColumnPinning.left ?? [],
    right: defaultColumnPinning.right ?? [],
  })
  const [columnOrder, setColumnOrder] = React.useState<string[]>([])
  const [grouping, setGrouping] = React.useState<GroupingState>(defaultGrouping)
  const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 })

  // Per-filter reactive range calendar model (ISO strings), keyed by column.
  const [dateRangeModels, setDateRangeModels] = React.useState<Record<string, DateRangeValue>>({})

  const table = useReactTable({
    data,
    columns: processedColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: isServerSide ? undefined : getPaginationRowModel(),
    getSortedRowModel: isServerSide ? undefined : getSortedRowModel(),
    getFilteredRowModel: isServerSide ? undefined : getFilteredRowModel(),
    getExpandedRowModel: getExpandedRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    enableColumnResizing: enableResize,
    columnResizeMode: 'onChange',
    manualPagination: isServerSide,
    manualSorting: isServerSide,
    manualFiltering: isServerSide,
    rowCount: isServerSide ? totalRows : undefined,
    onSortingChange: (updaterOrValue) => {
      valueUpdater(updaterOrValue, setSorting)
      if (isServerSide) queueMicrotask(emitStateUpdate)
    },
    onColumnFiltersChange: (updaterOrValue) => {
      // Server-side: never auto-emit on filter change — handled by Apply / search debounce
      // Client-side inline: filters apply locally via TanStack, no emit needed
      valueUpdater(updaterOrValue, setColumnFilters)
    },
    onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnVisibility),
    onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, setRowSelection),
    onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, setExpanded),
    onPaginationChange: (updaterOrValue) => {
      valueUpdater(updaterOrValue, setPagination)
      if (isServerSide) {
        if (paginationEmitTimer.current) clearTimeout(paginationEmitTimer.current)
        paginationEmitTimer.current = setTimeout(() => emitStateUpdate(), 0)
      }
    },
    onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnPinning),
    onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, setColumnOrder),
    onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, setGrouping),
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      pagination,
      rowSelection,
      expanded,
      columnPinning,
      columnOrder,
      grouping,
    },
  })

  /** Build and emit current server-side state */
  function emitStateUpdate() {
    const s = sorting[0]
    const filterMap: Record<string, any> = {}
    for (const cf of columnFilters) {
      filterMap[cf.id] = cf.value
    }
    onStateChange?.({
      page: table.getState().pagination.pageIndex + 1,
      pageSize: table.getState().pagination.pageSize,
      sortBy: s?.id || '',
      sortOrder: s?.desc ? 'desc' : 'asc',
      filters: filterMap,
      search: (filterColumn && (table.getColumn(filterColumn)?.getFilterValue() as string)) || '',
    })
  }

  function onSearchInput(val: string) {
    if (!filterColumn || !table.getColumn(filterColumn)) return
    table.getColumn(filterColumn)?.setFilterValue(val || undefined)
    if (isServerSide) {
      if (searchDebounceTimer.current) clearTimeout(searchDebounceTimer.current)
      searchDebounceTimer.current = setTimeout(() => {
        table.setPageIndex(0)
        emitStateUpdate()
      }, 500)
    }
  }

  // ── Filter snapshot helpers ──────────────────────────────────────────────
  function snapshotFilters() {
    filterApplied.current = false
    filterSnapshot.current = JSON.parse(JSON.stringify(columnFilters))
    dateRangeSnapshot.current = JSON.parse(JSON.stringify(dateRangeModels))
  }

  function maybeRestoreFilters() {
    if (!filterApplied.current && filterSnapshot.current) {
      setColumnFilters(filterSnapshot.current)
      setDateRangeModels(dateRangeSnapshot.current ?? {})
    }
    filterSnapshot.current = null
    dateRangeSnapshot.current = null
  }

  function onFilterSheetOpen() {
    snapshotFilters()
    setIsFilterSheetOpen(true)
  }

  function onFilterSheetClose(open: boolean) {
    if (!open) maybeRestoreFilters()
    setIsFilterSheetOpen(open)
  }

  // ── Filter helpers ─────────────────────────────────────────────────────
  function getMultiSelectValue(column: string): string[] {
    return (table.getColumn(column)?.getFilterValue() as string[]) ?? []
  }

  function getDateRangeValue(column: string): DateRangeValue {
    return (table.getColumn(column)?.getFilterValue() as DateRangeValue) ?? {}
  }

  function getCalendarModel(column: string): DateRange | undefined {
    const dr = getDateRangeValue(column)
    if (!dr.from && !dr.to) return undefined
    return { from: isoToDate(dr.from), to: isoToDate(dr.to) }
  }

  function onCalendarUpdate(column: string, val: DateRange | undefined) {
    const from = val?.from ? dateToIso(val.from) : undefined
    const to = val?.to ? dateToIso(val.to) : undefined
    setDateRangeModels((m) => ({ ...m, [column]: { from, to } }))
    const hasValue = from || to
    table.getColumn(column)?.setFilterValue(hasValue ? { from, to } : undefined)
  }

  function formatDateRange(column: string): string {
    const dr = getDateRangeValue(column)
    if (dr.from && dr.to) return `${dr.from} - ${dr.to}`
    if (dr.from) return `From ${dr.from}`
    if (dr.to) return `Until ${dr.to}`
    return ''
  }

  function toggleMultiSelectValue(column: string, option: string) {
    const current = getMultiSelectValue(column)
    const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option]
    table.getColumn(column)?.setFilterValue(next.length > 0 ? next : undefined)
  }

  function clearAllFilters() {
    filterApplied.current = true
    if (searchDebounceTimer.current) clearTimeout(searchDebounceTimer.current)
    filters.forEach((f) => {
      table.getColumn(f.column)?.setFilterValue(undefined)
      if (f.type === 'date') {
        setDateRangeModels((m) => ({ ...m, [f.column]: {} }))
      }
    })
    if (filterColumn && table.getColumn(filterColumn)) {
      table.getColumn(filterColumn)?.setFilterValue(undefined)
    }
    if (isServerSide) {
      table.setPageIndex(0)
      queueMicrotask(() => emitStateUpdate())
    }
  }

  function isFilterActive(filter: FilterDefinition): boolean {
    const value = table.getColumn(filter.column)?.getFilterValue()
    if (value === undefined || value === '') return false
    if (filter.type === 'multiselect') return Array.isArray(value) && value.length > 0
    if (filter.type === 'date') {
      const d = value as DateRangeValue
      return !!(d.from || d.to)
    }
    return true
  }

  const hasSearchValue = !!(filterColumn && (table.getColumn(filterColumn)?.getFilterValue() as string))
  const isAnyFilterActive = hasSearchValue || filters.some(isFilterActive)

  function getFilterSelectedLabels(filter: FilterDefinition): string[] {
    const vals = getMultiSelectValue(filter.column)
    return vals.map((v) => {
      const opt = filter.options?.find((o) => resolveOption(o).value === v)
      return opt ? resolveOption(opt).label : v
    })
  }

  function clearFilter(filter: FilterDefinition) {
    table.getColumn(filter.column)?.setFilterValue(undefined)
  }

  const activeFilterCount = filters.filter(isFilterActive).length

  function clearDateFilter(filter: FilterDefinition) {
    clearFilter(filter)
    setDateRangeModels((m) => ({ ...m, [filter.column]: {} }))
  }

  function onApplyFilters() {
    filterApplied.current = true
    if (isServerSide) {
      if (table.getState().pagination.pageIndex === 0) {
        emitStateUpdate()
      } else {
        table.setPageIndex(0)
      }
    }
    setIsFilterSheetOpen(false)
  }

  /**
   * Popover filter mode: handle the staged-edit commit. Walk the draft,
   * write each column's value via `setFilterValue`, and sync the calendar
   * model for date filters so a subsequent reopen reflects the just-applied
   * range.
   */
  function onCommitDraft(draft: Record<string, any>) {
    for (const f of filters) {
      if (!(f.column in draft)) continue
      const val = draft[f.column]
      if (f.type === 'date') {
        const dr = (val ?? {}) as DateRangeValue
        setDateRangeModels((m) => ({ ...m, [f.column]: { from: dr.from, to: dr.to } }))
        table.getColumn(f.column)?.setFilterValue(val)
      } else {
        table.getColumn(f.column)?.setFilterValue(val)
      }
    }
    onApplyFilters()
  }

  // ── Column reorder (HTML5 drag/drop swaps dragged column with drop target) ──
  const [dragColId, setDragColId] = React.useState<string | null>(null)
  const [dragOverColId, setDragOverColId] = React.useState<string | null>(null)

  function onColDragStart(id: string, e: React.DragEvent) {
    setDragColId(id)
    document.body.style.cursor = 'grabbing'
    if (e.dataTransfer) {
      e.dataTransfer.effectAllowed = 'move'
      e.dataTransfer.setData('text/plain', id)
    }
  }

  function onColDragOver(targetId: string, e: React.DragEvent) {
    if (!enableReorder || !dragColId) return
    e.preventDefault()
    setDragOverColId(targetId)
    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
  }

  function onColDragEnd() {
    document.body.style.cursor = ''
    setDragColId(null)
    setDragOverColId(null)
  }

  function onColDrop(targetId: string) {
    const src = dragColId
    onColDragEnd()
    if (!src || src === targetId) return
    const order = (columnOrder.length ? columnOrder : table.getAllLeafColumns().map((c) => c.id)).slice()
    const from = order.indexOf(src)
    const to = order.indexOf(targetId)
    if (from === -1 || to === -1) return
    order.splice(to, 0, ...order.splice(from, 1))
    setColumnOrder(order)
  }

  // ── Pinning — return style for sticky pinned cells (header or body) ──
  function pinStyle(col: any): React.CSSProperties | undefined {
    const side = col.getIsPinned()
    if (!side) return undefined
    if (side === 'left') return { position: 'sticky', left: `${col.getStart('left')}px`, zIndex: 2 }
    return { position: 'sticky', right: `${col.getAfter('right')}px`, zIndex: 2 }
  }

  // ── Infinite scroll — sentinel row triggers fetch-more when visible ──
  const sentinelEl = React.useRef<HTMLDivElement | null>(null)
  React.useEffect(() => {
    if (!infinite || !sentinelEl.current) return
    const io = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) onFetchMore?.()
      },
      { rootMargin: '100px' },
    )
    io.observe(sentinelEl.current)
    return () => io.disconnect()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [infinite])

  // ── CSV export — currently filtered + visible data, skips select/actions/expander cols. ──
  function exportCsv() {
    const visibleCols = table
      .getVisibleLeafColumns()
      .filter((c) => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')
    const headers = visibleCols.map((c) =>
      String(c.columnDef.header && typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id),
    )
    const rows = table.getFilteredRowModel().rows.map((row) =>
      visibleCols.map((c) => {
        const v = row.getValue(c.id)
        const s = v == null ? '' : String(v)
        return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
      }),
    )
    const csv = [headers.join(','), ...rows.map((r) => r.join(','))].join('\n')
    downloadBlob(csv, 'text/csv;charset=utf-8;', `export-${Date.now()}.csv`)
  }

  // ── JSON export — same scope as CSV, but emits underlying row.original objects ──
  function exportJson() {
    const visibleColIds = table
      .getVisibleLeafColumns()
      .filter((c) => c.id !== 'select' && c.id !== 'actions' && c.id !== 'expander')
      .map((c) => c.id)
    const rows = table.getFilteredRowModel().rows.map((row) => {
      const original = row.original as Record<string, unknown>
      const out: Record<string, unknown> = {}
      for (const id of visibleColIds) {
        out[id] = id in original ? original[id] : row.getValue(id)
      }
      return out
    })
    const json = JSON.stringify(rows, null, 2)
    downloadBlob(json, 'application/json;charset=utf-8;', `export-${Date.now()}.json`)
  }

  function downloadBlob(content: string, type: string, filename: string) {
    const blob = new Blob([content], { type })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = filename
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
  }

  React.useImperativeHandle(forwardedRef, () => ({ table, exportCsv, exportJson }))

  const selectedRows = table.getSelectedRowModel().rows

  const toolbarProps = {
    table: table as TanstackTable<any>,
    filterColumn,
    filterPlaceholder,
    filters,
    filterMode,
    enableSearch,
    enableColumnVisibility,
    enableExport,
    enableDensityToggle,
    density: currentDensity,
    activeFilterCount,
    isAnyFilterActive,
    isServerSide,
    getMultiSelectValue,
    getDateRangeValue,
    getFilterSelectedLabels,
    formatDateRange,
    getCalendarModel,
    onSearch: onSearchInput,
    onOpenFilterSheet: onFilterSheetOpen,
    onApplyFilters,
    onClearAllFilters: clearAllFilters,
    onToggleMultiselect: toggleMultiSelectValue,
    onClearFilter: clearFilter,
    onClearDateFilter: clearDateFilter,
    onCalendarUpdate,
    onTextFilterUpdate: (col: string, val: string | undefined) => table.getColumn(col)?.setFilterValue(val),
    onCommitFilters: onCommitDraft,
    onExportCsv: exportCsv,
    onExportJson: exportJson,
    onDensityChange: setCurrentDensity,
    toolbarExtra,
    customFilters,
  }

  return (
    <div data-uipkge="" data-slot="data-table" className="w-full">
      {/* Toolbar (above-mode: floats outside the bordered card). */}
      {!hideToolbar && toolbarPosition === 'above' && <DataTableToolbar {...toolbarProps} borderless />}

      <div
        className={[
          'bg-card text-card-foreground overflow-hidden',
          borderless === 'full' ? '' : 'rounded-md border',
        ].join(' ')}
      >
        {/* Toolbar (inside-mode, default). */}
        {!hideToolbar && toolbarPosition === 'inside' && (
          <DataTableToolbar {...toolbarProps} borderless={dropInnerBorders} />
        )}

        {/* Filter Sheet (modal mode) */}
        <DataTableFilterSheet
          open={isFilterSheetOpen}
          onOpenChange={onFilterSheetClose}
          table={table as TanstackTable<any>}
          filters={filters}
          activeFilterCount={activeFilterCount}
          isAnyFilterActive={isAnyFilterActive}
          isServerSide={isServerSide}
          borderless={dropInnerBorders}
          getMultiSelectValue={getMultiSelectValue}
          getDateRangeValue={getDateRangeValue}
          formatDateRange={formatDateRange}
          getCalendarModel={getCalendarModel}
          onApply={onApplyFilters}
          onClearAll={clearAllFilters}
          onToggleMultiselect={toggleMultiSelectValue}
          onClearFilter={clearFilter}
          onClearDateFilter={clearDateFilter}
          onCalendarUpdate={onCalendarUpdate}
          onTextFilterUpdate={(col, val) => table.getColumn(col)?.setFilterValue(val)}
          customFilters={customFilters}
        />

        {/* Bulk action bar (shown above table when rows selected) */}
        {renderBulkActions && selectedRows.length > 0 && (
          <div className="bg-muted/40 flex items-center gap-3 border-b px-4 py-2">
            <span className="text-sm font-medium"> {selectedRows.length} selected </span>
            {renderBulkActions(selectedRows, () => table.toggleAllRowsSelected(false))}
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground ml-auto text-xs transition"
              onClick={() => table.toggleAllRowsSelected(false)}
            >
              Clear selection
            </button>
          </div>
        )}

        {/* Table. The Table primitive wraps the <table> in its own overflow-auto
            div; neutralize that inner overflow and let the outer scroll
            container own the scroll region. */}
        <div
          className={[densityClass, 'relative [&_[data-slot=table-container]]:overflow-visible', maxHeight ? 'overflow-auto' : ''].join(' ')}
          style={maxHeight ? { maxHeight } : undefined}
        >
          {/* Loading overlay */}
          {loading && (
            <div className="bg-card/60 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]">
              <div className="border-primary size-5 animate-spin rounded-full border-2 border-t-transparent" />
            </div>
          )}
          <Table>
            <TableHeader className={stickyHeader ? 'bg-muted/95 sticky top-0 z-10 backdrop-blur-sm' : ''}>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id}>
                  {headerGroup.headers.map((header) => {
                    const reorderable =
                      enableReorder &&
                      header.column.id !== 'select' &&
                      header.column.id !== 'actions' &&
                      header.column.id !== 'expander'
                    return (
                      <TableHead
                        key={header.id}
                        className={[
                          'relative transition-colors duration-150',
                          reorderable ? 'cursor-grab active:cursor-grabbing' : '',
                          dragColId === header.column.id ? 'opacity-50' : '',
                          dragOverColId === header.column.id && dragColId !== header.column.id
                            ? 'border-foreground/60 border-l-2'
                            : '',
                        ].join(' ')}
                        style={{
                          ...(enableResize ? { width: `${header.getSize()}px` } : {}),
                          ...(pinStyle(header.column) ?? {}),
                        }}
                        draggable={reorderable}
                        onDragStart={reorderable ? (e) => onColDragStart(header.column.id, e) : undefined}
                        onDragOver={reorderable ? (e) => onColDragOver(header.column.id, e) : undefined}
                        onDragEnd={reorderable ? () => onColDragEnd() : undefined}
                        onDrop={reorderable ? () => onColDrop(header.column.id) : undefined}
                      >
                        {!header.isPlaceholder &&
                          flexRender(header.column.columnDef.header, header.getContext())}
                        {enableResize && header.column.getCanResize() && (
                          <div
                            className={[
                              'hover:bg-foreground/30 absolute top-0 right-0 h-full w-1 cursor-col-resize touch-none transition-colors select-none',
                              header.column.getIsResizing() ? 'bg-foreground/60' : '',
                            ].join(' ')}
                            onMouseDown={header.getResizeHandler()}
                            onTouchStart={header.getResizeHandler()}
                          />
                        )}
                      </TableHead>
                    )
                  })}
                </TableRow>
              ))}
            </TableHeader>
            <TableBody>
              {table.getRowModel().rows?.length ? (
                table.getRowModel().rows.map((row) => (
                  <React.Fragment key={row.id}>
                    <TableRow
                      data-state={row.getIsSelected() ? 'selected' : undefined}
                      className={onRowClick ? 'hover:bg-muted/40 cursor-pointer' : ''}
                      style={
                        virtual ? { contentVisibility: 'auto', containIntrinsicSize: 'auto 48px' } : undefined
                      }
                      onClick={() => onRowClick?.(row.original)}
                    >
                      {row.getVisibleCells().map((cell) => (
                        <TableCell key={cell.id} className="bg-card" style={pinStyle(cell.column)}>
                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
                        </TableCell>
                      ))}
                    </TableRow>
                    {row.getIsExpanded() && renderExpanded && (
                      <TableRow>
                        <TableCell colSpan={row.getVisibleCells().length} className="bg-muted/30 px-6 py-4">
                          {renderExpanded(row.original, row)}
                        </TableCell>
                      </TableRow>
                    )}
                  </React.Fragment>
                ))
              ) : (
                <TableRow>
                  <TableCell colSpan={columns.length} className="h-24 text-center">
                    {emptyState ?? <div className="text-muted-foreground text-sm">No results.</div>}
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
            {renderFooter && (
              <tfoot className="bg-muted/20 sticky bottom-0 border-t">{renderFooter(table.getRowModel().rows)}</tfoot>
            )}
          </Table>
          {/* Infinite scroll sentinel */}
          {infinite && <div ref={sentinelEl} className="h-1" />}
          {infinite && loading && (
            <div className="border-border text-muted-foreground border-t px-4 py-3 text-center text-sm">
              Loading more…
            </div>
          )}
        </div>

        {/* Pagination (inside-mode, default) */}
        {enablePagination && !infinite && paginationPosition === 'inside' && (
          <DataTablePagination
            table={table as TanstackTable<any>}
            totalRows={totalRows}
            isServerSide={isServerSide}
            borderless={dropInnerBorders}
          />
        )}
      </div>

      {/* Pagination (below-mode: floats outside the bordered card). */}
      {enablePagination && !infinite && paginationPosition === 'below' && (
        <DataTablePagination
          table={table as TanstackTable<any>}
          totalRows={totalRows}
          isServerSide={isServerSide}
          borderless
        />
      )}
    </div>
  )
}

// forwardRef + generics: cast the wrapped component back to a generic-aware
// signature so consumers keep `<DataTable<Row>>` inference.
export const DataTable = React.forwardRef(DataTableInner) as <TData, TValue = unknown>(
  props: DataTableProps<TData, TValue> & { ref?: React.Ref<DataTableHandle<TData>> },
) => React.ReactElement

```

### `packages/registry-react/components/data-table/DataTableColumnHeader.tsx`

```tsx
'use client'

/**
 * Sortable / hideable header cell for TanStack DataTable columns. Use it from
 * a column definition like:
 *   header: ({ column }) => <DataTableColumnHeader column={column} label="Email" />
 *
 * Click on the label cycles sort asc → desc → none.
 *
 * Optional per-column filter:
 *   header: ({ column }) => (
 *     <DataTableColumnHeader
 *       column={column}
 *       label="Status"
 *       filter={{ column: 'status', label: 'Status', type: 'multiselect', options: [...] }}
 *     />
 *   )
 *
 * When `filter` is provided, a funnel icon renders next to the sort button.
 * Click opens a popover with the right filter UI for the type (text / select
 * / multiselect / date). The funnel shows a primary-coloured dot when the
 * column has an active filter.
 */
import * as React from 'react'
import type { Column } from '@tanstack/react-table'
import { ArrowUp, ArrowUpDown, Check, Filter, FilterX } from 'lucide-react'
import type { DateRange } from 'react-day-picker'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { isoToDate, dateToIso } from './date-utils'

interface FilterOption {
  value: string
  label: string
}
interface FilterDefinition {
  column: string
  label: string
  type: 'text' | 'select' | 'multiselect' | 'date'
  options?: (string | FilterOption)[]
}

export interface DataTableColumnHeaderProps<TData, TValue> {
  column: Column<TData, TValue>
  label: string
  align?: 'left' | 'right' | 'center'
  filter?: FilterDefinition
  className?: string
}

function resolveOption(opt: string | FilterOption): FilterOption {
  return typeof opt === 'string' ? { value: opt, label: opt } : opt
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  label,
  align = 'left',
  filter,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  const [open, setOpen] = React.useState(false)

  function next() {
    const current = column.getIsSorted()
    if (!current) column.toggleSorting(false)
    else if (current === 'asc') column.toggleSorting(true)
    else column.clearSorting()
  }

  const filterValue = column.getFilterValue()

  const isFilterActive = (() => {
    const v = filterValue
    if (v === undefined || v === null || v === '') return false
    if (Array.isArray(v)) return v.length > 0
    if (typeof v === 'object') return Object.keys(v).length > 0
    return true
  })()

  // Text-input bound separately so we can apply on blur / Enter rather than
  // thrashing the column filter on every keystroke.
  const [textDraft, setTextDraft] = React.useState('')
  React.useEffect(() => {
    if (open && filter?.type === 'text') {
      setTextDraft((filterValue as string) ?? '')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])

  function applyText() {
    column.setFilterValue(textDraft || undefined)
  }

  function clearText() {
    setTextDraft('')
    column.setFilterValue(undefined)
  }

  function toggleMultiselect(value: string) {
    const current = (filterValue as string[]) ?? []
    const nextVal = current.includes(value) ? current.filter((v) => v !== value) : [...current, value]
    column.setFilterValue(nextVal.length > 0 ? nextVal : undefined)
  }

  function selectOne(value: string) {
    column.setFilterValue(value || undefined)
    setOpen(false)
  }

  function clearFilter() {
    column.setFilterValue(undefined)
    setTextDraft('')
  }

  // Date-range bridging. The column stores ISO strings; the calendar wants
  // native Date instances. Reads/writes both shapes.
  const dateModel: DateRange | undefined = (() => {
    const v = filterValue as { from?: string; to?: string } | undefined
    if (!v?.from && !v?.to) return undefined
    return {
      from: v.from ? isoToDate(v.from) : undefined,
      to: v.to ? isoToDate(v.to) : undefined,
    }
  })()

  function onDateSelect(range: DateRange | undefined) {
    const isoFrom = range?.from ? dateToIso(range.from) : undefined
    const isoTo = range?.to ? dateToIso(range.to) : undefined
    if (!isoFrom && !isoTo) {
      column.setFilterValue(undefined)
    } else {
      column.setFilterValue({ from: isoFrom, to: isoTo })
    }
  }

  function selectedLabels(): string[] {
    if (!filter?.options) return []
    const selected = (filterValue as string[]) ?? []
    return filter.options
      .map(resolveOption)
      .filter((o) => selected.includes(o.value))
      .map((o) => o.label)
  }

  return (
    <div
      className={cn(
        'flex items-center gap-0.5',
        align === 'right' && 'justify-end',
        align === 'center' && 'justify-center',
        className,
      )}
    >
      {column.getCanSort() ? (
        <button
          type="button"
          className="group text-muted-foreground hover:text-foreground hover:bg-muted/60 -mx-2 inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm font-medium transition-colors duration-150"
          aria-label={`Sort by ${label}`}
          onClick={next}
        >
          <span>{label}</span>
          {column.getIsSorted() ? (
            <ArrowUp
              className={cn(
                'text-foreground size-3.5 transition-transform duration-200 ease-in-out',
                column.getIsSorted() === 'desc' ? 'rotate-180' : 'rotate-0',
              )}
            />
          ) : (
            <ArrowUpDown className="size-3.5 opacity-40 transition-opacity duration-150 group-hover:opacity-70" />
          )}
        </button>
      ) : (
        <span className="text-muted-foreground text-sm font-medium">{label}</span>
      )}

      {/* Optional per-column header filter */}
      {filter && (
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <button
              type="button"
              className={cn(
                'text-muted-foreground relative inline-flex size-6 items-center justify-center rounded transition-colors',
                'hover:text-foreground hover:bg-muted/60',
                isFilterActive && 'text-foreground',
              )}
              aria-label={`Filter ${label}`}
            >
              <Filter className="size-3.5" />
              {isFilterActive && (
                <span aria-hidden className="bg-primary absolute -top-0.5 -right-0.5 size-1.5 rounded-full" />
              )}
            </button>
          </PopoverTrigger>
          <PopoverContent className="w-72 p-0" align="start">
            <div className="border-border flex items-center justify-between border-b px-3 py-2 text-xs font-medium">
              <span>Filter · {filter.label}</span>
              {isFilterActive && (
                <button
                  type="button"
                  className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 transition-colors"
                  onClick={clearFilter}
                >
                  <FilterX className="size-3" />
                  Clear
                </button>
              )}
            </div>

            {/* TEXT */}
            {filter.type === 'text' && (
              <div className="space-y-2 p-3">
                <Input
                  value={textDraft}
                  placeholder={`Search ${filter.label.toLowerCase()}…`}
                  className="h-9"
                  onChange={(e) => setTextDraft(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      applyText()
                      setOpen(false)
                    }
                  }}
                  onBlur={applyText}
                />
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    className="h-8 flex-1"
                    onClick={() => {
                      applyText()
                      setOpen(false)
                    }}
                  >
                    Apply
                  </Button>
                  <Button size="sm" variant="outline" className="h-8" onClick={clearText}>
                    Clear
                  </Button>
                </div>
              </div>
            )}

            {/* SELECT / MULTISELECT */}
            {(filter.type === 'select' || filter.type === 'multiselect') && (
              <Command className="max-h-[280px]">
                <CommandInput placeholder={`Search ${filter.label.toLowerCase()}…`} className="h-9" />
                <CommandList>
                  <CommandEmpty>No matches.</CommandEmpty>
                  <CommandGroup>
                    {(filter.options ?? []).map((opt) => {
                      const o = resolveOption(opt)
                      return (
                        <CommandItem
                          key={o.value}
                          value={o.value}
                          onSelect={() =>
                            filter.type === 'multiselect' ? toggleMultiselect(o.value) : selectOne(o.value)
                          }
                        >
                          {filter.type === 'multiselect' ? (
                            <div
                              className={cn(
                                'border-primary/50 mr-2 flex size-4 items-center justify-center rounded-sm border transition-colors',
                                ((filterValue as string[]) ?? []).includes(o.value)
                                  ? 'bg-primary text-primary-foreground'
                                  : 'opacity-50',
                              )}
                            >
                              <Check className="size-3" />
                            </div>
                          ) : (
                            <Check className={cn('mr-2 size-4', filterValue === o.value ? 'opacity-100' : 'opacity-0')} />
                          )}
                          <span>{o.label}</span>
                        </CommandItem>
                      )
                    })}
                  </CommandGroup>
                </CommandList>
              </Command>
            )}

            {/* DATE RANGE */}
            {filter.type === 'date' && (
              <div className="p-2">
                <RangeCalendar selected={dateModel} onSelect={onDateSelect} />
                <div className="flex gap-2 px-1 pt-2">
                  <Button size="sm" className="h-8 flex-1" onClick={() => setOpen(false)}>
                    Apply
                  </Button>
                  <Button size="sm" variant="outline" className="h-8" onClick={clearFilter}>
                    Clear
                  </Button>
                </div>
              </div>
            )}

            {/* Active selection summary */}
            {isFilterActive && (filter.type === 'multiselect' || filter.type === 'select') && (
              <div className="border-border text-muted-foreground border-t px-3 py-2 text-[11px]">
                {filter.type === 'multiselect' ? (
                  <span>
                    {selectedLabels().length} selected:{' '}
                    <span className="text-foreground">{selectedLabels().join(', ')}</span>
                  </span>
                ) : (
                  <span>
                    <span className="text-foreground">{filterValue as string}</span>
                  </span>
                )}
              </div>
            )}
          </PopoverContent>
        </Popover>
      )}
    </div>
  )
}

```

### `packages/registry-react/components/data-table/DataTableFilterPopover.tsx`

```tsx
'use client'

/**
 * Popover variant of DataTableFilterSheet. Same filter UI (text /
 * multiselect / date) packed into a Popover instead of a side Sheet.
 * Slot in via `filterMode="popover"` on <DataTable>.
 *
 * Trigger button is rendered inline by the toolbar; this component owns
 * the popover surface and content.
 *
 * ── Draft semantics ──────────────────────────────────────────────────
 * Unlike the Sheet (which mutates live TanStack column filters and rolls
 * back on cancel via a parent snapshot), this popover stages every edit
 * inside a local `draft` map. Real `columnFilters` are never touched
 * until the user clicks Apply -- at which point we emit `onCommitDraft`
 * with the full draft and the parent walks the entries calling
 * `setFilterValue` per column. Closing the popover (Escape / click out)
 * simply discards the draft.
 */
import * as React from 'react'
import type { Table } from '@tanstack/react-table'
import type { DateRange } from 'react-day-picker'
import { Check, SlidersHorizontal, X } from 'lucide-react'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { type FilterDefinition, resolveOption } from './types'
import { isoToDate, dateToIso } from './date-utils'

type DraftDateValue = { from?: string; to?: string }
type DraftValue = string[] | string | DraftDateValue | undefined
type Draft = Record<string, DraftValue>

export interface DataTableFilterPopoverProps {
  table: Table<any>
  filters: FilterDefinition[]
  activeFilterCount: number
  isAnyFilterActive: boolean
  isServerSide: boolean
  getMultiSelectValue: (column: string) => string[]
  getDateRangeValue: (column: string) => { from?: string; to?: string }
  formatDateRange: (column: string) => string
  getCalendarModel: (column: string) => DateRange | undefined
  // Committed draft on Apply -- a `Record<columnId, value>` where each
  // value is the final shape TanStack's `setFilterValue` expects.
  onCommitDraft: (draft: Draft) => void
  onClearAll: () => void
  customFilters?: React.ReactNode
}

export function DataTableFilterPopover({
  table,
  filters,
  activeFilterCount,
  isAnyFilterActive: _isAnyFilterActive,
  isServerSide,
  getMultiSelectValue,
  getDateRangeValue,
  formatDateRange: _formatDateRange,
  getCalendarModel: _getCalendarModel,
  onCommitDraft,
  onClearAll: _onClearAll,
  customFilters,
}: DataTableFilterPopoverProps) {
  const [open, setOpen] = React.useState(false)
  const [draft, setDraft] = React.useState<Draft>({})
  const filterScrollRef = React.useRef<HTMLDivElement | null>(null)

  function seedDraft(): Draft {
    const next: Draft = {}
    for (const f of filters) {
      if (f.type === 'multiselect' || f.type === 'select') {
        next[f.column] = [...getMultiSelectValue(f.column)]
      } else if (f.type === 'date') {
        const dr = getDateRangeValue(f.column)
        next[f.column] = { from: dr.from, to: dr.to }
      } else if (f.type === 'text') {
        const v = table.getColumn(f.column)?.getFilterValue() as string | undefined
        next[f.column] = v ?? ''
      }
    }
    return next
  }

  function getDraftMulti(column: string): string[] {
    const v = draft[column]
    return Array.isArray(v) ? v : []
  }

  function getDraftText(column: string): string {
    const v = draft[column]
    return typeof v === 'string' ? v : ''
  }

  function getDraftDate(column: string): DraftDateValue {
    const v = draft[column]
    if (v && typeof v === 'object' && !Array.isArray(v)) return v as DraftDateValue
    return {}
  }

  function toggleDraftMulti(column: string, option: string) {
    const current = getDraftMulti(column)
    const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option]
    setDraft((d) => ({ ...d, [column]: next }))
  }

  function setDraftText(column: string, value: string) {
    setDraft((d) => ({ ...d, [column]: value }))
  }

  function clearDraftSection(filter: FilterDefinition) {
    if (filter.type === 'multiselect' || filter.type === 'select') {
      setDraft((d) => ({ ...d, [filter.column]: [] }))
    } else if (filter.type === 'date') {
      setDraft((d) => ({ ...d, [filter.column]: {} }))
    } else if (filter.type === 'text') {
      setDraft((d) => ({ ...d, [filter.column]: '' }))
    }
  }

  function resetDraft() {
    const next: Draft = {}
    for (const f of filters) {
      if (f.type === 'multiselect' || f.type === 'select') next[f.column] = []
      else if (f.type === 'date') next[f.column] = {}
      else if (f.type === 'text') next[f.column] = ''
    }
    setDraft(next)
  }

  // ── Date helpers (local; popover is fully self-contained for draft) ──
  function getDraftCalendarModel(column: string): DateRange | undefined {
    const dr = getDraftDate(column)
    if (!dr.from && !dr.to) return undefined
    return {
      from: isoToDate(dr.from),
      to: isoToDate(dr.to),
    }
  }

  function onDraftCalendarUpdate(column: string, val: DateRange | undefined) {
    const from = val?.from ? dateToIso(val.from) : undefined
    const to = val?.to ? dateToIso(val.to) : undefined
    setDraft((d) => ({ ...d, [column]: { from, to } }))
  }

  function formatDraftDateRange(column: string): string {
    const dr = getDraftDate(column)
    if (dr.from && dr.to) return `${dr.from} - ${dr.to}`
    if (dr.from) return `From ${dr.from}`
    if (dr.to) return `Until ${dr.to}`
    return ''
  }

  function isDraftSectionActive(filter: FilterDefinition): boolean {
    if (filter.type === 'multiselect' || filter.type === 'select') {
      return getDraftMulti(filter.column).length > 0
    }
    if (filter.type === 'date') {
      const dr = getDraftDate(filter.column)
      return !!(dr.from || dr.to)
    }
    if (filter.type === 'text') {
      return !!getDraftText(filter.column)
    }
    return false
  }

  // `Reset` is disabled when the draft has nothing to clear.
  const isDraftDirty = filters.some(isDraftSectionActive)

  function handleOpenChange(isOpen: boolean) {
    if (isOpen) {
      setDraft(seedDraft())
      setOpen(true)
      setTimeout(() => filterScrollRef.current?.scrollTo({ top: 0 }), 50)
    } else {
      // Close-without-apply: nothing to commit. Real column filters were never
      // mutated by the popover; the draft is local and discarded.
      setDraft({})
      setOpen(false)
    }
  }

  function applyAndClose() {
    const snapshot: Draft = {}
    for (const f of filters) {
      const v = draft[f.column]
      if (f.type === 'multiselect' || f.type === 'select') {
        const arr = Array.isArray(v) ? v : []
        snapshot[f.column] = arr.length > 0 ? arr : undefined
      } else if (f.type === 'date') {
        const dr = v && typeof v === 'object' && !Array.isArray(v) ? (v as DraftDateValue) : {}
        snapshot[f.column] = dr.from || dr.to ? { from: dr.from, to: dr.to } : undefined
      } else if (f.type === 'text') {
        const s = typeof v === 'string' ? v : ''
        snapshot[f.column] = s || undefined
      }
    }
    onCommitDraft(snapshot)
    setOpen(false)
  }

  const filteredRowCount = table.getFilteredRowModel().rows.length

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-9 gap-2">
          <SlidersHorizontal className="size-3.5" />
          Filters
          {activeFilterCount > 0 && (
            <Badge variant="secondary" className="ml-1 h-5 min-w-5 rounded-full px-1.5 text-xs font-semibold">
              {activeFilterCount}
            </Badge>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="flex max-h-[min(560px,80vh)] w-[380px] flex-col overflow-hidden p-0">
        {/* Header */}
        <div className="border-b px-4 pt-3.5 pb-3">
          <div className="flex items-center gap-2.5">
            <div className="bg-muted flex size-7 items-center justify-center rounded-md">
              <SlidersHorizontal className="text-muted-foreground size-3.5" />
            </div>
            <div className="flex-1">
              <p className="text-sm leading-none font-semibold">Filters</p>
              <p className="text-muted-foreground mt-1 text-xs">
                {activeFilterCount > 0 ? (
                  <>
                    {activeFilterCount} active
                    {!isServerSide && (
                      <>
                        {' '}&middot; {filteredRowCount} result{filteredRowCount !== 1 ? 's' : ''}
                      </>
                    )}
                  </>
                ) : (
                  'Narrow down results'
                )}
              </p>
            </div>
          </div>
        </div>

        {/* Scrollable filter sections */}
        <div ref={filterScrollRef} className="flex-1 overflow-y-auto">
          <div className="space-y-2 p-3">
            {filters.map((filter) => {
              if (filter.type === 'text') {
                return (
                  <div key={filter.column} className="bg-muted/40 rounded-lg p-2.5">
                    <div className="mb-2 flex items-center justify-between">
                      <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                        {filter.label}
                      </Label>
                      {getDraftText(filter.column) && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => clearDraftSection(filter)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <Input
                      placeholder={`Filter by ${filter.label.toLowerCase()}...`}
                      value={getDraftText(filter.column)}
                      className="h-8 text-sm"
                      onChange={(e) => setDraftText(filter.column, e.target.value ?? '')}
                    />
                  </div>
                )
              }

              if (filter.type === 'multiselect' || filter.type === 'select') {
                const multi = getDraftMulti(filter.column)
                return (
                  <div
                    key={filter.column}
                    className={[
                      'rounded-lg p-2.5 transition-colors',
                      multi.length > 0 ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',
                    ].join(' ')}
                  >
                    <div className="mb-2 flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                          {filter.label}
                        </Label>
                        {multi.length > 0 && (
                          <Badge
                            variant="secondary"
                            className="bg-primary/15 text-primary h-4 rounded-full px-1.5 text-xs font-semibold"
                          >
                            {multi.length}
                          </Badge>
                        )}
                      </div>
                      {multi.length > 0 && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => clearDraftSection(filter)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <Command className="[&_[data-slot=command-input-wrapper]]:border-input overflow-visible bg-transparent [&_[data-slot=command-input-wrapper]]:h-8 [&_[data-slot=command-input-wrapper]]:rounded-md [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:px-2.5">
                      <CommandInput className="h-7 text-sm" placeholder={`Search ${filter.label.toLowerCase()}...`} />
                      <CommandList className="mt-1 max-h-[132px]">
                        <CommandEmpty>No results.</CommandEmpty>
                        <CommandGroup className="p-0">
                          {filter.options?.map((rawOpt) => {
                            const opt = resolveOption(rawOpt)
                            const OptIcon = opt.icon
                            return (
                              <CommandItem
                                key={opt.value}
                                value={opt.label}
                                className="rounded-md px-2 py-1.5 text-sm"
                                onSelect={() => toggleDraftMulti(filter.column, opt.value)}
                              >
                                <div
                                  className={[
                                    'flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors',
                                    multi.includes(opt.value)
                                      ? 'border-primary bg-primary text-primary-foreground'
                                      : 'border-muted-foreground/40 [&_svg]:invisible',
                                  ].join(' ')}
                                >
                                  <Check className="size-3" />
                                </div>
                                {OptIcon && <OptIcon className="text-muted-foreground size-4" />}
                                <span>{opt.label}</span>
                              </CommandItem>
                            )
                          })}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </div>
                )
              }

              if (filter.type === 'date') {
                const dr = getDraftDate(filter.column)
                const hasDate = !!(dr.from || dr.to)
                return (
                  <div
                    key={filter.column}
                    className={[
                      'rounded-lg p-2.5 transition-colors',
                      hasDate ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',
                    ].join(' ')}
                  >
                    <div className="mb-2 flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                          {filter.label}
                        </Label>
                        {hasDate && (
                          <Badge
                            variant="secondary"
                            className="bg-primary/15 text-primary h-auto rounded-full px-1.5 py-0 text-xs font-medium"
                          >
                            {formatDraftDateRange(filter.column)}
                          </Badge>
                        )}
                      </div>
                      {hasDate && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => clearDraftSection(filter)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <div className="flex justify-center overflow-hidden rounded-md border">
                      <RangeCalendar
                        selected={getDraftCalendarModel(filter.column)}
                        numberOfMonths={1}
                        className="p-2"
                        onSelect={(range) => onDraftCalendarUpdate(filter.column, range)}
                      />
                    </div>
                  </div>
                )
              }

              return null
            })}

            {/* Consumer-supplied custom filter UI */}
            {customFilters}
          </div>
        </div>

        {/* Footer */}
        <div className="flex gap-2 border-t px-3 py-2.5">
          <Button variant="outline" size="sm" className="h-8 flex-1" disabled={!isDraftDirty} onClick={resetDraft}>
            <X className="size-3.5" />
            Reset
          </Button>
          <Button size="sm" className="h-8 flex-1" onClick={applyAndClose}>
            Apply
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}

```

### `packages/registry-react/components/data-table/DataTableFilterSheet.tsx`

```tsx
'use client'

import * as React from 'react'
import type { Table } from '@tanstack/react-table'
import type { DateRange } from 'react-day-picker'
import { Check, SlidersHorizontal, X } from 'lucide-react'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Label } from '@/components/ui/label'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
import { type FilterDefinition, resolveOption } from './types'

export interface DataTableFilterSheetProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  table: Table<any>
  filters: FilterDefinition[]
  activeFilterCount: number
  isAnyFilterActive: boolean
  isServerSide: boolean
  /** Strip section bgs / rings / dividers / SheetContent side border. */
  borderless?: boolean
  getMultiSelectValue: (column: string) => string[]
  getDateRangeValue: (column: string) => { from?: string; to?: string }
  formatDateRange: (column: string) => string
  getCalendarModel: (column: string) => DateRange | undefined
  onApply: () => void
  onClearAll: () => void
  onToggleMultiselect: (column: string, value: string) => void
  onClearFilter: (filter: FilterDefinition) => void
  onClearDateFilter: (filter: FilterDefinition) => void
  onCalendarUpdate: (column: string, value: DateRange | undefined) => void
  onTextFilterUpdate: (column: string, value: string | undefined) => void
  customFilters?: React.ReactNode
}

export function DataTableFilterSheet({
  open,
  onOpenChange,
  table,
  filters,
  activeFilterCount,
  isAnyFilterActive,
  isServerSide,
  borderless = false,
  getMultiSelectValue,
  getDateRangeValue,
  formatDateRange,
  getCalendarModel,
  onApply,
  onClearAll,
  onToggleMultiselect,
  onClearFilter,
  onClearDateFilter,
  onCalendarUpdate,
  onTextFilterUpdate,
  customFilters,
}: DataTableFilterSheetProps) {
  const filterScrollRef = React.useRef<HTMLDivElement | null>(null)

  React.useEffect(() => {
    if (open) {
      setTimeout(() => {
        filterScrollRef.current?.scrollTo({ top: 0 })
      }, 50)
    }
  }, [open])

  const filteredRowCount = table.getFilteredRowModel().rows.length

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className={['flex flex-col gap-0 p-0 sm:max-w-[400px]', borderless ? 'border-0' : ''].join(' ')}>
        {/* Header */}
        <div className={borderless ? 'px-5 pt-5 pb-2' : 'border-b px-5 pt-5 pb-4'}>
          <div className="flex items-center gap-3">
            <div className="bg-muted flex size-9 items-center justify-center rounded-lg">
              <SlidersHorizontal className="text-muted-foreground size-4" />
            </div>
            <div className="flex-1">
              <SheetHeader className="space-y-0.5 p-0">
                <SheetTitle className="text-sm font-semibold">Filters</SheetTitle>
                <SheetDescription className="text-xs">
                  {activeFilterCount > 0 ? (
                    <>
                      {activeFilterCount} active filter{activeFilterCount > 1 ? 's' : ''}
                      {!isServerSide && (
                        <>
                          {' '}&middot; {filteredRowCount} result{filteredRowCount !== 1 ? 's' : ''}
                        </>
                      )}
                    </>
                  ) : (
                    'Narrow down results'
                  )}
                </SheetDescription>
              </SheetHeader>
            </div>
          </div>
        </div>

        {/* Scrollable filter sections */}
        <div ref={filterScrollRef} className="flex-1 overflow-y-auto">
          <div className="space-y-2 p-4">
            {filters.map((filter) => {
              const textValue = (table.getColumn(filter.column)?.getFilterValue() as string) ?? ''
              const multi = getMultiSelectValue(filter.column)
              const dr = getDateRangeValue(filter.column)
              const hasDate = !!(dr.from || dr.to)

              if (filter.type === 'text') {
                return (
                  <div key={filter.column} className={borderless ? 'py-2' : 'bg-muted/40 rounded-lg p-3'}>
                    <div className="mb-2 flex items-center justify-between">
                      <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                        {filter.label}
                      </Label>
                      {textValue && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => onTextFilterUpdate(filter.column, undefined)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <Input
                      placeholder={`Filter by ${filter.label.toLowerCase()}...`}
                      value={textValue}
                      className="h-8 text-sm"
                      onChange={(e) => onTextFilterUpdate(filter.column, e.target.value || undefined)}
                    />
                  </div>
                )
              }

              if (filter.type === 'multiselect' || filter.type === 'select') {
                return (
                  <div
                    key={filter.column}
                    className={
                      borderless
                        ? 'py-2 transition-colors'
                        : [
                            'rounded-lg p-3 transition-colors',
                            multi.length > 0 ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',
                          ].join(' ')
                    }
                  >
                    <div className="mb-2 flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                          {filter.label}
                        </Label>
                        {multi.length > 0 && (
                          <Badge
                            variant="secondary"
                            className="bg-primary/15 text-primary h-4 rounded-full px-1.5 text-xs font-semibold"
                          >
                            {multi.length}
                          </Badge>
                        )}
                      </div>
                      {multi.length > 0 && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => onClearFilter(filter)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <Command className="[&_[data-slot=command-input-wrapper]]:border-input overflow-visible bg-transparent [&_[data-slot=command-input-wrapper]]:h-8 [&_[data-slot=command-input-wrapper]]:rounded-md [&_[data-slot=command-input-wrapper]]:border [&_[data-slot=command-input-wrapper]]:px-2.5">
                      <CommandInput className="h-7 text-sm" placeholder={`Search ${filter.label.toLowerCase()}...`} />
                      <CommandList className="mt-1 max-h-[132px]">
                        <CommandEmpty>No results.</CommandEmpty>
                        <CommandGroup className="p-0">
                          {filter.options?.map((rawOpt) => {
                            const opt = resolveOption(rawOpt)
                            const OptIcon = opt.icon
                            return (
                              <CommandItem
                                key={opt.value}
                                value={opt.label}
                                className="rounded-md px-2 py-1.5 text-sm"
                                onSelect={() => onToggleMultiselect(filter.column, opt.value)}
                              >
                                <div
                                  className={[
                                    'flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors',
                                    multi.includes(opt.value)
                                      ? 'border-primary bg-primary text-primary-foreground'
                                      : 'border-muted-foreground/40 [&_svg]:invisible',
                                  ].join(' ')}
                                >
                                  <Check className="size-3" />
                                </div>
                                {OptIcon && <OptIcon className="text-muted-foreground size-4" />}
                                <span>{opt.label}</span>
                              </CommandItem>
                            )
                          })}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </div>
                )
              }

              if (filter.type === 'date') {
                return (
                  <div
                    key={filter.column}
                    className={
                      borderless
                        ? 'py-2 transition-colors'
                        : [
                            'rounded-lg p-3 transition-colors',
                            hasDate ? 'bg-primary/[0.04] ring-primary/20 ring-1' : 'bg-muted/40',
                          ].join(' ')
                    }
                  >
                    <div className="mb-2 flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Label className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                          {filter.label}
                        </Label>
                        {hasDate && (
                          <Badge
                            variant="secondary"
                            className="bg-primary/15 text-primary h-auto rounded-full px-1.5 py-0 text-xs font-medium"
                          >
                            {formatDateRange(filter.column)}
                          </Badge>
                        )}
                      </div>
                      {hasDate && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                          onClick={() => onClearDateFilter(filter)}
                        >
                          Clear
                        </button>
                      )}
                    </div>
                    <div className={['flex justify-center overflow-hidden', borderless ? '' : 'rounded-md border'].join(' ')}>
                      <RangeCalendar
                        selected={getCalendarModel(filter.column)}
                        numberOfMonths={1}
                        className="p-2"
                        onSelect={(range) => onCalendarUpdate(filter.column, range)}
                      />
                    </div>
                  </div>
                )
              }

              return null
            })}

            {/* Consumer-supplied custom filter UI */}
            {customFilters}
          </div>
        </div>

        {/* Footer */}
        <div className={['flex gap-2 px-4 py-3', borderless ? '' : 'border-t'].join(' ')}>
          <Button variant="outline" size="sm" className="flex-1" disabled={!isAnyFilterActive} onClick={onClearAll}>
            <X className="size-3.5" />
            Reset All
          </Button>
          <Button size="sm" className="flex-1" onClick={onApply}>
            {isServerSide ? (
              'Apply Filters'
            ) : (
              <>
                Show {filteredRowCount} result{filteredRowCount !== 1 ? 's' : ''}
              </>
            )}
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}

```

### `packages/registry-react/components/data-table/DataTablePagination.tsx`

```tsx
'use client'

import type { Table } from '@tanstack/react-table'
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'

export interface DataTablePaginationProps {
  table: Table<any>
  totalRows: number
  isServerSide: boolean
  borderless?: boolean
}

export function DataTablePagination({ table, totalRows, isServerSide, borderless = false }: DataTablePaginationProps) {
  return (
    <div className={['flex items-center justify-between py-3', borderless ? '' : 'border-t px-4'].join(' ')}>
      <div className="text-muted-foreground flex-1 text-sm">
        {table.getFilteredSelectedRowModel().rows.length} of{' '}
        {isServerSide ? totalRows : table.getFilteredRowModel().rows.length} row(s) selected.
      </div>
      <div className="flex items-center gap-6 lg:gap-8">
        <div className="flex items-center gap-2">
          <p className="text-sm font-medium whitespace-nowrap">Rows per page</p>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => {
              table.setPageSize(Number(value))
              table.setPageIndex(0)
            }}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue placeholder={`${table.getState().pagination.pageSize}`} />
            </SelectTrigger>
            <SelectContent side="top">
              {[10, 20, 30, 40, 50].map((pageSize) => (
                <SelectItem key={pageSize} value={`${pageSize}`}>
                  {pageSize}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex items-center justify-center text-sm font-medium whitespace-nowrap">
          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
        </div>
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={!table.getCanPreviousPage()}
            onClick={() => table.setPageIndex(0)}
          >
            <ChevronsLeft className="size-4" aria-hidden="true" />
            <span className="sr-only">First page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={!table.getCanPreviousPage()}
            onClick={() => table.previousPage()}
          >
            <ChevronLeft className="size-4" aria-hidden="true" />
            <span className="sr-only">Previous page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={!table.getCanNextPage()}
            onClick={() => table.nextPage()}
          >
            <ChevronRight className="size-4" aria-hidden="true" />
            <span className="sr-only">Next page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={!table.getCanNextPage()}
            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
          >
            <ChevronsRight className="size-4" aria-hidden="true" />
            <span className="sr-only">Last page</span>
          </Button>
        </div>
      </div>
    </div>
  )
}

```

### `packages/registry-react/components/data-table/DataTableToolbar.tsx`

```tsx
'use client'

import * as React from 'react'
import type { Table } from '@tanstack/react-table'
import type { DateRange } from 'react-day-picker'
import {
  CalendarIcon,
  Check,
  ChevronDown,
  Download,
  ListFilter,
  Plus,
  Rows3,
  SlidersHorizontal,
  X,
} from 'lucide-react'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { DataTableFilterPopover } from './DataTableFilterPopover'
import { type FilterDefinition, resolveOption } from './types'

export interface DataTableToolbarProps {
  table: Table<any>
  filterColumn: string
  filterPlaceholder: string
  filters: FilterDefinition[]
  filterMode: 'inline' | 'modal' | 'popover'
  enableSearch?: boolean
  enableColumnVisibility?: boolean
  enableExport?: boolean
  enableDensityToggle?: boolean
  density?: 'compact' | 'cozy' | 'comfortable'
  borderless?: boolean
  activeFilterCount: number
  isAnyFilterActive: boolean
  isServerSide: boolean
  getMultiSelectValue: (column: string) => string[]
  getDateRangeValue: (column: string) => { from?: string; to?: string }
  getFilterSelectedLabels: (filter: FilterDefinition) => string[]
  formatDateRange: (column: string) => string
  getCalendarModel: (column: string) => DateRange | undefined
  onSearch: (value: string) => void
  onOpenFilterSheet: () => void
  onApplyFilters: () => void
  onClearAllFilters: () => void
  onToggleMultiselect: (column: string, value: string) => void
  onClearFilter: (filter: FilterDefinition) => void
  onClearDateFilter: (filter: FilterDefinition) => void
  onCalendarUpdate: (column: string, value: DateRange | undefined) => void
  onTextFilterUpdate: (column: string, value: string | undefined) => void
  onCommitFilters: (draft: Record<string, any>) => void
  onExportCsv: () => void
  onExportJson: () => void
  onDensityChange: (value: 'compact' | 'cozy' | 'comfortable') => void
  toolbarExtra?: React.ReactNode
  customFilters?: React.ReactNode
}

export function DataTableToolbar({
  table,
  filterColumn,
  filterPlaceholder,
  filters,
  filterMode,
  enableSearch = true,
  enableColumnVisibility = true,
  enableExport = false,
  enableDensityToggle = false,
  density = 'cozy',
  borderless = false,
  activeFilterCount,
  isAnyFilterActive,
  isServerSide,
  getMultiSelectValue,
  getDateRangeValue,
  getFilterSelectedLabels,
  formatDateRange,
  getCalendarModel,
  onSearch,
  onOpenFilterSheet,
  onApplyFilters: _onApplyFilters,
  onClearAllFilters,
  onToggleMultiselect,
  onClearFilter,
  onClearDateFilter,
  onCalendarUpdate,
  onTextFilterUpdate,
  onCommitFilters,
  onExportCsv,
  onExportJson,
  onDensityChange,
  toolbarExtra,
  customFilters,
}: DataTableToolbarProps) {
  return (
    <div className={['flex flex-col gap-2 py-3', borderless ? '' : 'border-b px-4'].join(' ')}>
      <div className="flex items-center gap-2">
        {/* Search only renders when filterColumn maps to an actual column. */}
        {enableSearch && filterColumn && table.getColumn(filterColumn) && (
          <Input
            className="h-9 max-w-xs"
            placeholder={filterPlaceholder}
            value={(table.getColumn(filterColumn)?.getFilterValue() as string) ?? ''}
            onChange={(e) => onSearch(e.target.value)}
          />
        )}

        {/* ── INLINE filter mode ── */}
        {filterMode === 'inline' &&
          filters.map((filter) => {
            if (filter.type === 'multiselect' || filter.type === 'select') {
              const multi = getMultiSelectValue(filter.column)
              return (
                <Popover key={filter.column}>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="sm" className="h-9 border-dashed">
                      <Plus className="size-4" aria-hidden="true" />
                      {filter.label}
                      {multi.length > 0 && (
                        <>
                          <Separator orientation="vertical" className="mx-1 h-4" />
                          <div className="flex gap-1">
                            {multi.length > 2 ? (
                              <Badge variant="secondary" className="rounded-sm px-1 font-normal">
                                {multi.length} selected
                              </Badge>
                            ) : (
                              getFilterSelectedLabels(filter).map((label) => (
                                <Badge key={label} variant="secondary" className="rounded-sm px-1 font-normal">
                                  {label}
                                </Badge>
                              ))
                            )}
                          </div>
                        </>
                      )}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-52 p-0" align="start">
                    <Command>
                      <CommandInput placeholder={`Search ${filter.label.toLowerCase()}...`} />
                      <CommandList>
                        <CommandEmpty>No results.</CommandEmpty>
                        <CommandGroup>
                          {filter.options?.map((rawOpt) => {
                            const opt = resolveOption(rawOpt)
                            const OptIcon = opt.icon
                            return (
                              <CommandItem
                                key={opt.value}
                                value={opt.label}
                                onSelect={() => onToggleMultiselect(filter.column, opt.value)}
                              >
                                <div
                                  className={[
                                    'border-primary flex size-4 shrink-0 items-center justify-center rounded-sm border',
                                    multi.includes(opt.value)
                                      ? 'bg-primary text-primary-foreground'
                                      : 'opacity-50 [&_svg]:invisible',
                                  ].join(' ')}
                                >
                                  <Check className="size-3" />
                                </div>
                                {OptIcon && <OptIcon className="text-muted-foreground size-4" />}
                                <span>{opt.label}</span>
                              </CommandItem>
                            )
                          })}
                        </CommandGroup>
                        {multi.length > 0 && (
                          <>
                            <CommandSeparator />
                            <CommandGroup>
                              <CommandItem
                                value="__clear__"
                                className="justify-center text-center"
                                onSelect={() => onClearFilter(filter)}
                              >
                                Clear filter
                              </CommandItem>
                            </CommandGroup>
                          </>
                        )}
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              )
            }

            if (filter.type === 'date') {
              const dr = getDateRangeValue(filter.column)
              const hasDate = !!(dr.from || dr.to)
              return (
                <Popover key={filter.column}>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="sm" className="h-9 border-dashed">
                      <CalendarIcon className="size-4" aria-hidden="true" />
                      {filter.label}
                      {hasDate && (
                        <>
                          <Separator orientation="vertical" className="mx-1 h-4" />
                          <Badge variant="secondary" className="rounded-sm px-1 font-normal">
                            {formatDateRange(filter.column)}
                          </Badge>
                        </>
                      )}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <RangeCalendar
                      selected={getCalendarModel(filter.column)}
                      numberOfMonths={2}
                      onSelect={(range) => onCalendarUpdate(filter.column, range)}
                    />
                    {hasDate && (
                      <div className="border-t p-2">
                        <Button
                          variant="ghost"
                          size="sm"
                          className="h-7 w-full text-xs"
                          onClick={() => onClearDateFilter(filter)}
                        >
                          Clear dates
                        </Button>
                      </div>
                    )}
                  </PopoverContent>
                </Popover>
              )
            }

            if (filter.type === 'text') {
              const textValue = table.getColumn(filter.column)?.getFilterValue() as string | undefined
              return (
                <Popover key={filter.column}>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="sm" className="h-9 border-dashed">
                      <Plus className="size-4" aria-hidden="true" />
                      {filter.label}
                      {textValue && (
                        <>
                          <Separator orientation="vertical" className="mx-1 h-4" />
                          <Badge variant="secondary" className="rounded-sm px-1 font-normal">
                            {textValue}
                          </Badge>
                        </>
                      )}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-60 p-3" align="start">
                    <div className="space-y-2">
                      <p className="text-sm font-medium">{filter.label}</p>
                      <Input
                        placeholder={`Filter by ${filter.label.toLowerCase()}...`}
                        value={(table.getColumn(filter.column)?.getFilterValue() as string) ?? ''}
                        className="h-8 text-sm"
                        onChange={(e) => onTextFilterUpdate(filter.column, e.target.value || undefined)}
                      />
                    </div>
                  </PopoverContent>
                </Popover>
              )
            }

            return null
          })}

        {/* ── MODAL filter mode (Sheet from the right) ── */}
        {filterMode === 'modal' && (
          <Button
            variant="outline"
            size="sm"
            className={[
              'h-9',
              activeFilterCount > 0 ? 'border-primary/40 bg-primary/5 text-primary hover:bg-primary/10' : '',
            ].join(' ')}
            onClick={onOpenFilterSheet}
          >
            <SlidersHorizontal className="size-4" aria-hidden="true" />
            Filters
            {activeFilterCount > 0 && (
              <Badge className="bg-primary text-primary-foreground ml-0.5 size-5 rounded-full p-0 text-xs font-semibold">
                {activeFilterCount}
              </Badge>
            )}
          </Button>
        )}

        {/* ── POPOVER filter mode ── */}
        {filterMode === 'popover' && filters.length > 0 && (
          <DataTableFilterPopover
            table={table}
            filters={filters}
            activeFilterCount={activeFilterCount}
            isAnyFilterActive={isAnyFilterActive}
            isServerSide={isServerSide}
            getMultiSelectValue={getMultiSelectValue}
            getDateRangeValue={getDateRangeValue}
            formatDateRange={formatDateRange}
            getCalendarModel={getCalendarModel}
            onCommitDraft={(d) => onCommitFilters(d)}
            onClearAll={onClearAllFilters}
            customFilters={customFilters}
          />
        )}

        {/* Inline custom filters (when filterMode === 'inline') */}
        {filterMode === 'inline' && customFilters}

        {/* Toolbar extras (e.g. group-by selector, density toggle) */}
        {toolbarExtra}

        {/* Reset button */}
        {isAnyFilterActive && (
          <Button variant="ghost" size="sm" className="h-9" onClick={onClearAllFilters}>
            Reset
            <X className="size-4" aria-hidden="true" />
          </Button>
        )}

        {/* Export (CSV / JSON) */}
        {enableExport && (
          <div className="ml-auto">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-9">
                  <Download className="size-3.5" />
                  Export
                  <ChevronDown className="size-3.5 opacity-60" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onSelect={onExportCsv}>Export as CSV</DropdownMenuItem>
                <DropdownMenuItem onSelect={onExportJson}>Export as JSON</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}

        {/* Density toggle */}
        {enableDensityToggle && (
          <div className={enableExport ? '' : 'ml-auto'}>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-9" aria-label={`Row density: ${density}`}>
                  <Rows3 className="size-4" aria-hidden="true" />
                  <span className="capitalize">{density}</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuRadioGroup
                  value={density}
                  onValueChange={(v) => onDensityChange(v as 'compact' | 'cozy' | 'comfortable')}
                >
                  <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="cozy">Cozy</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}

        {/* Column Visibility */}
        {enableColumnVisibility && (
          <div className={enableExport || enableDensityToggle ? '' : 'ml-auto'}>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-9">
                  <ListFilter className="size-4" aria-hidden="true" />
                  View
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                {table
                  .getAllColumns()
                  .filter((column) => column.getCanHide())
                  .map((column) => (
                    <DropdownMenuCheckboxItem
                      key={column.id}
                      className="capitalize"
                      checked={column.getIsVisible()}
                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
                    >
                      {column.id}
                    </DropdownMenuCheckboxItem>
                  ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        )}
      </div>
    </div>
  )
}

```

### `packages/registry-react/components/data-table/types.ts`

```ts
import type * as React from 'react'

export interface FilterOption {
  value: string
  label: string
  icon?: React.ComponentType<{ className?: string }>
}

export interface FilterDefinition {
  column: string
  label: string
  type: 'text' | 'select' | 'multiselect' | 'date'
  options?: (string | FilterOption)[]
}

export function resolveOption(opt: string | FilterOption): FilterOption {
  if (typeof opt === 'string') return { value: opt, label: opt }
  return opt
}

```

### `packages/registry-react/components/data-table/date-utils.ts`

```ts
/**
 * ISO-string ↔ native Date helpers shared across the DataTable filter
 * surfaces. The Vue registry leaned on `@internationalized/date`'s
 * CalendarDate because its RangeCalendar (reka-ui) speaks DateValue; the
 * React RangeCalendar wraps react-day-picker, which speaks native `Date`.
 * So instead of pulling `@internationalized/date` into the React tree we
 * keep these two tiny converters local. Column filter values are still
 * stored as `YYYY-MM-DD` ISO strings on the wire, identical to Vue, so
 * server-side payloads match 1:1.
 */
export function isoToDate(str: string | undefined): Date | undefined {
  if (!str) return undefined
  const [y, m, d] = str.split('-').map(Number)
  if (y === undefined || m === undefined || d === undefined) return undefined
  return new Date(y, m - 1, d)
}

export function dateToIso(date: Date | undefined): string {
  if (!date) return ''
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

```

### `packages/registry-react/components/data-table/index.ts`

```ts
export { DataTable, type DataTableProps, type DataTableHandle, type DataTableState } from './DataTable'
export { DataTableColumnHeader, type DataTableColumnHeaderProps } from './DataTableColumnHeader'
export { DataTableToolbar, type DataTableToolbarProps } from './DataTableToolbar'
export { DataTableFilterSheet, type DataTableFilterSheetProps } from './DataTableFilterSheet'
export { DataTableFilterPopover, type DataTableFilterPopoverProps } from './DataTableFilterPopover'
export { DataTablePagination, type DataTablePaginationProps } from './DataTablePagination'
export type { FilterDefinition, FilterOption } from './types'

```

## date-picker

- type: `registry:ui`
- description: Date input that opens a Calendar in a Popover. Handles parsing, formatting, min/max bounds, and disabled dates. Use the Range Calendar version for from/to selections.
- npm deps: `lucide-react`
- registry deps: `button`, `calendar`, `popover`, `range-calendar`, `time-picker`

### `packages/registry-react/components/date-picker/date-picker.tsx`

```tsx
'use client'

import * as React from 'react'
import { Calendar as CalendarIcon, X } from 'lucide-react'
import { DayButton as RdpDayButton, type DateRange, type Matcher } from 'react-day-picker'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { RangeCalendar } from '@/components/ui/range-calendar'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { TimeColumns } from '@/components/ui/time-picker'
import { cn } from '@/lib/utils'
import {
  coerceDate,
  coerceShape,
  defaultRangePresets,
  fmtDate,
  fmtMonth,
  fmtTime,
  stripTime,
  toISODate,
  toISODateTime,
  parseTimeShape,
  weekNumber,
  weekStart,
  withTime,
  type DatePickerLayout,
  type DatePickerPicker,
  type DatePickerPlacement,
  type DatePickerPreset,
  type DatePickerSize,
  type DatePickerStatus,
  type DatePickerType,
  type DisabledTimeResult,
  type FormatValue,
  type InternalMultiple,
  type InternalRange,
  type InternalSingle,
  type MultipleValue,
  type RangeValue,
  type SingleValue,
  type TimeShape,
} from './date-picker-utils'

export type {
  DatePickerType,
  DatePickerLayout,
  DatePickerPicker,
  DatePickerStatus,
  DatePickerSize,
  DatePickerPlacement,
  FormatValue,
  SingleValue,
  MultipleValue,
  RangeValue,
  DatePickerPreset,
  DisabledTimeResult,
} from './date-picker-utils'

type InternalValue = InternalSingle | InternalMultiple | InternalRange | undefined

export interface DatePickerProps {
  /** Controlled value. Shape depends on `type`. ISO `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm` when `showTime`). */
  value?: SingleValue | MultipleValue | RangeValue
  /** Uncontrolled initial value. */
  defaultValue?: SingleValue | MultipleValue | RangeValue
  onValueChange?: (value: SingleValue | MultipleValue | RangeValue) => void
  type?: DatePickerType
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  /** Format for the trigger label. String presets or Intl.DateTimeFormatOptions. Ignored when `showTime`. */
  format?: FormatValue
  /** Backward-compat alias for `format`. */
  dateFormat?: FormatValue
  locale?: string
  numberOfMonths?: number
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
  fixedWeeks?: boolean
  minValue?: string | Date
  maxValue?: string | Date
  /** Header layout: control which parts (month/year) become dropdowns. */
  layout?: DatePickerLayout
  /**
   * Granularity of selection (single type only).
   * - `day`: pick a day from the calendar grid.
   * - `week`: pick a full week — value is the week's start date.
   * - `month`: pick a whole month — value snaps to the 1st.
   * - `quarter`: pick a quarter — value snaps to quarter start.
   * - `year`: pick a whole year — value snaps to Jan 1.
   */
  picker?: DatePickerPicker
  /** Show "Today" shortcut at popover top (single + day picker only). */
  showCurrentDate?: boolean
  /** Require clicking OK before applying the selected value. */
  needConfirm?: boolean
  /** Validation status — applies colored border to the trigger. */
  status?: DatePickerStatus
  /** Size variant of the trigger input. */
  size?: DatePickerSize
  /** Placement of the popover relative to the trigger. */
  placement?: DatePickerPlacement
  /** Pair the calendar with a time selector. Value becomes `YYYY-MM-DDTHH:mm`. */
  showTime?: boolean
  /** Show seconds column in time picker. Only used when `showTime`. */
  showSeconds?: boolean
  /** 24h vs AM/PM column. Only used when `showTime`. */
  use24Hour?: boolean
  /** Minute step for the time column. Only used when `showTime`. */
  minuteStep?: number
  /** Second step for the time column. Only used when `showTime` and `showSeconds`. */
  secondStep?: number
  /** Default time for newly picked dates when `showTime` and no prior selection. `HH:mm` or `HH:mm:ss`. */
  defaultTime?: string
  /** Preset shortcuts for quick selection. */
  presets?: DatePickerPreset[]
  /** Custom separator between range start and end dates. */
  separator?: string
  /** Function to determine if a specific date should be disabled. */
  disabledDate?: (current: Date) => boolean
  /** Function to determine if specific times should be disabled. Only used when `showTime`. */
  disabledTime?: (current?: Date) => DisabledTimeResult
  /** Custom cell renderer for day calendar cells. */
  renderCell?: (day: Date) => React.ReactNode
  triggerClassName?: string
  className?: string
}

const QUARTER_LABELS = ['Q1', 'Q2', 'Q3', 'Q4']
const QUARTER_MONTHS = [1, 4, 7, 10] as const

function compareDates(a: Date, b: Date): number {
  return stripTime(a).getTime() - stripTime(b).getTime()
}

function fmtDateTime(
  d: Date,
  locale: string,
  format: FormatValue,
  showSeconds: boolean,
  use24Hour: boolean,
) {
  return `${fmtDate(d, locale, format)} ${fmtTime(d, showSeconds, use24Hour)}`.trim()
}

function quarterStart(year: number, quarterIdx: number): Date {
  return new Date(year, QUARTER_MONTHS[quarterIdx]! - 1, 1)
}

function weekAnchorForMonth(year: number, month: number, weekStartsOn: number): Date {
  return weekStart(new Date(year, month - 1, 1), weekStartsOn)
}

function layoutToCaptionLayout(
  layout: DatePickerLayout,
): 'dropdown' | 'dropdown-months' | 'dropdown-years' | undefined {
  if (layout === 'month-and-year') return 'dropdown'
  if (layout === 'month-only') return 'dropdown-months'
  if (layout === 'year-only') return 'dropdown-years'
  return undefined
}

function rangeFromCalendar(r: DateRange | undefined): InternalRange | undefined {
  if (!r?.from) return undefined
  return r.to ? { start: r.from, end: r.to } : { start: r.from }
}

function rangeToCalendar(r: InternalRange | undefined): DateRange | undefined {
  if (!r?.start) return undefined
  return { from: stripTime(r.start), to: r.end ? stripTime(r.end) : undefined }
}

function getLastTime(
  internal: InternalValue,
  type: DatePickerType,
  defaultTime: string,
): TimeShape {
  if (type === 'single' && internal instanceof Date) {
    if (internal.getHours() || internal.getMinutes() || internal.getSeconds()) {
      return { h: internal.getHours(), m: internal.getMinutes(), s: internal.getSeconds() }
    }
  }
  if (type === 'range') {
    const r = internal as InternalRange
    if (
      r?.start &&
      (r.start.getHours() || r.start.getMinutes() || r.start.getSeconds())
    ) {
      return { h: r.start.getHours(), m: r.start.getMinutes(), s: r.start.getSeconds() }
    }
  }
  return parseTimeShape(defaultTime, { h: 12, m: 0, s: 0 })
}

const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
  (
    {
      value,
      defaultValue = null,
      onValueChange,
      type = 'single',
      placeholder = 'Pick a date',
      disabled = false,
      readOnly = false,
      clearable = true,
      format = 'medium',
      dateFormat,
      locale = 'en-US',
      numberOfMonths,
      weekStartsOn = 0,
      fixedWeeks = false,
      minValue,
      maxValue,
      layout = 'default',
      picker = 'day',
      showCurrentDate = false,
      needConfirm = false,
      status,
      size = 'middle',
      placement = 'bottomLeft',
      showTime = false,
      showSeconds = false,
      use24Hour = false,
      minuteStep = 5,
      secondStep = 1,
      defaultTime = '12:00',
      presets,
      separator = '~',
      disabledDate,
      disabledTime,
      renderCell,
      triggerClassName,
      className,
    },
    ref,
  ) => {
    const [open, setOpen] = React.useState(false)
    const [previewValue, setPreviewValue] = React.useState<InternalValue>(undefined)
    const isControlled = value !== undefined
    const [internalState, setInternalState] = React.useState<InternalValue>(() =>
      coerceShape(type, defaultValue ?? null),
    )

    const internal = isControlled ? coerceShape(type, value) : internalState
    const activeValue = needConfirm ? (previewValue ?? internal) : internal

    const effectiveFormat = dateFormat ?? format
    const effectiveNumberOfMonths = numberOfMonths ?? (type === 'range' ? 2 : 1)
    const effectivePresets = React.useMemo(
      () => presets ?? (type === 'range' ? defaultRangePresets() : undefined),
      [presets, type],
    )

    const presetGroups = React.useMemo(() => {
      const groups = new Map<string | undefined, DatePickerPreset[]>()
      for (const p of effectivePresets ?? []) {
        const cat = p.category
        if (!groups.has(cat)) groups.set(cat, [])
        groups.get(cat)!.push(p)
      }
      return Array.from(groups.entries()).map(([category, presetList]) => ({
        category,
        presets: presetList,
      }))
    }, [effectivePresets])

    const minDate = React.useMemo(() => coerceDate(minValue) ?? undefined, [minValue])
    const maxDate = React.useMemo(() => coerceDate(maxValue) ?? undefined, [maxValue])

    const [monthYearAnchor, setMonthYearAnchor] = React.useState<Date>(() => {
      const v = coerceShape(type, defaultValue ?? null)
      if (v instanceof Date) return v
      return stripTime(new Date())
    })

    React.useEffect(() => {
      if (!open) setPreviewValue(undefined)
    }, [open])

    React.useEffect(() => {
      if (open) {
        const v = internal
        if (v instanceof Date) setMonthYearAnchor(v)
        else setMonthYearAnchor(stripTime(new Date()))
      }
    }, [open, internal])

    function serializeDate(d: Date) {
      return showTime ? toISODateTime(d, showSeconds) : toISODate(d)
    }

    function emitOut(v: InternalValue) {
      if (type === 'multiple') {
        const arr = (v as InternalMultiple) ?? []
        onValueChange?.(arr.map(serializeDate))
        return
      }
      if (type === 'range') {
        const r = v as InternalRange | undefined
        if (!r?.start || !r?.end) return
        onValueChange?.({ start: serializeDate(r.start), end: serializeDate(r.end) })
        return
      }
      const single = v as InternalSingle
      onValueChange?.(single ? serializeDate(single) : null)
    }

    function handleUpdate(v: InternalValue) {
      if (!isControlled) setInternalState(v)
      emitOut(v)
      if (needConfirm) return
      if (type === 'single' && v && !showTime) setOpen(false)
      if (type === 'range') {
        const r = v as InternalRange | undefined
        if (r?.start && r?.end && !showTime) setOpen(false)
      }
    }

    function clear(event: React.SyntheticEvent) {
      event.stopPropagation()
      if (disabled || readOnly) return
      if (type === 'multiple') handleUpdate([])
      else handleUpdate(undefined)
    }

    function applyPreset(preset: DatePickerPreset) {
      if (disabled || readOnly) return
      const v = preset.value
      if (!v) {
        handleUpdate(undefined)
        setOpen(false)
        return
      }
      if (type === 'multiple') {
        const arr = (v as MultipleValue) ?? []
        handleUpdate(arr.map(coerceDate).filter((x): x is Date => x != null))
        setOpen(false)
        return
      }
      if (type === 'range') {
        const r = v as RangeValue
        if (!r?.start) {
          handleUpdate(undefined)
          setOpen(false)
          return
        }
        const start = coerceDate(r.start)
        const end = r.end ? coerceDate(r.end) : undefined
        if (!start) {
          handleUpdate(undefined)
          setOpen(false)
          return
        }
        handleUpdate(end ? { start, end } : { start })
        setOpen(false)
        return
      }
      handleUpdate(coerceDate(v as SingleValue) ?? undefined)
      setOpen(false)
    }

    function commitPreview() {
      if (needConfirm && previewValue !== undefined) {
        handleUpdate(previewValue)
        setPreviewValue(undefined)
      }
      setOpen(false)
    }

    function cancelPreview() {
      setPreviewValue(undefined)
      setOpen(false)
    }

    const display = React.useMemo(() => {
      const v = internal
      if (!v) return ''
      if (type === 'multiple') {
        const arr = v as InternalMultiple
        if (!arr.length) return ''
        if (arr.length === 1) return fmtDate(arr[0]!, locale, effectiveFormat)
        if (arr.length <= 3) return arr.map((d) => fmtDate(d, locale, effectiveFormat)).join(', ')
        return `${arr.length} dates selected`
      }
      if (type === 'range') {
        const r = v as InternalRange
        const fmt = showTime
          ? (d: Date) => fmtDateTime(d, locale, effectiveFormat, showSeconds, use24Hour)
          : (d: Date) => fmtDate(d, locale, effectiveFormat)
        if (r.start && r.end) return `${fmt(r.start)} ${separator} ${fmt(r.end)}`
        if (r.start) return `${fmt(r.start)} ${separator} …`
        return ''
      }
      if (picker === 'week') {
        const ws = weekStart(v as Date, weekStartsOn)
        return `Week ${weekNumber(ws)}, ${ws.getFullYear()}`
      }
      if (picker === 'month') return fmtMonth(v as Date, locale)
      if (picker === 'quarter') {
        const d = v as Date
        const q = Math.ceil((d.getMonth() + 1) / 3)
        return `Q${q} ${d.getFullYear()}`
      }
      if (picker === 'year') return String((v as Date).getFullYear())
      return showTime
        ? fmtDateTime(v as Date, locale, effectiveFormat, showSeconds, use24Hour)
        : fmtDate(v as Date, locale, effectiveFormat)
    }, [
      internal,
      type,
      locale,
      effectiveFormat,
      showTime,
      showSeconds,
      use24Hour,
      separator,
      picker,
      weekStartsOn,
    ])

    const hasValue = React.useMemo(() => {
      const v = internal
      if (!v) return false
      if (type === 'multiple') return (v as InternalMultiple).length > 0
      if (type === 'range') return Boolean((v as InternalRange).start)
      return true
    }, [internal, type])

    const lastTime = React.useMemo(
      () => getLastTime(internal, type, defaultTime),
      [internal, type, defaultTime],
    )

    function handleCalendarUpdate(v: unknown) {
      if (readOnly) return
      if (needConfirm) {
        if (type === 'multiple') {
          const arr = (v as Date[]) ?? []
          setPreviewValue(arr.map((d) => (showTime ? withTime(d, lastTime) : d)))
        } else if (type === 'range') {
          const r = rangeFromCalendar(v as DateRange | undefined)
          if (!r?.start) setPreviewValue(undefined)
          else {
            const start = showTime ? withTime(r.start, lastTime) : r.start
            const end = r.end ? (showTime ? withTime(r.end, lastTime) : r.end) : undefined
            setPreviewValue(end ? { start, end } : { start })
          }
        } else {
          const d = v as Date | undefined
          setPreviewValue(d ? (showTime ? withTime(d, lastTime) : d) : undefined)
        }
        return
      }
      if (!showTime) {
        if (type === 'range') handleUpdate(rangeFromCalendar(v as DateRange | undefined))
        else if (type === 'multiple') handleUpdate((v as Date[]) ?? [])
        else handleUpdate(v as InternalSingle)
        return
      }
      if (type === 'multiple') {
        const arr = (v as Date[]) ?? []
        handleUpdate(arr.map((d) => withTime(d, lastTime)))
        return
      }
      if (type === 'range') {
        const r = rangeFromCalendar(v as DateRange | undefined)
        if (!r?.start) return handleUpdate(undefined)
        const start = withTime(r.start, lastTime)
        const end = r.end ? withTime(r.end, lastTime) : undefined
        handleUpdate(end ? { start, end } : { start })
        return
      }
      const d = v as Date | undefined
      if (d) handleUpdate(withTime(d, lastTime))
    }

    function handleTimeUpdate(timeValue: string) {
      if (!internal) return
      const t = parseTimeShape(timeValue, lastTime)
      if (type === 'single') {
        handleUpdate(withTime(internal as Date, t))
        return
      }
      if (type === 'range') {
        const r = internal as InternalRange
        if (!r.start) return
        const start = withTime(r.start, t)
        const end = r.end ? withTime(r.end, t) : undefined
        handleUpdate(end ? { start, end } : { start })
      }
    }

    const timeForColumns = showSeconds
      ? `${String(lastTime.h).padStart(2, '0')}:${String(lastTime.m).padStart(2, '0')}:${String(lastTime.s).padStart(2, '0')}`
      : `${String(lastTime.h).padStart(2, '0')}:${String(lastTime.m).padStart(2, '0')}`

    const timeFormat = showSeconds ? 'HH:mm:ss' : 'HH:mm'

    const disabledTimeConfig = React.useMemo(() => {
      if (!disabledTime) return undefined
      let current: Date | undefined
      if (type === 'range') {
        const r = activeValue as InternalRange | undefined
        current = r?.start
      } else if (activeValue instanceof Date) {
        current = activeValue
      } else if (Array.isArray(activeValue)) {
        current = activeValue[0]
      }
      return disabledTime(current)
    }, [disabledTime, activeValue, type])

    const calendarDisabled = React.useMemo(() => {
      const matchers: Matcher[] = []
      if (minDate) matchers.push({ before: stripTime(minDate) })
      if (maxDate) matchers.push({ after: stripTime(maxDate) })
      if (disabledDate) matchers.push(disabledDate)
      return matchers.length ? matchers : undefined
    }, [minDate, maxDate, disabledDate])

    const calendarValue = React.useMemo(() => {
      const v = internal
      if (type === 'multiple') return (v as InternalMultiple | undefined)?.map(stripTime)
      if (type === 'range') return rangeToCalendar(v as InternalRange | undefined)
      if (v instanceof Date) return stripTime(v)
      return undefined
    }, [internal, type])

    const captionLayout = layoutToCaptionLayout(layout)

    const calendarComponents = React.useMemo(() => {
      if (!renderCell) return undefined
      return {
        DayButton: (props: React.ComponentProps<typeof RdpDayButton>) => {
          const { day, children: _children, ...rest } = props
          return (
            <RdpDayButton day={day} modifiers={props.modifiers} {...rest}>
              {renderCell(day.date)}
            </RdpDayButton>
          )
        },
      }
    }, [renderCell])

    const placementMap: Record<
      DatePickerPlacement,
      { side: 'top' | 'bottom' | 'left' | 'right'; align: 'start' | 'center' | 'end' }
    > = {
      top: { side: 'top', align: 'center' },
      bottom: { side: 'bottom', align: 'center' },
      left: { side: 'left', align: 'center' },
      right: { side: 'right', align: 'center' },
      topLeft: { side: 'top', align: 'start' },
      topRight: { side: 'top', align: 'end' },
      bottomLeft: { side: 'bottom', align: 'start' },
      bottomRight: { side: 'bottom', align: 'end' },
    }
    const popoverPlacement = placementMap[placement] ?? { side: 'bottom', align: 'start' }

    const buttonSize = size === 'small' ? 'sm' : size === 'large' ? 'lg' : 'default'

    const triggerClasses = cn(
      showTime ? 'min-w-[280px]' : 'min-w-[240px]',
      'justify-start gap-2 text-left font-normal',
      !hasValue && 'text-muted-foreground',
      status === 'error' && 'border-destructive focus-visible:ring-destructive',
      status === 'warning' && 'border-warning focus-visible:ring-warning',
      triggerClassName,
      className,
    )

    function pickToday() {
      if (type !== 'single') return
      const t = stripTime(new Date())
      if (picker === 'week') {
        handleUpdate(weekStart(t, weekStartsOn))
        return
      }
      handleUpdate(t)
    }

    function shiftAnchor(dir: -1 | 1) {
      const y = monthYearAnchor.getFullYear()
      const m = monthYearAnchor.getMonth() + 1
      if (picker === 'month' || picker === 'week') {
        setMonthYearAnchor(new Date(y + dir, m - 1, 1))
      } else if (picker === 'year' || picker === 'quarter') {
        setMonthYearAnchor(new Date(y + dir, 0, 1))
      }
    }

    const monthLabels = React.useMemo(
      () =>
        Array.from({ length: 12 }, (_, idx) =>
          new Intl.DateTimeFormat(locale, { month: 'short' }).format(new Date(2024, idx, 1)),
        ),
      [locale],
    )

    const yearGrid = React.useMemo(() => {
      const y = monthYearAnchor.getFullYear()
      const start = y - (y % 12)
      return Array.from({ length: 12 }, (_, i) => start + i)
    }, [monthYearAnchor])

    const weekGrid = React.useMemo(() => {
      const y = monthYearAnchor.getFullYear()
      const m = monthYearAnchor.getMonth() + 1
      const start = weekAnchorForMonth(y, m, weekStartsOn)
      return Array.from({ length: 6 }, (_, i) => {
        const weekStartDate = new Date(start)
        weekStartDate.setDate(weekStartDate.getDate() + i * 7)
        const weekEndDate = new Date(weekStartDate)
        weekEndDate.setDate(weekEndDate.getDate() + 6)
        return {
          start: weekStartDate,
          end: weekEndDate,
          weekNum: weekNumber(weekStartDate),
        }
      })
    }, [monthYearAnchor, weekStartsOn])

    function isWeekSelected(ws: Date) {
      const v = activeValue
      if (!(v instanceof Date)) return false
      return compareDates(weekStart(v, weekStartsOn), ws) === 0
    }

    function isWeekDisabled(ws: Date) {
      if (minDate && compareDates(ws, minDate) < 0) return true
      const weekEnd = new Date(ws)
      weekEnd.setDate(weekEnd.getDate() + 6)
      if (maxDate && compareDates(weekEnd, maxDate) > 0) return true
      if (disabledDate?.(ws)) return true
      return false
    }

    function pickWeek(ws: Date) {
      if (isWeekDisabled(ws) || readOnly) return
      if (needConfirm) {
        setPreviewValue(ws)
        return
      }
      handleUpdate(ws)
    }

    function isQuarterSelected(qIdx: number) {
      const v = activeValue
      if (!(v instanceof Date)) return false
      return (
        v.getFullYear() === monthYearAnchor.getFullYear() &&
        Math.ceil((v.getMonth() + 1) / 3) === qIdx + 1
      )
    }

    function isQuarterDisabled(qIdx: number) {
      const d = quarterStart(monthYearAnchor.getFullYear(), qIdx)
      if (minDate && compareDates(d, minDate) < 0) return true
      const lastDay = new Date(d.getFullYear(), d.getMonth() + 3, 0)
      if (maxDate && compareDates(lastDay, maxDate) > 0) return true
      if (disabledDate?.(d)) return true
      return false
    }

    function pickQuarter(qIdx: number) {
      const d = quarterStart(monthYearAnchor.getFullYear(), qIdx)
      if (isQuarterDisabled(qIdx) || readOnly) return
      if (needConfirm) {
        setPreviewValue(d)
        return
      }
      handleUpdate(d)
    }

    function isMonthSelected(monthIdx: number) {
      const v = activeValue
      if (!(v instanceof Date)) return false
      return v.getFullYear() === monthYearAnchor.getFullYear() && v.getMonth() === monthIdx
    }

    function isMonthDisabled(monthIdx: number) {
      const d = new Date(monthYearAnchor.getFullYear(), monthIdx, 1)
      if (minDate && compareDates(d, minDate) < 0) return true
      if (maxDate && compareDates(d, maxDate) > 0) return true
      if (disabledDate?.(d)) return true
      return false
    }

    function pickMonth(monthIdx: number) {
      const d = new Date(monthYearAnchor.getFullYear(), monthIdx, 1)
      if (isMonthDisabled(monthIdx) || readOnly) return
      if (needConfirm) {
        setPreviewValue(d)
        return
      }
      handleUpdate(d)
    }

    function isYearSelected(year: number) {
      const v = activeValue
      return v instanceof Date && v.getFullYear() === year
    }

    function isYearDisabled(year: number) {
      const d = new Date(year, 0, 1)
      const lastDay = new Date(year, 11, 31)
      if (minDate && compareDates(lastDay, minDate) < 0) return true
      if (maxDate && compareDates(d, maxDate) > 0) return true
      if (disabledDate?.(d)) return true
      return false
    }

    function pickYear(year: number) {
      const d = new Date(year, 0, 1)
      if (isYearDisabled(year) || readOnly) return
      if (picker === 'year') {
        if (needConfirm) {
          setPreviewValue(d)
          return
        }
        handleUpdate(d)
      } else {
        setMonthYearAnchor(d)
      }
    }

    const monthYearLabel =
      picker === 'week'
        ? new Intl.DateTimeFormat(locale, { month: 'short', year: 'numeric' }).format(monthYearAnchor)
        : picker === 'quarter' || picker === 'month'
          ? String(monthYearAnchor.getFullYear())
          : `${yearGrid[0]} – ${yearGrid[yearGrid.length - 1]}`

    const showAlternatePicker = picker !== 'day' && type === 'single'

    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            ref={ref}
            type="button"
            variant="outline"
            size={buttonSize}
            disabled={disabled}
            className={triggerClasses}
            data-uipkge=""
            data-slot="date-picker"
          >
            <CalendarIcon className="size-4" aria-hidden="true" />
            <span className="flex-1 truncate">{display || placeholder}</span>
            {clearable && hasValue && !disabled && !readOnly && (
              <span
                role="button"
                tabIndex={0}
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-9 cursor-pointer items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                aria-label="Clear date"
                onClick={(e) => {
                  e.stopPropagation()
                  clear(e)
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault()
                    e.stopPropagation()
                    clear(e)
                  }
                }}
              >
                <X className="size-3.5" />
              </span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" side={popoverPlacement.side} align={popoverPlacement.align}>
          {showCurrentDate && type === 'single' && (picker === 'day' || picker === 'week') && (
            <div className="flex justify-end border-b px-3 py-2">
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded px-2 py-1.5 text-xs focus-visible:ring-2 focus-visible:outline-none"
                onClick={pickToday}
              >
                Today
              </button>
            </div>
          )}

          {showAlternatePicker ? (
            <div className="w-[260px] p-3" data-uipkge="" data-slot="month-year-picker">
              <div className="mb-3 flex items-center justify-between">
                <button
                  type="button"
                  className="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  aria-label="Previous"
                  onClick={() => shiftAnchor(-1)}
                >
                  <span className="text-muted-foreground text-sm">‹</span>
                </button>
                <span className="text-sm font-medium">{monthYearLabel}</span>
                <button
                  type="button"
                  className="hover:bg-accent focus-visible:ring-ring inline-flex size-9 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  aria-label="Next"
                  onClick={() => shiftAnchor(1)}
                >
                  <span className="text-muted-foreground text-sm">›</span>
                </button>
              </div>

              {picker === 'week' && (
                <div className="flex flex-col gap-1">
                  {weekGrid.map((week, i) => (
                    <button
                      key={i}
                      type="button"
                      data-uipkge=""
                      data-slot="week-picker-cell"
                      data-active={isWeekSelected(week.start) || undefined}
                      disabled={isWeekDisabled(week.start)}
                      aria-pressed={isWeekSelected(week.start)}
                      aria-disabled={isWeekDisabled(week.start) || undefined}
                      className={cn(
                        'hover:bg-accent focus-visible:ring-ring flex items-center justify-between rounded px-3 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                        isWeekSelected(week.start) && 'bg-primary text-primary-foreground hover:bg-primary',
                      )}
                      onClick={() => pickWeek(week.start)}
                    >
                      <span className="font-medium">Week {week.weekNum}</span>
                      <span
                        className={cn(
                          'text-muted-foreground text-xs',
                          isWeekSelected(week.start) && 'text-primary-foreground',
                        )}
                      >
                        {week.start.getDate()}{' '}
                        {new Intl.DateTimeFormat(locale, { month: 'short' }).format(week.start)} –{' '}
                        {week.end.getDate()}{' '}
                        {new Intl.DateTimeFormat(locale, { month: 'short' }).format(week.end)}
                      </span>
                    </button>
                  ))}
                </div>
              )}

              {picker === 'quarter' && (
                <div className="grid grid-cols-2 gap-2">
                  {QUARTER_LABELS.map((label, q) => (
                    <button
                      key={q}
                      type="button"
                      data-uipkge=""
                      data-slot="quarter-picker-cell"
                      data-active={isQuarterSelected(q) || undefined}
                      disabled={isQuarterDisabled(q)}
                      aria-pressed={isQuarterSelected(q)}
                      aria-disabled={isQuarterDisabled(q) || undefined}
                      className={cn(
                        'hover:bg-accent focus-visible:ring-ring rounded px-4 py-6 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                        isQuarterSelected(q) && 'bg-primary text-primary-foreground hover:bg-primary',
                      )}
                      onClick={() => pickQuarter(q)}
                    >
                      {label}
                    </button>
                  ))}
                </div>
              )}

              {picker === 'month' && (
                <div className="grid grid-cols-3 gap-2">
                  {monthLabels.map((label, m) => (
                    <button
                      key={m}
                      type="button"
                      data-uipkge=""
                      data-slot="month-picker-cell"
                      data-active={isMonthSelected(m) || undefined}
                      disabled={isMonthDisabled(m)}
                      aria-pressed={isMonthSelected(m)}
                      aria-disabled={isMonthDisabled(m) || undefined}
                      className={cn(
                        'hover:bg-accent focus-visible:ring-ring rounded px-2 py-2 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                        isMonthSelected(m) && 'bg-primary text-primary-foreground hover:bg-primary',
                      )}
                      onClick={() => pickMonth(m)}
                    >
                      {label}
                    </button>
                  ))}
                </div>
              )}

              {picker === 'year' && (
                <div className="grid grid-cols-3 gap-2">
                  {yearGrid.map((y) => (
                    <button
                      key={y}
                      type="button"
                      data-uipkge=""
                      data-slot="year-picker-cell"
                      data-active={isYearSelected(y) || undefined}
                      disabled={isYearDisabled(y)}
                      aria-pressed={isYearSelected(y)}
                      aria-disabled={isYearDisabled(y) || undefined}
                      className={cn(
                        'hover:bg-accent focus-visible:ring-ring rounded px-2 py-2 text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                        isYearSelected(y) && 'bg-primary text-primary-foreground hover:bg-primary',
                      )}
                      onClick={() => pickYear(y)}
                    >
                      {y}
                    </button>
                  ))}
                </div>
              )}
            </div>
          ) : (
            <div className="flex">
              {presetGroups.length > 0 && (
                <aside className="flex w-40 flex-col gap-1 border-r p-2">
                  {presetGroups.map((group, gIdx) => (
                    <React.Fragment key={gIdx}>
                      {group.category && (
                        <div className="text-muted-foreground px-2 pt-1 text-xs font-semibold tracking-wider uppercase">
                          {group.category}
                        </div>
                      )}
                      {group.presets.map((p) => (
                        <button
                          key={p.label}
                          type="button"
                          className="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                          onClick={() => applyPreset(p)}
                        >
                          {p.label}
                        </button>
                      ))}
                    </React.Fragment>
                  ))}
                </aside>
              )}

              {type === 'range' ? (
                <RangeCalendar
                  selected={calendarValue as DateRange | undefined}
                  numberOfMonths={effectiveNumberOfMonths}
                  weekStartsOn={weekStartsOn}
                  fixedWeeks={fixedWeeks}
                  disabled={calendarDisabled}
                  startMonth={minDate ? stripTime(minDate) : undefined}
                  endMonth={maxDate ? stripTime(maxDate) : undefined}
                  onSelect={readOnly ? undefined : handleCalendarUpdate}
                />
              ) : (
                <Calendar
                  mode={type === 'multiple' ? 'multiple' : 'single'}
                  selected={calendarValue as Date | Date[] | undefined}
                  numberOfMonths={effectiveNumberOfMonths}
                  weekStartsOn={weekStartsOn}
                  fixedWeeks={fixedWeeks}
                  disabled={calendarDisabled}
                  captionLayout={captionLayout}
                  startMonth={captionLayout && minDate ? stripTime(minDate) : undefined}
                  endMonth={captionLayout && maxDate ? stripTime(maxDate) : undefined}
                  components={calendarComponents}
                  onSelect={readOnly ? undefined : handleCalendarUpdate}
                />
              )}

              {showTime && (
                <div className="flex flex-col border-l">
                  <div className="flex items-center justify-between border-b px-3 py-2">
                    <span className="text-muted-foreground text-xs tracking-widest uppercase">Time</span>
                    <button
                      type="button"
                      className="text-primary focus-visible:ring-ring rounded px-2 py-1.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
                      onClick={() => setOpen(false)}
                    >
                      Done
                    </button>
                  </div>
                  <TimeColumns
                    value={timeForColumns}
                    format={timeFormat}
                    use24Hour={use24Hour}
                    minuteStep={minuteStep}
                    secondStep={secondStep}
                    visible={open}
                    disabledHours={disabledTimeConfig?.disabledHours}
                    disabledMinutes={disabledTimeConfig?.disabledMinutes}
                    disabledSeconds={disabledTimeConfig?.disabledSeconds}
                    onValueChange={handleTimeUpdate}
                  />
                </div>
              )}
            </div>
          )}

          {needConfirm && (
            <div className="flex items-center justify-end gap-2 border-t px-3 py-2">
              <button
                type="button"
                className="hover:bg-accent focus-visible:ring-ring rounded px-3 py-1.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                onClick={cancelPreview}
              >
                Cancel
              </button>
              <button
                type="button"
                className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring rounded px-3 py-1.5 text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                onClick={commitPreview}
              >
                OK
              </button>
            </div>
          )}
        </PopoverContent>
      </Popover>
    )
  },
)
DatePicker.displayName = 'DatePicker'

export { DatePicker }
```

### `packages/registry-react/components/date-picker/date-picker-utils.ts`

```ts
export type DatePickerType = 'single' | 'multiple' | 'range'
export type DatePickerLayout = 'default' | 'month-and-year' | 'month-only' | 'year-only'
export type DatePickerPicker = 'day' | 'week' | 'month' | 'quarter' | 'year'
export type DatePickerStatus = 'error' | 'warning'
export type DatePickerSize = 'small' | 'middle' | 'large'
export type DatePickerPlacement =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight'

export type FormatValue = 'short' | 'medium' | 'long' | 'full' | Intl.DateTimeFormatOptions

export type SingleValue = string | Date | null
export type MultipleValue = (string | Date)[] | null
export type RangeValue = { start: string | Date; end?: string | Date } | null

export interface DatePickerPreset {
  label: string
  value: SingleValue | MultipleValue | RangeValue
  category?: string
}

export interface DisabledTimeResult {
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
}

export type TimeShape = { h: number; m: number; s: number }

export type InternalSingle = Date | undefined
export type InternalMultiple = Date[]
export type InternalRange = { start?: Date; end?: Date }

export function coerceDate(v: string | Date | null | undefined): Date | null {
  if (!v) return null
  if (v instanceof Date) return Number.isNaN(v.getTime()) ? null : v
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(v)
  if (m) {
    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
    return Number.isNaN(d.getTime()) ? null : d
  }
  const dt = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?/.exec(v)
  if (dt) {
    const d = new Date(
      Number(dt[1]),
      Number(dt[2]) - 1,
      Number(dt[3]),
      Number(dt[4]),
      Number(dt[5]),
      dt[6] ? Number(dt[6]) : 0,
    )
    return Number.isNaN(d.getTime()) ? null : d
  }
  const d = new Date(v)
  return Number.isNaN(d.getTime()) ? null : d
}

export function toISODate(d: Date): string {
  const y = d.getFullYear()
  const mo = String(d.getMonth() + 1).padStart(2, '0')
  const da = String(d.getDate()).padStart(2, '0')
  return `${y}-${mo}-${da}`
}

export function toISODateTime(d: Date, showSeconds: boolean): string {
  const date = toISODate(d)
  const h = String(d.getHours()).padStart(2, '0')
  const m = String(d.getMinutes()).padStart(2, '0')
  if (showSeconds) {
    const s = String(d.getSeconds()).padStart(2, '0')
    return `${date}T${h}:${m}:${s}`
  }
  return `${date}T${h}:${m}`
}

export function stripTime(d: Date): Date {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate())
}

export function parseTimeShape(value: string, fallback: TimeShape): TimeShape {
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(value)
  if (!m) return fallback
  return { h: Number(m[1]), m: Number(m[2]), s: m[3] ? Number(m[3]) : 0 }
}

export function withTime(d: Date, t: TimeShape): Date {
  return new Date(d.getFullYear(), d.getMonth(), d.getDate(), t.h, t.m, t.s)
}

export function weekStart(d: Date, weekStartsOn: number): Date {
  const dayOfWeek = d.getDay()
  const offset = (dayOfWeek - weekStartsOn + 7) % 7
  const out = new Date(d)
  out.setDate(out.getDate() - offset)
  return stripTime(out)
}

export function weekNumber(d: Date): number {
  const jsDate = new Date(d)
  const target = new Date(jsDate.valueOf())
  const dayNr = (jsDate.getDay() + 6) % 7
  target.setDate(target.getDate() - dayNr + 3)
  const firstThursday = target.valueOf()
  target.setMonth(0, 1)
  if (target.getDay() !== 4) {
    target.setMonth(0, 1 + ((4 - target.getDay() + 7) % 7))
  }
  return 1 + Math.ceil((firstThursday - target.valueOf()) / 604800000)
}

export function defaultRangePresets(): DatePickerPreset[] {
  const t = stripTime(new Date())
  const yesterday = new Date(t)
  yesterday.setDate(yesterday.getDate() - 1)
  const last7 = new Date(t)
  last7.setDate(last7.getDate() - 6)
  const last30 = new Date(t)
  last30.setDate(last30.getDate() - 29)
  const monthStart = new Date(t.getFullYear(), t.getMonth(), 1)
  const lastMonthEnd = new Date(t.getFullYear(), t.getMonth(), 0)
  const lastMonthStart = new Date(lastMonthEnd.getFullYear(), lastMonthEnd.getMonth(), 1)
  const ytd = new Date(t.getFullYear(), 0, 1)
  return [
    { label: 'Today', value: { start: t, end: t } },
    { label: 'Yesterday', value: { start: yesterday, end: yesterday } },
    { label: 'Last 7 days', value: { start: last7, end: t } },
    { label: 'Last 30 days', value: { start: last30, end: t } },
    { label: 'This month', value: { start: monthStart, end: t } },
    { label: 'Last month', value: { start: lastMonthStart, end: lastMonthEnd } },
    { label: 'Year to date', value: { start: ytd, end: t } },
  ]
}

export function coerceShape(
  type: DatePickerType,
  v: SingleValue | MultipleValue | RangeValue | undefined,
): InternalSingle | InternalMultiple | InternalRange | undefined {
  if (type === 'multiple') {
    if (!Array.isArray(v)) return undefined
    return v.map(coerceDate).filter((x): x is Date => x != null)
  }
  if (type === 'range') {
    if (!v || Array.isArray(v) || typeof v === 'string' || !('start' in (v as object))) return undefined
    const r = v as { start: string | Date; end?: string | Date }
    const start = coerceDate(r.start)
    const end = r.end ? coerceDate(r.end) : undefined
    if (!start) return undefined
    return end ? { start, end } : { start }
  }
  return coerceDate(v as SingleValue) ?? undefined
}

export function fmtDate(d: Date, locale: string, format: FormatValue) {
  const opts: Intl.DateTimeFormatOptions =
    typeof format === 'object' ? format : { dateStyle: format }
  return new Intl.DateTimeFormat(locale, opts).format(d)
}

export function fmtMonth(d: Date, locale: string) {
  return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(d)
}

export function fmtTime(d: Date, showSeconds: boolean, use24Hour: boolean) {
  const opts: Intl.DateTimeFormatOptions = showSeconds
    ? { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: !use24Hour }
    : { hour: '2-digit', minute: '2-digit', hour12: !use24Hour }
  return new Intl.DateTimeFormat(undefined, opts).format(d)
}
```

### `packages/registry-react/components/date-picker/index.ts`

```ts
export {
  DatePicker,
  type DatePickerProps,
  type DatePickerType,
  type DatePickerLayout,
  type DatePickerPicker,
  type DatePickerStatus,
  type DatePickerSize,
  type DatePickerPlacement,
  type FormatValue,
  type SingleValue,
  type MultipleValue,
  type RangeValue,
  type DatePickerPreset,
  type DisabledTimeResult,
} from './date-picker'
```

## dialog

- type: `registry:ui`
- description: Free-form modal primitive — composable from `Dialog`, `DialogTrigger`, `DialogContent`, and friends. Use for forms, info cards, pickers, and any custom modal layout. For confirm/destructive prompts, prefer the prebuilt `AlertModal` shortcut.
- npm deps: `@radix-ui/react-dialog`, `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/dialog/dialog.tsx`

```tsx
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'

const Dialog = DialogPrimitive.Root

const DialogTrigger = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
>(({ ...props }, ref) => <DialogPrimitive.Trigger ref={ref} data-uipkge="" data-slot="dialog-trigger" {...props} />)
DialogTrigger.displayName = DialogPrimitive.Trigger.displayName

const DialogClose = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Close>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
>(({ ...props }, ref) => <DialogPrimitive.Close ref={ref} data-uipkge="" data-slot="dialog-close" {...props} />)
DialogClose.displayName = DialogPrimitive.Close.displayName

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    data-uipkge=""
    data-slot="dialog-overlay"
    className={cn(
      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  showCloseButton?: boolean
}

const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
  ({ className, children, showCloseButton = true, ...props }, ref) => (
    <DialogPrimitive.Portal>
      <DialogOverlay />
      <DialogPrimitive.Content
        ref={ref}
        data-uipkge=""
        data-slot="dialog-content"
        role="dialog"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}

        {showCloseButton && (
          <DialogPrimitive.Close
            data-uipkge=""
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <X />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPrimitive.Portal>
  ),
)
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogScrollContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPrimitive.Portal>
    <DialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50 grid place-items-center overflow-y-auto">
      <DialogPrimitive.Content
        ref={ref}
        className={cn(
          'bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
          className,
        )}
        onPointerDownOutside={(event) => {
          const originalEvent = event.detail.originalEvent
          const target = originalEvent.target as HTMLElement
          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
            event.preventDefault()
          }
        }}
        {...props}
      >
        {children}

        <DialogPrimitive.Close className="hover:bg-secondary absolute top-4 right-4 rounded-md p-0.5 transition-colors duration-200">
          <X className="h-4 w-4" />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPrimitive.Overlay>
  </DialogPrimitive.Portal>
))
DialogScrollContent.displayName = 'DialogScrollContent'

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    data-uipkge=""
    data-slot="dialog-header"
    className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
    {...props}
  />
)
DialogHeader.displayName = 'DialogHeader'

interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  showCloseButton?: boolean
}

const DialogFooter = ({ className, children, showCloseButton = false, ...props }: DialogFooterProps) => (
  <div
    data-uipkge=""
    data-slot="dialog-footer"
    className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
    {...props}
  >
    {children}
    {showCloseButton && (
      <DialogPrimitive.Close asChild>
        <Button variant="outline">Close</Button>
      </DialogPrimitive.Close>
    )}
  </div>
)
DialogFooter.displayName = 'DialogFooter'

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    data-uipkge=""
    data-slot="dialog-title"
    className={cn('text-lg leading-none font-semibold', className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    data-uipkge=""
    data-slot="dialog-description"
    className={cn('text-muted-foreground text-sm', className)}
    {...props}
  />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogTrigger,
  DialogClose,
  DialogOverlay,
  DialogContent,
  DialogScrollContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}

```

### `packages/registry-react/components/dialog/index.ts`

```ts
export {
  Dialog,
  DialogTrigger,
  DialogClose,
  DialogOverlay,
  DialogContent,
  DialogScrollContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
} from './dialog'

```

## dock

- type: `registry:ui`
- description: macOS-style dock menu with magnification on hover. Items expand as the cursor approaches using a cosine bell curve. Supports an items array (icon + label + handler), magnification scale, base size, tooltips on hover, click handlers, and an active state indicator.
- npm deps: `lucide-react`

### `packages/registry-react/components/dock/Dock.tsx`

```tsx
import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface DockItem {
  /** Unique id for the item. */
  id: string
  /** Lucide icon component to render. */
  icon: LucideIcon
  /** Label shown in the tooltip on hover. */
  label: string
  /** Click handler. */
  handler?: () => void
  /** Whether this item is the active one. */
  active?: boolean
}

export interface DockProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Dock items. */
  items: DockItem[]
  /** Base icon size in pixels. Default 48. */
  baseSize?: number
  /** Peak magnification scale as the cursor hovers directly over an item. Default 1.6. */
  magnification?: number
  /** Pixel radius within which items magnify. Default 120. */
  distance?: number
  /** Orientation. Only 'horizontal' (bottom dock) is supported. */
  orientation?: 'horizontal'
  /** Show the tooltip label on hover. Default true. */
  showTooltips?: boolean
}

const Dock = React.forwardRef<HTMLDivElement, DockProps>(
  (
    {
      items,
      baseSize = 48,
      magnification = 1.6,
      distance = 120,
      orientation = 'horizontal',
      showTooltips = true,
      className,
      ...props
    },
    ref,
  ) => {
    const mouseXRef = React.useRef<number | null>(null)
    const [mouseX, setMouseX] = React.useState<number | null>(null)
    const [hoveredId, setHoveredId] = React.useState<string | null>(null)
    const itemRefs = React.useRef<(HTMLDivElement | null)[]>([])

    function onMove(e: React.MouseEvent<HTMLDivElement>) {
      mouseXRef.current = e.clientX
      setMouseX(e.clientX)
    }

    function onLeave() {
      mouseXRef.current = null
      setMouseX(null)
      setHoveredId(null)
    }

    function sizeFor(index: number): number {
      if (mouseXRef.current === null) return baseSize
      const el = itemRefs.current[index]
      if (!el) return baseSize
      const rect = el.getBoundingClientRect()
      const center = rect.left + rect.width / 2
      const dist = Math.abs(mouseXRef.current - center)
      if (dist > distance) return baseSize
      // Cosine bell curve so magnification falls off smoothly.
      const t = 1 - dist / distance
      const scale = 1 + (magnification - 1) * t
      return baseSize * scale
    }

    const sizes = items.map((_, i) => sizeFor(i))

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="dock"
        data-orientation={orientation}
        className={cn(
          'border-border/60 bg-background/60 flex items-end justify-center gap-3 rounded-2xl border px-3 py-2 backdrop-blur-md',
          className,
        )}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
        {...props}
      >
        {items.map((item, index) => {
          const Icon = item.icon
          const size = sizes[index] ?? baseSize
          return (
            <div
              key={item.id}
              ref={(el) => {
                itemRefs.current[index] = el
              }}
              data-slot="dock-item"
              data-active={item.active ? '' : undefined}
              role="button"
              tabIndex={0}
              aria-label={item.label}
              aria-current={item.active ? 'true' : undefined}
              className="group focus-visible:ring-ring/50 relative flex shrink-0 cursor-pointer items-end justify-center rounded-xl outline-none focus-visible:ring-[3px]"
              onMouseEnter={() => setHoveredId(item.id)}
              onMouseLeave={() => setHoveredId(null)}
              onClick={() => item.handler?.()}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  item.handler?.()
                } else if (e.key === ' ') {
                  e.preventDefault()
                  item.handler?.()
                }
              }}
            >
              {/* Tooltip */}
              {showTooltips && hoveredId === item.id ? (
                <span className="border-border bg-popover text-popover-foreground pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border px-2 py-1 text-xs whitespace-nowrap shadow-md">
                  {item.label}
                </span>
              ) : null}

              {/* Icon tile */}
              <span
                className={cn(
                  'flex items-center justify-center rounded-xl border transition-[width,height] duration-100 ease-out will-change-[width,height]',
                  item.active
                    ? 'border-primary/40 bg-primary/10 text-primary'
                    : 'border-border/50 bg-muted/40 text-foreground hover:bg-muted',
                )}
                style={{ width: `${size}px`, height: `${size}px` }}
              >
                <Icon style={{ width: `${size * 0.5}px`, height: `${size * 0.5}px` }} />
              </span>

              {/* Active indicator dot */}
              {item.active ? (
                <span className="bg-primary absolute -bottom-1.5 size-1 rounded-full" aria-hidden="true" />
              ) : null}
            </div>
          )
        })}
      </div>
    )
  },
)
Dock.displayName = 'Dock'

export { Dock }

```

### `packages/registry-react/components/dock/index.ts`

```ts
export { Dock, type DockProps, type DockItem } from './Dock'

```

## dropdown-menu

- type: `registry:ui`
- description: Floating menu launched from a trigger button — for account switchers, row actions, editor menus, and any short list of commands. Supports labels, icons, separators, keyboard shortcuts, checkbox/radio items, and nested submenus. Built on Radix UI; ARIA + keyboard navigation handled.
- npm deps: `@radix-ui/react-dropdown-menu`, `lucide-react`

### `packages/registry-react/components/dropdown-menu/dropdown-menu.tsx`

```tsx
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'
import { cn } from '@/lib/utils'

function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-uipkge="" data-slot="dropdown-menu" {...props} />
}

function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return <DropdownMenuPrimitive.Group data-uipkge="" data-slot="dropdown-menu-group" {...props} />
}

function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return <DropdownMenuPrimitive.RadioGroup data-uipkge="" data-slot="dropdown-menu-radio-group" {...props} />
}

function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-uipkge="" data-slot="dropdown-menu-sub" {...props} />
}

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
>(({ ...props }, ref) => (
  <DropdownMenuPrimitive.Trigger ref={ref} data-uipkge="" data-slot="dropdown-menu-trigger" {...props} />
))
DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="dropdown-menu-content"
      sideOffset={sideOffset}
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
    variant?: 'default' | 'destructive'
  }
>(({ className, inset, variant = 'default', ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-item"
    data-inset={inset ? '' : undefined}
    data-variant={variant}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-checkbox-item"
    checked={checked}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="size-4" aria-hidden="true" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-radio-item"
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="size-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-label"
    data-inset={inset ? '' : undefined}
    className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-separator"
    className={cn('bg-border -mx-1 my-1 h-px', className)}
    {...props}
  />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

function DropdownMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
  return (
    <span
      data-uipkge=""
      data-slot="dropdown-menu-shortcut"
      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
      {...props}
    />
  )
}

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-sub-trigger"
    data-inset={inset ? '' : undefined}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto size-4" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    data-uipkge=""
    data-slot="dropdown-menu-sub-content"
    className={cn(
      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
}

```

### `packages/registry-react/components/dropdown-menu/index.ts`

```ts
export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuPortal,
} from './dropdown-menu'

```

## empty-state

- type: `registry:ui`
- description: Centered placeholder with icon, headline, supporting text, and one or two actions. Drop into empty lists, blank dashboards, and unauthenticated views — the standard "nothing here yet" pattern.
- npm deps: `lucide-react`

### `packages/registry-react/components/empty-state/empty-state.tsx`

```tsx
import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Lucide icon component rendered above the title. */
  icon?: LucideIcon
  title?: string
  description?: string
  role?: 'status' | 'alert'
  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
  ({ className, icon: Icon, title, description, role = 'status', headingTag: Heading = 'h3', children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('flex flex-col items-center py-12 text-center', className)}
      role={role}
      aria-live="polite"
      {...props}
    >
      {Icon ? <Icon className="text-muted-foreground mx-auto mb-3 size-10" aria-hidden="true" /> : null}
      {title ? <Heading className="text-foreground font-medium">{title}</Heading> : null}
      {description ? <p className="text-muted-foreground mt-1 max-w-sm text-sm">{description}</p> : null}
      {children}
    </div>
  ),
)
EmptyState.displayName = 'EmptyState'

export { EmptyState }

```

### `packages/registry-react/components/empty-state/index.ts`

```ts
export { EmptyState, type EmptyStateProps } from './empty-state'

```

## event-calendar

- type: `registry:block`
- description: Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. events / onEventsChange binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless hook.
- npm deps: `lucide-react`
- registry deps: `use-month-grid`, `button`, `dialog`, `select`, `avatar`, `separator`, `skeleton`, `input`, `context-menu`

### `packages/registry-react/blocks/event-calendar/EventCalendar.tsx`

```tsx
'use client'

/**
 * EventCalendar -- a full month-view event calendar with stats strip,
 * drag/shift range select, side rail (selected day or range summary),
 * upcoming list, and per-event/per-cell context menus.
 *
 * Configurable surface:
 *   - events / onEventsChange  CalendarEvent[]   the source of truth
 *   - eventTypes    Record<typeKey, EventTypeMeta>  visual config per type
 *   - initialDate   YYYY-MM-DD        which month opens first
 *   - weekStartsOn  0 | 1             Sunday vs Monday
 *   - loading                          skeleton state during fetch
 *   - title / description / show* toggles per pane
 *
 * Render-prop slots:
 *   - headerActions       extra controls to the right of search/view/new
 *   - eventDialog         full override of the detail dialog body
 *   - emptyDay            node shown when a selected day has no events
 *
 * Callbacks:
 *   - onEventClick(event)
 *   - onEventCreate(dateKey)            requested from "New event" or
 *                                       the per-cell context menu
 *   - onEventEdit / onEventDuplicate / onEventDelete(event)
 *   - onRangeChange({ lo, hi })         fires when the selection range moves
 */
import * as React from 'react'
import {
  ChevronLeft,
  ChevronRight,
  Plus,
  Clock,
  MapPin,
  Users,
  Search,
  CalendarDays,
  ListFilter,
  Sparkles,
  Copy,
  X,
  CalendarPlus,
  ArrowRight,
  MousePointer2,
  Pencil,
  Trash2,
  Eye,
  CopyPlus,
} from 'lucide-react'
import { useMonthGrid, dateFromKey } from '@/lib/use-month-grid'
import type { CalendarEvent, EventTypeMeta } from './types'
import { defaultEventTypes } from './defaults'

export type { CalendarEvent, EventTypeMeta } from './types'
export { defaultEventTypes } from './defaults'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Separator } from '@/components/ui/separator'
import { Skeleton } from '@/components/ui/skeleton'
import { Input } from '@/components/ui/input'
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
  ContextMenuLabel,
} from '@/components/ui/context-menu'

export interface EventCalendarProps {
  /** Source of truth. Pair with onEventsChange. */
  events?: CalendarEvent[]
  onEventsChange?: (value: CalendarEvent[]) => void
  /** Visual + semantic theme per event type. Falls back to defaultEventTypes. */
  eventTypes?: Record<string, EventTypeMeta>
  /** YYYY-MM-DD -- month to open first. Defaults to today. */
  initialDate?: string
  /** 0 = Sunday (default), 1 = Monday. */
  weekStartsOn?: 0 | 1
  /** Show the skeleton placeholders instead of cells / rail rows. */
  loading?: boolean
  title?: string
  description?: string
  /** Default = true. Stats strip across the top. */
  showStats?: boolean
  /** Default = true. Side rail to the right of the grid. */
  showSideRail?: boolean
  /** Default = true. Search input in the header. */
  showSearch?: boolean
  /** Default = true. Month/Week/Day select. Week/Day not implemented yet
   *  -- the select is purely visual until you wire up the modes. */
  showViewSelect?: boolean
  /** Default = true. Legend strip under the grid. */
  showLegend?: boolean
  /** Default = true. "Up next" pane under the side rail. */
  showUpcoming?: boolean
  onEventClick?: (event: CalendarEvent) => void
  onEventCreate?: (dateKey: string) => void
  onEventEdit?: (event: CalendarEvent) => void
  onEventDuplicate?: (event: CalendarEvent) => void
  onEventDelete?: (event: CalendarEvent) => void
  onRangeChange?: (bounds: { lo: string; hi: string }) => void
  /** Render-prop override for the controls to the right of search/view. */
  headerActions?: React.ReactNode
  /** Render-prop override for the dialog body. */
  eventDialog?: (event: CalendarEvent) => React.ReactNode
  /** Render-prop override for the empty selected-day state. */
  emptyDay?: React.ReactNode
}

export function EventCalendar({
  events = [],
  onEventsChange: _onEventsChange,
  eventTypes = defaultEventTypes,
  initialDate,
  weekStartsOn = 0,
  loading = false,
  title = 'Calendar',
  description = 'Schedule, meetings, and deadlines. Drag or shift-click to select a range.',
  showStats = true,
  showSideRail = true,
  showSearch = true,
  showViewSelect = true,
  showLegend = true,
  showUpcoming = true,
  onEventClick,
  onEventCreate,
  onEventEdit,
  onEventDuplicate,
  onEventDelete,
  onRangeChange,
  headerActions,
  eventDialog,
  emptyDay,
}: EventCalendarProps) {
  const [view, setView] = React.useState<'month' | 'week' | 'day'>('month')
  const [eventOpen, setEventOpen] = React.useState(false)
  const [selectedEvent, setSelectedEvent] = React.useState<CalendarEvent | null>(null)
  const [search, setSearch] = React.useState('')

  const {
    todayKey,
    cursor,
    monthLabel,
    gridDays,
    weekdays,
    rangeStart,
    rangeBounds,
    rangeDayCount,
    isRange,
    inRange,
    prevMonth,
    nextMonth,
    goToToday,
    selectWeekOf,
    clearRange,
    onCellMouseDown,
    onCellMouseEnter,
    endDrag,
  } = useMonthGrid({ initialDate, weekStartsOn })

  React.useEffect(() => {
    onRangeChange?.(rangeBounds)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [rangeBounds.lo, rangeBounds.hi])

  // Fall through to a neutral style for unknown event types so the calendar
  // doesn't crash when a consumer passes a type that's missing from the map.
  const neutralMeta: EventTypeMeta = {
    label: 'Event',
    icon: CalendarDays,
    chip: 'bg-muted text-muted-foreground ring-muted-foreground/20',
    bar: 'bg-muted-foreground',
    dot: 'bg-muted-foreground',
    glow: 'bg-muted-foreground/10',
    text: 'text-muted-foreground',
    ring: 'hover:ring-muted-foreground/30',
  }
  function metaFor(type: string): EventTypeMeta {
    return eventTypes[type] ?? neutralMeta
  }

  const typeKeys = React.useMemo(() => Object.keys(eventTypes), [eventTypes])

  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase()
    if (!q) return events
    return events.filter(
      (e) =>
        e.title.toLowerCase().includes(q) ||
        (e.description ?? '').toLowerCase().includes(q) ||
        (e.location ?? '').toLowerCase().includes(q),
    )
  }, [events, search])

  const eventsByDate = React.useMemo(() => {
    const map = new Map<string, CalendarEvent[]>()
    for (const e of filtered) {
      if (!map.has(e.date)) map.set(e.date, [])
      map.get(e.date)!.push(e)
    }
    for (const arr of map.values()) arr.sort((a, b) => a.start.localeCompare(b.start))
    return map
  }, [filtered])

  const monthCounts = React.useMemo(() => {
    const y = cursor.getFullYear()
    const m = cursor.getMonth()
    const out: Record<string, number> & { total: number } = { total: 0 }
    for (const k of typeKeys) out[k] = 0
    for (const e of events) {
      const d = new Date(e.date)
      if (d.getFullYear() === y && d.getMonth() === m) {
        if (out[e.type] !== undefined) out[e.type]!++
        out.total++
      }
    }
    return out
  }, [cursor, typeKeys, events])

  const typeStats = React.useMemo(() => {
    const y = cursor.getFullYear()
    const m = cursor.getMonth()
    const out: Record<string, { weeks: number[]; next: CalendarEvent | null }> = {}
    for (const k of typeKeys) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null }
    const firstOffset = new Date(y, m, 1).getDay()

    for (const e of events) {
      const d = new Date(e.date)
      if (d.getFullYear() === y && d.getMonth() === m && out[e.type]) {
        const week = Math.floor((d.getDate() - 1 + firstOffset) / 7)
        out[e.type]!.weeks[week]!++
      }
    }
    for (const t of typeKeys) {
      const next = events
        .filter((e) => e.type === t && e.date >= todayKey)
        .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))[0]
      out[t]!.next = next ?? null
    }
    return out
  }, [cursor, typeKeys, events, todayKey])

  function fmtNextDate(key: string) {
    if (key === todayKey) return 'Today'
    return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  }

  const rangeEvents = React.useMemo(() => {
    const { lo, hi } = rangeBounds
    return filtered
      .filter((e) => e.date >= lo && e.date <= hi)
      .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))
  }, [filtered, rangeBounds])

  const rangeTypeCounts = React.useMemo(() => {
    const init: Record<string, number> = {}
    for (const k of typeKeys) init[k] = 0
    for (const e of rangeEvents) {
      if (init[e.type] !== undefined) init[e.type]!++
    }
    return init
  }, [typeKeys, rangeEvents])

  const selectedDayEvents = eventsByDate.get(rangeStart) ?? []

  const upcoming = React.useMemo(
    () =>
      filtered
        .filter((e) => e.date > todayKey)
        .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))
        .slice(0, 4),
    [filtered, todayKey],
  )

  function openEvent(e: CalendarEvent) {
    setSelectedEvent(e)
    setEventOpen(true)
    onEventClick?.(e)
  }

  function copyDate(key: string) {
    if (typeof navigator !== 'undefined' && navigator.clipboard) {
      navigator.clipboard.writeText(key).catch(() => {
        /* clipboard may be denied; nothing to do */
      })
    }
  }

  function fmtDayLong(key: string) {
    return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })
  }
  function fmtDayShort(key: string) {
    return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  }

  function initials(name: string) {
    return name
      .split(' ')
      .map((n) => n[0])
      .join('')
      .slice(0, 2)
  }

  function cellRangeClass(key: string, inMonth: boolean) {
    const { lo, hi } = rangeBounds
    if (!inRange(key)) return inMonth ? 'bg-background hover:bg-accent/40' : 'bg-muted/20 hover:bg-muted/30'
    if (key === lo && key === hi) return 'bg-accent/30 ring-1 ring-inset ring-primary/60'
    let cls = 'bg-primary/10 hover:bg-primary/15'
    if (key === lo) cls += ' ring-1 ring-inset ring-primary/60'
    if (key === hi) cls += ' ring-1 ring-inset ring-primary/60'
    return cls
  }

  return (
    <div className="flex flex-col gap-5" onMouseUp={endDrag}>
      {/* Header */}
      <header className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
          {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
        </div>
        <div className="flex items-center gap-2">
          {showSearch && (
            <div className="relative">
              <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
              <Input
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search events"
                className="h-8 w-56 pl-8 text-xs"
              />
            </div>
          )}
          {showViewSelect && (
            <Select value={view} onValueChange={(v) => setView(v as 'month' | 'week' | 'day')}>
              <SelectTrigger className="h-8 w-24 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="month">Month</SelectItem>
                <SelectItem value="week">Week</SelectItem>
                <SelectItem value="day">Day</SelectItem>
              </SelectContent>
            </Select>
          )}
          {headerActions ?? (
            <Button size="sm" className="gap-1.5" onClick={() => onEventCreate?.(rangeStart)}>
              <Plus className="size-3.5" />
              New event
            </Button>
          )}
        </div>
      </header>

      {/* Stats strip */}
      {showStats && (
        <div className={`grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-${Math.min(typeKeys.length, 4)}`}>
          {typeKeys.map((key) => {
            const Icon = eventTypes[key]!.icon
            return (
              <button
                key={key}
                type="button"
                className={[
                  'group bg-card/40 hover:bg-card relative isolate flex flex-col overflow-hidden rounded-xl border p-4 text-left ring-1 ring-transparent backdrop-blur transition-all ring-inset hover:-translate-y-px hover:shadow-lg',
                  eventTypes[key]!.ring,
                ].join(' ')}
                onClick={() =>
                  setSearch(
                    eventTypes[key]!.label.toLowerCase() === search.toLowerCase()
                      ? ''
                      : eventTypes[key]!.label.toLowerCase(),
                  )
                }
              >
                <Icon
                  className={[
                    'pointer-events-none absolute -top-4 -right-4 size-24 opacity-[0.06] transition-opacity group-hover:opacity-[0.12]',
                    eventTypes[key]!.text,
                  ].join(' ')}
                />
                <div
                  className={[
                    'pointer-events-none absolute -right-12 -bottom-12 size-32 rounded-full blur-2xl',
                    eventTypes[key]!.glow,
                  ].join(' ')}
                />

                <div className="flex items-center justify-between gap-2">
                  <div className="flex items-center gap-1.5">
                    <span className={['size-1.5 rounded-full', eventTypes[key]!.dot].join(' ')} />
                    <p className="text-muted-foreground text-[10px] font-medium tracking-[0.14em] uppercase">
                      {eventTypes[key]!.label}
                    </p>
                  </div>
                  <div
                    className={[
                      'flex size-7 items-center justify-center rounded-md ring-1 ring-inset',
                      eventTypes[key]!.chip,
                    ].join(' ')}
                  >
                    <Icon className="size-3.5" />
                  </div>
                </div>

                <div className="mt-2 flex items-baseline gap-1.5">
                  <p className="text-3xl leading-none font-semibold tabular-nums">{monthCounts[key] ?? 0}</p>
                  <p className="text-muted-foreground text-[10px] tracking-wider uppercase">this month</p>
                </div>

                <div className="mt-3 flex h-6 items-end gap-1">
                  {typeStats[key]!.weeks.slice(0, 6).map((n, i) => (
                    <span
                      key={i}
                      className={[
                        'flex-1 rounded-sm transition-colors',
                        n > 0 ? eventTypes[key]!.bar : 'bg-muted/40',
                        n > 0 ? 'opacity-70 group-hover:opacity-100' : '',
                      ].join(' ')}
                      style={{ height: n > 0 ? `${Math.min(100, 30 + n * 35)}%` : '20%' }}
                      title={`Week ${i + 1}: ${n} ${eventTypes[key]!.label.toLowerCase()}${n === 1 ? '' : 's'}`}
                    />
                  ))}
                </div>

                <div className="border-border/50 mt-3 min-h-[2.25rem] border-t pt-2">
                  {typeStats[key]!.next ? (
                    <>
                      <p className="text-muted-foreground text-[10px] tracking-wider uppercase">
                        Next <span className={eventTypes[key]!.text}>{fmtNextDate(typeStats[key]!.next!.date)}</span>
                      </p>
                      <p className="mt-0.5 truncate text-xs font-medium">{typeStats[key]!.next!.title}</p>
                    </>
                  ) : (
                    <>
                      <p className="text-muted-foreground text-[10px] tracking-wider uppercase">No upcoming</p>
                      <p className="text-muted-foreground/70 mt-0.5 text-xs">All clear</p>
                    </>
                  )}
                </div>
              </button>
            )
          })}
        </div>
      )}

      {/* Main: calendar + side rail */}
      <div className={['grid gap-4', showSideRail ? 'lg:grid-cols-[minmax(0,1fr)_320px]' : ''].join(' ')}>
        {/* Month grid */}
        <div className="bg-card/40 overflow-hidden rounded-xl border">
          <div className="bg-muted/30 flex flex-wrap items-center justify-between gap-3 border-b px-4 py-2.5">
            <div className="flex items-center gap-2">
              <Button variant="outline" size="icon" className="size-7" onClick={prevMonth}>
                <ChevronLeft className="size-4" />
              </Button>
              <Button variant="outline" size="icon" className="size-7" onClick={nextMonth}>
                <ChevronRight className="size-4" />
              </Button>
              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={goToToday}>
                Today
              </Button>
              <h2 className="ml-2 text-sm font-semibold">{monthLabel}</h2>
            </div>
            <div className="text-muted-foreground flex items-center gap-3 text-[11px]">
              {isRange && (
                <div className="bg-primary/10 text-primary ring-primary/20 flex items-center gap-1.5 rounded-full px-2 py-0.5 ring-1 ring-inset">
                  <MousePointer2 className="size-3" />
                  <span>
                    {rangeDayCount} days, {rangeEvents.length} events
                  </span>
                  <button className="hover:text-foreground ml-0.5" onClick={clearRange}>
                    <X className="size-3" />
                  </button>
                </div>
              )}
              <div className="flex items-center gap-1.5">
                <Sparkles className="size-3" />
                <span>
                  {monthCounts.total} event{monthCounts.total === 1 ? '' : 's'} this month
                </span>
              </div>
            </div>
          </div>

          <div className="bg-muted/10 text-muted-foreground grid grid-cols-7 border-b text-[10px] tracking-wider uppercase">
            {weekdays.map((w) => (
              <div key={w} className="px-2 py-2 font-medium">
                {w}
              </div>
            ))}
          </div>

          <div className="grid grid-cols-7 select-none">
            {loading ? (
              Array.from({ length: 42 }).map((_, i) => (
                <div key={i} className="h-24 border-r border-b p-1.5 last:border-r-0">
                  <Skeleton className="h-3 w-6" />
                  <Skeleton className="mt-2 h-3 w-full" />
                </div>
              ))
            ) : (
              gridDays.map((d, i) => (
                <ContextMenu key={d.key}>
                  <ContextMenuTrigger asChild>
                    <button
                      type="button"
                      className={[
                        'group focus-visible:ring-ring relative flex h-24 flex-col gap-1 border-r border-b p-1.5 text-left transition-colors focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none',
                        (i + 1) % 7 === 0 ? 'border-r-0' : '',
                        i >= 35 ? 'border-b-0' : '',
                        cellRangeClass(d.key, d.inMonth),
                        !d.inMonth && !inRange(d.key) ? 'text-muted-foreground/60' : '',
                      ].join(' ')}
                      onMouseDown={(e) => onCellMouseDown(d.key, e)}
                      onMouseEnter={() => onCellMouseEnter(d.key)}
                    >
                      <div className="flex items-center justify-between">
                        <span
                          className={[
                            'inline-flex size-5 items-center justify-center rounded-full text-[11px] tabular-nums',
                            d.key === todayKey ? 'bg-primary text-primary-foreground font-semibold' : '',
                            d.key !== todayKey && d.inMonth ? 'text-foreground' : '',
                            !d.inMonth ? 'text-muted-foreground/60' : '',
                          ].join(' ')}
                        >
                          {d.date.getDate()}
                        </span>
                        {(eventsByDate.get(d.key)?.length ?? 0) > 0 && (
                          <span className="text-muted-foreground text-[9px] tabular-nums">
                            {eventsByDate.get(d.key)!.length}
                          </span>
                        )}
                      </div>
                      <div className="flex flex-col gap-0.5">
                        {(eventsByDate.get(d.key) ?? []).slice(0, 2).map((e) => (
                          <ContextMenu key={e.id}>
                            <ContextMenuTrigger asChild>
                              <span
                                className={[
                                  'flex cursor-pointer items-center gap-1 truncate rounded px-1 py-0.5 text-[10px] ring-1 ring-inset',
                                  metaFor(e.type).chip,
                                ].join(' ')}
                                onMouseDown={(ev) => ev.stopPropagation()}
                                onClick={(ev) => {
                                  ev.stopPropagation()
                                  openEvent(e)
                                }}
                                onContextMenu={(ev) => ev.stopPropagation()}
                              >
                                <span className="tabular-nums opacity-70">{e.start}</span>
                                <span className="truncate">{e.title}</span>
                              </span>
                            </ContextMenuTrigger>
                            <ContextMenuContent className="w-52">
                              <ContextMenuLabel className="text-muted-foreground flex items-center gap-1.5 text-[11px]">
                                <span className={['size-1.5 rounded-full', metaFor(e.type).dot].join(' ')} />
                                <span className="truncate">{e.title}</span>
                              </ContextMenuLabel>
                              <ContextMenuSeparator />
                              <ContextMenuItem className="gap-2" onSelect={() => openEvent(e)}>
                                <Eye className="size-3.5" /> View details
                                <ContextMenuShortcut>Enter</ContextMenuShortcut>
                              </ContextMenuItem>
                              <ContextMenuItem className="gap-2" onSelect={() => onEventEdit?.(e)}>
                                <Pencil className="size-3.5" /> Edit
                              </ContextMenuItem>
                              <ContextMenuItem className="gap-2" onSelect={() => onEventDuplicate?.(e)}>
                                <CopyPlus className="size-3.5" /> Duplicate
                              </ContextMenuItem>
                              <ContextMenuItem className="gap-2" onSelect={() => copyDate(e.date)}>
                                <Copy className="size-3.5" /> Copy date
                              </ContextMenuItem>
                              <ContextMenuSeparator />
                              <ContextMenuItem
                                className="text-destructive focus:text-destructive gap-2"
                                onSelect={() => onEventDelete?.(e)}
                              >
                                <Trash2 className="size-3.5" /> Cancel event
                              </ContextMenuItem>
                            </ContextMenuContent>
                          </ContextMenu>
                        ))}
                        {(eventsByDate.get(d.key)?.length ?? 0) > 2 && (
                          <span className="text-muted-foreground px-1 text-[10px]">
                            +{eventsByDate.get(d.key)!.length - 2} more
                          </span>
                        )}
                      </div>
                    </button>
                  </ContextMenuTrigger>
                  <ContextMenuContent className="w-56">
                    <ContextMenuLabel className="text-muted-foreground text-[11px]">{fmtDayLong(d.key)}</ContextMenuLabel>
                    <ContextMenuSeparator />
                    <ContextMenuItem className="gap-2" onSelect={() => onEventCreate?.(d.key)}>
                      <CalendarPlus className="size-3.5" /> New event
                      <ContextMenuShortcut>N</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem className="gap-2" onSelect={() => selectWeekOf(d.key)}>
                      <CalendarDays className="size-3.5" /> Select this week
                    </ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem className="gap-2" onSelect={() => copyDate(d.key)}>
                      <Copy className="size-3.5" /> Copy date
                      <ContextMenuShortcut className="tabular-nums">{d.key}</ContextMenuShortcut>
                    </ContextMenuItem>
                    <ContextMenuItem className="gap-2" onSelect={goToToday}>
                      <ArrowRight className="size-3.5" /> Go to today
                    </ContextMenuItem>
                    {isRange && (
                      <ContextMenuItem className="text-destructive focus:text-destructive gap-2" onSelect={clearRange}>
                        <X className="size-3.5" /> Clear range
                      </ContextMenuItem>
                    )}
                  </ContextMenuContent>
                </ContextMenu>
              ))
            )}
          </div>

          {showLegend && (
            <div className="bg-muted/20 text-muted-foreground flex flex-wrap items-center gap-3 border-t px-4 py-2 text-[10px]">
              <ListFilter className="size-3" />
              {typeKeys.map((key) => (
                <div key={key} className="flex items-center gap-1.5">
                  <span className={['size-2 rounded-full', eventTypes[key]!.dot].join(' ')} />
                  {eventTypes[key]!.label}
                </div>
              ))}
              <span className="ml-auto text-[10px]">Tip: drag or shift-click to range. Right-click for actions.</span>
            </div>
          )}
        </div>

        {/* Side rail */}
        {showSideRail && (
          <aside className="flex flex-col gap-4">
            {!isRange ? (
              <div className="bg-card/40 overflow-hidden rounded-xl border">
                <div className="bg-muted/30 border-b px-4 py-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-muted-foreground text-[10px] tracking-wider uppercase">
                        {rangeStart === todayKey ? 'Today' : 'Selected'}
                      </p>
                      <p className="mt-0.5 text-sm font-semibold">{fmtDayLong(rangeStart)}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-muted-foreground text-[10px] tracking-wider uppercase">Events</p>
                      <p className="text-sm font-semibold tabular-nums">{selectedDayEvents.length}</p>
                    </div>
                  </div>
                </div>
                <div className="max-h-[420px] overflow-y-auto p-3">
                  {loading ? (
                    Array.from({ length: 3 }).map((_, i) => (
                      <div key={i} className="mb-2 space-y-2 rounded-lg border p-3">
                        <Skeleton className="h-3 w-32" />
                        <Skeleton className="h-2 w-20" />
                      </div>
                    ))
                  ) : selectedDayEvents.length === 0 ? (
                    emptyDay ?? (
                      <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
                        <div className="bg-muted flex size-10 items-center justify-center rounded-full">
                          <CalendarDays className="text-muted-foreground size-5" />
                        </div>
                        <p className="text-sm font-medium">Nothing scheduled</p>
                        <p className="text-muted-foreground text-xs">Click a date or add a new event.</p>
                        <Button
                          size="sm"
                          variant="outline"
                          className="mt-1 h-7 gap-1.5 text-xs"
                          onClick={() => onEventCreate?.(rangeStart)}
                        >
                          <Plus className="size-3" /> New event
                        </Button>
                      </div>
                    )
                  ) : (
                    selectedDayEvents.map((e) => (
                      <ContextMenu key={e.id}>
                        <ContextMenuTrigger asChild>
                          <div
                            className="group hover:bg-accent/50 relative flex cursor-pointer gap-3 rounded-lg p-2.5 transition-colors"
                            onClick={() => openEvent(e)}
                          >
                            <div className={['w-0.5 shrink-0 rounded-full', metaFor(e.type).bar].join(' ')} />
                            <div className="min-w-0 flex-1 space-y-1">
                              <div className="flex items-start justify-between gap-2">
                                <p className="text-sm leading-tight font-medium">{e.title}</p>
                                <span
                                  className={[
                                    'shrink-0 rounded px-1.5 py-0.5 text-[9px] tracking-wider uppercase ring-1 ring-inset',
                                    metaFor(e.type).chip,
                                  ].join(' ')}
                                >
                                  {metaFor(e.type).label}
                                </span>
                              </div>
                              <div className="text-muted-foreground flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px]">
                                <span className="inline-flex items-center gap-1">
                                  <Clock className="size-3" />
                                  {e.start}-{e.end}
                                </span>
                                {e.location && (
                                  <span className="inline-flex items-center gap-1">
                                    <MapPin className="size-3" />
                                    {e.location}
                                  </span>
                                )}
                              </div>
                              {e.attendees?.length ? (
                                <div className="flex items-center -space-x-1.5 pt-0.5">
                                  {e.attendees.slice(0, 4).map((a, i) => (
                                    <Avatar key={i} className="border-background size-5 border-2">
                                      <AvatarFallback className="bg-primary/10 text-primary text-[8px]">
                                        {initials(a)}
                                      </AvatarFallback>
                                    </Avatar>
                                  ))}
                                  {e.attendees.length > 4 && (
                                    <span className="text-muted-foreground pl-2 text-[10px]">
                                      +{e.attendees.length - 4}
                                    </span>
                                  )}
                                </div>
                              ) : null}
                            </div>
                          </div>
                        </ContextMenuTrigger>
                        <ContextMenuContent className="w-48">
                          <ContextMenuLabel className="text-muted-foreground truncate text-[11px]">
                            {e.title}
                          </ContextMenuLabel>
                          <ContextMenuSeparator />
                          <ContextMenuItem className="gap-2" onSelect={() => openEvent(e)}>
                            <Eye className="size-3.5" /> View details
                          </ContextMenuItem>
                          <ContextMenuItem className="gap-2" onSelect={() => onEventEdit?.(e)}>
                            <Pencil className="size-3.5" /> Edit
                          </ContextMenuItem>
                          <ContextMenuItem className="gap-2" onSelect={() => onEventDuplicate?.(e)}>
                            <CopyPlus className="size-3.5" /> Duplicate
                          </ContextMenuItem>
                          <ContextMenuSeparator />
                          <ContextMenuItem
                            className="text-destructive focus:text-destructive gap-2"
                            onSelect={() => onEventDelete?.(e)}
                          >
                            <Trash2 className="size-3.5" /> Cancel event
                          </ContextMenuItem>
                        </ContextMenuContent>
                      </ContextMenu>
                    ))
                  )}
                </div>
              </div>
            ) : (
              <div className="bg-card/40 overflow-hidden rounded-xl border">
                <div className="from-primary/10 border-b bg-gradient-to-r to-transparent px-4 py-3">
                  <div className="flex items-center justify-between gap-3">
                    <div className="min-w-0">
                      <p className="text-muted-foreground text-[10px] tracking-wider uppercase">
                        Range, {rangeDayCount} days
                      </p>
                      <p className="mt-0.5 truncate text-sm font-semibold">
                        {fmtDayShort(rangeBounds.lo)} -&gt; {fmtDayShort(rangeBounds.hi)}
                      </p>
                    </div>
                    <Button variant="ghost" size="icon" className="size-7" onClick={clearRange}>
                      <X className="size-3.5" />
                    </Button>
                  </div>
                  <div className={`mt-3 grid gap-2 grid-cols-${Math.min(typeKeys.length, 4)}`}>
                    {typeKeys.map((key) => (
                      <div key={key} className="bg-background/40 rounded-md border px-2 py-1.5">
                        <div className="text-muted-foreground flex items-center gap-1 text-[9px] tracking-wider uppercase">
                          <span className={['size-1.5 rounded-full', eventTypes[key]!.dot].join(' ')} />
                          {eventTypes[key]!.label}
                        </div>
                        <p className="mt-0.5 text-sm font-semibold tabular-nums">{rangeTypeCounts[key] ?? 0}</p>
                      </div>
                    ))}
                  </div>
                </div>
                <div className="max-h-[420px] overflow-y-auto">
                  {rangeEvents.length === 0 ? (
                    <p className="text-muted-foreground px-4 py-8 text-center text-xs">No events in range.</p>
                  ) : (
                    rangeEvents.map((e) => (
                      <div
                        key={e.id}
                        className="hover:bg-accent/40 flex cursor-pointer items-start gap-3 border-b px-3 py-2.5 transition-colors last:border-b-0"
                        onClick={() => openEvent(e)}
                      >
                        <div className="bg-background/60 flex w-10 shrink-0 flex-col items-center rounded-md border px-1 py-1 text-center">
                          <span className="text-muted-foreground text-[8px] uppercase">
                            {new Date(e.date).toLocaleDateString('en-US', { month: 'short' })}
                          </span>
                          <span className="text-sm leading-none font-semibold tabular-nums">
                            {new Date(e.date).getDate()}
                          </span>
                        </div>
                        <div className={['w-0.5 shrink-0 self-stretch rounded-full', metaFor(e.type).bar].join(' ')} />
                        <div className="min-w-0 flex-1">
                          <p className="truncate text-xs font-medium">{e.title}</p>
                          <p className="text-muted-foreground mt-0.5 text-[11px] tabular-nums">
                            {e.start}-{e.end}
                            {e.location && <span> {e.location}</span>}
                          </p>
                        </div>
                        <span
                          className={[
                            'shrink-0 rounded px-1.5 py-0.5 text-[9px] tracking-wider uppercase ring-1 ring-inset',
                            metaFor(e.type).chip,
                          ].join(' ')}
                        >
                          {metaFor(e.type).label}
                        </span>
                      </div>
                    ))
                  )}
                </div>
              </div>
            )}

            {showUpcoming && (
              <div className="bg-card/40 overflow-hidden rounded-xl border">
                <div className="bg-muted/30 border-b px-4 py-2.5">
                  <p className="text-sm font-semibold">Up next</p>
                  <p className="text-muted-foreground text-[11px]">After today</p>
                </div>
                <div className="divide-y">
                  {loading ? (
                    Array.from({ length: 3 }).map((_, i) => (
                      <div key={i} className="flex items-center gap-3 p-3">
                        <Skeleton className="size-9 rounded-md" />
                        <div className="flex-1 space-y-1">
                          <Skeleton className="h-3 w-32" />
                          <Skeleton className="h-2 w-20" />
                        </div>
                      </div>
                    ))
                  ) : upcoming.length === 0 ? (
                    <p className="text-muted-foreground px-4 py-6 text-center text-xs">Nothing on the horizon.</p>
                  ) : (
                    upcoming.map((e) => (
                      <button
                        key={e.id}
                        type="button"
                        className="group hover:bg-accent/40 flex w-full items-center gap-3 p-3 text-left transition-colors"
                        onClick={() => openEvent(e)}
                      >
                        <div className="bg-background flex size-10 shrink-0 flex-col items-center justify-center rounded-md border text-center">
                          <span className="text-muted-foreground text-[9px] uppercase">
                            {new Date(e.date).toLocaleDateString('en-US', { month: 'short' })}
                          </span>
                          <span className="text-sm leading-none font-semibold tabular-nums">
                            {new Date(e.date).getDate()}
                          </span>
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="flex items-center gap-1.5">
                            <span className={['size-1.5 rounded-full', metaFor(e.type).dot].join(' ')} />
                            <p className="truncate text-xs font-medium">{e.title}</p>
                          </div>
                          <p className="text-muted-foreground mt-0.5 text-[11px] tabular-nums">
                            {e.start}-{e.end}
                            {e.location && <span> {e.location}</span>}
                          </p>
                        </div>
                      </button>
                    ))
                  )}
                </div>
              </div>
            )}
          </aside>
        )}
      </div>

      {/* Event Detail Dialog */}
      <Dialog open={eventOpen} onOpenChange={setEventOpen}>
        {selectedEvent && (
          <DialogContent className="sm:max-w-md">
            {eventDialog ? (
              eventDialog(selectedEvent)
            ) : (
              <>
                <DialogHeader>
                  <div className="flex items-center gap-2">
                    <div
                      className={[
                        'flex size-8 items-center justify-center rounded-md ring-1 ring-inset',
                        metaFor(selectedEvent.type).chip,
                      ].join(' ')}
                    >
                      {React.createElement(metaFor(selectedEvent.type).icon, { className: 'size-4' })}
                    </div>
                    <div>
                      <DialogTitle className="text-base">{selectedEvent.title}</DialogTitle>
                      <DialogDescription className="text-xs">
                        {metaFor(selectedEvent.type).label}
                        {selectedEvent.status && <span> {selectedEvent.status}</span>}
                      </DialogDescription>
                    </div>
                  </div>
                </DialogHeader>
                <div className="space-y-3 py-2">
                  {selectedEvent.description && (
                    <p className="text-muted-foreground text-sm">{selectedEvent.description}</p>
                  )}
                  <Separator />
                  <div className="grid gap-2 text-sm">
                    <div className="flex items-center gap-2">
                      <Clock className="text-muted-foreground size-4" />
                      <span>
                        {selectedEvent.date} {selectedEvent.start} - {selectedEvent.end}
                      </span>
                    </div>
                    {selectedEvent.location && (
                      <div className="flex items-center gap-2">
                        <MapPin className="text-muted-foreground size-4" />
                        <span>{selectedEvent.location}</span>
                      </div>
                    )}
                    {selectedEvent.attendees?.length ? (
                      <div className="flex items-start gap-2">
                        <Users className="text-muted-foreground mt-0.5 size-4" />
                        <div className="flex flex-wrap items-center gap-1.5">
                          {selectedEvent.attendees.map((a) => (
                            <div
                              key={a}
                              className="bg-muted flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs"
                            >
                              <Avatar className="size-4">
                                <AvatarFallback className="bg-primary/10 text-primary text-[8px]">
                                  {initials(a)}
                                </AvatarFallback>
                              </Avatar>
                              <span>{a}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ) : null}
                  </div>
                </div>
                <DialogFooter>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => {
                      onEventEdit?.(selectedEvent)
                      setEventOpen(false)
                    }}
                  >
                    Edit
                  </Button>
                  <Button
                    size="sm"
                    variant="destructive"
                    onClick={() => {
                      onEventDelete?.(selectedEvent)
                      setEventOpen(false)
                    }}
                  >
                    Cancel event
                  </Button>
                </DialogFooter>
              </>
            )}
          </DialogContent>
        )}
      </Dialog>
    </div>
  )
}

```

### `packages/registry-react/blocks/event-calendar/defaults.ts`

```ts
import { Video, CheckCircle2, AlertCircle, Plane } from 'lucide-react'
import type { EventTypeMeta } from './types'

/**
 * Default event-type theme. Mirrors the boilerplate dashboard but routes
 * every color through OKLCH tokens (chart-1..4, success, warning) so it
 * follows light/dark mode and any consumer theme override.
 *
 * Override per-type or replace the whole map via `<EventCalendar eventTypes={...} />`.
 */
export const defaultEventTypes: Record<string, EventTypeMeta> = {
  meeting: {
    label: 'Meeting',
    icon: Video,
    chip: 'bg-chart-1/10 text-chart-1 ring-chart-1/20',
    bar: 'bg-chart-1',
    dot: 'bg-chart-1',
    glow: 'bg-chart-1/10',
    text: 'text-chart-1',
    ring: 'hover:ring-chart-1/30',
  },
  task: {
    label: 'Task',
    icon: CheckCircle2,
    chip: 'bg-success/10 text-success ring-success/20',
    bar: 'bg-success',
    dot: 'bg-success',
    glow: 'bg-success/10',
    text: 'text-success',
    ring: 'hover:ring-success/30',
  },
  reminder: {
    label: 'Reminder',
    icon: AlertCircle,
    chip: 'bg-warning/10 text-warning ring-warning/20',
    bar: 'bg-warning',
    dot: 'bg-warning',
    glow: 'bg-warning/10',
    text: 'text-warning',
    ring: 'hover:ring-warning/30',
  },
  travel: {
    label: 'Travel',
    icon: Plane,
    chip: 'bg-chart-3/10 text-chart-3 ring-chart-3/20',
    bar: 'bg-chart-3',
    dot: 'bg-chart-3',
    glow: 'bg-chart-3/10',
    text: 'text-chart-3',
    ring: 'hover:ring-chart-3/30',
  },
}
```

### `packages/registry-react/blocks/event-calendar/types.ts`

```ts
import type { LucideIcon } from 'lucide-react'

/**
 * Single event on the calendar. `type` is a free-form string (e.g. `'meeting'`,
 * `'task'`, anything) -- the matching key must exist in the `eventTypes` map
 * passed to <EventCalendar>. Unknown types fall through to a neutral style.
 */
export interface CalendarEvent {
  id: string
  title: string
  /** YYYY-MM-DD */
  date: string
  /** HH:mm */
  start: string
  /** HH:mm */
  end: string
  type: string
  description?: string
  location?: string
  attendees?: string[]
  /** Free-form status tag rendered next to the type label in the dialog. */
  status?: string
}

/**
 * Visual + semantic config per event type. The default theme uses OKLCH
 * tokens (chart-1..4, success, warning) so consumers get sensible colors
 * out of the box, but you can override per-type to wire any palette.
 */
export interface EventTypeMeta {
  label: string
  /** Lucide icon component for the stat tile + chip + dialog header. */
  icon: LucideIcon
  /** Tailwind classes for the colored chip on event rows + dialog header.
   *  Shape: `bg-X/10 text-X ring-X/20` is what the default theme uses. */
  chip: string
  /** Tailwind class for the vertical bar to the left of side-rail rows. */
  bar: string
  /** Tailwind class for the legend / stat-tile dot. */
  dot: string
  /** Tailwind class for the soft watermark glow behind stat tiles. */
  glow: string
  /** Tailwind class for the small text accent on "Next: ..." date labels. */
  text: string
  /** Tailwind class for the stat-tile hover ring. */
  ring: string
}
```

### `packages/registry-react/blocks/event-calendar/index.ts`

```ts
export { EventCalendar, type EventCalendarProps } from './EventCalendar'
export type { CalendarEvent, EventTypeMeta } from './types'
export { defaultEventTypes } from './defaults'
```

## event-list

- type: `registry:block`
- description: List of upcoming events in a SectionCard. Each item shows title + date + optional status badge.
- npm deps: `lucide-react`
- registry deps: `section-card`, `data-list`, `badge`

### `packages/registry-react/blocks/event-list/EventList.tsx`

```tsx
'use client'

import * as React from 'react'
import { Clock } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import { DataList, DataListItem } from '@/components/ui/data-list'
import { Badge } from '@/components/ui/badge'

export interface EventItem {
  id: string | number
  title: string
  date: string
  status?: string
  statusVariant?: 'default' | 'secondary' | 'outline' | 'destructive'
}

export interface EventListProps {
  title?: string
  description?: string
  events: EventItem[]
  className?: string
}

export function EventList({ title, description, events, className }: EventListProps) {
  return (
    <SectionCard title={title ?? 'Upcoming Events'} description={description} className={className}>
      <DataList>
        {events.map((event) => (
          <DataListItem key={event.id} className="flex-col items-stretch">
            <div className="flex items-center justify-between">
              <p className="text-sm font-medium">{event.title}</p>
              {event.status && <Badge variant={event.statusVariant ?? 'secondary'}>{event.status}</Badge>}
            </div>
            <div className="text-muted-foreground mt-1 flex items-center gap-1.5 text-xs">
              <Clock className="size-3" />
              <span>{event.date}</span>
            </div>
          </DataListItem>
        ))}
      </DataList>
    </SectionCard>
  )
}

```

## fab

- type: `registry:ui`
- description: Floating action button — a fixed or absolute positioned circular button for the primary screen action. Supports an icon (default), an extended label variant, mini/large sizes, four color variants, six anchor positions, and a disabled state.
- npm deps: `class-variance-authority`, `@radix-ui/react-slot`

### `packages/registry-react/components/fab/Fab.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { fabVariants, type FabVariants } from './fab.variants'

export interface FabProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'>,
    FabVariants {
  /** Label text — renders an extended FAB. Use children for the icon. */
  label?: string
  /** Render the child element as the FAB (merging props/styles) instead of
   *  emitting a <button> — the React equivalent of reka-ui's as-child. */
  asChild?: boolean
  /** Use absolute instead of fixed positioning (for contained FABs). */
  absolute?: boolean
  /** Accessible label. Defaults to the label prop or 'Floating action'. */
  ariaLabel?: string
}

const Fab = React.forwardRef<HTMLButtonElement, FabProps>(
  (
    {
      className,
      label,
      asChild = false,
      variant,
      size,
      position,
      absolute = false,
      disabled,
      ariaLabel,
      onClick,
      children,
      ...props
    },
    ref,
  ) => {
    const Comp = asChild ? Slot : 'button'
    const resolvedSize = label ? 'extended' : size
    return (
      <Comp
        data-uipkge=""
        data-slot="fab"
        data-variant={variant ?? undefined}
        data-size={resolvedSize ?? undefined}
        data-position={position ?? undefined}
        disabled={disabled}
        aria-label={ariaLabel || label || 'Floating action'}
        className={cn(
          fabVariants({ variant, size: resolvedSize, position }),
          absolute && position !== 'inline' && 'absolute',
          className,
        )}
        onClick={(e) => {
          if (disabled) return
          onClick?.(e)
        }}
        ref={ref}
        {...props}
      >
        {children}
        {label ? <span className="pr-1">{label}</span> : null}
      </Comp>
    )
  },
)
Fab.displayName = 'Fab'

export { Fab }

```

### `packages/registry-react/components/fab/fab.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const fabVariants = cva(
  "inline-flex items-center justify-center gap-2 rounded-full font-medium shadow-lg transition-[color,background-color,box-shadow,transform] duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] active:scale-95 touch-manipulation [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive: 'bg-destructive text-white hover:bg-destructive/90',
        outline:
          'border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
      },
      size: {
        mini: "size-10 [&_svg:not([class*='size-'])]:size-4",
        default: 'size-14',
        large: "size-16 [&_svg:not([class*='size-'])]:size-7",
        extended: 'h-14 px-5',
      },
      position: {
        'bottom-right': 'fixed bottom-6 right-6',
        'bottom-left': 'fixed bottom-6 left-6',
        'top-right': 'fixed top-6 right-6',
        'top-left': 'fixed top-6 left-6',
        'bottom-center': 'fixed bottom-6 left-1/2 -translate-x-1/2',
        inline: '',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
      position: 'bottom-right',
    },
  },
)

export type FabVariants = VariantProps<typeof fabVariants>

```

### `packages/registry-react/components/fab/index.ts`

```ts
export { Fab, type FabProps } from './Fab'
export { fabVariants, type FabVariants } from './fab.variants'

```

## faq-01

- type: `registry:block`
- description: Single-column FAQ section. Eyebrow + headline + email-CTA lede, then six accordion items (trial / migration / security / pricing / support / cancel). Uses Accordion in single-collapsible mode so only one answer expands at a time. Questions are spelled out inline so consumers can rewrite them directly.
- registry deps: `accordion`

### `packages/registry-react/blocks/faq-01/Faq01.tsx`

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'

export function Faq01() {
  return (
    <section className="bg-background">
      <div className="mx-auto max-w-3xl px-6 py-24">
        <div className="text-center">
          <p className="text-primary text-sm font-medium tracking-widest uppercase">FAQ</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Questions, answered</h2>
          <p className="text-muted-foreground mx-auto mt-3 max-w-xl text-lg">
            Anything we missed? Email
            <a href="mailto:hello@acme.test" className="hover:text-foreground underline underline-offset-4">
              hello@acme.test
            </a>
            and we'll reply within a day.
          </p>
        </div>

        <Accordion type="single" collapsible className="mt-10 w-full">
          <AccordionItem value="trial">
            <AccordionTrigger>How does the 14-day free trial work?</AccordionTrigger>
            <AccordionContent>
              Sign up with a work email — no credit card. You get every feature on the Team plan for 14 days. At the end
              of the trial you pick a plan or your workspace switches to read-only until you do; nothing is deleted.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="migration">
            <AccordionTrigger>Can we migrate from our current tool?</AccordionTrigger>
            <AccordionContent>
              Yes. Most teams import people, time off balances and org structure with one CSV. We have prebuilt importers
              for BambooHR, Personio, Rippling and Gusto; for everything else, our team will run the migration with you
              free of charge.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="security">
            <AccordionTrigger>Is our employee data secure?</AccordionTrigger>
            <AccordionContent>
              SOC 2 Type II, ISO 27001, GDPR and HIPAA compliant. Data is encrypted at rest (AES-256) and in transit (TLS
              1.3). EU customers stay on EU-region infrastructure. Full audit trail is available on every plan.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="pricing">
            <AccordionTrigger>What does the per-user pricing include?</AccordionTrigger>
            <AccordionContent>
              All core modules — directory, payroll, time off, performance, onboarding — are included on the Team plan.
              SSO, SCIM, audit logs and a dedicated success manager are Enterprise-only. There are no per-feature add-ons.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="support">
            <AccordionTrigger>What support do we get?</AccordionTrigger>
            <AccordionContent>
              Email support is included on every plan with a 4-hour business-hours reply. Team and Enterprise customers
              get a shared Slack channel; Enterprise adds a named success manager and a 99.99% uptime SLA with credits.
            </AccordionContent>
          </AccordionItem>
          <AccordionItem value="cancel">
            <AccordionTrigger>How do we cancel?</AccordionTrigger>
            <AccordionContent>
              One click in Settings → Billing. We charge month-to-month or annually; if you cancel mid-cycle, your
              workspace stays active through the end of the period and you can export all data as CSV or JSON before it
              ends.
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </section>
  )
}

```

## features-01

- type: `registry:block`
- description: Three-column features grid (six cards). Eyebrow + headline + lede, then each card has a tinted icon-box, a short title, and a one-paragraph description. Cards are spelled out inline — swap, reorder, or change icons without unwiring a wrapper.
- npm deps: `lucide-react`
- registry deps: `card`

### `packages/registry-react/blocks/features-01/Features01.tsx`

```tsx
import { BarChart3, Calendar, FileCheck2, ShieldCheck, Users, Wallet } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function Features01() {
  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-24">
        <div className="mb-12 max-w-2xl space-y-3">
          <p className="text-primary text-sm font-medium tracking-widest uppercase">Features</p>
          <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Everything teams need, nothing they don't.</h2>
          <p className="text-muted-foreground text-lg">
            Six modules that work together out of the box. Pay only for what you use.
          </p>
        </div>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <Users className="size-5" />
              </div>
              <CardTitle className="text-base">Employee directory</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                Single source of truth for people, roles and reporting lines — searchable and exportable.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <Wallet className="size-5" />
              </div>
              <CardTitle className="text-base">Payroll</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                Multi-currency runs with automatic tax filing and direct deposit. Pause and resume in one click.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <BarChart3 className="size-5" />
              </div>
              <CardTitle className="text-base">Performance</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                OKRs, 1:1s, 360 reviews and continuous feedback all linked to the org chart.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <FileCheck2 className="size-5" />
              </div>
              <CardTitle className="text-base">Onboarding</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                34 templated tasks split across pre-start, day 1, week 1, month 1 and 90-day milestones.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <Calendar className="size-5" />
              </div>
              <CardTitle className="text-base">Time off</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                Accrual-based leave with manager approval workflow and shared team calendar.
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="space-y-3">
              <div className="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg">
                <ShieldCheck className="size-5" />
              </div>
              <CardTitle className="text-base">Compliance</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground text-sm">
                GDPR, SOC2 and HIPAA-ready audit trails. Right-to-erasure built in.
              </p>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}

```

## file-upload

- type: `registry:ui`
- description: Drag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `<input type="file">` with proper a11y.
- npm deps: `lucide-react`

### `packages/registry-react/components/file-upload/file-upload.tsx`

```tsx
'use client'

import * as React from 'react'
import { FileIcon, X } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface FileUploadProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value' | 'defaultValue' | 'content'> {
  accept?: string
  multiple?: boolean
  disabled?: boolean
  /** Controlled file list. */
  value?: File[]
  /** Uncontrolled initial file list. */
  defaultValue?: File[]
  onValueChange?: (files: File[]) => void
  /** Custom dropzone icon. */
  icon?: React.ReactNode
  /** Custom dropzone label content (replaces the default click/drag copy). */
  children?: React.ReactNode
  /** Rendered below the dropzone (e.g. the file list). */
  content?: React.ReactNode
  className?: string
}

const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
  (
    { className, accept, multiple, disabled, value, defaultValue, onValueChange, icon, children, content, ...props },
    ref,
  ) => {
    const innerRef = React.useRef<HTMLInputElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLInputElement | null) => {
        innerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node
      },
      [ref],
    )

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<File[]>(defaultValue ?? [])

    const [isDragging, setIsDragging] = React.useState(false)

    function emit(files: File[]) {
      if (!isControlled) setInternal(files)
      onValueChange?.(files)
    }

    function handleFiles(files: FileList | null) {
      if (!files) return
      const fileArray = Array.from(files)
      const first = fileArray[0]
      emit(multiple ? fileArray : first ? [first] : [])
    }

    function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
      handleFiles(e.target.files)
    }

    function handleDrop(e: React.DragEvent) {
      e.preventDefault()
      setIsDragging(false)
      handleFiles(e.dataTransfer?.files ?? null)
    }

    function handleDragOver(e: React.DragEvent) {
      e.preventDefault()
      setIsDragging(true)
    }

    function handleDragLeave() {
      setIsDragging(false)
    }

    function openFilePicker() {
      innerRef.current?.click()
    }

    return (
      <div className={cn('space-y-3', className)} {...props}>
        <input
          ref={setRefs}
          type="file"
          accept={accept}
          multiple={multiple}
          disabled={disabled}
          className="sr-only"
          onChange={handleInputChange}
        />

        <div
          className={cn(
            'border-muted-foreground/25 hover:border-muted-foreground/50 bg-muted/50 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors duration-200',
            isDragging && 'border-primary bg-primary/5',
            disabled && 'pointer-events-none opacity-50',
          )}
          onClick={openFilePicker}
          onDrop={handleDrop}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
        >
          {icon ?? (
            <svg className="text-muted-foreground mb-2 size-10" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
              />
            </svg>
          )}
          {children ?? (
            <>
              <p className="text-muted-foreground text-sm">
                <span className="text-foreground font-semibold">Click to upload</span> or drag and drop
              </p>
              {accept && <p className="text-muted-foreground/70 mt-1 text-xs">{accept}</p>}
            </>
          )}
        </div>

        {content}
      </div>
    )
  },
)
FileUpload.displayName = 'FileUpload'

export interface FileUploadTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
}

const FileUploadTrigger = React.forwardRef<HTMLDivElement, FileUploadTriggerProps>(
  ({ className, children, ...props }, ref) => (
    <div ref={ref} className={cn('cursor-pointer', className)} {...props}>
      {children}
    </div>
  ),
)
FileUploadTrigger.displayName = 'FileUploadTrigger'

export interface FileUploadContentProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
}

const FileUploadContent = React.forwardRef<HTMLDivElement, FileUploadContentProps>(
  ({ className, children, ...props }, ref) => (
    <div ref={ref} className={cn('space-y-2', className)} {...props}>
      {children}
    </div>
  ),
)
FileUploadContent.displayName = 'FileUploadContent'

export interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
  file: File
  onRemove?: () => void
  className?: string
}

const FileUploadItem = React.forwardRef<HTMLDivElement, FileUploadItemProps>(
  ({ className, file, onRemove, children, ...props }, ref) => (
    <div ref={ref} className={cn('bg-muted/50 flex items-center gap-3 rounded-md border p-3', className)} {...props}>
      {children ?? (
        <>
          <FileIcon className="text-muted-foreground size-8 shrink-0" />
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium">{file.name}</p>
            <p className="text-muted-foreground text-xs">{(file.size / 1024).toFixed(1)} KB</p>
          </div>
          <button
            type="button"
            className="text-muted-foreground hover:text-foreground focus-visible:ring-ring ml-auto rounded-sm transition-colors duration-200 focus-visible:ring-1 focus-visible:outline-none"
            onClick={onRemove}
          >
            <X className="size-4" aria-hidden="true" />
            <span className="sr-only">Remove file</span>
          </button>
        </>
      )}
    </div>
  ),
)
FileUploadItem.displayName = 'FileUploadItem'

export interface FileUploadItemNameProps extends React.HTMLAttributes<HTMLParagraphElement> {
  className?: string
}

const FileUploadItemName = React.forwardRef<HTMLParagraphElement, FileUploadItemNameProps>(
  ({ className, children, ...props }, ref) => (
    <p ref={ref} className={cn('truncate text-sm font-medium', className)} {...props}>
      {children}
    </p>
  ),
)
FileUploadItemName.displayName = 'FileUploadItemName'

export interface FileUploadItemSizeProps extends React.HTMLAttributes<HTMLSpanElement> {
  className?: string
}

const FileUploadItemSize = React.forwardRef<HTMLSpanElement, FileUploadItemSizeProps>(
  ({ className, children, ...props }, ref) => (
    <span ref={ref} className={cn('text-muted-foreground text-xs', className)} {...props}>
      {children}
    </span>
  ),
)
FileUploadItemSize.displayName = 'FileUploadItemSize'

export {
  FileUpload,
  FileUploadTrigger,
  FileUploadContent,
  FileUploadItem,
  FileUploadItemName,
  FileUploadItemSize,
}

```

### `packages/registry-react/components/file-upload/index.ts`

```ts
export {
  FileUpload,
  FileUploadTrigger,
  FileUploadContent,
  FileUploadItem,
  FileUploadItemName,
  FileUploadItemSize,
  type FileUploadProps,
  type FileUploadTriggerProps,
  type FileUploadContentProps,
  type FileUploadItemProps,
  type FileUploadItemNameProps,
  type FileUploadItemSizeProps,
} from './file-upload'

```

## float-label

- type: `registry:ui`
- description: Floating label wrapper for any input element. The label floats up when the input is focused or has a value. Wrap it around any input, select, or textarea. Supports required indicator and disabled state.

### `packages/registry-react/components/float-label/FloatLabel.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface FloatLabelProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  required?: boolean
  disabled?: boolean
}

const FloatLabel = React.forwardRef<HTMLDivElement, FloatLabelProps>(
  ({ label, required = false, disabled = false, className, children, ...props }, ref) => {
    const wrapperRef = React.useRef<HTMLDivElement | null>(null)
    const [isFocused, setIsFocused] = React.useState(false)
    const [hasValue, setHasValue] = React.useState(false)

    const isFloating = isFocused || hasValue

    const setRefs = React.useCallback(
      (node: HTMLDivElement | null) => {
        wrapperRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
      },
      [ref],
    )

    function checkValue(target: EventTarget | null) {
      const el = target as HTMLElement | null
      if (!el) return
      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
        setHasValue(!!el.value)
      } else {
        const input = el.querySelector?.('input, textarea, select') as
          | HTMLInputElement
          | HTMLTextAreaElement
          | HTMLSelectElement
          | null
        if (input) setHasValue(!!input.value)
      }
    }

    // Check for prefilled value on mount (before any focus/input events fire).
    React.useLayoutEffect(() => {
      const wrapper = wrapperRef.current
      if (!wrapper) return
      const input = wrapper.querySelector('input, textarea, select') as
        | HTMLInputElement
        | HTMLTextAreaElement
        | HTMLSelectElement
        | null
      if (input) setHasValue(!!input.value)
    }, [])

    function handleFocusIn(event: React.FocusEvent<HTMLDivElement>) {
      setIsFocused(true)
      checkValue(event.target)
    }

    function handleFocusOut(event: React.FocusEvent<HTMLDivElement>) {
      setIsFocused(false)
      checkValue(event.target)
    }

    function handleInput(event: React.FormEvent<HTMLDivElement>) {
      checkValue(event.target)
    }

    const wrapperClasses = cn(
      'relative flex flex-col',
      disabled && 'opacity-50 cursor-not-allowed',
      className,
    )

    const labelClasses = cn(
      'text-muted-foreground pointer-events-none absolute left-3 z-10 bg-transparent px-1 text-sm transition-all duration-200',
      !isFloating && 'top-1/2 -translate-y-1/2',
      isFloating && 'top-0 -translate-y-1/2 scale-75 bg-background text-foreground',
      isFocused && 'text-ring',
      required && "after:text-destructive after:ml-0.5 after:content-['*']",
    )

    return (
      <div
        ref={setRefs}
        className={wrapperClasses}
        data-uipkge=""
        data-slot="float-label"
        data-floating={isFloating}
        onFocus={handleFocusIn}
        onBlur={handleFocusOut}
        onInput={handleInput}
        onChange={handleInput}
        {...props}
      >
        <label className={labelClasses}>{label}</label>
        {children}
      </div>
    )
  },
)
FloatLabel.displayName = 'FloatLabel'

export { FloatLabel }

```

### `packages/registry-react/components/float-label/index.ts`

```ts
export { FloatLabel, type FloatLabelProps } from './FloatLabel'

```

## footer-01

- type: `registry:block`
- description: Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
- npm deps: `lucide-react`
- registry deps: `button`, `input`, `separator`

### `packages/registry-react/blocks/footer-01/Footer01.tsx`

```tsx
'use client'

import * as React from 'react'
import { Boxes } from 'lucide-react'

const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)

const Twitter = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z" />
  </svg>
)

const Linkedin = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z" />
  </svg>
)
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'

export function Footer01() {
  const [newsletter, setNewsletter] = React.useState('')
  const [subscribed, setSubscribed] = React.useState(false)

  function subscribe(e: React.FormEvent) {
    e.preventDefault()
    if (!newsletter) return
    setSubscribed(true)
    setNewsletter('')
  }

  return (
    <footer className="bg-background border-t">
      <div className="mx-auto max-w-6xl px-6 py-16">
        <div className="grid gap-10 lg:grid-cols-12">
          <div className="space-y-4 lg:col-span-4">
            <div className="flex items-center gap-2">
              <div className="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
                <Boxes className="size-4" />
              </div>
              <span className="text-base font-semibold">Acme</span>
            </div>
            <p className="text-muted-foreground max-w-sm text-sm">Built on shadcn-vue. Get product updates monthly.</p>
            <form className="flex max-w-sm gap-2" onSubmit={subscribe}>
              <Input
                value={newsletter}
                onChange={(e) => setNewsletter(e.target.value)}
                type="email"
                placeholder="you@company.com"
                required
                className="flex-1"
              />
              <Button type="submit">Subscribe</Button>
            </form>
            {subscribed && (
              <p className="text-xs text-[var(--success)]">Thanks — check your inbox to confirm.</p>
            )}
          </div>

          <div className="grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8">
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Product</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Features</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Pricing</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Changelog</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Roadmap</a>
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Company</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">About</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Blog</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Careers</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Contact</a>
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Resources</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Documentation</a>
                </li>
                <li><a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">API</a></li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Help center</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Status</a>
                </li>
              </ul>
            </div>
            <div className="space-y-3">
              <h3 className="text-sm font-semibold">Legal</h3>
              <ul className="space-y-2">
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Terms</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Privacy</a>
                </li>
                <li>
                  <a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Security</a>
                </li>
                <li><a href="#" className="text-muted-foreground hover:text-foreground text-sm transition-colors">DPA</a></li>
              </ul>
            </div>
          </div>
        </div>

        <Separator className="my-10" />

        <div className="flex flex-wrap items-center justify-between gap-4">
          <p className="text-muted-foreground text-xs">© 2026 Acme. All rights reserved.</p>
          <div className="flex items-center gap-3">
            <a href="#" aria-label="GitHub" className="text-muted-foreground hover:text-foreground transition-colors">
              <Github className="size-4" />
            </a>
            <a href="#" aria-label="Twitter" className="text-muted-foreground hover:text-foreground transition-colors">
              <Twitter className="size-4" />
            </a>
            <a href="#" aria-label="LinkedIn" className="text-muted-foreground hover:text-foreground transition-colors">
              <Linkedin className="size-4" />
            </a>
          </div>
        </div>
      </div>
    </footer>
  )
}

```

## form

- type: `registry:ui`
- description: Zod-first form block built on React Hook Form. Wires field labels, descriptions, error messages, and validation together; bind a field once and the rest is automatic.
- npm deps: `react-hook-form`, `zod`, `@hookform/resolvers`, `@radix-ui/react-label`, `@radix-ui/react-slot`, `lucide-react`
- registry deps: `label`

### `packages/registry-react/components/form/form.tsx`

```tsx
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
} from 'react-hook-form'
import { CircleAlert, CircleCheck, TriangleAlert } from 'lucide-react'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

export type FormStatusValue = 'error' | 'warning' | 'success' | null | undefined

// The canonical shadcn form: react-hook-form + zod + @hookform/resolvers.
// `Form` is just FormProvider — wire your form with useForm({ resolver:
// zodResolver(schema) }) and spread the returned methods. `FormField` is a
// thin Controller wrapper that publishes the field name on context so the
// label / control / description / message parts can derive their ids and
// error state without prop-drilling.
const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue,
)

function FormField<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({ ...props }: ControllerProps<TFieldValues, TName>) {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

function useFormField() {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error('useFormField should be used within <FormField>')
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue,
)

type FormItemProps = React.ComponentProps<'div'> & {
  label?: string
  required?: boolean
  description?: string
  status?: FormStatusValue
  help?: string
  layout?: 'vertical' | 'horizontal'
  labelWidth?: string
}

function FormItem({
  className,
  label,
  required,
  description,
  status,
  help,
  layout = 'vertical',
  labelWidth,
  children,
  ...props
}: FormItemProps) {
  const id = React.useId()
  const isHorizontal = layout === 'horizontal'

  return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-uipkge=""
        data-slot="form-item"
        className={cn(
          'grid gap-1.5',
          isHorizontal && 'grid-cols-[var(--label-width,140px)_1fr] items-start gap-x-4 gap-y-0',
          className,
        )}
        style={labelWidth ? ({ '--label-width': labelWidth } as React.CSSProperties) : undefined}
        {...props}
      >
        {(label || required) && (
          <div className="flex items-center gap-1">
            {label && (
              <Label htmlFor={id} className={cn(status === 'error' && 'text-destructive')}>
                {label}
              </Label>
            )}
            {required && <span className="text-destructive text-sm">*</span>}
          </div>
        )}
        <div className="space-y-1">
          {children}
          {description && <p className="text-muted-foreground text-xs">{description}</p>}
          {help && (
            <p
              className={cn(
                'text-xs',
                status === 'error' && 'text-destructive',
                status === 'warning' && 'text-warning',
                status === 'success' && 'text-success',
                !status && 'text-muted-foreground',
              )}
            >
              {help}
            </p>
          )}
        </div>
      </div>
    </FormItemContext.Provider>
  )
}

function FormLabel({
  className,
  ...props
}: React.ComponentProps<typeof Label>) {
  const { error, formItemId } = useFormField()

  return (
    <Label
      data-uipkge=""
      data-slot="form-label"
      data-error={!!error}
      className={cn('data-[error=true]:text-destructive', className)}
      htmlFor={formItemId}
      {...props}
    />
  )
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
    <Slot
      data-uipkge=""
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}

function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
  const { formDescriptionId } = useFormField()

  return (
    <p
      data-uipkge=""
      data-slot="form-description"
      id={formDescriptionId}
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? '') : props.children

  if (!body) {
    return null
  }

  return (
    <p
      data-uipkge=""
      data-slot="form-message"
      id={formMessageId}
      className={cn('text-destructive text-sm', className)}
      {...props}
    >
      {body}
    </p>
  )
}

function FormSection({
  className,
  title,
  subtitle,
  description,
  divider,
  headingLevel: Heading = 'h4',
  children,
  ...props
}: React.ComponentProps<'div'> & {
  title?: string
  subtitle?: string
  description?: string
  divider?: boolean
  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5'
}) {
  return (
    <div data-uipkge="" data-slot="form-section" className={cn('space-y-3', className)} {...props}>
      {(divider || title || subtitle) && (
        <div className={cn(divider && 'border-t pt-4')}>
          {(title || subtitle) && (
            <div className="space-y-1">
              {title && <Heading className="text-sm font-semibold">{title}</Heading>}
              {subtitle && <p className="text-muted-foreground text-xs">{subtitle}</p>}
            </div>
          )}
        </div>
      )}
      {description && <p className="text-muted-foreground text-xs">{description}</p>}
      {children}
    </div>
  )
}

function FormActions({
  className,
  align = 'right',
  gap = 'md',
  ...props
}: React.ComponentProps<'div'> & {
  align?: 'left' | 'center' | 'right'
  gap?: 'sm' | 'md' | 'lg'
}) {
  const alignClasses = {
    left: 'justify-start',
    center: 'justify-center',
    right: 'justify-end',
  }
  const gapClasses = {
    sm: 'gap-2',
    md: 'gap-3',
    lg: 'gap-4',
  }

  return (
    <div
      data-uipkge=""
      data-slot="form-actions"
      className={cn('flex flex-wrap items-center', alignClasses[align], gapClasses[gap], className)}
      {...props}
    />
  )
}

const statusConfig = {
  error: {
    icon: CircleAlert,
    container: 'bg-destructive/10 text-destructive border-destructive/20',
  },
  warning: {
    icon: TriangleAlert,
    container: 'bg-warning/10 text-warning border-warning/30',
  },
  success: {
    icon: CircleCheck,
    container: 'bg-success/10 text-success border-success/30',
  },
} as const

function FormStatus({
  className,
  status,
  message,
  ...props
}: React.ComponentProps<'div'> & {
  status: NonNullable<FormStatusValue>
  message: string
}) {
  const config = statusConfig[status]
  const Icon = config.icon

  return (
    <div
      data-uipkge=""
      data-slot="form-status"
      className={cn('flex items-center gap-2 rounded-md border px-3 py-2 text-sm', config.container, className)}
      {...props}
    >
      <Icon className="size-4 shrink-0" />
      <span>{message}</span>
    </div>
  )
}

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
  FormSection,
  FormActions,
  FormStatus,
}

```

### `packages/registry-react/components/form/index.ts`

```ts
export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
  FormSection,
  FormActions,
  FormStatus,
  type FormStatusValue,
} from './form'

```

## funnel-chart

- type: `registry:ui`
- description: React mirror of @uipkge/funnel-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/funnel-chart/FunnelChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// FunnelChart
// ─────────────────────────────────────────────────────────────────────────

export interface FunnelChartProps {
  data: { name: string; value: number }[]
  height?: number | string
  showLabels?: boolean
  showLegend?: boolean
  /** ECharts option escape hatch -- merged on top of the computed option. */
  option?: any
  className?: string
}

export const FunnelChart = React.forwardRef<HTMLDivElement, FunnelChartProps>(
  ({ data, height = 300, showLabels = true, showLegend = false, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'funnel',
          left: '8%',
          right: '8%',
          top: 12,
          bottom: showLegend ? 32 : 12,
          sort: 'descending',
          minSize: '20%',
          maxSize: '100%',
          funnelAlign: 'center',
          gap: 2,
          label: {
            show: showLabels,
            position: 'inside',
            color: '#fff',
            fontSize: 11,
            fontWeight: 600,
          },
          labelLine: { length: 8, lineStyle: { width: 1, type: 'solid' } },
          itemStyle: { borderWidth: 0 },
          emphasis: { label: { fontSize: 13, fontWeight: 700 } },
          data,
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        legend: showLegend
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : undefined,
        series: mergedSeries,
        ...userRest,
      }
    }, [data, showLabels, showLegend, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
FunnelChart.displayName = 'FunnelChart'

```

### `packages/registry-react/components/charts/funnel-chart/index.ts`

```ts
export { FunnelChart, type FunnelChartProps } from './FunnelChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## gauge-chart

- type: `registry:ui`
- description: React mirror of @uipkge/gauge-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/gauge-chart/GaugeChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// GaugeChart
// ─────────────────────────────────────────────────────────────────────────

export interface GaugeChartProps {
  value: number
  min?: number
  max?: number
  unit?: string
  label?: string
  height?: number | string
  /** Colour stops as [percentage, hex] pairs. Default: teal->amber->red,
   *  pulled from `gaugeThresholds` in useChartTheme so the safe-zone
   *  colour ties back to the dashboard palette. Pass your own to override. */
  thresholds?: [number, string][]
  option?: any
  className?: string
}

export const GaugeChart = React.forwardRef<HTMLDivElement, GaugeChartProps>(
  (
    { value, min = 0, max = 100, unit = '', label, height = 220, thresholds = gaugeThresholds, option, className },
    ref,
  ) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'gauge',
          min,
          max,
          center: ['50%', '60%'],
          radius: '85%',
          startAngle: 200,
          endAngle: -20,
          progress: { show: true, width: 14 },
          pointer: { show: true, length: '55%', width: 4 },
          axisLine: {
            lineStyle: {
              width: 14,
              color: thresholds.map(([stop, color]) => [stop, color] as [number, string]),
            },
          },
          axisTick: { distance: -22, length: 4, lineStyle: { color: theme.textColor, width: 1 } },
          splitLine: { distance: -26, length: 8, lineStyle: { color: theme.textColor, width: 2 } },
          axisLabel: { color: theme.textColor, fontSize: 10, distance: -34 },
          anchor: { show: false },
          title: {
            offsetCenter: [0, '88%'],
            color: theme.textColor,
            fontSize: 11,
            fontWeight: 500,
          },
          detail: {
            valueAnimation: true,
            formatter: `{value}${unit ? ' ' + unit : ''}`,
            color: theme.colors[0],
            fontSize: 28,
            fontWeight: 700,
            offsetCenter: [0, '40%'],
          },
          data: [{ value, name: label ?? '' }],
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        tooltip: {
          formatter: '{b}: {c}' + (unit ? ` ${unit}` : ''),
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [value, min, max, unit, label, thresholds, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
GaugeChart.displayName = 'GaugeChart'

```

### `packages/registry-react/components/charts/gauge-chart/index.ts`

```ts
export { GaugeChart, type GaugeChartProps } from './GaugeChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## gradient-text

- type: `registry:ui`
- description: Applies a CSS gradient as text color via background-clip: text. Supports preset gradients (sunset, ocean, forest, fire, candy, aurora, rainbow, gold, neon, grape), custom from/to colors with a direction, a fully custom CSS gradient string, and an animated mode that shifts the gradient.
- npm deps: `class-variance-authority`, `@radix-ui/react-slot`

### `packages/registry-react/components/gradient-text/GradientText.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { gradientTextPresets, type GradientPreset } from './gradient-text.variants'

type Direction =
  | 'to right'
  | 'to left'
  | 'to top'
  | 'to bottom'
  | 'to top right'
  | 'to top left'
  | 'to bottom right'
  | 'to bottom left'

export interface GradientTextProps extends React.HTMLAttributes<HTMLElement> {
  /** Rendered element / component. */
  as?: React.ElementType
  /** Render the child element as the gradient text (merging props/styles)
   *  instead of emitting the `as` tag — the React equivalent of reka-ui's
   *  as-child. */
  asChild?: boolean
  /** Preset gradient name. Overrides from/to when set. */
  preset?: GradientPreset
  /** Start color of a custom two-stop gradient. */
  from?: string
  /** End color of a custom two-stop gradient. */
  to?: string
  /** Gradient direction. */
  direction?: Direction
  /** Fully custom CSS gradient (e.g. 'linear-gradient(45deg, #f00, #00f, #0f0)'). Overrides preset/from/to. */
  gradient?: string
  /** Animate the gradient (subtle background-position shift). */
  animated?: boolean
  /** Animation duration in seconds. Default 4. */
  animationDuration?: number
}

/* ------------------------------------------------------------------ */
/* Animation keyframes                                                 */
/* Ported from GradientText.vue's <style scoped> block. Injected once  */
/* so the component ships self-contained.                              */
/* ------------------------------------------------------------------ */
const gradientTextCss = `
@media (prefers-reduced-motion: no-preference) {
  @keyframes gradient-text-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}
`

function GradientTextStyle() {
  return <style dangerouslySetInnerHTML={{ __html: gradientTextCss }} />
}

const GradientText = React.forwardRef<HTMLElement, GradientTextProps>(
  (
    {
      className,
      as: asProp = 'span',
      asChild = false,
      preset,
      from,
      to,
      direction = 'to right',
      gradient,
      animated = false,
      animationDuration = 4,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    const Comp = (asChild ? Slot : asProp) as React.ElementType

    const gradientValue = React.useMemo(() => {
      if (gradient) return gradient
      if (preset) return gradientTextPresets[preset] ?? ''
      if (from && to) {
        return `linear-gradient(${direction}, ${from}, ${to})`
      }
      // Default fallback: primary token gradient.
      return 'linear-gradient(to right, var(--primary), var(--primary))'
    }, [gradient, preset, from, to, direction])

    const computedStyle = React.useMemo<React.CSSProperties>(
      () => ({
        backgroundImage: gradientValue,
        backgroundClip: 'text',
        WebkitBackgroundClip: 'text',
        color: 'transparent',
        WebkitTextFillColor: 'transparent',
        backgroundSize: animated ? '200% 200%' : undefined,
        ...style,
      }),
      [gradientValue, animated, style],
    )

    return (
      <>
        <GradientTextStyle />
        <Comp
          data-uipkge=""
          data-slot="gradient-text"
          data-preset={preset ?? undefined}
          data-animated={animated ? 'true' : undefined}
          className={cn(
            'inline-block',
            animated ? `motion-safe:animate-[gradient-text-shift_${animationDuration}s_ease_infinite]` : '',
            className,
          )}
          style={computedStyle}
          ref={ref}
          {...props}
        >
          {children}
        </Comp>
      </>
    )
  },
)
GradientText.displayName = 'GradientText'

export { GradientText }

```

### `packages/registry-react/components/gradient-text/gradient-text.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Preset gradients keyed by name. Each value is a full CSS gradient string
 * applied as `background-image` with `background-clip: text`.
 */
export const gradientTextPresets = {
  sunset: 'linear-gradient(to right, #ff7e5f, #feb47b)',
  ocean: 'linear-gradient(to right, #2193b0, #6dd5ed)',
  forest: 'linear-gradient(to right, #11998e, #38ef7d)',
  fire: 'linear-gradient(to right, #f12711, #f5af19)',
  candy: 'linear-gradient(to right, #f857a6, #ff8a5c)',
  aurora: 'linear-gradient(to right, #00c6ff, #0072ff, #00c6ff)',
  rainbow: 'linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)',
  gold: 'linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c)',
  neon: 'linear-gradient(to right, #00f260, #0575e6)',
  grape: 'linear-gradient(to right, #6a11cb, #2575fc)',
} as const

export type GradientPreset = keyof typeof gradientTextPresets

export const gradientTextVariants = cva('inline-block', {
  variants: {},
  defaultVariants: {},
})

export type GradientTextVariants = VariantProps<typeof gradientTextVariants>

```

### `packages/registry-react/components/gradient-text/index.ts`

```ts
export { GradientText, type GradientTextProps } from './GradientText'
export {
  gradientTextPresets,
  gradientTextVariants,
  type GradientPreset,
  type GradientTextVariants,
} from './gradient-text.variants'

```

## graph-chart

- type: `registry:ui`
- description: React mirror of @uipkge/graph-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/graph-chart/GraphChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// GraphChart
// ─────────────────────────────────────────────────────────────────────────

interface GraphNode {
  name: string
  /** Optional category index (paints with chart-N colour). */
  category?: number
  /** Optional fixed marker size. Defaults to 28. */
  symbolSize?: number
}
interface GraphLink {
  source: string
  target: string
  /** Optional edge value (shows up in the tooltip + sizes the line on weighted layouts). */
  value?: number
}

export interface GraphChartProps {
  nodes: GraphNode[]
  links: GraphLink[]
  /** Optional category labels rendered in the legend. */
  categories?: string[]
  /** Layout engine. `force` is force-directed (default), `circular` arranges
   *  on a ring, `none` lets you place nodes manually via `x`/`y`. */
  layout?: 'force' | 'circular' | 'none'
  /** Allow click-and-drag pan + scroll zoom. Default false. */
  roam?: boolean
  /** Draw arrowheads on the target end. Default true. */
  directed?: boolean
  height?: number | string
  option?: any
  className?: string
}

export const GraphChart = React.forwardRef<HTMLDivElement, GraphChartProps>(
  ({ nodes, links, categories, layout = 'force', roam = false, directed = true, height = 380, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'graph',
          layout,
          roam,
          symbolSize: 28,
          label: { show: true, fontSize: 11, color: theme.textColor },
          edgeSymbol: directed ? (['none', 'arrow'] as [string, string]) : (['none', 'none'] as [string, string]),
          edgeSymbolSize: [0, 6],
          force: { repulsion: 220, edgeLength: 90 },
          lineStyle: { color: theme.axisColor, curveness: 0.15, width: 1 },
          emphasis: { focus: 'adjacency' as const, lineStyle: { width: 2 } },
          categories: categories?.map((name) => ({ name })),
          data: nodes.map((n) => ({
            ...n,
            itemStyle:
              typeof n.category === 'number'
                ? { color: theme.colors[n.category % theme.colors.length] }
                : undefined,
          })),
          links,
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        legend: categories?.length
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : undefined,
        series: mergedSeries,
        ...userRest,
      }
    }, [nodes, links, categories, layout, roam, directed, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
GraphChart.displayName = 'GraphChart'

```

### `packages/registry-react/components/charts/graph-chart/index.ts`

```ts
export { GraphChart, type GraphChartProps } from './GraphChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## grid

- type: `registry:ui`
- description: Responsive CSS grid container with `cols`, `gap`, and breakpoint props. A small but useful primitive for laying out card grids, KPI tiles, and form sections without writing repetitive Tailwind classes.

### `packages/registry-react/components/grid/grid.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

// Responsive CSS-grid container. Pass an integer for fixed column count, or
// a breakpoint map for responsive layouts: `{ base: 1, sm: 2, lg: 3 }`.
//
// Examples:
//   <Grid cols={3} gap={4}>...</Grid>
//   <Grid cols={{ base: 1, sm: 2, lg: 4 }} gap={6}>...</Grid>
//
// Tailwind v4's content scanner cannot see classnames built from
// `grid-cols-${n}` template strings, so we map each supported value
// to a complete class string. The scanner sees the literal classes
// and emits them in the consumer's production CSS.
type ColIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
type Cols = ColIndex | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl', ColIndex>>
type GapToken = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16

const COLS_BASE: Record<ColIndex, string> = {
  1: 'grid-cols-1',
  2: 'grid-cols-2',
  3: 'grid-cols-3',
  4: 'grid-cols-4',
  5: 'grid-cols-5',
  6: 'grid-cols-6',
  7: 'grid-cols-7',
  8: 'grid-cols-8',
  9: 'grid-cols-9',
  10: 'grid-cols-10',
  11: 'grid-cols-11',
  12: 'grid-cols-12',
}
const COLS_SM: Record<ColIndex, string> = {
  1: 'sm:grid-cols-1',
  2: 'sm:grid-cols-2',
  3: 'sm:grid-cols-3',
  4: 'sm:grid-cols-4',
  5: 'sm:grid-cols-5',
  6: 'sm:grid-cols-6',
  7: 'sm:grid-cols-7',
  8: 'sm:grid-cols-8',
  9: 'sm:grid-cols-9',
  10: 'sm:grid-cols-10',
  11: 'sm:grid-cols-11',
  12: 'sm:grid-cols-12',
}
const COLS_MD: Record<ColIndex, string> = {
  1: 'md:grid-cols-1',
  2: 'md:grid-cols-2',
  3: 'md:grid-cols-3',
  4: 'md:grid-cols-4',
  5: 'md:grid-cols-5',
  6: 'md:grid-cols-6',
  7: 'md:grid-cols-7',
  8: 'md:grid-cols-8',
  9: 'md:grid-cols-9',
  10: 'md:grid-cols-10',
  11: 'md:grid-cols-11',
  12: 'md:grid-cols-12',
}
const COLS_LG: Record<ColIndex, string> = {
  1: 'lg:grid-cols-1',
  2: 'lg:grid-cols-2',
  3: 'lg:grid-cols-3',
  4: 'lg:grid-cols-4',
  5: 'lg:grid-cols-5',
  6: 'lg:grid-cols-6',
  7: 'lg:grid-cols-7',
  8: 'lg:grid-cols-8',
  9: 'lg:grid-cols-9',
  10: 'lg:grid-cols-10',
  11: 'lg:grid-cols-11',
  12: 'lg:grid-cols-12',
}
const COLS_XL: Record<ColIndex, string> = {
  1: 'xl:grid-cols-1',
  2: 'xl:grid-cols-2',
  3: 'xl:grid-cols-3',
  4: 'xl:grid-cols-4',
  5: 'xl:grid-cols-5',
  6: 'xl:grid-cols-6',
  7: 'xl:grid-cols-7',
  8: 'xl:grid-cols-8',
  9: 'xl:grid-cols-9',
  10: 'xl:grid-cols-10',
  11: 'xl:grid-cols-11',
  12: 'xl:grid-cols-12',
}
const GAP: Record<GapToken, string> = {
  0: 'gap-0',
  1: 'gap-1',
  2: 'gap-2',
  3: 'gap-3',
  4: 'gap-4',
  5: 'gap-5',
  6: 'gap-6',
  8: 'gap-8',
  10: 'gap-10',
  12: 'gap-12',
  16: 'gap-16',
}

export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
  cols?: Cols
  gap?: GapToken
}

const Grid = React.forwardRef<HTMLDivElement, GridProps>(
  ({ cols = 1, gap = 4, className, children, ...props }, ref) => {
    const colsClass =
      typeof cols === 'number'
        ? COLS_BASE[cols]
        : [
            cols.base != null ? COLS_BASE[cols.base] : '',
            cols.sm != null ? COLS_SM[cols.sm] : '',
            cols.md != null ? COLS_MD[cols.md] : '',
            cols.lg != null ? COLS_LG[cols.lg] : '',
            cols.xl != null ? COLS_XL[cols.xl] : '',
          ]
            .filter(Boolean)
            .join(' ')

    const gapClass = GAP[gap]

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="grid"
        className={cn('grid', colsClass, gapClass, className)}
        {...props}
      >
        {children}
      </div>
    )
  },
)
Grid.displayName = 'Grid'

export { Grid }

```

### `packages/registry-react/components/grid/index.ts`

```ts
export { Grid, type GridProps } from './grid'

```

## header-01

- type: `registry:block`
- description: Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
- npm deps: `lucide-react`
- registry deps: `button`, `sheet`

### `packages/registry-react/blocks/header-01/Header01.tsx`

```tsx
'use client'

import * as React from 'react'
import { Boxes, Menu, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'

export function Header01() {
  const [mobileOpen, setMobileOpen] = React.useState(false)

  return (
    <header className="bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
        <a href="#" className="flex items-center gap-2">
          <div className="bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md">
            <Boxes className="size-4" />
          </div>
          <span className="text-base font-semibold">Acme</span>
        </a>

        <nav className="hidden items-center gap-6 md:flex" aria-label="Primary">
          <a href="#features" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Features</a>
          <a href="#pricing" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Pricing</a>
          <a href="#customers" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Customers</a>
          <a href="#docs" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Docs</a>
          <a href="#blog" className="text-muted-foreground hover:text-foreground text-sm transition-colors">Blog</a>
        </nav>

        <div className="hidden items-center gap-2 md:flex">
          <Button variant="ghost" size="sm">Sign in</Button>
          <Button size="sm">Start free trial</Button>
        </div>

        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
              <Menu className="size-5" />
            </Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-72">
            <div className="flex h-full flex-col">
              <div className="flex items-center justify-between border-b px-4 py-3">
                <div className="flex items-center gap-2">
                  <div className="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md">
                    <Boxes className="size-3.5" />
                  </div>
                  <span className="text-sm font-semibold">Acme</span>
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-8"
                  aria-label="Close menu"
                  onClick={() => setMobileOpen(false)}
                >
                  <X className="size-4" />
                </Button>
              </div>
              <nav className="flex flex-1 flex-col gap-1 p-4" aria-label="Mobile">
                <a
                  href="#features"
                  className="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                  onClick={() => setMobileOpen(false)}
                >
                  Features
                </a>
                <a
                  href="#pricing"
                  className="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                  onClick={() => setMobileOpen(false)}
                >
                  Pricing
                </a>
                <a
                  href="#customers"
                  className="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                  onClick={() => setMobileOpen(false)}
                >
                  Customers
                </a>
                <a
                  href="#docs"
                  className="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                  onClick={() => setMobileOpen(false)}
                >
                  Docs
                </a>
                <a
                  href="#blog"
                  className="hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors"
                  onClick={() => setMobileOpen(false)}
                >
                  Blog
                </a>
              </nav>
              <div className="flex flex-col gap-2 border-t p-4">
                <Button variant="outline" className="w-full">Sign in</Button>
                <Button className="w-full">Start free trial</Button>
              </div>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  )
}

```

## heatmap

- type: `registry:ui`
- description: React mirror of @uipkge/heatmap — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/heatmap/Heatmap.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// Heatmap
// ─────────────────────────────────────────────────────────────────────────

export interface HeatmapProps {
  data: [number, number, number][] // [xIndex, yIndex, value]
  xLabels: string[]
  yLabels: string[]
  height?: number | string
  min?: number
  max?: number
  option?: any
  className?: string
}

export const Heatmap = React.forwardRef<HTMLDivElement, HeatmapProps>(
  ({ data, xLabels, yLabels, height = 300, min, max, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const values = data.map((d) => d[2])
      const computedMin = min ?? Math.min(...values)
      const computedMax = max ?? Math.max(...values)

      return {
        grid: { left: 16, right: 16, top: 16, bottom: 16, containLabel: true },
        tooltip: {
          position: 'top',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
          formatter: (params: any) =>
            `${yLabels[params.value[1]]} / ${xLabels[params.value[0]]}: ${params.value[2]}`,
        },
        xAxis: {
          type: 'category',
          data: xLabels,
          splitArea: { show: true },
          axisLabel: { fontSize: 11 },
          axisTick: { show: false },
        },
        yAxis: {
          type: 'category',
          data: yLabels,
          splitArea: { show: true },
          axisLabel: { fontSize: 11 },
          axisTick: { show: false },
        },
        visualMap: {
          min: computedMin,
          max: computedMax,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: 0,
          itemWidth: 12,
          itemHeight: 80,
          inRange: {
            color: ['#e0f2fe', '#3b82f6', '#1e3a8a'],
          },
          textStyle: { fontSize: 10 },
        },
        series: (() => {
          const series = [
            {
              type: 'heatmap',
              data,
              label: { show: false },
              itemStyle: { borderRadius: 2, borderWidth: 0 },
              emphasis: {
                itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)' },
              },
            },
          ]
          const userSeries = (option as any)?.series
          return Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series
        })(),
        // visualMap / tooltip / axes overrides still spread on top -- strip
        // `series` so it doesn't clobber the merged result above.
        ...(() => {
          const { series: _, ...rest } = (option as any) ?? {}
          return rest
        })(),
      }
    }, [data, xLabels, yLabels, min, max, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
Heatmap.displayName = 'Heatmap'

```

### `packages/registry-react/components/charts/heatmap/index.ts`

```ts
export { Heatmap, type HeatmapProps } from './Heatmap'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## hero-01

- type: `registry:block`
- description: Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
- npm deps: `lucide-react`
- registry deps: `avatar`, `badge`, `button`, `card`

### `packages/registry-react/blocks/hero-01/Hero01.tsx`

```tsx
import { ArrowRight, PlayCircle, Sparkles } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'

export function Hero01() {
  return (
    <section className="bg-background relative overflow-hidden">
      <div className="bg-primary/10 pointer-events-none absolute -top-40 left-1/2 size-[600px] -translate-x-1/2 rounded-full blur-3xl" />

      <div className="relative mx-auto max-w-6xl px-6 py-24 lg:py-32">
        <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
          <div className="space-y-6">
            <Badge variant="secondary" className="gap-1">
              <Sparkles className="size-3" />
              New: AI-powered insights
            </Badge>
            <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
              The platform your team will actually use.
            </h1>
            <p className="text-muted-foreground max-w-xl text-lg">
              One workspace for everything your team needs. Built on shadcn-vue primitives — fast, accessible, easy to
              customise.
            </p>
            <div className="flex flex-wrap items-center gap-3">
              <Button size="lg">
                Start free trial
                <ArrowRight className="ml-2 size-4" />
              </Button>
              <Button size="lg" variant="outline">
                <PlayCircle className="mr-2 size-4" />
                Watch demo (2 min)
              </Button>
            </div>
            <div className="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
              <span>★★★★★ 4.9 on G2</span>
              <span>14-day free trial</span>
              <span>No credit card required</span>
            </div>
          </div>

          <div className="relative">
            <Card className="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
              <CardContent className="space-y-1 p-4">
                <p className="text-muted-foreground text-xs uppercase">Active users</p>
                <p className="text-2xl font-semibold">1,284</p>
                <p className="text-xs text-[var(--success)]">+8.2% MoM</p>
              </CardContent>
            </Card>
            <Card className="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
              <CardContent className="space-y-1 p-4">
                <p className="text-muted-foreground text-xs uppercase">Uptime</p>
                <p className="text-2xl font-semibold">100%</p>
                <p className="text-muted-foreground text-xs">12 cycles, 0 misses</p>
              </CardContent>
            </Card>
            <Card className="ml-auto w-72 shadow-xl">
              <CardHeader>
                <CardTitle className="text-base">Onboarding queue</CardTitle>
                <CardDescription>3 starting Monday</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center gap-3">
                  <Avatar className="size-8">
                    <AvatarFallback>LW</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <p className="text-sm font-medium">Lena Wei</p>
                    <p className="text-muted-foreground text-xs">Engineering</p>
                  </div>
                  <Badge variant="secondary">Pending</Badge>
                </div>
                <div className="flex items-center gap-3">
                  <Avatar className="size-8">
                    <AvatarFallback>JR</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <p className="text-sm font-medium">Joaquín Reyes</p>
                    <p className="text-muted-foreground text-xs">Engineering</p>
                  </div>
                  <Badge variant="secondary">Pending</Badge>
                </div>
                <div className="flex items-center gap-3">
                  <Avatar className="size-8">
                    <AvatarFallback>PS</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <p className="text-sm font-medium">Priya Shah</p>
                    <p className="text-muted-foreground text-xs">Engineering</p>
                  </div>
                  <Badge variant="secondary">Pending</Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}

```

## highlight

- type: `registry:ui`
- description: Highlights matching substrings in text for search results. Supports string or regex queries, case-sensitive and whole-word matching, custom highlight tag, and a max-highlight cap.

### `packages/registry-react/components/highlight/Highlight.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

export interface HighlightProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
  /** Text to search within. */
  text: string
  /** Query string or RegExp to highlight. */
  query: string | RegExp
  /** HTML tag used to wrap matched substrings. Default 'mark'. */
  highlightTag?: 'mark' | 'span'
  /** Class applied to each highlight wrapper. */
  highlightClass?: React.HTMLAttributes<HTMLSpanElement>['className']
  /** Inline style applied to each highlight wrapper. */
  highlightStyle?: React.CSSProperties
  /** Case-sensitive matching. Default false. */
  caseSensitive?: boolean
  /** Match whole words only. Default false. */
  wholeWord?: boolean
  /** Cap the number of highlights rendered. 0 = unlimited. Default 0. */
  maxHighlights?: number
  /** Fired with the number of highlights actually rendered (after maxHighlights cap). */
  onMatchCount?: (count: number) => void
  /** Fired with the total match count (before maxHighlights cap). */
  onTotalMatchCount?: (count: number) => void
}

interface Segment {
  text: string
  match: boolean
}

function buildPattern(
  query: string | RegExp,
  caseSensitive: boolean,
  wholeWord: boolean,
): RegExp | null {
  if (query instanceof RegExp) {
    const flags = query.flags.includes('g') ? query.flags : query.flags + 'g'
    return new RegExp(query.source, flags)
  }
  if (!query) return null
  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const body = wholeWord ? `\\b${escaped}\\b` : escaped
  const flags = caseSensitive ? 'g' : 'gi'
  return new RegExp(body, flags)
}

const Highlight = React.forwardRef<HTMLSpanElement, HighlightProps>(
  (
    {
      className,
      text,
      query,
      highlightTag = 'mark',
      highlightClass,
      highlightStyle,
      caseSensitive = false,
      wholeWord = false,
      maxHighlights = 0,
      onMatchCount,
      onTotalMatchCount,
      ...props
    },
    ref,
  ) => {
    const segments = React.useMemo<Segment[]>(() => {
      if (!text) return []
      if (!query) return [{ text, match: false }]

      const pattern = buildPattern(query, caseSensitive, wholeWord)
      if (!pattern) return [{ text, match: false }]

      const out: Segment[] = []
      let last = 0
      let count = 0
      let m: RegExpExecArray | null
      while ((m = pattern.exec(text)) !== null) {
        if (m.index > last) out.push({ text: text.slice(last, m.index), match: false })
        out.push({ text: m[0], match: true })
        last = m.index + m[0].length
        count++
        if (maxHighlights > 0 && count >= maxHighlights) break
        if (m[0] === '') pattern.lastIndex++
      }
      if (last < text.length) out.push({ text: text.slice(last), match: false })

      return out
    }, [text, query, caseSensitive, wholeWord, maxHighlights])

    const totalMatchCount = React.useMemo(() => {
      if (!text || !query) return 0
      const pattern = buildPattern(query, caseSensitive, wholeWord)
      if (!pattern) return 0

      let total = 0
      let m: RegExpExecArray | null
      while ((m = pattern.exec(text)) !== null) {
        total++
        if (m[0] === '') pattern.lastIndex++
      }
      return total
    }, [text, query, caseSensitive, wholeWord])

    const renderedMatchCount = React.useMemo(
      () => segments.filter((s) => s.match).length,
      [segments],
    )

    React.useEffect(() => {
      onMatchCount?.(renderedMatchCount)
    }, [renderedMatchCount, onMatchCount])

    React.useEffect(() => {
      onTotalMatchCount?.(totalMatchCount)
    }, [totalMatchCount, onTotalMatchCount])

    const Tag = highlightTag

    return (
      <span ref={ref} data-uipkge="" data-slot="highlight" className={cn(className)} {...props}>
        {segments.map((seg, i) =>
          seg.match ? (
            <Tag
              key={i}
              data-slot="highlight-match"
              className={cn(
                'bg-yellow-200 text-yellow-950 dark:bg-yellow-500/30 dark:text-yellow-100 rounded px-0.5 font-medium',
                highlightClass,
              )}
              style={highlightStyle}
            >
              {seg.text}
            </Tag>
          ) : (
            <React.Fragment key={i}>{seg.text}</React.Fragment>
          ),
        )}
      </span>
    )
  },
)
Highlight.displayName = 'Highlight'

export { Highlight }

```

### `packages/registry-react/components/highlight/index.ts`

```ts
export { Highlight, type HighlightProps } from './Highlight'

```

## hover-card

- type: `registry:ui`
- description: Rich popover triggered by hover/focus instead of click. Use for inline previews — user cards on @mentions, link previews, KPI explanations. Built on reka-ui with a configurable open/close delay.
- npm deps: `@radix-ui/react-hover-card`

### `packages/registry-react/components/hover-card/hover-card.tsx`

```tsx
'use client'

import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
import { cn } from '@/lib/utils'

function HoverCard(props: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-uipkge="" data-slot="hover-card" {...props} />
}

const HoverCardTrigger = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>
>((props, ref) => (
  <HoverCardPrimitive.Trigger ref={ref} data-uipkge="" data-slot="hover-card-trigger" {...props} />
))
HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Portal>
    <HoverCardPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="hover-card-content"
      align={align}
      sideOffset={sideOffset}
      className={cn(
        'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
        className,
      )}
      {...props}
    />
  </HoverCardPrimitive.Portal>
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

export { HoverCard, HoverCardTrigger, HoverCardContent }

```

### `packages/registry-react/components/hover-card/index.ts`

```ts
export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card'

```

## icon-box

- type: `registry:ui`
- description: Small framed icon used inside cards, list items, and stat tiles. Three variants (`primary`, `muted`, `custom`), two shapes (`rounded`, `circle`), and three sizes. Drop a Lucide icon in, get a polished badge.
- npm deps: `lucide-react`

### `packages/registry-react/components/icon-box/icon-box.tsx`

```tsx
import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface IconBoxProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Lucide icon component rendered inside the box. */
  icon: LucideIcon
  variant?: 'primary' | 'muted' | 'custom'
  shape?: 'rounded' | 'circle'
  size?: 'sm' | 'md' | 'lg'
  iconClassName?: string
}

const variantClasses: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  muted: 'bg-muted text-muted-foreground',
  custom: '',
}

const shapeClasses: Record<string, string> = {
  rounded: 'rounded-lg',
  circle: 'rounded-full',
}

const sizeClasses: Record<string, string> = {
  sm: 'p-1.5',
  md: 'p-2',
  lg: 'p-3',
}

const iconSizes: Record<string, string> = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-6',
}

const IconBox = React.forwardRef<HTMLDivElement, IconBoxProps>(
  ({ className, icon: Icon, variant = 'primary', shape = 'rounded', size = 'md', iconClassName, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('shrink-0', variantClasses[variant], shapeClasses[shape], sizeClasses[size], className)}
      {...props}
    >
      <Icon className={cn(iconSizes[size], iconClassName)} />
    </div>
  ),
)
IconBox.displayName = 'IconBox'

export { IconBox }

```

### `packages/registry-react/components/icon-box/index.ts`

```ts
export { IconBox, type IconBoxProps } from './icon-box'

```

## icon-transition

- type: `registry:ui`
- description: Animated icon swap for click acknowledgements — copy → check, bookmark → bookmark-filled, follow → follower. Pass two icon components and an async `action`; clicking runs the action then springs the active icon in. Auto-reverts after `resetAfter` ms (default 1500), or pass `0` to keep the active icon and call the exposed `reset()` method to flip it back. Renders as a `<button>` by default; use `as="span"` plus the `active` prop when you want an externally controlled, non-interactive icon swap inside another control. Honors `prefers-reduced-motion`.

### `packages/registry-react/components/icon-transition/icon-transition.tsx`

```tsx
'use client'

import * as React from 'react'

// Self-contained icon-swap control. Click runs an optional async `action`,
// then flips from `defaultIcon` to `activeIcon` with a spring pop. By default
// it auto-reverts after 1500ms; pass `resetAfter={0}` to keep the active
// icon, then call `ref.current.reset()` manually.
//
// Two operating modes:
//   1. Self-managed (most common): pass `defaultIcon`, `activeIcon`, and
//      either `action` or just listen to `onActivate`. The component runs
//      the action, manages its own `active` state, and auto-resets.
//   2. Externally controlled: pass `active={boolean}` and the component
//      will mirror that prop, ignoring its internal flag.
//
// Renders as a <button> by default. Pass `as="span"` for a non-interactive
// icon (e.g. inside a parent button) — in that mode the parent is responsible
// for triggering `trigger()` via the exposed ref.

type IconComponent = React.ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>

export interface IconTransitionProps {
  defaultIcon: IconComponent
  activeIcon: IconComponent
  /** Tailwind size/color applied to the icons. */
  iconClass?: string
  /** Async work executed on click before the icon flips. Return `false` to skip the flip. */
  action?: () => boolean | void | Promise<boolean | void>
  /** ms before reverting to defaultIcon. Set to `0` (or null) to stay active. */
  resetAfter?: number | null
  /** Pop animation duration in ms (also scales the leave fade). */
  duration?: number
  /** aria-label shown in default state. */
  label?: string
  /** aria-label shown after activation; falls back to `label`. */
  activeLabel?: string
  /** Tailwind class applied while active (e.g. "text-success"). */
  activeClass?: string
  /** Render element. `button` adds click handler + focus styling; `span` is purely visual. */
  as?: 'button' | 'span'
  /** External control. When provided, this prop wins over internal state. */
  active?: boolean
  onActivate?: () => void
  onReset?: () => void
}

export interface IconTransitionHandle {
  trigger: () => Promise<void>
  reset: () => void
}

// Scoped styles injected once. Mirrors the Vue SFC's scoped <style> block 1:1
// (pop on enter, fade on leave, reduced-motion guard). Scoped to the
// `.icon-transition` ancestor so the keyframes don't leak.
const STYLE_ID = 'uipkge-icon-transition-styles'
const STYLES = `
.icon-transition .icon-transition-slot {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-transition .icon-transition-enter-active,
.icon-transition .icon-transition-leave-active {
  transform-origin: center;
}
.icon-transition .icon-transition-enter-active {
  animation: icon-transition-pop var(--it-duration, 240ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.icon-transition .icon-transition-leave-active {
  animation: icon-transition-fade calc(var(--it-duration, 240ms) * 0.66) ease-in both;
}
@keyframes icon-transition-pop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-12deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.18) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes icon-transition-fade {
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-transition .icon-transition-enter-active,
  .icon-transition .icon-transition-leave-active {
    animation-duration: 0ms !important;
  }
}
`

function useInjectedStyles() {
  React.useEffect(() => {
    if (typeof document === 'undefined') return
    if (document.getElementById(STYLE_ID)) return
    const el = document.createElement('style')
    el.id = STYLE_ID
    el.textContent = STYLES
    document.head.appendChild(el)
  }, [])
}

const IconTransition = React.forwardRef<IconTransitionHandle, IconTransitionProps>(function IconTransition(
  {
    defaultIcon: DefaultIcon,
    activeIcon: ActiveIcon,
    iconClass = 'size-4',
    action,
    resetAfter = 1500,
    duration = 240,
    label,
    activeLabel,
    activeClass = 'text-success',
    as = 'button',
    active,
    onActivate,
    onReset,
  },
  ref,
) {
  useInjectedStyles()

  const [internalActive, setInternalActive] = React.useState(false)
  const isActive = active !== undefined ? active : internalActive

  // Track the previous active state so we can render an outgoing (leaving)
  // icon alongside the incoming (entering) one for the cross-fade — Vue's
  // <Transition> does this for free; React needs us to hold the prior key.
  const [prevActive, setPrevActive] = React.useState<boolean | null>(null)
  const prevIsActiveRef = React.useRef(isActive)
  React.useEffect(() => {
    if (prevIsActiveRef.current !== isActive) {
      setPrevActive(prevIsActiveRef.current)
      prevIsActiveRef.current = isActive
    }
  }, [isActive])

  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)

  const clearTimer = React.useCallback(() => {
    if (timerRef.current) {
      clearTimeout(timerRef.current)
      timerRef.current = null
    }
  }, [])

  const reset = React.useCallback(() => {
    setInternalActive(false)
    onReset?.()
    clearTimer()
  }, [onReset, clearTimer])

  const trigger = React.useCallback(async () => {
    if (action) {
      const result = await action()
      if (result === false) return
    }
    setInternalActive(true)
    onActivate?.()
    clearTimer()
    if (resetAfter && resetAfter > 0) {
      timerRef.current = setTimeout(reset, resetAfter)
    }
  }, [action, onActivate, clearTimer, resetAfter, reset])

  React.useImperativeHandle(ref, () => ({ trigger, reset }), [trigger, reset])

  React.useEffect(() => clearTimer, [clearTimer])

  const Comp = as

  const renderSlot = (slotActive: boolean, phase: 'enter' | 'leave', key: string) => {
    const SlotIcon = slotActive ? ActiveIcon : DefaultIcon
    const phaseClass = phase === 'enter' ? 'icon-transition-enter-active' : 'icon-transition-leave-active'
    return (
      <span key={key} className={`icon-transition-slot ${phaseClass}`}>
        <SlotIcon className={iconClass} aria-hidden="true" />
      </span>
    )
  }

  return (
    <Comp
      {...(as === 'button' ? { type: 'button' as const } : {})}
      aria-label={isActive ? (activeLabel ?? label) : label}
      aria-live={isActive ? 'polite' : undefined}
      className={[
        'icon-transition focus-visible:ring-ring inline-grid place-items-center transition-colors focus-visible:ring-2 focus-visible:outline-none',
        isActive ? activeClass : '',
      ].join(' ')}
      style={{ ['--it-duration' as string]: `${duration}ms` }}
      onClick={as === 'button' ? () => void trigger() : undefined}
    >
      {prevActive !== null && prevActive !== isActive && renderSlot(prevActive, 'leave', `leave-${prevActive}`)}
      {renderSlot(isActive, 'enter', `enter-${isActive}`)}
    </Comp>
  )
})

export { IconTransition }

```

### `packages/registry-react/components/icon-transition/index.ts`

```ts
export { IconTransition, type IconTransitionProps, type IconTransitionHandle } from './icon-transition'

```

## icons

- type: `registry:ui`
- description: Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and copy-paste imports.

### `packages/registry-react/components/icons/icons.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

/**
 * Universal Icon component supporting multiple icon libraries:
 * - Lucide (default, via children)
 * - Font Awesome (via className with fa-* classes)
 * - Material Design Icons (via className with mdi-* classes)
 * - Heroicons (via children)
 * - Custom SVG (via src prop)
 */
export interface IconProps {
  // Size
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'
  // Color
  color?: string
  // Custom class for icon libraries (fa-, mdi-, etc.)
  className?: string
  // For img-based icons
  src?: string
  alt?: string
  // Rotation/flip
  rotation?: number | string
  flip?: 'horizontal' | 'vertical' | 'both'
  // A11y
  label?: string
  ariaLabel?: string
  // Style
  inline?: boolean
  // Slot-based icon (Lucide, Heroicons, inline SVG)
  children?: React.ReactNode
}

const sizeClasses: Record<NonNullable<IconProps['size']>, string> = {
  xs: 'size-3',
  sm: 'size-4',
  md: 'size-5',
  lg: 'size-6',
  xl: 'size-8',
  '2xl': 'size-12',
  inherit: 'size-full',
}

function Icon({
  size = 'md',
  color,
  className,
  src,
  alt,
  rotation,
  flip,
  label,
  ariaLabel,
  inline = true,
  children,
}: IconProps) {
  const rotationDeg = rotation ? (typeof rotation === 'string' ? parseInt(rotation) : rotation) : undefined

  const flipClasses =
    flip === 'horizontal'
      ? '-scale-x-100'
      : flip === 'vertical'
        ? '-scale-y-100'
        : flip === 'both'
          ? '-scale-x-100 -scale-y-100'
          : ''

  // Image-based icon (Material Design, custom URLs, etc.)
  if (src) {
    return (
      <img
        src={src}
        alt={alt || label}
        className={cn('shrink-0 object-contain', size !== 'inherit' ? sizeClasses[size] : '', flipClasses, className)}
        style={{
          color,
          transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
        }}
        aria-label={ariaLabel || label}
        role="img"
      />
    )
  }

  // Slot-based icon (Lucide, Heroicons, inline SVG)
  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center justify-center',
        size !== 'inherit' ? sizeClasses[size] : '',
        flipClasses,
        className,
      )}
      style={{
        color,
        transform: rotationDeg ? `rotate(${rotationDeg}deg)` : undefined,
      }}
      aria-label={ariaLabel || label}
      role={label ? 'img' : undefined}
    >
      {children}
    </span>
  )
}

// Icon library class prefixes for reference:
// Font Awesome: 'fa-solid', 'fa-regular', 'fa-brands', 'fa-*'
// Material Design: 'mdi mdi-*'
// Heroicons: already SVG-based, use children

// Helper function to generate Font Awesome class
export function faClass(iconName: string, style: 'solid' | 'regular' | 'brands' = 'solid'): string {
  const prefix = style === 'brands' ? 'fab' : style === 'solid' ? 'fas' : 'far'
  return `${prefix} fa-${iconName}`
}

// Helper function to generate Material Design class
export function mdiClass(iconName: string): string {
  return `mdi mdi-${iconName}`
}

export { Icon }

```

### `packages/registry-react/components/icons/index.ts`

```ts
export { Icon, faClass, mdiClass, type IconProps } from './icons'

```

## image-compare

- type: `registry:ui`
- description: Before/after image comparison slider with a draggable divider. Two images overlaid via clip-path, pointer-driven (mouse + touch), horizontal or vertical orientation, custom handle render prop, labels, and disabled state.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/image-compare/ImageCompare.tsx`

```tsx
'use client'

import * as React from 'react'
import { MoveHorizontal, MoveVertical } from 'lucide-react'
import { cn } from '@/lib/utils'
import { imageCompareVariants, type ImageCompareVariants } from './image-compare.variants'

export interface ImageCompareProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, ImageCompareVariants {
  beforeSrc: string
  afterSrc: string
  beforeAlt?: string
  afterAlt?: string
  beforeLabel?: string
  afterLabel?: string
  /** Controlled slider position (0–100). */
  value?: number
  /** Uncontrolled initial position (0–100). */
  defaultValue?: number
  /** Fired with the new position (0–100) on drag / keyboard move. */
  onValueChange?: (value: number) => void
  disabled?: boolean
  showLabels?: boolean
  showHandle?: boolean
  /** Custom handle content — replaces the default arrow icon. */
  handle?: React.ReactNode
}

function clamp(v: number): number {
  return Math.min(100, Math.max(0, v))
}

const ImageCompare = React.forwardRef<HTMLDivElement, ImageCompareProps>(
  (
    {
      beforeSrc,
      afterSrc,
      beforeAlt = 'Before',
      afterAlt = 'After',
      beforeLabel = 'Before',
      afterLabel = 'After',
      value: controlledValue,
      defaultValue = 50,
      onValueChange,
      orientation = 'horizontal',
      disabled = false,
      showLabels = true,
      showHandle = true,
      handle,
      className,
      ...props
    },
    ref,
  ) => {
    const isControlled = controlledValue !== undefined
    const [internal, setInternal] = React.useState(defaultValue)
    const position = isControlled ? controlledValue! : internal

    const containerRef = React.useRef<HTMLDivElement | null>(null)
    const draggingRef = React.useRef(false)

    const setRefs = React.useCallback(
      (node: HTMLDivElement | null) => {
        containerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
      },
      [ref],
    )

    function setPosition(next: number) {
      const clamped = clamp(next)
      if (!isControlled) setInternal(clamped)
      onValueChange?.(clamped)
    }

    function updateFromPointer(clientX: number, clientY: number) {
      const el = containerRef.current
      if (!el) return
      const rect = el.getBoundingClientRect()
      if (orientation === 'horizontal') {
        setPosition(((clientX - rect.left) / rect.width) * 100)
      } else {
        setPosition(((clientY - rect.top) / rect.height) * 100)
      }
    }

    function onPointerDown(e: React.PointerEvent) {
      if (disabled) return
      draggingRef.current = true
      const el = e.currentTarget as HTMLElement
      try {
        el.setPointerCapture(e.pointerId)
      } catch {
        // pointer capture can fail on synthetic / non-active pointers
      }
      updateFromPointer(e.clientX, e.clientY)
    }

    function onPointerMove(e: React.PointerEvent) {
      if (!draggingRef.current || disabled) return
      updateFromPointer(e.clientX, e.clientY)
    }

    function onPointerUp(e: React.PointerEvent) {
      if (!draggingRef.current) return
      draggingRef.current = false
      const el = e.currentTarget as HTMLElement
      try {
        el.releasePointerCapture(e.pointerId)
      } catch {
        // pointer already released
      }
    }

    // Keyboard support: arrow keys move the slider by 1% (Shift = 10%)
    function onKeyDown(e: React.KeyboardEvent) {
      if (disabled) return
      const isH = orientation === 'horizontal'
      const step = e.shiftKey ? 10 : 1
      let next = position
      if (isH) {
        if (e.key === 'ArrowLeft') next -= step
        else if (e.key === 'ArrowRight') next += step
        else return
      } else {
        if (e.key === 'ArrowUp') next -= step
        else if (e.key === 'ArrowDown') next += step
        else return
      }
      e.preventDefault()
      setPosition(next)
    }

    // "After" image is clipped to show only the right portion.
    // Dragging right (higher %) reveals more of "before" on the left.
    const pct = position
    const clipStyle =
      orientation === 'horizontal' ? { clipPath: `inset(0 0 0 ${pct}%)` } : { clipPath: `inset(${pct}% 0 0 0)` }
    const dividerStyle = orientation === 'horizontal' ? { left: `${pct}%` } : { top: `${pct}%` }

    React.useEffect(() => {
      return () => {
        draggingRef.current = false
      }
    }, [])

    return (
      <div
        ref={setRefs}
        data-uipkge=""
        data-slot="image-compare"
        data-orientation={orientation}
        data-disabled={disabled ? '' : undefined}
        className={cn(imageCompareVariants({ orientation }), className)}
        style={{ touchAction: 'none' }}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        {...props}
      >
        {/* Before (base layer, full) */}
        <img
          src={beforeSrc}
          alt={beforeAlt}
          className="pointer-events-none absolute inset-0 size-full object-cover select-none"
          draggable={false}
        />
        {showLabels && (
          <span className="bg-background/80 text-foreground absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs font-medium backdrop-blur-sm">
            {beforeLabel}
          </span>
        )}

        {/* After (clipped overlay — visible on the right side) */}
        <div className="absolute inset-0 size-full" style={clipStyle}>
          <img
            src={afterSrc}
            alt={afterAlt}
            className="pointer-events-none absolute inset-0 size-full object-cover select-none"
            draggable={false}
          />
          {showLabels && (
            <span className="bg-background/80 text-foreground absolute right-2 bottom-2 rounded px-2 py-0.5 text-xs font-medium backdrop-blur-sm">
              {afterLabel}
            </span>
          )}
        </div>

        {/* Divider + handle */}
        {!disabled && (
          <div
            className={cn(
              'bg-border absolute z-10',
              orientation === 'horizontal' ? 'top-0 h-full w-0.5' : 'left-0 h-0.5 w-full',
            )}
            style={dividerStyle}
          >
            {showHandle && (
              <button
                type="button"
                role="slider"
                aria-valuenow={Math.round(position)}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-label={`Image comparison slider, ${Math.round(position)} percent`}
                aria-orientation={orientation}
                tabIndex={0}
                className={cn(
                  'bg-background border-border focus-visible:ring-ring absolute flex size-9 cursor-ew-resize items-center justify-center rounded-full border shadow-md transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:outline-none',
                  'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
                  orientation === 'vertical' && 'cursor-ns-resize',
                )}
                onKeyDown={onKeyDown}
                onPointerDown={(e) => {
                  e.stopPropagation()
                  onPointerDown(e)
                }}
                onPointerMove={onPointerMove}
                onPointerUp={onPointerUp}
                onPointerCancel={onPointerUp}
              >
                {handle !== undefined ? (
                  handle
                ) : orientation === 'horizontal' ? (
                  <MoveHorizontal className="text-foreground size-4" />
                ) : (
                  <MoveVertical className="text-foreground size-4" />
                )}
              </button>
            )}
          </div>
        )}

        {disabled && <div className="bg-background/40 absolute inset-0" />}
      </div>
    )
  },
)
ImageCompare.displayName = 'ImageCompare'

export { ImageCompare }

```

### `packages/registry-react/components/image-compare/image-compare.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const imageCompareVariants = cva('bg-muted relative overflow-hidden rounded-lg border select-none', {
  variants: {
    orientation: {
      horizontal: 'cursor-ew-resize',
      vertical: 'cursor-ns-resize',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
})

export type ImageCompareVariants = VariantProps<typeof imageCompareVariants>

```

### `packages/registry-react/components/image-compare/index.ts`

```ts
export { ImageCompare, type ImageCompareProps } from './ImageCompare'
export { imageCompareVariants, type ImageCompareVariants } from './image-compare.variants'

```

## inbox

- type: `registry:block`
- description: Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
- npm deps: `lucide-react`
- registry deps: `avatar`, `button`, `input`

### `packages/registry-react/blocks/inbox/Inbox.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  Archive,
  ArrowLeft,
  ArrowRight,
  AtSign,
  Forward,
  Inbox as InboxIcon,
  MoreVertical,
  Paperclip,
  Pencil,
  Reply,
  ReplyAll,
  Search,
  Send,
  Smile,
  Star,
  Tag,
  Trash2,
  AlertOctagon,
  FileText,
  Bookmark,
} from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { cn } from '@/lib/utils'

type ReplyMode = 'reply' | 'reply-all' | 'forward'

type FolderId = 'inbox' | 'starred' | 'sent' | 'drafts' | 'spam' | 'trash'

interface Folder {
  id: FolderId
  label: string
  icon: React.ComponentType<{ className?: string }>
}

interface LabelTag {
  id: string
  label: string
  color: string
}

interface Mail {
  id: string
  folder: FolderId
  from: { name: string; email: string; initials: string }
  to: string
  subject: string
  preview: string
  body: string
  receivedAt: Date
  read: boolean
  starred: boolean
  hasAttachment: boolean
  labels: string[]
}

const folders: Folder[] = [
  { id: 'inbox', label: 'Inbox', icon: InboxIcon },
  { id: 'starred', label: 'Starred', icon: Star },
  { id: 'sent', label: 'Sent', icon: Send },
  { id: 'drafts', label: 'Drafts', icon: FileText },
  { id: 'spam', label: 'Spam', icon: AlertOctagon },
  { id: 'trash', label: 'Trash', icon: Trash2 },
]

const labels: LabelTag[] = [
  { id: 'work', label: 'Work', color: 'bg-primary' },
  { id: 'personal', label: 'Personal', color: 'bg-success' },
  { id: 'finance', label: 'Finance', color: 'bg-info' },
  { id: 'travel', label: 'Travel', color: 'bg-warning' },
]

const now = new Date()
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)

const defaultMails: Mail[] = [
  {
    id: 'e1',
    folder: 'inbox',
    from: { name: 'Sarah Connor', email: 'sarah@acme.com', initials: 'SC' },
    to: 'you@acme.com',
    subject: 'Q2 OKR draft — your sign-off needed',
    preview:
      'Pulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need…',
    body: `Hi,\n\nPulled together the Q2 OKR draft from the leadership offsite. I have flagged the two areas where we need your call before we lock it:\n\n• Hiring plan: 4 vs 6 ENG roles (page 3)\n• EU rollout timing: April vs June (page 7)\n\nGoing to share with the rest of the leadership team Wednesday EOD, so anything from you by Tuesday is great.\n\nThanks,\nSarah`,
    receivedAt: new Date(now.getTime() - 18 * 60 * 1000),
    read: false,
    starred: true,
    hasAttachment: true,
    labels: ['work'],
  },
  {
    id: 'e2',
    folder: 'inbox',
    from: { name: 'Marcus Rivera', email: 'marcus@acme.com', initials: 'MR' },
    to: 'you@acme.com',
    subject: 'Re: Dashboard review tomorrow',
    preview:
      'Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.',
    body: `Yes! Pushing to 10:30 so we can join from the standup. I will own the slides and pull the latest kanban metrics.\n\nFew things I want to cover:\n  - Throughput delta vs last sprint\n  - The two stories we de-scoped\n  - Q2 capacity ask\n\nSee you tomorrow,\nMarcus`,
    receivedAt: new Date(now.getTime() - 95 * 60 * 1000),
    read: false,
    starred: false,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e3',
    folder: 'inbox',
    from: { name: 'Stripe', email: 'receipts@stripe.com', initials: 'St' },
    to: 'you@acme.com',
    subject: 'Your invoice from Acme Inc. — $1,290.00',
    preview: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00…',
    body: 'Thanks for using Stripe. Your invoice for the period Mar 1 – Mar 31 is attached. Total due: $1,290.00.',
    receivedAt: new Date(now.getTime() - 4 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: true,
    labels: ['finance'],
  },
  {
    id: 'e4',
    folder: 'inbox',
    from: { name: 'Linear', email: 'no-reply@linear.app', initials: 'Li' },
    to: 'you@acme.com',
    subject: 'Weekly summary: 14 issues closed, 22 opened',
    preview:
      'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',
    body: 'Good news — the team closed 14 issues this week, up 3 from last week. Top contributors: Marcus, Priya, Devon.',
    receivedAt: new Date(now.getTime() - 9 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e5',
    folder: 'inbox',
    from: { name: 'Priya Shah', email: 'priya@acme.com', initials: 'PS' },
    to: 'you@acme.com',
    subject: 'Color tokens are live in staging',
    preview:
      'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look…',
    body: 'Pushed the new OKLCH token set to staging. All chart colors, success/warning/info, sidebar variants. Take a look when you have a sec.',
    receivedAt: yesterday,
    read: true,
    starred: true,
    hasAttachment: false,
    labels: ['work'],
  },
  {
    id: 'e6',
    folder: 'inbox',
    from: { name: 'United Airlines', email: 'reservations@united.com', initials: 'UA' },
    to: 'you@acme.com',
    subject: 'Your itinerary: SFO → LHR, departing Apr 12',
    preview: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',
    body: 'Your reservation is confirmed. Check-in opens 24h before departure. Booking reference: 7HQ4P2.',
    receivedAt: new Date(now.getTime() - 38 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: true,
    labels: ['travel'],
  },
  {
    id: 'e7',
    folder: 'inbox',
    from: { name: 'Mom', email: 'mom@family.net', initials: 'M' },
    to: 'you@acme.com',
    subject: 'Sunday lunch?',
    preview: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',
    body: 'Are you free for lunch this Sunday? Dad is making his lasagne. Let me know!',
    receivedAt: new Date(now.getTime() - 55 * 60 * 60 * 1000),
    read: true,
    starred: false,
    hasAttachment: false,
    labels: ['personal'],
  },
]

export interface InboxProps {
  messages?: Mail[]
}

function formatMailTime(d: Date): string {
  if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
  if (d.toDateString() === yesterday.toDateString()) return 'Yesterday'
  const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000))
  if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' })
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
}

function formatFullTime(d: Date): string {
  return d.toLocaleString(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  })
}

function labelMeta(id: string): LabelTag | undefined {
  return labels.find((l) => l.id === id)
}

export function Inbox({ messages = defaultMails }: InboxProps) {
  const [mails, setMails] = React.useState<Mail[]>(messages)
  const [activeFolder, setActiveFolder] = React.useState<FolderId>('inbox')
  const [activeLabel, setActiveLabel] = React.useState<string | null>(null)
  const [activeId, setActiveId] = React.useState<string>('e1')
  const [search, setSearch] = React.useState('')
  const [replyMode, setReplyMode] = React.useState<ReplyMode>('reply')
  const [replyDraft, setReplyDraft] = React.useState('')
  const [justSent, setJustSent] = React.useState(false)

  function unreadCount(id: FolderId): number {
    if (id === 'starred') return mails.filter((m) => m.starred && !m.read && m.folder !== 'trash').length
    return mails.filter((m) => m.folder === id && !m.read).length
  }

  const labelCounts = React.useMemo(
    () =>
      labels.reduce<Record<string, number>>((acc, l) => {
        acc[l.id] = mails.filter((m) => m.labels.includes(l.id)).length
        return acc
      }, {}),
    [mails],
  )

  const visibleMails = React.useMemo(() => {
    const q = search.trim().toLowerCase()
    let list = mails.filter((m) => {
      if (activeLabel) return m.labels.includes(activeLabel)
      if (activeFolder === 'starred') return m.starred && m.folder !== 'trash'
      return m.folder === activeFolder
    })
    if (q) {
      list = list.filter(
        (m) =>
          m.subject.toLowerCase().includes(q) ||
          m.from.name.toLowerCase().includes(q) ||
          m.preview.toLowerCase().includes(q),
      )
    }
    return [...list].sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())
  }, [mails, search, activeLabel, activeFolder])

  const activeMail = React.useMemo(() => mails.find((m) => m.id === activeId) ?? null, [mails, activeId])

  function selectMail(id: string) {
    setActiveId(id)
    setMails((prev) => prev.map((m) => (m.id === id ? { ...m, read: true } : m)))
  }

  function selectFolder(id: FolderId) {
    setActiveFolder(id)
    setActiveLabel(null)
    const list = [...mails]
      .filter((m) => (id === 'starred' ? m.starred && m.folder !== 'trash' : m.folder === id))
      .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())
    const first = list[0]
    if (first) setActiveId(first.id)
  }

  function selectLabel(id: string) {
    setActiveLabel(id)
    const list = [...mails]
      .filter((m) => m.labels.includes(id))
      .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())
    const first = list[0]
    if (first) setActiveId(first.id)
  }

  function toggleStar(id: string, e?: React.MouseEvent) {
    e?.stopPropagation()
    setMails((prev) => prev.map((m) => (m.id === id ? { ...m, starred: !m.starred } : m)))
  }

  function archive(id: string) {
    setMails((prev) => {
      const next = prev.filter((m) => m.id !== id)
      const visible = [...next]
        .filter((m) => {
          if (activeLabel) return m.labels.includes(activeLabel)
          if (activeFolder === 'starred') return m.starred && m.folder !== 'trash'
          return m.folder === activeFolder
        })
        .sort((a, b) => b.receivedAt.getTime() - a.receivedAt.getTime())
      const nextActive = visible[0]
      if (nextActive) setActiveId(nextActive.id)
      return next
    })
  }

  const replyRecipient = React.useMemo(() => {
    const m = activeMail
    if (!m) return ''
    if (replyMode === 'forward') return ''
    return m.from.name + ' <' + m.from.email + '>'
  }, [activeMail, replyMode])

  const replyPlaceholder = replyMode === 'forward' ? 'Add a note before forwarding' : 'Write a reply'

  const sendDisabled = !replyDraft.trim() || (replyMode === 'forward' && false)

  function changeReplyMode(mode: ReplyMode) {
    setReplyMode(mode)
    setJustSent(false)
  }

  function sendReply() {
    const body = replyDraft.trim()
    if (!body) return
    setReplyDraft('')
    setJustSent(true)
    window.setTimeout(() => {
      setJustSent(false)
    }, 1800)
  }

  function onReplyKey(e: React.KeyboardEvent) {
    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      sendReply()
    }
  }

  React.useEffect(() => {
    setReplyDraft('')
    setReplyMode('reply')
    setJustSent(false)
  }, [activeId])

  return (
    <div className="bg-card text-card-foreground grid h-[680px] w-full grid-cols-[220px_340px_1fr] overflow-hidden rounded-xl border shadow-sm">
      <aside className="bg-muted/30 flex min-w-0 flex-col border-r">
        <div className="flex h-14 shrink-0 items-center border-b px-3">
          <Button className="h-9 w-full justify-start gap-2 rounded-lg" size="sm">
            <Pencil className="size-4" />
            Compose
          </Button>
        </div>
        <nav className="flex-1 space-y-1 overflow-y-auto px-3 pt-3 pb-3">
          <p className="text-muted-foreground px-2 pb-1 text-[10px] font-semibold tracking-widest uppercase">Folders</p>
          {folders.map((f) => (
            <button
              key={f.id}
              className={cn(
                'flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors',
                activeFolder === f.id && !activeLabel
                  ? 'bg-primary/10 text-primary font-medium'
                  : 'hover:bg-muted/60 text-foreground/80',
              )}
              onClick={() => selectFolder(f.id)}
            >
              <span className="flex min-w-0 items-center gap-2">
                <f.icon className="size-4 shrink-0" />
                <span className="truncate">{f.label}</span>
              </span>
              {unreadCount(f.id) > 0 && (
                <span className="text-muted-foreground shrink-0 text-[10px] tabular-nums">{unreadCount(f.id)}</span>
              )}
            </button>
          ))}

          <p className="text-muted-foreground mt-4 px-2 pb-1 text-[10px] font-semibold tracking-widest uppercase">
            Labels
          </p>
          {labels.map((l) => (
            <button
              key={l.id}
              className={cn(
                'flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors',
                activeLabel === l.id ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/60 text-foreground/80',
              )}
              onClick={() => selectLabel(l.id)}
            >
              <span className="flex min-w-0 items-center gap-2">
                <span className={cn('size-2.5 shrink-0 rounded-full', l.color)} />
                <span className="truncate">{l.label}</span>
              </span>
              <span className="text-muted-foreground shrink-0 text-[10px] tabular-nums">{labelCounts[l.id] ?? 0}</span>
            </button>
          ))}
        </nav>
      </aside>

      <section className="bg-background flex min-w-0 flex-col border-r">
        <div className="flex h-14 shrink-0 items-center gap-2 border-b px-3">
          <div className="relative flex-1">
            <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search mail"
              className="h-8 rounded-lg pl-8 text-xs"
            />
          </div>
          <Button variant="ghost" size="icon" className="size-8" aria-label="Filter">
            <Tag className="size-4" />
          </Button>
        </div>
        <div className="flex items-center justify-between px-4 pt-3 pb-2">
          <h2 className="text-sm font-semibold tracking-tight capitalize">
            {activeLabel ? labelMeta(activeLabel)?.label : activeFolder}
          </h2>
          <span className="text-muted-foreground text-[10px] tabular-nums">
            {visibleMails.length} message{visibleMails.length === 1 ? '' : 's'}
          </span>
        </div>
        <div className="list-scroll flex-1 overflow-y-auto pb-3">
          {visibleMails.map((m) => (
            <button
              key={m.id}
              className={cn(
                'group relative w-full px-4 py-3 text-left transition-colors',
                m.id === activeId ? 'bg-primary/5' : 'hover:bg-muted/60',
              )}
              onClick={() => selectMail(m.id)}
            >
              {m.id === activeId && (
                <span className="bg-primary absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full" />
              )}
              <div className="flex items-start gap-3">
                <Avatar className="mt-0.5 size-8 shrink-0">
                  <AvatarFallback className="text-[11px]">{m.from.initials}</AvatarFallback>
                </Avatar>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center justify-between gap-2">
                    <p className={cn('truncate text-[13px]', m.read ? 'font-medium' : 'font-semibold')}>
                      {m.from.name}
                    </p>
                    <span className="text-muted-foreground shrink-0 text-[10px] tabular-nums">
                      {formatMailTime(m.receivedAt)}
                    </span>
                  </div>
                  <p className={cn('mt-0.5 truncate text-xs', m.read ? 'text-foreground/80' : 'font-semibold')}>
                    {m.subject}
                  </p>
                  <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">{m.preview}</p>
                  <div className="mt-1.5 flex items-center gap-1.5">
                    {m.labels.map((lid) => (
                      <span
                        key={lid}
                        className="text-muted-foreground bg-muted inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px]"
                      >
                        <span className={cn('size-1.5 rounded-full', labelMeta(lid)?.color)} />
                        {labelMeta(lid)?.label}
                      </span>
                    ))}
                    {m.hasAttachment && <Paperclip className="text-muted-foreground size-3" />}
                    {!m.read && <span className="bg-primary ml-auto size-1.5 shrink-0 rounded-full" />}
                  </div>
                </div>
                <button
                  className="text-muted-foreground hover:text-warning shrink-0 transition-colors"
                  title={m.starred ? 'Unstar' : 'Star'}
                  onClick={(e) => toggleStar(m.id, e)}
                >
                  <Star className={cn('size-3.5', m.starred ? 'fill-warning text-warning' : '')} />
                </button>
              </div>
            </button>
          ))}

          {visibleMails.length === 0 && (
            <div className="flex flex-col items-center justify-center px-6 py-16 text-center">
              <div className="bg-muted mb-3 rounded-full p-3">
                <InboxIcon className="text-muted-foreground size-5" />
              </div>
              <p className="text-sm font-medium">Nothing here</p>
              <p className="text-muted-foreground mt-0.5 text-xs">No messages match the current filter.</p>
            </div>
          )}
        </div>
      </section>

      <section className="bg-background flex min-w-0 flex-col">
        {activeMail ? (
          <>
            <div className="flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
              <div className="flex items-center gap-1">
                <Button variant="ghost" size="icon" className="size-8" aria-label="Back">
                  <ArrowLeft className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  className="size-8"
                  aria-label="Archive"
                  onClick={() => archive(activeMail.id)}
                >
                  <Archive className="size-4" />
                </Button>
                <Button variant="ghost" size="icon" className="size-8" aria-label="Delete">
                  <Trash2 className="size-4" />
                </Button>
                <Button variant="ghost" size="icon" className="size-8" aria-label="Save">
                  <Bookmark className="size-4" />
                </Button>
              </div>
              <div className="flex items-center gap-1">
                <Button variant="ghost" size="icon" className="size-8" aria-label="Reply">
                  <Reply className="size-4" />
                </Button>
                <Button variant="ghost" size="icon" className="size-8" aria-label="Reply all">
                  <ReplyAll className="size-4" />
                </Button>
                <Button variant="ghost" size="icon" className="size-8" aria-label="Forward">
                  <Forward className="size-4" />
                </Button>
                <Button variant="ghost" size="icon" className="size-8" aria-label="More options">
                  <MoreVertical className="size-4" />
                </Button>
              </div>
            </div>

            <div className="reader-scroll flex-1 overflow-y-auto">
              <div className="px-6 pt-5 pb-3">
                <h1 className="text-foreground text-xl leading-tight font-semibold tracking-tight">
                  {activeMail.subject}
                </h1>
                <div className="mt-2 flex flex-wrap items-center gap-2">
                  {activeMail.labels.map((lid) => (
                    <span
                      key={lid}
                      className="text-foreground/70 bg-muted inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px]"
                    >
                      <span className={cn('size-1.5 rounded-full', labelMeta(lid)?.color)} />
                      {labelMeta(lid)?.label}
                    </span>
                  ))}
                </div>
              </div>

              <div className="flex items-start gap-3 px-6 pb-4">
                <Avatar className="size-10">
                  <AvatarFallback>{activeMail.from.initials}</AvatarFallback>
                </Avatar>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-baseline gap-x-2">
                    <p className="text-sm font-semibold">{activeMail.from.name}</p>
                    <p className="text-muted-foreground text-xs">&lt;{activeMail.from.email}&gt;</p>
                  </div>
                  <p className="text-muted-foreground text-xs">to {activeMail.to}</p>
                </div>
                <div className="text-muted-foreground flex shrink-0 items-center gap-2 text-xs">
                  <span>{formatFullTime(activeMail.receivedAt)}</span>
                  <button
                    className="hover:text-warning transition-colors"
                    title={activeMail.starred ? 'Unstar' : 'Star'}
                    onClick={() => toggleStar(activeMail.id)}
                  >
                    <Star className={cn('size-4', activeMail.starred ? 'fill-warning text-warning' : '')} />
                  </button>
                </div>
              </div>

              <article className="text-foreground/90 px-6 pb-6 text-sm leading-relaxed whitespace-pre-wrap">
                {activeMail.body}
              </article>

              {activeMail.hasAttachment && (
                <div className="px-6 pb-6">
                  <div className="bg-muted/40 flex items-center gap-3 rounded-lg border px-3 py-2.5">
                    <div className="bg-info/10 text-info flex size-8 items-center justify-center rounded-md">
                      <FileText className="size-4" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <p className="truncate text-xs font-medium">attachment.pdf</p>
                      <p className="text-muted-foreground text-[10px]">142 KB · PDF</p>
                    </div>
                    <Button variant="ghost" size="sm" className="h-7 text-xs">
                      Download
                    </Button>
                  </div>
                </div>
              )}
            </div>

            <div className="bg-muted/20 border-t px-4 pt-3 pb-3">
              <div className="mb-2 flex items-center gap-1">
                <button
                  className={cn(
                    'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                    replyMode === 'reply'
                      ? 'bg-background text-foreground border-input/60 border shadow-sm'
                      : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
                  )}
                  onClick={() => changeReplyMode('reply')}
                >
                  <Reply className="size-3.5" />
                  Reply
                </button>
                <button
                  className={cn(
                    'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                    replyMode === 'reply-all'
                      ? 'bg-background text-foreground border-input/60 border shadow-sm'
                      : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
                  )}
                  onClick={() => changeReplyMode('reply-all')}
                >
                  <ReplyAll className="size-3.5" />
                  Reply all
                </button>
                <button
                  className={cn(
                    'inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-[11px] font-medium transition-colors',
                    replyMode === 'forward'
                      ? 'bg-background text-foreground border-input/60 border shadow-sm'
                      : 'text-muted-foreground hover:bg-background/60 hover:text-foreground',
                  )}
                  onClick={() => changeReplyMode('forward')}
                >
                  <Forward className="size-3.5" />
                  Forward
                </button>
              </div>
              <div className="bg-background border-input/60 focus-within:border-primary/40 focus-within:ring-primary/10 group flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-all duration-150 focus-within:shadow-md focus-within:ring-4">
                {replyRecipient && (
                  <p className="border-input/40 text-muted-foreground border-b px-4 pt-2.5 pb-2 text-[11px]">
                    <span className="text-foreground/70 font-medium">To:</span> {replyRecipient}
                  </p>
                )}
                <textarea
                  value={replyDraft}
                  onChange={(e) => setReplyDraft(e.target.value)}
                  placeholder={replyPlaceholder}
                  rows={1}
                  className="placeholder:text-muted-foreground/70 max-h-40 min-h-[44px] resize-none border-0 bg-transparent px-4 pt-3 pb-1 text-sm leading-relaxed shadow-none outline-none focus-visible:ring-0"
                  onKeyDown={onReplyKey}
                />
                <div className="flex items-center justify-between gap-2 px-2 pb-2">
                  <div className="flex items-center gap-0.5">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Attach file"
                    >
                      <Paperclip className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Emoji"
                    >
                      <Smile className="size-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-muted-foreground hover:text-foreground size-8"
                      aria-label="Mention"
                    >
                      <AtSign className="size-4" />
                    </Button>
                  </div>
                  <div className="flex items-center gap-2">
                    <kbd className="bg-muted text-muted-foreground hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] sm:inline-flex">
                      <span>⌘</span>
                      <span>↵</span>
                    </kbd>
                    <Button
                      className="h-8 gap-1.5 rounded-lg px-3 text-xs font-medium"
                      disabled={sendDisabled}
                      aria-label="Send"
                      onClick={sendReply}
                    >
                      Send
                      <ArrowRight className="size-3.5" />
                    </Button>
                  </div>
                </div>
              </div>
              {justSent && <p className="text-success mt-2 text-center text-[11px] font-medium">Reply sent</p>}
            </div>
          </>
        ) : (
          <div className="flex flex-1 items-center justify-center">
            <div className="text-center">
              <div className="bg-muted mx-auto mb-3 size-12 rounded-full p-3">
                <InboxIcon className="text-muted-foreground size-6" />
              </div>
              <p className="text-sm font-medium">No message selected</p>
              <p className="text-muted-foreground mt-1 text-xs">Pick a message from the list to read it here.</p>
            </div>
          </div>
        )}
      </section>
    </div>
  )
}

```

## infinite-scroll

- type: `registry:ui`
- description: Load-more-on-scroll sentinel. Calls an onLoadMore callback when the user scrolls near the bottom (or top, in reverse mode). Supports a window or element scroll target, distance threshold, loading/hasMore/disabled gating, and slots for custom loading and end-of-list states.
- npm deps: `lucide-react`

### `packages/registry-react/components/infinite-scroll/InfiniteScroll.tsx`

```tsx
import * as React from 'react'
import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface InfiniteScrollProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
  /** Rendered list. The component does not mutate it; the parent appends
   *  new items in response to the `onLoadMore` callback. */
  items?: T[]
  /** When false, the sentinel never fires `onLoadMore` (end of data reached). */
  hasMore?: boolean
  /** True while the parent is fetching. While true the sentinel is paused
   *  so duplicate loads are not emitted. */
  loading?: boolean
  /** Distance (px) from the boundary at which `onLoadMore` fires. Larger = earlier. */
  distance?: number
  /** Scroll container. `"window"` listens on the viewport; pass an element
   *  ref (HTMLElement) or a CSS selector string to listen on a scrollable
   *  element instead. */
  scrollTarget?: 'window' | HTMLElement | string
  /** Reverse mode: prepend items at the top. The sentinel is anchored to the
   *  top edge and `onLoadMore` fires when the user scrolls near the top. */
  reverse?: boolean
  /** Hard pause independent of `loading`/`hasMore`. */
  disabled?: boolean
  /** Hide the default loading spinner (use the `loadingSlot` prop instead). */
  hideSpinner?: boolean
  /** Override the default loading spinner. Mirrors the Vue `loading` slot. */
  loadingSlot?: React.ReactNode
  /** Override the default end-of-list message. Mirrors the Vue `end` slot. */
  endSlot?: React.ReactNode
  /** List contents. Mirrors the Vue default slot. */
  children?: React.ReactNode
  /** Fired when the user scrolls near the boundary. Vue `@load` -> React `onLoadMore`. */
  onLoadMore?: () => void
}

type ScrollEl = HTMLElement | Window | null

function InfiniteScrollInner<T>(props: InfiniteScrollProps<T>, ref: React.Ref<HTMLDivElement>) {
  const {
    className,
    hasMore = true,
    loading = false,
    distance = 0,
    scrollTarget = 'window',
    reverse = false,
    disabled = false,
    hideSpinner = false,
    loadingSlot,
    endSlot,
    children,
    onLoadMore,
    ...rest
  } = props

  const sentinelRef = React.useRef<HTMLDivElement | null>(null)
  // Latest props captured in a ref so the scroll handler never closes over
  // stale values (it is bound once per scroll-target change).
  const stateRef = React.useRef({ disabled, loading, hasMore, reverse, distance, onLoadMore })
  stateRef.current = { disabled, loading, hasMore, reverse, distance, onLoadMore }

  const showSpinner = loading && !hideSpinner

  function getScrollElement(): ScrollEl {
    if (scrollTarget === 'window') return typeof window === 'undefined' ? null : window
    if (typeof scrollTarget === 'string') {
      if (typeof document === 'undefined') return null
      return (document.querySelector(scrollTarget) as HTMLElement | null) ?? window
    }
    return scrollTarget
  }

  function check() {
    const state = stateRef.current
    if (state.disabled || state.loading || !state.hasMore || !sentinelRef.current) return
    const sentinelEl = sentinelRef.current
    const sentinelRect = sentinelEl.getBoundingClientRect()
    const viewportH = window.innerHeight || document.documentElement.clientHeight
    const viewportW = window.innerWidth || document.documentElement.clientWidth
    if (state.reverse) {
      // Reverse: fire when the sentinel (anchored at top) approaches the top edge.
      if (sentinelRect.bottom >= -state.distance && sentinelRect.top <= viewportH) {
        state.onLoadMore?.()
      }
    } else {
      // Forward: fire when the sentinel approaches the bottom edge.
      if (sentinelRect.top <= viewportH + state.distance && sentinelRect.bottom >= -state.distance) {
        void viewportW
        state.onLoadMore?.()
      }
    }
  }

  // Bind the scroll listener; re-bind when the scroll target changes.
  React.useEffect(() => {
    const scrollEl = getScrollElement()
    if (!scrollEl) return
    const onScroll = () => check()
    scrollEl.addEventListener('scroll', onScroll, { passive: true })
    // Fire once on mount so an initially-empty list starts loading immediately.
    check()
    return () => {
      scrollEl.removeEventListener('scroll', onScroll)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [scrollTarget])

  // When a load completes (loading flips false) and there is still more data,
  // re-check in case the viewport is still larger than the content (short list).
  React.useEffect(() => {
    if (!loading && hasMore) {
      const raf = requestAnimationFrame(() => check())
      return () => cancelAnimationFrame(raf)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [loading, hasMore])

  return (
    <div data-uipkge="" data-slot="infinite-scroll" className={cn('w-full', className)} ref={ref} {...rest}>
      {reverse ? (
        <>
          {showSpinner ? (
            <div data-slot="infinite-scroll-loading" className="flex w-full justify-center py-3">
              {loadingSlot ?? <Loader2 className="text-muted-foreground size-5 animate-spin" aria-label="Loading" />}
            </div>
          ) : null}
          <div ref={sentinelRef} data-slot="infinite-scroll-sentinel" className="h-px w-full" aria-hidden="true" />
          {children}
        </>
      ) : (
        <>
          {children}
          <div ref={sentinelRef} data-slot="infinite-scroll-sentinel" className="h-px w-full" aria-hidden="true" />
          {showSpinner ? (
            <div data-slot="infinite-scroll-loading" className="flex w-full justify-center py-3">
              {loadingSlot ?? <Loader2 className="text-muted-foreground size-5 animate-spin" aria-label="Loading" />}
            </div>
          ) : null}
          {!hasMore && !loading ? (
            <div data-slot="infinite-scroll-end" className="text-muted-foreground w-full py-3 text-center text-xs">
              {endSlot ?? 'No more items'}
            </div>
          ) : null}
        </>
      )}
    </div>
  )
}

const InfiniteScroll = React.forwardRef(InfiniteScrollInner) as <T = any>(
  props: InfiniteScrollProps<T> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement
InfiniteScroll.displayName = 'InfiniteScroll'

export { InfiniteScroll }

```

### `packages/registry-react/components/infinite-scroll/index.ts`

```ts
export { InfiniteScroll, type InfiniteScrollProps } from './InfiniteScroll'

```

## init

- type: `registry:lib`
- description: One-shot bootstrap. Pulls tailwind tokens, the cn() helper, and the theme provider/useTheme hook in a single command. Run this first when starting a new app.
- registry deps: `tailwind`, `utils`, `use-theme`

## input

- type: `registry:ui`
- description: Text input — single-line. Three sizes, three variants (outlined / filled / borderless), error / warning status, prefix / suffix nodes, addonBefore / addonAfter, allow-clear, password toggle, and char count. Same sizing and ring treatment as the rest of the form primitives.
- npm deps: `lucide-react`

### `packages/registry-react/components/input/Input.tsx`

```tsx
'use client'

import * as React from 'react'
import { X, Eye, EyeOff } from 'lucide-react'
import { cn } from '@/lib/utils'

type Size = 'small' | 'middle' | 'large'
type Variant = 'outlined' | 'filled' | 'borderless'
type Status = 'error' | 'warning'

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
  size?: Size
  variant?: Variant
  status?: Status
  /** Leading content. A node wins over the `prefixIcon` shorthand. */
  prefix?: React.ReactNode
  suffix?: React.ReactNode
  /** Shorthand for an icon at the start/end (e.g. `prefixIcon={<Mail />}`). */
  prefixIcon?: React.ReactNode
  suffixIcon?: React.ReactNode
  addonBefore?: React.ReactNode
  addonAfter?: React.ReactNode
  allowClear?: boolean
  showCount?: boolean
  showPasswordToggle?: boolean
  /** Wrapper className. Falls through to the bordered control, not the <input>. */
  className?: string
}

const sizeClasses: Record<Size, string> = {
  small: 'h-8 text-xs',
  middle: 'h-9 text-base md:text-sm',
  large: 'h-11 text-base',
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (
    {
      size = 'middle',
      variant = 'outlined',
      status,
      prefix,
      suffix,
      prefixIcon,
      suffixIcon,
      addonBefore,
      addonAfter,
      allowClear,
      showCount,
      showPasswordToggle,
      className,
      type = 'text',
      disabled,
      readOnly,
      maxLength,
      value,
      defaultValue,
      onChange,
      onFocus,
      onBlur,
      id,
      'aria-invalid': ariaInvalid,
      ...rest
    },
    ref,
  ) => {
    const innerRef = React.useRef<HTMLInputElement | null>(null)
    // Merge the forwarded ref with our internal ref (needed for focus()).
    const setRefs = React.useCallback(
      (node: HTMLInputElement | null) => {
        innerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node
      },
      [ref],
    )

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<string>(
      defaultValue != null ? String(defaultValue) : '',
    )
    const currentValue = isControlled ? String(value ?? '') : internal

    const [focused, setFocused] = React.useState(false)
    const [hovered, setHovered] = React.useState(false)
    const [passwordVisible, setPasswordVisible] = React.useState(false)

    const isPassword = type === 'password'
    const hasPrefix = !!prefix || !!prefixIcon
    const hasSuffix = !!suffix || !!suffixIcon
    const hasAddonBefore = !!addonBefore
    const hasAddonAfter = !!addonAfter

    const hasPasswordToggle = !!showPasswordToggle && isPassword
    const hasCount = !!showCount && maxLength != null
    const hasRightConfig = !!allowClear || hasPasswordToggle || hasCount

    const currentLength = currentValue.length
    const showClear = !!allowClear && currentValue.length > 0 && (focused || hovered) && !disabled && !readOnly
    const computedType = !isPassword ? type : passwordVisible ? 'text' : 'password'

    const wrapperRounded =
      hasAddonBefore && hasAddonAfter
        ? 'rounded-none'
        : hasAddonBefore
          ? 'rounded-l-none rounded-r-md'
          : hasAddonAfter
            ? 'rounded-r-none rounded-l-md'
            : 'rounded-md'

    const variantMap: Record<Variant, string> = {
      outlined: 'border-input bg-transparent shadow-xs',
      filled: 'border-transparent bg-muted/50 shadow-none',
      borderless: 'border-transparent bg-transparent shadow-none',
    }
    const statusMap: Record<Status, string> = {
      error:
        'border-destructive focus-within:border-destructive focus-within:ring-destructive/20 dark:focus-within:ring-destructive/40',
      warning: 'border-[var(--warning)] focus-within:border-[var(--warning)] focus-within:ring-[var(--warning)]/20',
    }

    const wrapperClasses = cn(
      'flex w-full items-center gap-1.5 overflow-hidden border transition-[color,box-shadow] outline-none',
      sizeClasses[size],
      variantMap[variant],
      status ? statusMap[status] : '',
      !status ? 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]' : '',
      disabled ? 'pointer-events-none opacity-50 cursor-not-allowed bg-muted/30' : '',
      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
      wrapperRounded,
      className,
    )

    function addonClasses(position: 'before' | 'after') {
      const roundedClass =
        position === 'before' ? 'rounded-l-md rounded-r-none border-r-0' : 'rounded-r-md rounded-l-none border-l-0'
      return cn(
        'flex items-center bg-muted px-3 text-sm text-muted-foreground border border-input',
        roundedClass,
        sizeClasses[size],
      )
    }

    const sidePad =
      size === 'small' ? { l: 'pl-2', r: 'pr-2' } : size === 'large' ? { l: 'pl-3', r: 'pr-3' } : { l: 'pl-2.5', r: 'pr-2.5' }

    const hasLeft = hasPrefix
    const hasRight = hasSuffix || hasRightConfig
    const inputPadding =
      !hasLeft && !hasRight
        ? cn(sidePad.l, sidePad.r)
        : hasLeft && !hasRight
          ? cn('pl-0', sidePad.r)
          : !hasLeft && hasRight
            ? cn(sidePad.l, 'pr-0')
            : 'px-0'

    function emit(next: string) {
      if (!isControlled) setInternal(next)
    }

    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
      emit(e.target.value)
      onChange?.(e)
    }

    function handleClear() {
      const node = innerRef.current
      if (node) {
        // Use the native setter so a controlled parent's onChange fires with a
        // real event (React tracks the value on the DOM node's prototype).
        const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set
        setter?.call(node, '')
        node.dispatchEvent(new Event('input', { bubbles: true }))
        node.focus()
      }
      emit('')
    }

    function togglePassword() {
      setPasswordVisible((v) => !v)
      innerRef.current?.focus()
    }

    return (
      <div className="flex w-full">
        {hasAddonBefore && <div className={addonClasses('before')}>{addonBefore}</div>}

        <div
          className={wrapperClasses}
          data-uipkge=""
          data-slot="input"
          aria-invalid={ariaInvalid}
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          onClick={() => innerRef.current?.focus()}
        >
          {hasPrefix && (
            <span className={cn('text-muted-foreground pointer-events-none shrink-0 select-none', sidePad.l)}>
              {prefixIcon ?? prefix}
            </span>
          )}

          <input
            id={id}
            ref={setRefs}
            value={currentValue}
            type={computedType}
            disabled={disabled}
            readOnly={readOnly}
            maxLength={maxLength}
            onChange={handleChange}
            onFocus={(e) => {
              setFocused(true)
              onFocus?.(e)
            }}
            onBlur={(e) => {
              setFocused(false)
              onBlur?.(e)
            }}
            className={cn(
              'w-full min-w-0 flex-1 bg-transparent outline-none',
              'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',
              'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
              'disabled:cursor-not-allowed',
              inputPadding,
            )}
            {...rest}
          />

          {/* Built-in actions render first, then the user's suffix, so the
              slotted content is always rightmost. */}
          <div className={cn('flex shrink-0 items-center gap-1', sidePad.r)}>
            {showClear && (
              <button
                type="button"
                aria-label="Clear input"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none"
                onMouseDown={(e) => e.preventDefault()}
                onClick={handleClear}
              >
                <X className="size-4" aria-hidden="true" />
              </button>
            )}

            {hasPasswordToggle && !disabled && !readOnly && (
              <button
                type="button"
                aria-label={passwordVisible ? 'Hide password' : 'Show password'}
                aria-pressed={passwordVisible}
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none"
                onMouseDown={(e) => e.preventDefault()}
                onClick={togglePassword}
              >
                {passwordVisible ? <Eye className="size-4" aria-hidden="true" /> : <EyeOff className="size-4" aria-hidden="true" />}
              </button>
            )}

            {hasCount && (
              <span className="text-muted-foreground pointer-events-none text-xs select-none">
                {currentLength}/{maxLength}
              </span>
            )}

            {hasSuffix && (
              <span className="text-muted-foreground pointer-events-none select-none">{suffixIcon ?? suffix}</span>
            )}
          </div>
        </div>

        {hasAddonAfter && <div className={addonClasses('after')}>{addonAfter}</div>}
      </div>
    )
  },
)
Input.displayName = 'Input'

export { Input }

```

### `packages/registry-react/components/input/index.ts`

```ts
export { Input, type InputProps } from './Input'

```

## json-tree-view

- type: `registry:ui`
- description: Collapsible JSON tree viewer with color-coded value types, click-to-copy, live search/filter, hover path display, and expand/collapse-all controls. Renders objects, arrays, and primitives with configurable default depth and max depth.
- npm deps: `lucide-react`

### `packages/registry-react/components/json-tree-view/JsonTreeView.tsx`

```tsx
import * as React from 'react'
import { ChevronDown, ChevronRight, Search, Braces, Copy, Check, FoldVertical, UnfoldVertical } from 'lucide-react'
import { cn } from '@/lib/utils'
import { JsonTreeNode } from './JsonTreeNode'
import type { JsonValue } from './types'

export type { JsonValue } from './types'

export interface JsonTreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'data' | 'onCopy'> {
  data: JsonValue
  expandDepth?: number
  maxDepth?: number
  showSearch?: boolean
  showToolbar?: boolean
  showPath?: boolean
  rootLabel?: string
  onCopy?: (value: string, path: string) => void
}

function pathKey(path: (string | number)[]): string {
  return path.length ? path.map((p) => (typeof p === 'number' ? `[${p}]` : `.${p}`)).join('') : '$'
}

function typeOf(val: JsonValue): 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' {
  if (val === null) return 'null'
  if (Array.isArray(val)) return 'array'
  return typeof val as 'object' | 'string' | 'number' | 'boolean'
}

function formatValue(val: JsonValue): string {
  if (val === null) return 'null'
  if (typeof val === 'string') return JSON.stringify(val)
  return String(val)
}

const typeColor: Record<string, string> = {
  string: 'text-emerald-600 dark:text-emerald-400',
  number: 'text-blue-600 dark:text-blue-400',
  boolean: 'text-amber-600 dark:text-amber-400',
  null: 'text-muted-foreground italic',
  object: 'text-foreground',
  array: 'text-foreground',
}

const keyColor = 'text-violet-600 dark:text-violet-400'

const JsonTreeView = React.forwardRef<HTMLDivElement, JsonTreeViewProps>(function JsonTreeView(props, ref) {
  const {
    data,
    expandDepth = 1,
    maxDepth = 100,
    showSearch = true,
    showToolbar = true,
    showPath = true,
    rootLabel = 'root',
    onCopy,
    className,
    ...rest
  } = props

  const [expanded, setExpanded] = React.useState<Set<string>>(() => new Set())
  const [search, setSearch] = React.useState('')
  const [copiedPath, setCopiedPath] = React.useState<string | null>(null)
  const [hoveredPath, setHoveredPath] = React.useState<string | null>(null)

  const dataRef = React.useRef(data)
  dataRef.current = data
  const expandDepthRef = React.useRef(expandDepth)
  expandDepthRef.current = expandDepth
  const maxDepthRef = React.useRef(maxDepth)
  maxDepthRef.current = maxDepth

  function defaultExpanded(): Set<string> {
    const next = new Set<string>()
    const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
      if (depth >= expandDepthRef.current) return
      if (val !== null && typeof val === 'object') {
        next.add(pathKey(path))
        const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
        for (const [k, v] of entries) {
          walk(v as JsonValue, [...path, k], depth + 1)
        }
      }
    }
    walk(dataRef.current)
    return next
  }

  // Reset expanded state when data or expandDepth changes
  React.useEffect(() => {
    setExpanded(defaultExpanded())
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data, expandDepth])

  function toggle(path: (string | number)[]) {
    const k = pathKey(path)
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(k)) next.delete(k)
      else next.add(k)
      return next
    })
  }

  function isExpanded(path: (string | number)[]): boolean {
    return expanded.has(pathKey(path))
  }

  function expandAll() {
    const next = new Set<string>()
    const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
      if (depth >= maxDepthRef.current) return
      if (val !== null && typeof val === 'object') {
        next.add(pathKey(path))
        const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
        for (const [k, v] of entries) {
          walk(v as JsonValue, [...path, k], depth + 1)
        }
      }
    }
    walk(dataRef.current)
    setExpanded(next)
  }

  function collapseAll() {
    setExpanded(new Set())
  }

  function matchesSearch(val: JsonValue): boolean {
    if (!search) return true
    const term = search.toLowerCase()
    const walk = (v: JsonValue): boolean => {
      if (v === null) return 'null'.includes(term)
      if (typeof v === 'string') return v.toLowerCase().includes(term)
      if (typeof v === 'number' || typeof v === 'boolean') return String(v).includes(term)
      if (Array.isArray(v)) return v.some(walk)
      if (typeof v === 'object')
        return Object.entries(v).some(([k, value]) => k.toLowerCase().includes(term) || walk(value))
      return false
    }
    return walk(val)
  }

  // Auto-expand nodes that contain search matches
  React.useEffect(() => {
    if (!search) {
      setExpanded(defaultExpanded())
      return
    }
    const next = new Set<string>()
    const walk = (val: JsonValue, path: (string | number)[] = [], depth = 0) => {
      if (depth >= maxDepthRef.current) return
      if (val !== null && typeof val === 'object') {
        if (matchesSearch(val)) next.add(pathKey(path))
        const entries = Array.isArray(val) ? val.map((v, i) => [i, v] as const) : Object.entries(val)
        for (const [k, v] of entries) {
          walk(v as JsonValue, [...path, k], depth + 1)
        }
      }
    }
    walk(dataRef.current)
    setExpanded(next)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search])

  async function copyValue(val: JsonValue, path: (string | number)[]) {
    const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2)
    const p = pathKey(path)
    try {
      await navigator.clipboard.writeText(str)
      setCopiedPath(p)
      onCopy?.(str, p)
      setTimeout(() => {
        setCopiedPath((cur) => (cur === p ? null : cur))
      }, 1200)
    } catch {
      // clipboard unavailable
    }
  }

  function onHover(path: string | null) {
    setHoveredPath(path)
  }

  const displayPath = React.useMemo(() => {
    if (!showPath || !hoveredPath) return ''
    if (hoveredPath === '$') return rootLabel
    return hoveredPath
  }, [showPath, hoveredPath, rootLabel])

  const summary = React.useMemo(() => {
    const t = typeOf(data)
    if (t === 'array') return `Array(${(data as JsonValue[]).length})`
    if (t === 'object') return `Object(${Object.keys(data as object).length})`
    return t
  }, [data])

  const searchMatchCount = React.useMemo(() => {
    if (!search) return 0
    let count = 0
    const term = search.toLowerCase()
    const walk = (v: JsonValue) => {
      if (v === null) {
        if ('null'.includes(term)) count++
        return
      }
      if (typeof v === 'string') {
        if (v.toLowerCase().includes(term)) count++
        return
      }
      if (typeof v === 'number' || typeof v === 'boolean') {
        if (String(v).includes(term)) count++
        return
      }
      if (Array.isArray(v)) {
        v.forEach(walk)
        return
      }
      if (typeof v === 'object') {
        Object.entries(v).forEach(([k, val]) => {
          if (k.toLowerCase().includes(term)) count++
          walk(val)
        })
      }
    }
    walk(data)
    return count
  }, [search, data])

  return (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="json-tree-view"
      className={cn('bg-background rounded-lg border font-mono text-sm', className)}
      {...rest}
    >
      {/* Toolbar */}
      {(showToolbar || showSearch) && (
        <div className="border-border flex items-center gap-2 border-b px-3 py-2">
          <div className="flex items-center gap-1.5">
            <Braces className="text-muted-foreground size-4" />
            <span className="text-muted-foreground text-xs">{summary}</span>
          </div>
          <div className="ml-auto flex items-center gap-1">
            {showSearch && (
              <div className="relative">
                <Search className="text-muted-foreground absolute top-1/2 left-2 size-3.5 -translate-y-1/2" />
                <input
                  type="text"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Filter..."
                  aria-label="Filter JSON tree"
                  className="border-input bg-muted/40 focus:border-ring focus:ring-ring/30 h-7 w-32 rounded-md pr-2 pl-7 text-xs transition-[width] outline-none focus:w-44 focus:ring-2"
                />
              </div>
            )}
            {search && searchMatchCount > 0 && (
              <span className="text-muted-foreground text-xs">{searchMatchCount} matches</span>
            )}
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md transition-colors"
              title="Expand all"
              aria-label="Expand all"
              onClick={expandAll}
            >
              <UnfoldVertical className="size-4" />
            </button>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md transition-colors"
              title="Collapse all"
              aria-label="Collapse all"
              onClick={collapseAll}
            >
              <FoldVertical className="size-4" />
            </button>
          </div>
        </div>
      )}

      {/* Path bar */}
      {showPath && displayPath && (
        <div className="border-border bg-muted/30 text-muted-foreground truncate border-b px-3 py-1 text-xs">
          {displayPath}
        </div>
      )}

      {/* Tree */}
      <div className="overflow-auto p-2">
        <JsonTreeNode
          data={data}
          path={[]}
          label={rootLabel}
          isRoot
          search={search}
          maxDepth={maxDepth}
          matchesSearch={matchesSearch}
          isExpanded={isExpanded}
          toggle={toggle}
          typeOf={typeOf}
          formatValue={formatValue}
          typeColor={typeColor}
          keyColor={keyColor}
          copiedPath={copiedPath}
          onCopy={copyValue}
          onHover={onHover}
        />
      </div>
    </div>
  )
})

JsonTreeView.displayName = 'JsonTreeView'

export { JsonTreeView }

```

### `packages/registry-react/components/json-tree-view/JsonTreeNode.tsx`

```tsx
import * as React from 'react'
import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-react'
import type { JsonValue } from './types'

export interface JsonTreeNodeProps {
  data: JsonValue
  path: (string | number)[]
  label: string
  isRoot?: boolean
  search?: string
  maxDepth?: number
  matchesSearch: (val: JsonValue) => boolean
  isExpanded: (path: (string | number)[]) => boolean
  toggle: (path: (string | number)[]) => void
  typeOf: (val: JsonValue) => 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
  formatValue: (val: JsonValue) => string
  typeColor: Record<string, string>
  keyColor: string
  copiedPath?: string | null
  onCopy?: (value: JsonValue, path: (string | number)[]) => void
  onHover?: (path: string | null) => void
}

function pathKey(path: (string | number)[]): string {
  return path.length ? path.map((p) => (typeof p === 'number' ? `[${p}]` : `.${p}`)).join('') : '$'
}

function JsonTreeNode(props: JsonTreeNodeProps): React.ReactElement {
  const {
    data,
    path,
    label,
    isRoot = false,
    search = '',
    maxDepth = 100,
    matchesSearch,
    isExpanded,
    toggle,
    typeOf,
    formatValue,
    typeColor,
    keyColor,
    copiedPath = null,
    onCopy,
    onHover,
  } = props

  const key = pathKey(path)
  const type = typeOf(data)
  const open = isExpanded(path)
  const isContainer = type === 'object' || type === 'array'
  const dimmed = !!search && !matchesSearch(data)

  const entries: [string | number, JsonValue][] = React.useMemo(() => {
    if (Array.isArray(data)) return data.map((v, i) => [i, v] as [number, JsonValue])
    if (data !== null && typeof data === 'object') return Object.entries(data) as [string, JsonValue][]
    return []
  }, [data])

  const count = entries.length
  const indent = isRoot ? 0 : 20

  // Collapsed preview: show first few items inline
  const collapsedPreview = React.useMemo(() => {
    if (open || !isContainer) return ''
    const items = entries.slice(0, 3)
    const parts = items.map(([k, v]) => {
      const vt = typeOf(v)
      let valStr: string
      if (vt === 'string') valStr = `"${String(v).slice(0, 20)}"`
      else if (vt === 'array') valStr = '[…]'
      else if (vt === 'object') valStr = '{…}'
      else valStr = formatValue(v)
      return `${Array.isArray(data) ? '' : `"${k}": `}${valStr}`
    })
    const suffix = count > 3 ? ', …' : ''
    const open2 = type === 'array' ? '[' : '{'
    const close = type === 'array' ? ']' : '}'
    return `${open2}${parts.join(', ')}${suffix}${close}`
  }, [open, isContainer, entries, count, type, typeOf, formatValue, data])

  function handleCopy() {
    onCopy?.(data, path)
  }

  function handleHover() {
    onHover?.(key)
  }

  function handleLeave() {
    onHover?.(null)
  }

  return (
    <div data-dimmed={dimmed ? '' : undefined} className={dimmed ? 'opacity-30' : ''}>
      {/* Container header row (object/array) */}
      {isContainer && (
        <div
          className="group hover:bg-accent/40 -mx-1 flex items-center gap-0.5 rounded px-1 py-0.5 transition-colors"
          style={{ paddingLeft: `${indent}px` }}
        >
          <button
            type="button"
            className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-4 shrink-0 items-center justify-center rounded"
            aria-expanded={open}
            aria-label={open ? 'Collapse' : 'Expand'}
            onClick={() => toggle(path)}
          >
            {open ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
          </button>
          <span className={`${keyColor} select-none`} onMouseEnter={handleHover} onMouseLeave={handleLeave}>
            {isRoot ? label : `"${label}"`}
          </span>
          <span className="text-muted-foreground">:</span>
          {open ? (
            <span className="text-muted-foreground select-none">{type === 'array' ? '[' : '{'}</span>
          ) : (
            <span className="text-muted-foreground select-none">{collapsedPreview}</span>
          )}
          {open && (
            <span className="text-muted-foreground ml-0.5 text-xs">
              {count} {count === 1 ? 'item' : 'items'}
            </span>
          )}
          <button
            type="button"
            className="text-muted-foreground hover:text-foreground ml-auto inline-flex size-5 items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100"
            title="Copy value"
            aria-label="Copy value"
            onClick={(e) => {
              e.stopPropagation()
              handleCopy()
            }}
          >
            {copiedPath === key ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
          </button>
        </div>
      )}

      {/* Container children */}
      {isContainer && open && (
        <>
          {entries.map(([k, v]) => (
            <JsonTreeNode
              key={String(k)}
              data={v}
              path={[...path, k]}
              label={String(k)}
              isRoot={false}
              search={search}
              maxDepth={maxDepth}
              matchesSearch={matchesSearch}
              isExpanded={isExpanded}
              toggle={toggle}
              typeOf={typeOf}
              formatValue={formatValue}
              typeColor={typeColor}
              keyColor={keyColor}
              copiedPath={copiedPath}
              onCopy={onCopy}
              onHover={onHover}
            />
          ))}
          <div className="text-muted-foreground py-0.5 select-none" style={{ paddingLeft: `${indent}px` }}>
            {type === 'array' ? ']' : '}'}
          </div>
        </>
      )}

      {/* Primitive leaf */}
      {!isContainer && (
        <div
          className="group hover:bg-accent/40 -mx-1 flex items-center gap-0.5 rounded px-1 py-0.5 transition-colors"
          style={{ paddingLeft: `${indent}px` }}
        >
          <span className="inline-flex size-4 shrink-0" />
          {isRoot ? (
            <span className="text-muted-foreground select-none">{label}</span>
          ) : (
            <span className={`${keyColor} select-none`}>"{label}"</span>
          )}
          <span className="text-muted-foreground">:</span>
          <span
            className={`${typeColor[type] ?? 'text-foreground'} cursor-pointer`}
            onClick={handleCopy}
            onMouseEnter={handleHover}
            onMouseLeave={handleLeave}
          >
            {formatValue(data)}
          </span>
          <button
            type="button"
            className="text-muted-foreground hover:text-foreground ml-auto inline-flex size-5 items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100"
            title="Copy value"
            aria-label="Copy value"
            onClick={(e) => {
              e.stopPropagation()
              handleCopy()
            }}
          >
            {copiedPath === key ? <Check className="size-3 text-emerald-500" /> : <Copy className="size-3" />}
          </button>
        </div>
      )}
    </div>
  )
}

export { JsonTreeNode }

```

### `packages/registry-react/components/json-tree-view/types.ts`

```ts
export type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }

```

### `packages/registry-react/components/json-tree-view/index.ts`

```ts
export { JsonTreeView, type JsonTreeViewProps } from './JsonTreeView'
export { JsonTreeNode, type JsonTreeNodeProps } from './JsonTreeNode'
export type { JsonValue } from './types'

```

## kanban-board

- type: `registry:block`
- description: Full kanban surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 14 React files (KanbanBoard + 6 kanban-* views + 7 small badges/lists). Bind with columns/onColumnsChange; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).
- npm deps: `lucide-react`
- registry deps: `use-kanban`, `kanban-data`, `page`, `card`, `button`, `badge`, `input`, `label`, `select`, `sheet`, `dialog`, `popover`, `calendar`, `dropdown-menu`, `tooltip`, `avatar`, `toggle-group`, `rich-text-editor`

### `packages/registry-react/blocks/kanban-board/KanbanBoard.tsx`

```tsx
'use client'

import * as React from 'react'
import { Plus } from 'lucide-react'
import { type KanbanColumn as KanbanColumnType, type KanbanTask, findTaskById } from '@/lib/use-kanban'
import { PageHeader, PageHeaderHeading } from '@/components/ui/page'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { KanbanToolbar } from './KanbanToolbar'
import { KanbanColumn, type FilteredColumn } from './KanbanColumn'
import { KanbanListView } from './KanbanListView'
import { KanbanTaskSheet } from './KanbanTaskSheet'
import { KanbanAddTaskDialog } from './KanbanAddTaskDialog'

export interface KanbanBoardProps {
  columns: KanbanColumnType[]
  onColumnsChange?: (value: KanbanColumnType[]) => void
  title?: string | null
  description?: string | null
  defaultColumnId?: string
  hideHeader?: boolean
  hideToolbar?: boolean
  lockParentScroll?: boolean
}

export function KanbanBoard({
  columns,
  onColumnsChange,
  title = 'Kanban Board',
  description = 'Drag tasks across columns to update their status.',
  defaultColumnId = 'backlog',
  hideHeader = false,
  hideToolbar = false,
  lockParentScroll = true,
}: KanbanBoardProps) {
  const kanbanEl = React.useRef<HTMLDivElement | null>(null)

  React.useEffect(() => {
    if (!lockParentScroll) return
    const parentMain = kanbanEl.current?.closest('main[data-slot="sidebar-inset"]') as HTMLElement | null
    if (parentMain) parentMain.style.overflow = 'hidden'
    document.documentElement.style.overflow = 'hidden'
    return () => {
      if (parentMain) parentMain.style.overflow = ''
      document.documentElement.style.overflow = ''
    }
  }, [lockParentScroll])

  const [searchQuery, setSearchQuery] = React.useState('')
  const [selectedPriority, setSelectedPriority] = React.useState<string | null>(null)
  const [selectedAssignee, setSelectedAssignee] = React.useState<string | null>(null)
  const [viewMode, setViewMode] = React.useState<'board' | 'list'>('board')
  const [collapsedColumns, setCollapsedColumns] = React.useState<Set<string>>(new Set())

  const [detailOpen, setDetailOpen] = React.useState(false)
  const [detailTask, setDetailTask] = React.useState<KanbanTask | null>(null)

  const [addTaskOpen, setAddTaskOpen] = React.useState(false)
  const [addTaskColumnId, setAddTaskColumnId] = React.useState(defaultColumnId)

  const draggedTaskRef = React.useRef<string | null>(null)
  const dragOverColumnRef = React.useRef<string | null>(null)
  const dropTargetIndexRef = React.useRef<number>(-1)
  const lastDragEndRef = React.useRef(0)

  const [draggedTask, setDraggedTask] = React.useState<string | null>(null)
  const [dragOverColumn, setDragOverColumn] = React.useState<string | null>(null)
  const [dropTargetIndex, setDropTargetIndex] = React.useState<number>(-1)

  // Mutating helper: the consumer owns `columns`, so we clone, mutate the
  // clone, and emit it back via onColumnsChange — mirroring the Vue v-model.
  function commitColumns(mutator: (cols: KanbanColumnType[]) => void) {
    const next = columns.map((c) => ({ ...c, tasks: [...c.tasks] }))
    mutator(next)
    onColumnsChange?.(next)
  }

  const filteredColumns = React.useMemo<FilteredColumn[]>(() => {
    return columns.map((col) => ({
      ...col,
      tasks: col.tasks.filter((task) => {
        const q = searchQuery.toLowerCase()
        const matchesSearch = !q || task.title.toLowerCase().includes(q) || task.id.toLowerCase().includes(q)
        const matchesPriority = !selectedPriority || task.priority === selectedPriority
        const matchesAssignee = !selectedAssignee || task.assignee.name === selectedAssignee
        return matchesSearch && matchesPriority && matchesAssignee
      }),
    }))
  }, [columns, searchQuery, selectedPriority, selectedAssignee])

  const totalTasks = React.useMemo(() => columns.reduce((sum, col) => sum + col.tasks.length, 0), [columns])

  function toggleCollapse(columnId: string) {
    setCollapsedColumns((prev) => {
      const next = new Set(prev)
      if (next.has(columnId)) next.delete(columnId)
      else next.add(columnId)
      return next
    })
  }

  function addComment(task: KanbanTask, text: string) {
    commitColumns((cols) => {
      const target = findTaskById(cols, task.id)
      if (target) {
        target.commentItems = [
          ...target.commentItems,
          {
            id: `c${Date.now()}`,
            author: 'Admin User',
            authorColor: 'bg-chart-1/15 text-chart-1',
            text,
            time: 'Just now',
          },
        ]
      }
    })
  }

  function moveTask(task: KanbanTask, targetColumnId: string) {
    commitColumns((cols) => {
      const sourceCol = cols.find((c) => c.tasks.some((t) => t.id === task.id))
      const targetCol = cols.find((c) => c.id === targetColumnId)
      if (!sourceCol || !targetCol || sourceCol.id === targetColumnId) return
      const taskIndex = sourceCol.tasks.findIndex((t) => t.id === task.id)
      if (taskIndex === -1) return
      const removed = sourceCol.tasks.splice(taskIndex, 1)
      if (removed[0]) targetCol.tasks.push(removed[0])
    })
  }

  function openTaskDetail(task: KanbanTask) {
    setDetailTask(task)
    setDetailOpen(true)
  }

  function onDragStart(event: React.DragEvent, taskId: string) {
    draggedTaskRef.current = taskId
    setDraggedTask(taskId)
    if (event.dataTransfer) {
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('text/plain', taskId)
    }
  }

  function resetDrag() {
    draggedTaskRef.current = null
    dragOverColumnRef.current = null
    dropTargetIndexRef.current = -1
    setDraggedTask(null)
    setDragOverColumn(null)
    setDropTargetIndex(-1)
    lastDragEndRef.current = Date.now()
  }

  function onDrop() {
    const dragged = draggedTaskRef.current
    const overColumn = dragOverColumnRef.current
    if (!dragged || !overColumn) {
      resetDrag()
      return
    }

    commitColumns((cols) => {
      let sourceColIdx = -1
      let taskIdx = -1
      for (let c = 0; c < cols.length; c++) {
        const col = cols[c]
        if (!col) continue
        const tIdx = col.tasks.findIndex((t) => t.id === dragged)
        if (tIdx !== -1) {
          sourceColIdx = c
          taskIdx = tIdx
          break
        }
      }
      const targetColIdx = cols.findIndex((c) => c.id === overColumn)
      if (sourceColIdx === -1 || targetColIdx === -1) return

      const sourceCol = cols[sourceColIdx]
      const targetCol = cols[targetColIdx]
      if (!sourceCol || !targetCol) return

      const [task] = sourceCol.tasks.splice(taskIdx, 1)
      if (!task) return

      let insertAt = dropTargetIndexRef.current
      if (insertAt < 0) insertAt = targetCol.tasks.length
      if (sourceColIdx === targetColIdx && taskIdx < insertAt) insertAt--

      targetCol.tasks.splice(insertAt, 0, task)
    })
    resetDrag()
  }

  function onCardClick(task: KanbanTask) {
    if (Date.now() - lastDragEndRef.current < 200) return
    openTaskDetail(task)
  }

  function onCardDragOver(event: React.DragEvent, columnId: string, taskIndex: number) {
    dragOverColumnRef.current = columnId
    setDragOverColumn(columnId)
    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
    const midY = rect.top + rect.height / 2
    const idx = event.clientY < midY ? taskIndex : taskIndex + 1
    dropTargetIndexRef.current = idx
    setDropTargetIndex(idx)
  }

  function onLaneDragOver(_event: React.DragEvent, columnId: string, taskCount: number) {
    dragOverColumnRef.current = columnId
    setDragOverColumn(columnId)
    dropTargetIndexRef.current = taskCount
    setDropTargetIndex(taskCount)
  }

  function openAddTask(columnId: string) {
    setAddTaskColumnId(columnId)
    setAddTaskOpen(true)
  }

  function onCreateTask(columnId: string, tasks: KanbanTask[]) {
    commitColumns((cols) => {
      const col = cols.find((c) => c.id === columnId)
      if (col) col.tasks.push(...tasks)
    })
  }

  return (
    <div
      ref={kanbanEl}
      data-slot="kanban-board"
      className="kanban-page flex h-[calc(100dvh-3.5rem-3rem)] flex-col overflow-hidden lg:h-[calc(100dvh-3.5rem-3rem)]"
    >
      {!hideHeader && (
        <div className="mb-3 shrink-0">
          <PageHeader>
            <div className="flex items-start justify-between gap-4">
              <PageHeaderHeading title={title ?? ''} description={description ?? ''} />
              <div className="flex shrink-0 items-center gap-2">
                <Badge variant="secondary" className="font-mono text-xs tabular-nums">
                  {totalTasks} tasks
                </Badge>
                <Button size="sm" onClick={() => openAddTask(defaultColumnId)}>
                  <Plus className="size-4" />
                  Add Task
                </Button>
              </div>
            </div>
          </PageHeader>
        </div>
      )}

      {!hideToolbar && (
        <KanbanToolbar
          searchQuery={searchQuery}
          selectedPriority={selectedPriority}
          selectedAssignee={selectedAssignee}
          viewMode={viewMode}
          onSearchQueryChange={setSearchQuery}
          onSelectedPriorityChange={setSelectedPriority}
          onSelectedAssigneeChange={setSelectedAssignee}
          onViewModeChange={setViewMode}
        />
      )}

      {viewMode === 'board' ? (
        <div className="kanban-board relative flex min-h-0 flex-1 items-start gap-3 overflow-auto pb-3">
          {filteredColumns.map((column) => (
            <KanbanColumn
              key={column.id}
              column={column}
              collapsed={collapsedColumns.has(column.id)}
              draggedTask={draggedTask}
              dragOverColumn={dragOverColumn}
              dropTargetIndex={dropTargetIndex}
              allColumns={columns}
              onToggleCollapse={toggleCollapse}
              onAddTask={openAddTask}
              onCardClick={onCardClick}
              onCardQuickView={openTaskDetail}
              onDragStart={onDragStart}
              onDragEnd={resetDrag}
              onCardDragOver={onCardDragOver}
              onLaneDragOver={onLaneDragOver}
              onDrop={onDrop}
            />
          ))}
        </div>
      ) : (
        <KanbanListView
          columns={filteredColumns}
          allColumns={columns}
          onTaskClick={openTaskDetail}
          onMoveTask={moveTask}
        />
      )}

      <KanbanTaskSheet
        open={detailOpen}
        task={detailTask}
        columns={columns}
        onOpenChange={setDetailOpen}
        onMoveTask={moveTask}
        onAddComment={addComment}
      />

      <KanbanAddTaskDialog
        open={addTaskOpen}
        columns={columns}
        initialColumnId={addTaskColumnId}
        onOpenChange={setAddTaskOpen}
        onCreate={onCreateTask}
      />

      <style>{`
        .kanban-board {
          scrollbar-width: thin;
          scrollbar-color: hsl(var(--border)) transparent;
        }
        .kanban-board::-webkit-scrollbar {
          height: 6px;
          width: 6px;
        }
        .kanban-board::-webkit-scrollbar-thumb {
          background-color: hsl(var(--border));
          border-radius: 3px;
        }
        .kanban-board::-webkit-scrollbar-corner {
          background: transparent;
        }
        .kanban-card {
          animation: card-in 0.25s ease-out both;
        }
        @keyframes card-in {
          from {
            opacity: 0;
            transform: translateY(6px);
          }
        }
        .kanban-card:hover .kanban-accent {
          box-shadow: 0 0 3px currentColor;
        }
        .kanban-lane {
          min-height: 60px;
        }
        .kanban-list {
          scrollbar-width: thin;
          scrollbar-color: hsl(var(--border)) transparent;
        }
        .kanban-list::-webkit-scrollbar {
          height: 6px;
          width: 6px;
        }
        .kanban-list::-webkit-scrollbar-thumb {
          background-color: hsl(var(--border));
          border-radius: 3px;
        }
      `}</style>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanCard.tsx`

```tsx
'use client'

import * as React from 'react'
import { MoreHorizontal, MessageSquare, Paperclip, ExternalLink } from 'lucide-react'
import { cn } from '@/lib/utils'
import { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, getTaskColumn } from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { TagBadge } from './TagBadge'
import { SubtaskProgress } from './SubtaskProgress'
import { DueDateBadge } from './DueDateBadge'
import { UserAvatar } from './UserAvatar'

export function KanbanCard({
  task,
  isDone,
  columns,
  onClick,
  onQuickView,
}: {
  task: KanbanTask
  isDone: boolean
  columns: KanbanColumnType[]
  onClick?: (task: KanbanTask) => void
  onQuickView?: (task: KanbanTask) => void
}) {
  const subtasksDone = React.useMemo(() => {
    if (!columns || !task.subtaskIds.length) return 0
    return task.subtaskIds.filter((id) => getTaskColumn(columns, id)?.id === 'done').length
  }, [columns, task.subtaskIds])

  return (
    <div
      className={cn(
        'kanban-card group/card bg-card relative cursor-grab rounded-lg border p-3 transition-all duration-150',
        'hover:border-border hover:shadow-md active:scale-[0.97] active:cursor-grabbing',
        isDone ? 'opacity-75 hover:opacity-100' : '',
      )}
      onClick={() => onClick?.(task)}
    >
      <div
        className={cn(
          'kanban-accent absolute top-3 bottom-3 left-0 w-[1.5px] rounded-full transition-all duration-150',
          priorityConfig[task.priority].bg,
          task.priority === 'low' ? 'opacity-40' : task.priority === 'medium' ? 'opacity-60' : 'opacity-90',
        )}
      />

      <div className="mb-1 flex items-center justify-between pl-2">
        <span className="text-muted-foreground/70 font-mono text-[11px]">{task.id}</span>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="text-muted-foreground -mr-1 size-6 opacity-0 transition-opacity group-hover/card:opacity-100"
              onClick={(e) => e.stopPropagation()}
            >
              <MoreHorizontal className="size-3.5" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-36">
            <DropdownMenuItem
              onClick={(e) => {
                e.stopPropagation()
                onQuickView?.(task)
              }}
            >
              Quick view
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <a href={`/dashboard/kanban/${task.id}`} className="gap-2">
                <ExternalLink className="size-3.5" />
                Open detail
              </a>
            </DropdownMenuItem>
            <DropdownMenuItem>Edit</DropdownMenuItem>
            <DropdownMenuItem>Move to...</DropdownMenuItem>
            <DropdownMenuItem>Assign to...</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <p
        className={cn(
          'mb-2 pl-2 text-[13px] leading-snug font-medium',
          isDone ? 'decoration-muted-foreground/40 line-through' : '',
        )}
      >
        {task.title}
      </p>

      {task.tags.length > 0 && (
        <div className="mb-2 flex flex-wrap gap-1 pl-2">
          {task.tags.map((tag) => (
            <TagBadge key={tag.label} label={tag.label} color={tag.color} />
          ))}
        </div>
      )}

      {task.subtaskIds.length > 0 && (
        <div className="mb-2 pl-2">
          <SubtaskProgress done={subtasksDone} total={task.subtaskIds.length} />
        </div>
      )}

      <div className="flex items-center gap-2 pl-2">
        {task.dueDate && <DueDateBadge dueDate={task.dueDate} variant="chip" />}

        {task.commentItems.length > 0 && (
          <div className="text-muted-foreground/70 flex items-center gap-1 text-[11px]">
            <MessageSquare className="size-3" />
            {task.commentItems.length}
          </div>
        )}

        {task.fileItems.length > 0 && (
          <div className="text-muted-foreground/70 flex items-center gap-1 text-[11px]">
            <Paperclip className="size-3" />
            {task.fileItems.length}
          </div>
        )}

        <div className="ml-auto">
          <TooltipProvider delayDuration={200}>
            <Tooltip>
              <TooltipTrigger asChild>
                <span>
                  <UserAvatar name={task.assignee.name} color={task.assignee.color} size="xs" />
                </span>
              </TooltipTrigger>
              <TooltipContent side="bottom" className="text-xs">
                {task.assignee.name}
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>
      </div>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanColumn.tsx`

```tsx
'use client'

import * as React from 'react'
import { Plus, MoreHorizontal, ChevronsLeft, ChevronsRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import { type KanbanColumn as KanbanColumnType, type KanbanTask } from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { KanbanCard } from './KanbanCard'

export interface FilteredColumn {
  id: string
  title: string
  color: string
  dotColor: string
  tasks: KanbanTask[]
}

export function KanbanColumn({
  column,
  collapsed,
  draggedTask,
  dragOverColumn,
  dropTargetIndex,
  allColumns,
  onToggleCollapse,
  onAddTask,
  onCardClick,
  onCardQuickView,
  onDragStart,
  onDragEnd,
  onCardDragOver,
  onLaneDragOver,
  onDrop,
}: {
  column: FilteredColumn
  collapsed: boolean
  draggedTask: string | null
  dragOverColumn: string | null
  dropTargetIndex: number
  allColumns: KanbanColumnType[]
  onToggleCollapse: (columnId: string) => void
  onAddTask: (columnId: string) => void
  onCardClick: (task: KanbanTask) => void
  onCardQuickView: (task: KanbanTask) => void
  onDragStart: (event: React.DragEvent, taskId: string) => void
  onDragEnd: () => void
  onCardDragOver: (event: React.DragEvent, columnId: string, taskIndex: number) => void
  onLaneDragOver: (event: React.DragEvent, columnId: string, taskCount: number) => void
  onDrop: () => void
}) {
  return (
    <div
      className={cn('group/col flex shrink-0 flex-col transition-all duration-200', collapsed ? 'w-12' : 'w-[300px]')}
      onDragOver={(e) => e.preventDefault()}
      onDrop={() => onDrop()}
    >
      {collapsed ? (
        <button
          className="bg-muted/40 hover:bg-muted/60 flex h-full flex-col items-center gap-2 rounded-xl px-1 pt-3 pb-4 transition-colors"
          onClick={() => onToggleCollapse(column.id)}
        >
          <span className={cn('size-2 shrink-0 rounded-full', column.dotColor)} />
          <span
            className={cn(
              'text-[11px] font-semibold tracking-tight',
              column.color,
              'rotate-180 [writing-mode:vertical-lr]',
            )}
          >
            {column.title}
          </span>
          <Badge variant="secondary" className="mt-1 h-5 min-w-5 justify-center rounded-md px-1 text-[10px]">
            {column.tasks.length}
          </Badge>
          <ChevronsRight className="text-muted-foreground mt-auto size-3.5" />
        </button>
      ) : (
        <>
          <div className="bg-background/95 sticky top-0 z-10 mb-2 flex items-center gap-2 px-2 py-1.5 backdrop-blur-sm">
            <button
              className="text-muted-foreground/50 hover:text-muted-foreground shrink-0 transition-colors"
              title="Collapse column"
              onClick={() => onToggleCollapse(column.id)}
            >
              <ChevronsLeft className="size-3.5" />
            </button>
            <span className={cn('size-2 shrink-0 rounded-full', column.dotColor)} />
            <h3 className={cn('text-[13px] font-semibold tracking-tight', column.color)}>{column.title}</h3>
            <span className="text-muted-foreground bg-muted rounded-md px-1.5 py-0.5 text-[11px] font-medium tabular-nums">
              {column.tasks.length}
            </span>
            <div className="ml-auto flex items-center">
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground size-6 opacity-0 transition-opacity group-hover/col:opacity-100"
              >
                <MoreHorizontal className="size-3.5" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="text-muted-foreground size-6"
                onClick={() => onAddTask(column.id)}
              >
                <Plus className="size-3.5" />
              </Button>
            </div>
          </div>

          <div
            className={cn(
              'kanban-lane flex flex-col rounded-xl p-2 transition-all duration-200',
              dragOverColumn === column.id && draggedTask
                ? 'bg-primary/[0.06] ring-primary/25 ring-1 ring-inset'
                : 'bg-muted/40',
            )}
            onDragOver={(e) => {
              e.preventDefault()
              onLaneDragOver(e, column.id, column.tasks.length)
            }}
          >
            {column.tasks.map((task, taskIndex) => (
              <React.Fragment key={task.id}>
                <div
                  className={cn(
                    'drop-indicator mx-1 transition-all duration-150',
                    dragOverColumn === column.id &&
                      dropTargetIndex === taskIndex &&
                      draggedTask &&
                      draggedTask !== task.id
                      ? 'bg-primary h-0.5 rounded-full'
                      : 'h-0',
                  )}
                />
                <div
                  data-task-id={task.id}
                  draggable="true"
                  className={cn(
                    'mt-2 first:mt-0',
                    draggedTask === task.id ? 'scale-95 rotate-1 opacity-30' : 'opacity-100',
                  )}
                  onDragStart={(e) => onDragStart(e, task.id)}
                  onDragEnd={() => onDragEnd()}
                  onDragOver={(e) => {
                    e.stopPropagation()
                    e.preventDefault()
                    onCardDragOver(e, column.id, taskIndex)
                  }}
                >
                  <KanbanCard
                    task={task}
                    isDone={column.id === 'done'}
                    columns={allColumns}
                    onClick={onCardClick}
                    onQuickView={onCardQuickView}
                  />
                </div>
              </React.Fragment>
            ))}

            {column.tasks.length > 0 && (
              <div
                className={cn(
                  'drop-indicator mx-1 transition-all duration-150',
                  dragOverColumn === column.id && dropTargetIndex === column.tasks.length && draggedTask
                    ? 'bg-primary mt-2 h-0.5 rounded-full'
                    : 'h-0',
                )}
              />
            )}

            {column.tasks.length === 0 && (
              <button
                className="text-muted-foreground/50 hover:text-muted-foreground hover:border-muted-foreground/30 flex flex-1 flex-col items-center justify-center rounded-lg border border-dashed py-10 transition-colors"
                onClick={() => onAddTask(column.id)}
              >
                <Plus className="mb-1 size-4" />
                <p className="text-xs">No tasks</p>
              </button>
            )}
          </div>

          <button
            className="text-muted-foreground hover:text-foreground hover:bg-muted/60 mt-2 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed py-2 text-xs transition-colors"
            onClick={() => onAddTask(column.id)}
          >
            <Plus className="size-3.5" />
            Add task
          </button>
        </>
      )}
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanListView.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronDown, ChevronRight, ExternalLink, MessageSquare, Paperclip, ArrowUpDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import { type KanbanColumn as KanbanColumnType, type KanbanTask, getTaskColumn } from '@/lib/use-kanban'
import { Badge } from '@/components/ui/badge'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { type FilteredColumn } from './KanbanColumn'
import { TagBadge } from './TagBadge'
import { SubtaskProgress } from './SubtaskProgress'
import { PriorityBadge } from './PriorityBadge'
import { DueDateBadge } from './DueDateBadge'
import { UserAvatar } from './UserAvatar'

type SortField = 'id' | 'title' | 'priority' | 'assignee' | 'dueDate' | 'status'
type SortDir = 'asc' | 'desc'

interface FlatTask {
  task: KanbanTask
  columnId: string
  columnTitle: string
  dotColor: string
}

const priorityOrder: Record<string, number> = { urgent: 0, high: 1, medium: 2, low: 3 }

export function KanbanListView({
  columns,
  allColumns,
  onTaskClick,
  onMoveTask,
}: {
  columns: FilteredColumn[]
  allColumns: KanbanColumnType[]
  onTaskClick: (task: KanbanTask) => void
  onMoveTask: (task: KanbanTask, targetColumnId: string) => void
}) {
  const [sortField, setSortField] = React.useState<SortField>('status')
  const [sortDir, setSortDir] = React.useState<SortDir>('asc')
  const [collapsedGroups, setCollapsedGroups] = React.useState<Set<string>>(new Set())

  function toggleSort(field: SortField) {
    if (sortField === field) {
      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'))
    } else {
      setSortField(field)
      setSortDir('asc')
    }
  }

  function toggleGroup(columnId: string) {
    setCollapsedGroups((prev) => {
      const next = new Set(prev)
      if (next.has(columnId)) next.delete(columnId)
      else next.add(columnId)
      return next
    })
  }

  const flatTasks = React.useMemo<FlatTask[]>(() => {
    const items: FlatTask[] = []
    for (const col of columns) {
      for (const task of col.tasks) {
        items.push({ task, columnId: col.id, columnTitle: col.title, dotColor: col.dotColor })
      }
    }
    return [...items].sort((a, b) => {
      let cmp = 0
      switch (sortField) {
        case 'id': {
          const numA = parseInt(a.task.id.replace(/^[A-Z]+-/, ''), 10)
          const numB = parseInt(b.task.id.replace(/^[A-Z]+-/, ''), 10)
          cmp = numA - numB
          break
        }
        case 'title':
          cmp = a.task.title.localeCompare(b.task.title)
          break
        case 'priority':
          cmp = (priorityOrder[a.task.priority] ?? 99) - (priorityOrder[b.task.priority] ?? 99)
          break
        case 'assignee':
          cmp = a.task.assignee.name.localeCompare(b.task.assignee.name)
          break
        case 'dueDate':
          cmp = (a.task.dueDate ?? '9999').localeCompare(b.task.dueDate ?? '9999')
          break
        case 'status': {
          const colOrder = allColumns.map((c) => c.id)
          cmp = colOrder.indexOf(a.columnId) - colOrder.indexOf(b.columnId)
          break
        }
      }
      return sortDir === 'desc' ? -cmp : cmp
    })
  }, [columns, allColumns, sortField, sortDir])

  const groupedTasks = React.useMemo(() => {
    const groups: { column: KanbanColumnType; tasks: FlatTask[] }[] = []
    for (const col of allColumns) {
      const tasks = flatTasks.filter((t) => t.columnId === col.id)
      groups.push({ column: col, tasks })
    }
    return groups
  }, [allColumns, flatTasks])

  function subtasksDone(task: KanbanTask): number {
    if (!task.subtaskIds.length) return 0
    return task.subtaskIds.filter((id) => getTaskColumn(allColumns, id)?.id === 'done').length
  }

  const headerCols: { field: SortField; label: string }[] = [
    { field: 'id', label: 'ID' },
    { field: 'title', label: 'Task' },
    { field: 'status', label: 'Status' },
    { field: 'priority', label: 'Priority' },
    { field: 'assignee', label: 'Assignee' },
    { field: 'dueDate', label: 'Due' },
  ]

  return (
    <div className="kanban-list flex min-h-0 flex-1 flex-col overflow-auto pb-3">
      <div className="bg-muted/50 sticky top-0 z-10 grid grid-cols-[60px_1fr_100px_110px_130px_100px_80px] items-center gap-2 rounded-t-lg border px-3 py-2 text-[11px] font-semibold tracking-wider uppercase">
        {headerCols.map((h) => (
          <button key={h.field} className="flex items-center gap-1 text-left" onClick={() => toggleSort(h.field)}>
            {h.label}
            <ArrowUpDown
              className={cn('size-3', sortField === h.field ? 'text-foreground' : 'text-muted-foreground/50')}
            />
          </button>
        ))}
        <span className="text-center">Info</span>
      </div>

      {groupedTasks.map((group) => (
        <React.Fragment key={group.column.id}>
          <button
            className="bg-muted/30 hover:bg-muted/50 flex items-center gap-2 border-x border-b px-3 py-1.5 text-left transition-colors"
            onClick={() => toggleGroup(group.column.id)}
          >
            {collapsedGroups.has(group.column.id) ? (
              <ChevronRight className="text-muted-foreground size-3.5" />
            ) : (
              <ChevronDown className="text-muted-foreground size-3.5" />
            )}
            <span className={cn('size-2 rounded-full', group.column.dotColor)} />
            <span className="text-sm font-medium">{group.column.title}</span>
            <Badge variant="secondary" className="ml-1 h-4 px-1.5 text-[10px] tabular-nums">
              {group.tasks.length}
            </Badge>
          </button>

          {!collapsedGroups.has(group.column.id) &&
            group.tasks.map((item) => (
              <div
                key={item.task.id}
                className="hover:bg-muted/30 grid cursor-pointer grid-cols-[60px_1fr_100px_110px_130px_100px_80px] items-center gap-2 border-x border-b px-3 py-2 transition-colors"
                onClick={() => onTaskClick(item.task)}
              >
                <span className="text-muted-foreground font-mono text-[11px]">{item.task.id}</span>

                <div className="min-w-0">
                  <div className="flex items-center gap-2">
                    <span
                      className={cn(
                        'truncate text-[13px] font-medium',
                        item.columnId === 'done' ? 'text-muted-foreground line-through' : '',
                      )}
                    >
                      {item.task.title}
                    </span>
                    <a
                      href={`/dashboard/kanban/${item.task.id}`}
                      className="text-muted-foreground hover:text-foreground shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <ExternalLink className="size-3" />
                    </a>
                  </div>
                  {(item.task.tags.length > 0 || item.task.subtaskIds.length > 0) && (
                    <div className="mt-0.5 flex items-center gap-1.5">
                      {item.task.tags.map((tag) => (
                        <TagBadge
                          key={tag.label}
                          label={tag.label}
                          color={tag.color}
                          className="!px-1.5 !py-0 !text-[9px]"
                        />
                      ))}
                      {item.task.subtaskIds.length > 0 && (
                        <SubtaskProgress
                          done={subtasksDone(item.task)}
                          total={item.task.subtaskIds.length}
                          className="ml-1"
                        />
                      )}
                    </div>
                  )}
                </div>

                <div>
                  <Select
                    value={item.columnId}
                    onValueChange={(val) => onMoveTask(item.task, String(val))}
                  >
                    <SelectTrigger
                      className="hover:bg-muted h-6 w-auto gap-1 rounded-md border-none bg-transparent px-1.5 text-[11px] font-medium shadow-none"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <span className="flex items-center gap-1.5">
                        <span className={cn('size-1.5 rounded-full', item.dotColor)} />
                        <SelectValue />
                      </span>
                    </SelectTrigger>
                    <SelectContent>
                      {allColumns.map((col) => (
                        <SelectItem key={col.id} value={col.id}>
                          <span className="flex items-center gap-1.5">
                            <span className={cn('size-1.5 rounded-full', col.dotColor)} />
                            {col.title}
                          </span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <PriorityBadge priority={item.task.priority} />

                <div className="flex items-center gap-2">
                  <UserAvatar name={item.task.assignee.name} color={item.task.assignee.color} size="xs" />
                  <span className="truncate text-[12px]">{item.task.assignee.name}</span>
                </div>

                <div>
                  {item.task.dueDate ? (
                    <DueDateBadge dueDate={item.task.dueDate} variant="chip" />
                  ) : (
                    <span className="text-muted-foreground/50 text-[11px]">—</span>
                  )}
                </div>

                <div className="flex items-center justify-center gap-2">
                  <TooltipProvider delayDuration={200}>
                    {item.task.commentItems.length > 0 && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <span className="text-muted-foreground/70 flex items-center gap-0.5 text-[11px]">
                            <MessageSquare className="size-3" />
                            {item.task.commentItems.length}
                          </span>
                        </TooltipTrigger>
                        <TooltipContent className="text-xs">{item.task.commentItems.length} comments</TooltipContent>
                      </Tooltip>
                    )}
                    {item.task.fileItems.length > 0 && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <span className="text-muted-foreground/70 flex items-center gap-0.5 text-[11px]">
                            <Paperclip className="size-3" />
                            {item.task.fileItems.length}
                          </span>
                        </TooltipTrigger>
                        <TooltipContent className="text-xs">{item.task.fileItems.length} files</TooltipContent>
                      </Tooltip>
                    )}
                  </TooltipProvider>
                </div>
              </div>
            ))}
        </React.Fragment>
      ))}

      {flatTasks.length === 0 && (
        <div className="text-muted-foreground flex flex-1 items-center justify-center rounded-b-lg border-x border-b py-12 text-sm">
          No tasks match your filters.
        </div>
      )}
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanTaskSheet.tsx`

```tsx
'use client'

import { Clock, ExternalLink, Download } from 'lucide-react'
import { cn } from '@/lib/utils'
import { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, fileIconMap } from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Sheet, SheetContent, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@/components/ui/sheet'
import { TagBadge } from './TagBadge'
import { PriorityBadge } from './PriorityBadge'
import { DueDateBadge } from './DueDateBadge'
import { UserAvatar } from './UserAvatar'
import { SubtaskList } from './SubtaskList'
import { CommentList } from './CommentList'

export function KanbanTaskSheet({
  open,
  task,
  columns,
  onOpenChange,
  onMoveTask,
  onAddComment,
}: {
  open: boolean
  task: KanbanTask | null
  columns: KanbanColumnType[]
  onOpenChange: (value: boolean) => void
  onMoveTask: (task: KanbanTask, columnId: string) => void
  onAddComment: (task: KanbanTask, text: string) => void
}) {
  const columnIdForTask = task
    ? (columns.find((c) => c.tasks.some((t) => t.id === task.id))?.id ?? '')
    : ''

  return (
    <Sheet open={open} onOpenChange={onOpenChange}>
      <SheetContent className="flex flex-col gap-0 overflow-hidden p-0 sm:max-w-[420px]">
        {task && (
          <>
            <div className={cn('h-1 w-full shrink-0', priorityConfig[task.priority]?.bg)} />

            <div className="shrink-0 px-5 pt-4 pb-3">
              <div className="mb-3 flex items-center gap-2">
                <span className="text-muted-foreground font-mono text-[11px] tracking-tight">{task.id}</span>
                <span className="text-muted-foreground/30">·</span>
                <Select value={columnIdForTask} onValueChange={(val) => onMoveTask(task, String(val))}>
                  <SelectTrigger className="hover:bg-secondary h-5 w-auto gap-1 rounded-md border-none bg-transparent px-1.5 text-[11px] font-medium shadow-none">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {columns.map((col) => (
                      <SelectItem key={col.id} value={col.id}>
                        <span className="flex items-center gap-1.5">
                          <span className={cn('size-1.5 rounded-full', col.dotColor)} />
                          {col.title}
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <PriorityBadge priority={task.priority} iconSize="size-3" className="ml-auto" />
              </div>

              <SheetTitle className="text-[15px] leading-snug font-semibold tracking-tight">{task.title}</SheetTitle>
              <SheetDescription className="sr-only">Task details</SheetDescription>
              {task.description ? (
                <div
                  className="text-muted-foreground rich-text-content prose prose-sm dark:prose-invert mt-1.5 max-w-none text-[13px] leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: task.description }}
                />
              ) : (
                <p className="text-muted-foreground mt-1.5 text-[13px] leading-relaxed">No description provided.</p>
              )}

              <div className="mt-3 flex flex-wrap gap-1.5">
                {task.tags.length ? (
                  task.tags.map((tag) => <TagBadge key={tag.label} label={tag.label} color={tag.color} />)
                ) : (
                  <span className="text-muted-foreground text-[11px]">No tags</span>
                )}
              </div>
            </div>

            <div className="bg-border mx-5 h-px" />

            <div className="flex-1 overflow-y-auto">
              <div className="space-y-4 px-5 py-3">
                <div className="flex items-center gap-3">
                  <UserAvatar name={task.assignee.name} color={task.assignee.color} size="md" />
                  <div>
                    <p className="text-[13px] leading-tight font-medium">{task.assignee.name}</p>
                    <p className="text-muted-foreground text-[11px]">Assignee</p>
                  </div>
                  <div className="ml-auto text-right">
                    {task.dueDate ? (
                      <DueDateBadge dueDate={task.dueDate} />
                    ) : (
                      <p className="text-muted-foreground flex items-center gap-1 text-[13px] leading-tight">
                        <Clock className="size-3" />
                        No due date
                      </p>
                    )}
                  </div>
                </div>

                {task.parentId && (
                  <div className="flex items-center gap-2">
                    <span className="text-muted-foreground text-[11px]">Parent:</span>
                    <a
                      href={`/dashboard/kanban/${task.parentId}`}
                      className="text-primary text-[12px] font-medium hover:underline"
                      onClick={() => onOpenChange(false)}
                    >
                      {task.parentId}
                    </a>
                  </div>
                )}

                <div>
                  <h4 className="mb-2 text-[13px] font-semibold">
                    Subtasks
                    {task.subtaskIds.length > 0 && (
                      <span className="text-muted-foreground font-normal"> ({task.subtaskIds.length})</span>
                    )}
                  </h4>
                  <SubtaskList subtaskIds={task.subtaskIds} columns={columns} compact />
                </div>

                <div className="bg-border h-px" />

                <div>
                  <h4 className="mb-2 text-[13px] font-semibold">
                    Comments
                    {task.commentItems.length > 0 && (
                      <span className="text-muted-foreground font-normal"> ({task.commentItems.length})</span>
                    )}
                  </h4>
                  <CommentList comments={task.commentItems} compact onAdd={(text) => onAddComment(task, text)} />
                </div>

                <div className="bg-border h-px" />

                <div>
                  <h4 className="mb-2 text-[13px] font-semibold">
                    Files
                    {task.fileItems.length > 0 && (
                      <span className="text-muted-foreground font-normal"> ({task.fileItems.length})</span>
                    )}
                  </h4>
                  {task.fileItems.length ? (
                    <div className="space-y-1">
                      {task.fileItems.map((file) => {
                        const FileIcon = fileIconMap[file.type]
                        return (
                          <div
                            key={file.id}
                            className="hover:bg-muted/50 group/file flex items-center gap-2.5 rounded-md px-1.5 py-1.5 transition-colors"
                          >
                            <div className="bg-muted flex size-8 shrink-0 items-center justify-center rounded-md">
                              <FileIcon className="text-muted-foreground size-4" />
                            </div>
                            <div className="min-w-0 flex-1">
                              <p className="truncate text-[12px] font-medium">{file.name}</p>
                              <p className="text-muted-foreground text-[10px]">{file.size}</p>
                            </div>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="size-7 shrink-0 opacity-0 transition-opacity group-hover/file:opacity-100"
                            >
                              <Download className="size-3.5" />
                            </Button>
                          </div>
                        )
                      })}
                    </div>
                  ) : (
                    <p className="text-muted-foreground text-[12px]">No files attached.</p>
                  )}
                </div>
              </div>
            </div>

            <SheetFooter className="shrink-0 border-t px-5 py-3">
              <div className="flex w-full items-center gap-2">
                <a href={`/dashboard/kanban/${task.id}`} className="flex-1" onClick={() => onOpenChange(false)}>
                  <Button variant="outline" size="sm" className="w-full gap-1.5">
                    <ExternalLink className="size-3.5" />
                    View full detail
                  </Button>
                </a>
                <SheetClose asChild>
                  <Button variant="ghost" size="sm">
                    Close
                  </Button>
                </SheetClose>
              </div>
            </SheetFooter>
          </>
        )}
      </SheetContent>
    </Sheet>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanAddTaskDialog.tsx`

```tsx
'use client'

import * as React from 'react'
import { Plus, X, CheckCircle2, Calendar as CalendarIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import {
  type KanbanColumn as KanbanColumnType,
  type KanbanTask,
  priorityConfig,
  assignees,
  tagPresets,
} from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Dialog,
  DialogScrollContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Calendar } from '@/components/ui/calendar'
import { RichTextEditor } from '@/components/ui/rich-text-editor'

interface AddTaskForm {
  title: string
  description: string
  priority: KanbanTask['priority']
  assigneeKey: keyof typeof assignees
  tagKeys: (keyof typeof tagPresets)[]
  subtaskTexts: string[]
}

const emptyForm = (): AddTaskForm => ({
  title: '',
  description: '',
  priority: 'medium',
  assigneeKey: 'alice',
  tagKeys: [],
  subtaskTexts: [],
})

export function KanbanAddTaskDialog({
  open,
  columns,
  initialColumnId,
  onOpenChange,
  onCreate,
}: {
  open: boolean
  columns: KanbanColumnType[]
  initialColumnId: string
  onOpenChange: (value: boolean) => void
  onCreate: (columnId: string, tasks: KanbanTask[]) => void
}) {
  const [columnId, setColumnId] = React.useState(initialColumnId)
  const [dueDate, setDueDate] = React.useState<Date | undefined>(undefined)
  const [form, setForm] = React.useState<AddTaskForm>(emptyForm)
  const [newSubtaskText, setNewSubtaskText] = React.useState('')

  React.useEffect(() => {
    setColumnId(initialColumnId)
  }, [initialColumnId])

  React.useEffect(() => {
    if (open) {
      setColumnId(initialColumnId)
      setForm(emptyForm())
      setDueDate(undefined)
      setNewSubtaskText('')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open])

  function addSubtask() {
    const text = newSubtaskText.trim()
    if (!text) return
    setForm((f) => ({ ...f, subtaskTexts: [...f.subtaskTexts, text] }))
    setNewSubtaskText('')
  }

  function removeSubtask(index: number) {
    setForm((f) => ({ ...f, subtaskTexts: f.subtaskTexts.filter((_, i) => i !== index) }))
  }

  function toggleTag(key: keyof typeof tagPresets) {
    setForm((f) => {
      const idx = f.tagKeys.indexOf(key)
      const tagKeys = idx >= 0 ? f.tagKeys.filter((k) => k !== key) : [...f.tagKeys, key]
      return { ...f, tagKeys }
    })
  }

  function submit() {
    if (!form.title.trim()) return
    const maxId = columns
      .flatMap((c) => c.tasks)
      .reduce((max, t) => {
        const num = parseInt(t.id.replace(/^[A-Z]+-/, ''), 10)
        return num > max ? num : max
      }, 0)
    const idPrefix = columns.flatMap((c) => c.tasks)[0]?.id.split('-')[0] ?? 'TASK'
    const parentId = `${idPrefix}-${maxId + 1}`
    const subtaskTasks: KanbanTask[] = form.subtaskTexts.map((text, i) => ({
      id: `${idPrefix}-${maxId + 2 + i}`,
      title: text,
      priority: 'medium' as const,
      assignee: assignees[form.assigneeKey],
      tags: [],
      parentId,
      subtaskIds: [],
      commentItems: [],
      fileItems: [],
    }))
    const newTask: KanbanTask = {
      id: parentId,
      title: form.title.trim(),
      description: form.description.trim() || undefined,
      priority: form.priority,
      assignee: assignees[form.assigneeKey],
      tags: form.tagKeys.map((k) => tagPresets[k]),
      dueDate: dueDate ? dueDate.toISOString().slice(0, 10) : undefined,
      subtaskIds: subtaskTasks.map((t) => t.id),
      commentItems: [],
      fileItems: [],
    }
    onCreate(columnId, [newTask, ...subtaskTasks])
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogScrollContent className="sm:max-w-[680px]">
        <DialogHeader>
          <DialogTitle>New Task</DialogTitle>
          <DialogDescription>
            Adding task to {columns.find((c) => c.id === columnId)?.title ?? 'column'}
          </DialogDescription>
        </DialogHeader>

        <div className="grid gap-4 py-2">
          <div className="grid gap-1.5">
            <Label htmlFor="task-title">Title</Label>
            <Input
              id="task-title"
              value={form.title}
              placeholder="Enter task title"
              onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
            />
          </div>

          <div className="grid gap-1.5">
            <Label>
              Description
              <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            <RichTextEditor
              value={form.description}
              onValueChange={(val) => setForm((f) => ({ ...f, description: val }))}
            />
          </div>

          <div className="grid grid-cols-3 gap-4">
            <div className="grid gap-1.5">
              <Label htmlFor="task-priority">Priority</Label>
              <Select
                value={form.priority}
                onValueChange={(val) => setForm((f) => ({ ...f, priority: val as KanbanTask['priority'] }))}
              >
                <SelectTrigger id="task-priority">
                  <SelectValue placeholder="Priority" />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(priorityConfig).map(([key, config]) => (
                    <SelectItem key={key} value={key}>
                      {config.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-1.5">
              <Label htmlFor="task-assignee">Assignee</Label>
              <Select
                value={form.assigneeKey}
                onValueChange={(val) => setForm((f) => ({ ...f, assigneeKey: val as keyof typeof assignees }))}
              >
                <SelectTrigger id="task-assignee">
                  <SelectValue placeholder="Assignee" />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(assignees).map(([key, person]) => (
                    <SelectItem key={key} value={key}>
                      {person.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="grid gap-1.5">
              <Label htmlFor="task-column">Column</Label>
              <Select value={columnId} onValueChange={setColumnId}>
                <SelectTrigger id="task-column">
                  <SelectValue placeholder="Column" />
                </SelectTrigger>
                <SelectContent>
                  {columns.map((col) => (
                    <SelectItem key={col.id} value={col.id}>
                      {col.title}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="grid gap-1.5">
            <Label>
              Due Date
              <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  className={cn('w-full justify-start text-left font-normal', !dueDate && 'text-muted-foreground')}
                >
                  <CalendarIcon className="mr-2 size-4" />
                  {dueDate ? dueDate.toLocaleDateString('en-US', { dateStyle: 'medium' }) : 'Pick a date'}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0">
                <Calendar mode="single" selected={dueDate} onSelect={setDueDate} />
              </PopoverContent>
            </Popover>
          </div>

          <div className="grid gap-1.5">
            <Label>
              Tags
              <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            <div className="flex flex-wrap gap-2">
              {Object.entries(tagPresets).map(([key, tag]) => {
                const active = form.tagKeys.includes(key as keyof typeof tagPresets)
                return (
                  <button
                    key={key}
                    type="button"
                    className={cn(
                      'inline-flex items-center gap-1 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
                      active
                        ? 'bg-primary text-primary-foreground border-transparent'
                        : 'border-border bg-background text-foreground hover:bg-muted',
                    )}
                    onClick={() => toggleTag(key as keyof typeof tagPresets)}
                  >
                    {active && <CheckCircle2 className="size-3" />}
                    {tag.label}
                  </button>
                )
              })}
            </div>
          </div>

          <div className="grid gap-1.5">
            <Label>
              Subtasks
              <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            {form.subtaskTexts.length > 0 && (
              <div className="space-y-2">
                {form.subtaskTexts.map((text, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <span className="flex-1 text-sm">{text}</span>
                    <Button variant="ghost" size="icon" className="size-6" onClick={() => removeSubtask(index)}>
                      <X className="size-3" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
            <div className="flex items-center gap-2">
              <Input
                value={newSubtaskText}
                placeholder="Add a subtask"
                onChange={(e) => setNewSubtaskText(e.target.value)}
                onKeyUp={(e) => e.key === 'Enter' && addSubtask()}
              />
              <Button variant="outline" size="icon" onClick={addSubtask}>
                <Plus className="size-4" />
              </Button>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button disabled={!form.title.trim()} onClick={submit}>
            Create Task
          </Button>
        </DialogFooter>
      </DialogScrollContent>
    </Dialog>
  )
}
```

### `packages/registry-react/blocks/kanban-board/KanbanToolbar.tsx`

```tsx
'use client'

import { Search, Filter, ChevronDown, X, LayoutGrid, List } from 'lucide-react'
import { cn } from '@/lib/utils'
import { priorityConfig, assignees, getInitials } from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

export function KanbanToolbar({
  searchQuery,
  selectedPriority,
  selectedAssignee,
  viewMode,
  onSearchQueryChange,
  onSelectedPriorityChange,
  onSelectedAssigneeChange,
  onViewModeChange,
}: {
  searchQuery: string
  selectedPriority: string | null
  selectedAssignee: string | null
  viewMode: 'board' | 'list'
  onSearchQueryChange: (value: string) => void
  onSelectedPriorityChange: (value: string | null) => void
  onSelectedAssigneeChange: (value: string | null) => void
  onViewModeChange: (value: 'board' | 'list') => void
}) {
  return (
    <div className="mb-3 flex shrink-0 items-center gap-2">
      <div className="relative w-56">
        <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
        <Input
          value={searchQuery}
          placeholder="Search tasks..."
          className="h-8 pl-8 text-sm"
          onChange={(e) => onSearchQueryChange(e.target.value)}
        />
      </div>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="sm" className="h-8 gap-1.5 text-xs">
            <Filter className="size-3" />
            Priority
            {selectedPriority && (
              <Badge variant="default" className="ml-0.5 h-4 min-w-4 justify-center rounded px-1 text-[10px]">
                1
              </Badge>
            )}
            <ChevronDown className="text-muted-foreground size-3" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="w-40">
          {Object.entries(priorityConfig).map(([key, config]) => {
            const Icon = config.icon
            return (
              <DropdownMenuItem
                key={key}
                className="gap-2"
                onClick={() => onSelectedPriorityChange(selectedPriority === key ? null : key)}
              >
                <Icon className={cn('size-3.5', config.class)} />
                {config.label}
                {selectedPriority === key && <span className="bg-primary ml-auto size-1.5 rounded-full" />}
              </DropdownMenuItem>
            )
          })}
          {selectedPriority && <DropdownMenuSeparator />}
          {selectedPriority && (
            <DropdownMenuItem onClick={() => onSelectedPriorityChange(null)}>Clear filter</DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>

      {selectedAssignee && (
        <Badge
          variant="secondary"
          className="h-7 cursor-pointer gap-1 pr-1.5 text-xs"
          onClick={() => onSelectedAssigneeChange(null)}
        >
          {selectedAssignee}
          <X className="size-3 opacity-50" />
        </Badge>
      )}

      <ToggleGroup
        type="single"
        size="sm"
        value={viewMode}
        className="bg-muted ml-auto flex items-center gap-0.5 rounded-md p-0.5"
        onValueChange={(v) => v && onViewModeChange(v as 'board' | 'list')}
      >
        <ToggleGroupItem
          value="board"
          className="data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm"
          title="Board view"
        >
          <LayoutGrid className="size-3.5" />
        </ToggleGroupItem>
        <ToggleGroupItem
          value="list"
          className="data-[state=on]:bg-background size-7 rounded-sm p-0 data-[state=on]:shadow-sm"
          title="List view"
        >
          <List className="size-3.5" />
        </ToggleGroupItem>
      </ToggleGroup>

      <div className="flex items-center">
        <TooltipProvider delayDuration={300}>
          {Object.entries(assignees).map(([key, a]) => (
            <Tooltip key={key}>
              <TooltipTrigger asChild>
                <button
                  className={cn(
                    // rounded-full so the selected ring + focus ring trace the
                    // Avatar's circular outline instead of the rectangular button.
                    'ring-background focus-visible:ring-ring/50 relative -ml-1.5 rounded-full transition-all outline-none first:ml-0 focus-visible:ring-1',
                    selectedAssignee === a.name
                      ? 'ring-primary z-20 ring-1'
                      : selectedAssignee && selectedAssignee !== a.name
                        ? 'opacity-40 hover:opacity-70'
                        : 'hover:z-10 hover:scale-110',
                  )}
                  onClick={() => onSelectedAssigneeChange(selectedAssignee === a.name ? null : a.name)}
                >
                  <Avatar className="border-background size-7 border-2">
                    <AvatarFallback className={cn('text-[10px] font-semibold', a.color)}>
                      {getInitials(a.name)}
                    </AvatarFallback>
                  </Avatar>
                </button>
              </TooltipTrigger>
              <TooltipContent side="bottom" className="text-xs">
                {a.name}
                {selectedAssignee === a.name && <span className="text-muted-foreground ml-1">(filtered)</span>}
              </TooltipContent>
            </Tooltip>
          ))}
        </TooltipProvider>
      </div>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/PriorityBadge.tsx`

```tsx
'use client'

import { cn } from '@/lib/utils'
import { priorityConfig } from '@/lib/use-kanban'

export function PriorityBadge({
  priority,
  iconSize = 'size-3.5',
  className,
}: {
  priority: string
  iconSize?: string
  className?: string
}) {
  const config = priorityConfig[priority]
  if (!config) return null
  const Icon = config.icon
  return (
    <div className={cn('flex items-center gap-1', className)}>
      <Icon className={cn(iconSize, config.class)} />
      <span className={cn('text-[11px] font-semibold', config.class)}>{config.label}</span>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/DueDateBadge.tsx`

```tsx
'use client'

import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'
import { getDueStatus, formatDueDate } from '@/lib/use-kanban'

export function DueDateBadge({
  dueDate,
  variant,
  className,
}: {
  dueDate: string
  variant?: 'chip' | 'inline'
  className?: string
}) {
  const status = getDueStatus(dueDate)
  const formatted = formatDueDate(dueDate)

  const chipClasses =
    status === 'overdue'
      ? 'bg-destructive/10 text-destructive'
      : status === 'soon'
        ? 'bg-warning/10 text-warning'
        : 'text-muted-foreground bg-muted'

  const inlineClasses =
    status === 'overdue' ? 'text-destructive' : status === 'soon' ? 'text-warning' : 'text-foreground'

  if (variant === 'chip') {
    return (
      <div
        className={cn('flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium', chipClasses, className)}
      >
        <Clock className="size-3" />
        {formatted}
      </div>
    )
  }

  return (
    <p className={cn('flex items-center gap-1 text-[13px] leading-tight font-medium', inlineClasses, className)}>
      <Clock className="size-3" />
      {formatted}
    </p>
  )
}
```

### `packages/registry-react/blocks/kanban-board/TagBadge.tsx`

```tsx
'use client'

import { cn } from '@/lib/utils'

export function TagBadge({ label, color, className }: { label: string; color: string; className?: string }) {
  return (
    <span className={cn('rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset', color, className)}>
      {label}
    </span>
  )
}
```

### `packages/registry-react/blocks/kanban-board/UserAvatar.tsx`

```tsx
'use client'

import { cn } from '@/lib/utils'
import { getInitials } from '@/lib/use-kanban'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'

const userAvatarSizeMap = {
  xs: { avatar: 'size-6', text: 'text-[8px]' },
  sm: { avatar: 'size-7', text: 'text-[9px]' },
  md: { avatar: 'size-8', text: 'text-[11px]' },
}

export function UserAvatar({
  name,
  color,
  size = 'sm',
  className,
}: {
  name: string
  color: string
  size?: 'xs' | 'sm' | 'md'
  className?: string
}) {
  return (
    <Avatar className={cn(userAvatarSizeMap[size].avatar, 'shrink-0', className)}>
      <AvatarFallback className={cn(userAvatarSizeMap[size].text, 'font-bold', color)}>
        {getInitials(name)}
      </AvatarFallback>
    </Avatar>
  )
}
```

### `packages/registry-react/blocks/kanban-board/SubtaskProgress.tsx`

```tsx
'use client'

import { CheckCircle2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export function SubtaskProgress({ done, total, className }: { done: number; total: number; className?: string }) {
  if (total <= 0) return null
  const percent = total > 0 ? Math.round((done / total) * 100) : 0
  const isComplete = done === total && total > 0
  return (
    <div className={className}>
      <div className="mb-1 flex items-center justify-between">
        <span className="text-muted-foreground text-[11px]">
          {isComplete && <CheckCircle2 className="text-success mr-0.5 inline size-3" />}
          {done}/{total} subtasks
        </span>
        <span className="text-muted-foreground text-[11px] font-medium tabular-nums">{percent}%</span>
      </div>
      <div className="bg-muted h-1.5 overflow-hidden rounded-full">
        <div
          className={cn('h-full rounded-full transition-all duration-500', isComplete ? 'bg-success' : 'bg-primary')}
          style={{ width: `${percent}%` }}
        />
      </div>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/SubtaskList.tsx`

```tsx
'use client'

import { cn } from '@/lib/utils'
import {
  type KanbanColumn as KanbanColumnType,
  type KanbanTask,
  findTaskById,
  getTaskColumn,
} from '@/lib/use-kanban'

export function SubtaskList({
  subtaskIds,
  columns,
  compact = false,
}: {
  subtaskIds: string[]
  columns: KanbanColumnType[]
  compact?: boolean
}) {
  const subtasks = subtaskIds
    .map((id) => {
      const task = findTaskById(columns, id)
      const column = getTaskColumn(columns, id)
      return task ? { task, column } : null
    })
    .filter(Boolean) as { task: KanbanTask; column: KanbanColumnType | undefined }[]

  const doneCount = subtasks.filter((s) => s.column?.id === 'done').length
  const percent = subtasks.length > 0 ? Math.round((doneCount / subtasks.length) * 100) : 0

  if (!subtasks.length) {
    return (
      <p className={compact ? 'text-muted-foreground text-[12px]' : 'text-muted-foreground text-sm'}>
        No subtasks yet.
      </p>
    )
  }

  return (
    <div>
      <div className="mb-2 flex items-center justify-between">
        <span className={cn('text-muted-foreground tabular-nums', compact ? 'text-[11px]' : 'text-[13px]')}>
          {doneCount}/{subtasks.length} done
        </span>
        <span className={cn('text-muted-foreground tabular-nums', compact ? 'text-[10px]' : 'text-[11px]')}>
          {percent}%
        </span>
      </div>
      <div className="bg-muted mb-3 h-1.5 overflow-hidden rounded-full">
        <div
          className={cn(
            'h-full rounded-full transition-all duration-500',
            doneCount === subtasks.length ? 'bg-success' : 'bg-primary',
          )}
          style={{ width: `${percent}%` }}
        />
      </div>

      <div className={compact ? 'space-y-0.5' : 'space-y-1'}>
        {subtasks.map(({ task, column }) => (
          <a
            key={task.id}
            href={`/dashboard/kanban/${task.id}`}
            className={cn(
              'group/subtask flex items-center gap-2 rounded-md transition-colors',
              compact ? 'px-1 py-1' : 'px-1.5 py-1.5',
              'hover:bg-muted/50',
            )}
          >
            <span className={cn('size-1.5 shrink-0 rounded-full', column?.dotColor ?? 'bg-muted-foreground')} />
            <span
              className={cn('shrink-0 font-mono', compact ? 'text-[10px]' : 'text-[11px]', 'text-muted-foreground/70')}
            >
              {task.id}
            </span>
            <span
              className={cn(
                'min-w-0 flex-1 truncate',
                compact ? 'text-[12px]' : 'text-[13px]',
                column?.id === 'done' ? 'text-muted-foreground line-through' : 'text-foreground',
              )}
            >
              {task.title}
            </span>
            <span
              className={cn(
                'shrink-0 rounded-md px-1.5 py-0.5 font-medium',
                compact ? 'text-[9px]' : 'text-[10px]',
                column?.color ?? 'text-muted-foreground',
              )}
            >
              {column?.title ?? 'Unknown'}
            </span>
          </a>
        ))}
      </div>
    </div>
  )
}
```

### `packages/registry-react/blocks/kanban-board/CommentList.tsx`

```tsx
'use client'

import * as React from 'react'
import { Send } from 'lucide-react'
import { cn } from '@/lib/utils'
import { type CommentItem } from '@/lib/use-kanban'
import { Button } from '@/components/ui/button'
import { RichTextEditor } from '@/components/ui/rich-text-editor'
import { UserAvatar } from './UserAvatar'

export function CommentList({
  comments,
  compact = false,
  onAdd,
}: {
  comments: CommentItem[]
  compact?: boolean
  onAdd?: (text: string) => void
}) {
  const [newComment, setNewComment] = React.useState('')

  function submit() {
    const stripped = newComment.replace(/<[^>]*>/g, '').trim()
    if (!stripped) return
    onAdd?.(newComment)
    setNewComment('')
  }

  return (
    <>
      {comments.length ? (
        <div className={compact ? 'space-y-3' : 'space-y-4'}>
          {comments.map((comment) => (
            <div key={comment.id} className={compact ? 'flex gap-2.5' : 'flex gap-3'}>
              <UserAvatar name={comment.author} color={comment.authorColor} size={compact ? 'xs' : 'sm'} />
              <div className="min-w-0 flex-1">
                <div className="flex items-baseline gap-2">
                  <span className={compact ? 'text-[12px] font-semibold' : 'text-[13px] font-semibold'}>
                    {compact ? comment.author.split(' ')[0] : comment.author}
                  </span>
                  <span
                    className={
                      compact ? 'text-muted-foreground text-[10px]' : 'text-muted-foreground text-[11px]'
                    }
                  >
                    {comment.time}
                  </span>
                </div>
                <div
                  className={cn(
                    'rich-text-content prose prose-sm dark:prose-invert mt-0.5 max-w-none',
                    compact
                      ? 'text-muted-foreground text-[12px] leading-relaxed'
                      : 'text-muted-foreground text-[13px] leading-relaxed',
                  )}
                  dangerouslySetInnerHTML={{ __html: comment.text }}
                />
              </div>
            </div>
          ))}
        </div>
      ) : (
        <p className={compact ? 'text-muted-foreground text-[12px]' : 'text-muted-foreground text-sm'}>
          No comments yet.
        </p>
      )}

      <div className={compact ? 'mt-3 flex gap-2' : 'mt-4 flex gap-3 border-t pt-4'}>
        <div className={compact ? 'mt-1' : 'mt-1.5'}>
          <UserAvatar name="Admin User" color="bg-chart-1/15 text-chart-1" size={compact ? 'xs' : 'sm'} />
        </div>
        <div className="min-w-0 flex-1 space-y-2">
          <RichTextEditor
            value={newComment}
            onValueChange={setNewComment}
            placeholder="Write a comment..."
            minHeight={compact ? '60px' : '80px'}
            className={compact ? 'text-[12px]' : 'text-[13px]'}
          />
          <div className="flex justify-end">
            <Button
              size="sm"
              className={compact ? 'h-7 gap-1 text-[11px]' : 'h-8 gap-1.5 text-xs'}
              disabled={!newComment.replace(/<[^>]*>/g, '').trim()}
              onClick={submit}
            >
              <Send className="size-3" />
              Comment
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}
```

## kanban-data

- type: `registry:lib`
- description: Seed columns for the kanban-board block. Five HR-themed columns (Backlog / To Do / In Progress / In Review / Done) with ~26 tasks across them, complete with assignees, tags, due dates, subtasks, comments, and files. Swap with your own fetcher when wiring to a real backend -- the consumer page just imports `createInitialColumns()` and binds the returned array to the kanban board.
- registry deps: `use-kanban`

### `packages/registry-react/bootstrap/kanban-data/kanbanData.ts`

```ts
import type { KanbanColumn } from '@/lib/use-kanban'
import { assignees, tagPresets } from '@/lib/use-kanban'

export function createInitialColumns(): KanbanColumn[] {
  return [
    {
      id: 'backlog',
      title: 'Backlog',
      color: 'text-muted-foreground',
      dotColor: 'bg-muted-foreground/60',
      tasks: [
        {
          id: 'HR-101',
          title: 'Draft updated remote work policy for Q3',
          description: 'Review current policy, benchmark competitors, propose updates',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [tagPresets.policy, tagPresets.compliance],
          dueDate: '2026-03-28',
          subtaskIds: ['HR-115', 'HR-116', 'HR-117'],
          commentItems: [
            {
              id: 'c1',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Should we include a section on co-working space stipends?',
              time: '2h ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Good idea — I'll add it to the draft. Also checking what competitors offer.",
              time: '1h ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Legal flagged we need to update the liability clause for remote injuries.',
              time: '30m ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Current_Remote_Policy_v2.pdf', size: '245 KB', type: 'pdf' }],
        },
        {
          id: 'HR-102',
          title: 'Research employee wellness platforms',
          priority: 'low',
          assignee: assignees.carol,
          tags: [tagPresets.benefits],
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-103',
          title: 'Create training calendar for new hires',
          priority: 'medium',
          assignee: assignees.frank,
          tags: [tagPresets.training, tagPresets.onboarding],
          dueDate: '2026-04-05',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Can we integrate this with the existing LMS?',
              time: '1d ago',
            },
            {
              id: 'c2',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Looking into it — the API supports calendar sync.',
              time: '22h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Training_Modules_List.xlsx', size: '128 KB', type: 'spreadsheet' },
            { id: 'f2', name: 'Onboarding_Flow_Diagram.png', size: '1.2 MB', type: 'image' },
            { id: 'f3', name: 'LMS_Integration_Notes.pdf', size: '89 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-116',
          title: 'Benchmark 5 competitor policies',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-117',
          title: 'Draft proposed changes document',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'todo',
      title: 'To Do',
      color: 'text-blue-600 dark:text-blue-400',
      dotColor: 'bg-blue-500',
      tasks: [
        {
          id: 'HR-104',
          title: 'Set up interviews for Senior Designer role',
          description: 'Coordinate with hiring panel, schedule 4 candidates',
          priority: 'high',
          assignee: assignees.bob,
          tags: [tagPresets.recruitment],
          dueDate: '2026-03-15',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Candidate #3 requested to reschedule to Thursday.',
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Updated. Thursday 2pm works for everyone.',
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Portfolio review links are ready — shared in the hiring channel.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: "Thanks Eva. I'll add those to the scorecards.",
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Can we include a design challenge? 30 min whiteboard session.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Good call — added to the schedule after the panel round.',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "All set. Let's sync after the first two interviews.",
              time: '5h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Interview_Rubric_Sr_Designer.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f2', name: 'Candidate_Profiles.xlsx', size: '342 KB', type: 'spreadsheet' },
          ],
        },
        {
          id: 'HR-105',
          title: 'Process March payroll adjustments',
          priority: 'urgent',
          assignee: assignees.eva,
          tags: [tagPresets.payroll],
          dueDate: '2026-03-12',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Three employees reported incorrect overtime — investigating.',
              time: '4h ago',
            },
          ],
          fileItems: [],
        },
        {
          id: 'HR-106',
          title: 'Update employee handbook — Section 4.2',
          priority: 'medium',
          assignee: assignees.david,
          tags: [tagPresets.compliance, tagPresets.policy],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Section 4.2 needs to reflect the new PTO rollover rules.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Also update the bereavement leave policy — legal sent revisions.',
              time: '1d ago',
            },
            {
              id: 'c3',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'I can review the final draft before publishing.',
              time: '12h ago',
            },
            {
              id: 'c4',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Thanks Frank. Will have it ready by EOD tomorrow.',
              time: '10h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Handbook_Section4.2_Draft.pdf', size: '198 KB', type: 'pdf' }],
        },
        {
          id: 'HR-107',
          title: 'Review benefits enrollment for new joiners',
          priority: 'low',
          assignee: assignees.carol,
          tags: [tagPresets.benefits, tagPresets.onboarding],
          dueDate: '2026-03-20',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'in-progress',
      title: 'In Progress',
      color: 'text-orange-600 dark:text-orange-400',
      dotColor: 'bg-orange-500',
      tasks: [
        {
          id: 'HR-108',
          title: 'Onboard 3 new engineers — Week 2 orientation',
          description: 'Equipment setup, system access, team introductions',
          priority: 'high',
          assignee: assignees.alice,
          tags: [tagPresets.onboarding],
          dueDate: '2026-03-14',
          subtaskIds: ['HR-118', 'HR-119', 'HR-120'],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'All three laptops are configured and ready for pickup.',
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: "GitHub access granted. They're in the eng-new-hires team.",
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Team intro meetings scheduled for Tuesday and Wednesday.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits enrollment forms sent to all three.',
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'One engineer had issues with VPN — IT is looking into it.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'VPN issue resolved — was a firewall config on their end.',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Payroll records created for all three. Direct deposit pending.',
              time: '20h ago',
            },
            {
              id: 'c8',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Assigned buddies: Sarah→James, Mike→Priya, Tom→Alex.',
              time: '16h ago',
            },
            {
              id: 'c9',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Great progress! Just HR paperwork and feedback survey left.',
              time: '8h ago',
            },
            {
              id: 'c10',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Week 1 feedback from all three was very positive.',
              time: '4h ago',
            },
            {
              id: 'c11',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Two out of three have completed benefits enrollment.',
              time: '2h ago',
            },
            {
              id: 'c12',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Following up with the third one today. Should be done by EOD.',
              time: '1h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Onboarding_Checklist_Engineers.pdf', size: '312 KB', type: 'pdf' },
            { id: 'f2', name: 'Equipment_Inventory.xlsx', size: '87 KB', type: 'spreadsheet' },
            { id: 'f3', name: 'Team_Org_Chart.png', size: '456 KB', type: 'image' },
            { id: 'f4', name: 'VPN_Setup_Guide.pdf', size: '1.1 MB', type: 'pdf' },
            { id: 'f5', name: 'Benefits_Enrollment_Form.pdf', size: '234 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-109',
          title: 'Conduct annual compliance training',
          priority: 'high',
          assignee: assignees.frank,
          tags: [tagPresets.training, tagPresets.compliance],
          dueDate: '2026-03-18',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Slide deck updated with new data privacy regulations.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Can we make Session A virtual for remote engineers?',
              time: '1d ago',
            },
            {
              id: 'c3',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Yes — setting up a hybrid session with Zoom link.',
              time: '18h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Compliance_Training_2026.pdf', size: '2.4 MB', type: 'pdf' },
            { id: 'f2', name: 'Acknowledgment_Form_Template.pdf', size: '67 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-110',
          title: 'Prepare performance review templates',
          priority: 'medium',
          assignee: assignees.david,
          tags: [tagPresets.policy],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: "Using last year's template as a starting point. Adding peer review section.",
              time: '3d ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Can we add a self-assessment section too?',
              time: '2d ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Good idea — adding it. Also including a goals section for next quarter.',
              time: '2d ago',
            },
            {
              id: 'c4',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Please share a preview before we roll out. Last year's had confusing rating scales.",
              time: '1d ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Will share draft by Friday. Simplified the scale to 1-5 with clear descriptions.',
              time: '8h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'Review_Template_Draft_v3.pdf', size: '178 KB', type: 'pdf' }],
        },
        {
          id: 'HR-120',
          title: 'Complete HR paperwork and benefits enrollment',
          priority: 'medium',
          assignee: assignees.carol,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'in-review',
      title: 'In Review',
      color: 'text-violet-600 dark:text-violet-400',
      dotColor: 'bg-violet-500',
      tasks: [
        {
          id: 'HR-111',
          title: 'Finalize job descriptions for Q2 hiring plan',
          priority: 'high',
          assignee: assignees.bob,
          tags: [tagPresets.recruitment],
          dueDate: '2026-03-13',
          subtaskIds: ['HR-121', 'HR-122', 'HR-123'],
          commentItems: [
            {
              id: 'c1',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'All six JDs are drafted. Sending to hiring managers for review.',
              time: '4d ago',
            },
            {
              id: 'c2',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Salary ranges confirmed for all positions. Updated the comp spreadsheet.',
              time: '3d ago',
            },
            {
              id: 'c3',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'DevOps JD needs to mention Kubernetes experience. Updated.',
              time: '3d ago',
            },
            {
              id: 'c4',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: "Looks great overall. Let's get legal to sign off.",
              time: '2d ago',
            },
            {
              id: 'c5',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Legal review submitted. ETA is end of day Thursday.',
              time: '1d ago',
            },
            {
              id: 'c6',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Should we add remote/hybrid designation to each JD?',
              time: '1d ago',
            },
            {
              id: 'c7',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Good point — added work location to all six.',
              time: '20h ago',
            },
            {
              id: 'c8',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits section should mention the new wellness stipend.',
              time: '12h ago',
            },
            {
              id: 'c9',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Done! All JDs now include the wellness benefit.',
              time: '6h ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Q2_Job_Descriptions_All.pdf', size: '892 KB', type: 'pdf' },
            { id: 'f2', name: 'Salary_Benchmarks_Q2.xlsx', size: '234 KB', type: 'spreadsheet' },
            { id: 'f3', name: 'Hiring_Plan_Timeline.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f4', name: 'Org_Chart_Q2_Projected.png', size: '678 KB', type: 'image' },
          ],
        },
        {
          id: 'HR-112',
          title: 'Audit PTO balances before rollover deadline',
          priority: 'urgent',
          assignee: assignees.eva,
          tags: [tagPresets.payroll, tagPresets.compliance],
          dueDate: '2026-03-11',
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Found 12 employees with balances exceeding the rollover cap.',
              time: '2d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Send them reminders to use or forfeit before the 11th.',
              time: '2d ago',
            },
            {
              id: 'c3',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Reminders sent. 8 have acknowledged so far.',
              time: '1d ago',
            },
            {
              id: 'c4',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Do we need manager approval for the remaining 4?',
              time: '1d ago',
            },
            {
              id: 'c5',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Yes — escalated to their managers. Following up today.',
              time: '6h ago',
            },
            {
              id: 'c6',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Two more responded. Just 2 remaining.',
              time: '2h ago',
            },
          ],
          fileItems: [{ id: 'f1', name: 'PTO_Audit_Report_March.xlsx', size: '567 KB', type: 'spreadsheet' }],
        },
        {
          id: 'HR-123',
          title: 'Final legal review of all JDs',
          priority: 'high',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
    {
      id: 'done',
      title: 'Done',
      color: 'text-emerald-600 dark:text-emerald-400',
      dotColor: 'bg-emerald-500',
      tasks: [
        {
          id: 'HR-113',
          title: 'Complete February payroll processing',
          priority: 'high',
          assignee: assignees.eva,
          tags: [tagPresets.payroll],
          subtaskIds: [],
          commentItems: [
            {
              id: 'c1',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'All payroll calculations verified. Submitting to bank.',
              time: '5d ago',
            },
            {
              id: 'c2',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Confirmed — all deposits went through successfully.',
              time: '4d ago',
            },
            {
              id: 'c3',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Payslips generated and emailed to all employees.',
              time: '4d ago',
            },
            {
              id: 'c4',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Closing this out — February payroll is fully complete.',
              time: '3d ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Feb_Payroll_Summary.xlsx', size: '445 KB', type: 'spreadsheet' },
            { id: 'f2', name: 'Feb_Tax_Withholdings.pdf', size: '289 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-114',
          title: 'Onboard Marketing Coordinator — Sarah Lin',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [tagPresets.onboarding],
          subtaskIds: ['HR-124', 'HR-125', 'HR-126'],
          commentItems: [
            {
              id: 'c1',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'Welcome packet sent. Sarah starts Monday!',
              time: '3w ago',
            },
            {
              id: 'c2',
              author: 'Bob Martinez',
              authorColor: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
              text: 'Workstation set up in the marketing pod. Desk 4B.',
              time: '2w ago',
            },
            {
              id: 'c3',
              author: 'Carol White',
              authorColor: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
              text: 'Benefits enrollment complete. She chose Plan B.',
              time: '2w ago',
            },
            {
              id: 'c4',
              author: 'Frank Lee',
              authorColor: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
              text: 'Marketing tools training done — HubSpot, Figma, Analytics.',
              time: '1w ago',
            },
            {
              id: 'c5',
              author: 'David Kim',
              authorColor: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
              text: 'Manager check-in went great. Sarah is settling in well.',
              time: '1w ago',
            },
            {
              id: 'c6',
              author: 'Eva Johnson',
              authorColor: 'bg-rose-500/15 text-rose-600 dark:text-rose-400',
              text: 'Payroll set up — first paycheck confirmed.',
              time: '5d ago',
            },
            {
              id: 'c7',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: '30-day check-in done. Very positive feedback all around.',
              time: '2d ago',
            },
            {
              id: 'c8',
              author: 'Alice Chen',
              authorColor: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
              text: 'All tasks complete — closing this onboarding ticket. \u{1F389}',
              time: '1d ago',
            },
          ],
          fileItems: [
            { id: 'f1', name: 'Offer_Letter_Sarah_Lin.pdf', size: '156 KB', type: 'pdf' },
            { id: 'f2', name: 'Welcome_Packet.pdf', size: '2.3 MB', type: 'pdf' },
            { id: 'f3', name: 'I9_Form_Signed.pdf', size: '89 KB', type: 'pdf' },
            { id: 'f4', name: 'Benefits_Selection.pdf', size: '112 KB', type: 'pdf' },
            { id: 'f5', name: 'Marketing_Tools_Access.xlsx', size: '45 KB', type: 'spreadsheet' },
            { id: 'f6', name: '30Day_Feedback_Survey.pdf', size: '78 KB', type: 'pdf' },
          ],
        },
        {
          id: 'HR-115',
          title: 'Review current remote work policy document',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-101',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-118',
          title: 'Issue laptops and peripherals',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-119',
          title: 'Set up email and Slack accounts',
          priority: 'medium',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-108',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-121',
          title: 'Senior Backend Engineer JD',
          priority: 'medium',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-122',
          title: 'Product Manager JD',
          priority: 'medium',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-111',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-124',
          title: 'Send offer letter and welcome packet',
          priority: 'low',
          assignee: assignees.alice,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-125',
          title: 'Set up workstation and equipment',
          priority: 'low',
          assignee: assignees.bob,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
        {
          id: 'HR-126',
          title: 'Benefits enrollment',
          priority: 'low',
          assignee: assignees.carol,
          tags: [],
          parentId: 'HR-114',
          subtaskIds: [],
          commentItems: [],
          fileItems: [],
        },
      ],
    },
  ]
}

```

## kbd

- type: `registry:ui`
- description: Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.

### `packages/registry-react/components/kbd/kbd.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
  <kbd
    ref={ref}
    data-uipkge=""
    data-slot="kbd"
    className={cn(
      'pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground',
      className,
    )}
    {...props}
  />
))
Kbd.displayName = 'Kbd'

export { Kbd }

```

### `packages/registry-react/components/kbd/index.ts`

```ts
export { Kbd } from './kbd'

```

## knob

- type: `registry:ui`
- description: Circular dial input. Drag to rotate, keyboard accessible, SVG-rendered. Useful for compact numeric controls (volume, brightness, gauges).

### `packages/registry-react/components/knob/Knob.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface KnobProps {
  /** Controlled value */
  value?: number
  /** Default value when uncontrolled */
  defaultValue?: number
  /** Emitted when the value changes */
  onValueChange?: (value: number) => void
  /** Also fired on every committed change (parity with the Vue `change` event) */
  onChange?: (value: number) => void
  min?: number
  max?: number
  step?: number
  size?: number
  strokeWidth?: number
  valueColor?: string
  rangeColor?: string
  disabled?: boolean
  readonly?: boolean
  showValue?: boolean
  className?: string
  /** Custom renderer for the centered value text. */
  renderValue?: (value: number) => React.ReactNode
}

const startAngle = -Math.PI * 0.75
const endAngle = Math.PI * 0.75
const sweep = endAngle - startAngle

function clamp(v: number, lo: number, hi: number) {
  return Math.min(hi, Math.max(lo, v))
}

function arcPath(cx: number, cy: number, r: number, a1: number, a2: number) {
  const x1 = cx + r * Math.cos(a1)
  const y1 = cy + r * Math.sin(a1)
  const x2 = cx + r * Math.cos(a2)
  const y2 = cy + r * Math.sin(a2)
  const large = a2 - a1 > Math.PI ? 1 : 0
  return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`
}

const Knob = React.forwardRef<SVGSVGElement, KnobProps>(
  (
    {
      value: controlledValue,
      defaultValue = 0,
      onValueChange,
      onChange,
      min = 0,
      max = 100,
      step = 1,
      size = 100,
      strokeWidth = 14,
      valueColor = 'var(--primary)',
      rangeColor = 'var(--muted)',
      disabled = false,
      readonly = false,
      showValue = true,
      className,
      renderValue,
    },
    ref,
  ) => {
    const isControlled = controlledValue !== undefined
    const [internal, setInternal] = React.useState(defaultValue)
    const rawValue = isControlled ? controlledValue! : internal

    const svgRef = React.useRef<SVGSVGElement | null>(null)
    const setRefs = React.useCallback(
      (node: SVGSVGElement | null) => {
        svgRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<SVGSVGElement | null>).current = node
      },
      [ref],
    )
    const [isDragging, setIsDragging] = React.useState(false)

    const value = clamp(rawValue, min, max)
    const percent = max === min ? 0 : (value - min) / (max - min)

    const rangePath = arcPath(50, 50, 40, startAngle, endAngle)
    const valuePath = arcPath(50, 50, 40, startAngle, startAngle + sweep * percent)

    function snap(v: number) {
      const stepped = Math.round((v - min) / step) * step + min
      return clamp(stepped, min, max)
    }

    function setValue(v: number) {
      if (disabled || readonly) return
      const next = snap(v)
      if (next === rawValue) return
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
      onChange?.(next)
    }

    function angleFromEvent(e: React.PointerEvent): number {
      const rect = svgRef.current!.getBoundingClientRect()
      const cx = rect.left + rect.width / 2
      const cy = rect.top + rect.height / 2
      return Math.atan2(e.clientY - cy, e.clientX - cx)
    }

    function angleToValue(angle: number): number {
      let a = angle - startAngle
      if (a < 0) a += Math.PI * 2
      if (a > sweep) {
        return a < (Math.PI * 2 + sweep) / 2 ? max : min
      }
      return min + (a / sweep) * (max - min)
    }

    function onPointerDown(e: React.PointerEvent) {
      if (disabled || readonly) return
      ;(e.target as Element).setPointerCapture(e.pointerId)
      setIsDragging(true)
      setValue(angleToValue(angleFromEvent(e)))
    }

    function onPointerMove(e: React.PointerEvent) {
      if (!isDragging) return
      setValue(angleToValue(angleFromEvent(e)))
    }

    function onPointerUp(e: React.PointerEvent) {
      if (!isDragging) return
      setIsDragging(false)
      ;(e.target as Element).releasePointerCapture(e.pointerId)
    }

    function onKeyDown(e: React.KeyboardEvent) {
      if (disabled || readonly) return
      const big = step * 10
      switch (e.key) {
        case 'ArrowUp':
        case 'ArrowRight':
          e.preventDefault()
          setValue(value + step)
          break
        case 'ArrowDown':
        case 'ArrowLeft':
          e.preventDefault()
          setValue(value - step)
          break
        case 'PageUp':
          e.preventDefault()
          setValue(value + big)
          break
        case 'PageDown':
          e.preventDefault()
          setValue(value - big)
          break
        case 'Home':
          e.preventDefault()
          setValue(min)
          break
        case 'End':
          e.preventDefault()
          setValue(max)
          break
      }
    }

    function onWheel(e: React.WheelEvent) {
      if (disabled || readonly) return
      // Note: React's synthetic wheel listener is passive, so preventDefault is
      // a no-op here. A native non-passive listener is attached below to stop
      // the page from scrolling while the knob has focus / is hovered.
      setValue(value + (e.deltaY < 0 ? step : -step))
    }

    // Attach a non-passive wheel listener so e.preventDefault() actually blocks
    // page scroll — React's onWheel is passive and can't cancel the scroll.
    React.useEffect(() => {
      const node = svgRef.current
      if (!node) return
      const handler = (e: WheelEvent) => {
        if (disabled || readonly) return
        e.preventDefault()
      }
      node.addEventListener('wheel', handler, { passive: false })
      return () => node.removeEventListener('wheel', handler)
    }, [disabled, readonly])

    return (
      <svg
        ref={setRefs}
        data-uipkge=""
        data-slot="knob"
        className={cn(
          'focus-visible:ring-ring inline-block touch-none rounded-full outline-none select-none focus-visible:ring-2',
          disabled && 'cursor-not-allowed opacity-50',
          !disabled && !readonly && 'cursor-pointer',
          className,
        )}
        width={size}
        height={size}
        viewBox="0 0 100 100"
        role="slider"
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={value}
        aria-disabled={disabled || undefined}
        aria-readonly={readonly || undefined}
        tabIndex={disabled ? -1 : 0}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onKeyDown={onKeyDown}
        onWheel={onWheel}
      >
        <path d={rangePath} stroke={rangeColor} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
        <path d={valuePath} stroke={valueColor} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
        {showValue && (
          <text x="50" y="55" textAnchor="middle" className="fill-foreground text-[18px] font-medium">
            {renderValue ? renderValue(value) : value}
          </text>
        )}
      </svg>
    )
  },
)
Knob.displayName = 'Knob'

export { Knob }

```

### `packages/registry-react/components/knob/index.ts`

```ts
export { Knob, type KnobProps } from './Knob'

```

## kpi-grid

- type: `registry:ui`
- description: Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.

### `packages/registry-react/components/kpi-grid/kpi-grid.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

export interface KpiGridProps extends React.HTMLAttributes<HTMLDivElement> {
  columns?: 2 | 3 | 4
}

const KpiGrid = React.forwardRef<HTMLDivElement, KpiGridProps>(
  ({ columns = 4, className, children, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'grid gap-4 md:grid-cols-2',
        columns === 3 ? 'lg:grid-cols-3' : columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  ),
)
KpiGrid.displayName = 'KpiGrid'

export { KpiGrid }

```

### `packages/registry-react/components/kpi-grid/index.ts`

```ts
export { KpiGrid, type KpiGridProps } from './kpi-grid'

```

## label

- type: `registry:ui`
- description: Accessible label primitive — wraps text and binds to its child input via `htmlFor`. Disabled-state styling and proper screen-reader behavior.
- npm deps: `@radix-ui/react-label`

### `packages/registry-react/components/label/Label.tsx`

```tsx
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'
import { cn } from '@/lib/utils'

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="label"
    className={cn(
      'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
      className,
    )}
    {...props}
  />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }

```

### `packages/registry-react/components/label/index.ts`

```ts
export { Label } from './Label'

```

## labeled-value

- type: `registry:ui`
- description: Read-only label/value pair for surface details — "Email: jane@…" or "Status: Active". Compose them in a Data List, a Stat Card, or a Section Card detail row.

### `packages/registry-react/components/labeled-value/labeled-value.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

export interface LabeledValueProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value?: string
}

const LabeledValue = React.forwardRef<HTMLDivElement, LabeledValueProps>(
  ({ label, value, className, children, ...props }, ref) => (
    <div ref={ref} className={cn('flex items-center justify-between text-sm', className)} {...props}>
      <span className="text-muted-foreground">{label}</span>
      {children ?? <span className="font-medium">{value}</span>}
    </div>
  ),
)
LabeledValue.displayName = 'LabeledValue'

export { LabeledValue }

```

### `packages/registry-react/components/labeled-value/index.ts`

```ts
export { LabeledValue, type LabeledValueProps } from './labeled-value'

```

## lazy-image

- type: `registry:ui`
- description: Lazy-loaded image with aspect-ratio reservation, skeleton placeholder, fade-in transition, and error fallback. Composes loading="lazy" with IntersectionObserver for off-viewport hold and pairs with the skeleton primitive for the placeholder state.
- registry deps: `skeleton`

### `packages/registry-react/components/lazy-image/Img.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { Skeleton } from '@/components/ui/skeleton'

type Placeholder = 'skeleton' | 'none'

export interface ImgProps {
  src: string
  srcSet?: string
  sizes?: string
  alt: string
  aspectRatio?: string | number
  width?: string | number
  height?: string | number
  placeholder?: Placeholder
  cover?: boolean
  eager?: boolean
  fallback?: string
  transition?: boolean
  className?: string
  imgClassName?: string
  /** Override the default error fallback (React equivalent of the Vue
   *  `#fallback` named slot). */
  fallbackContent?: React.ReactNode
  onLoad?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
  onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void
}

function Img({
  src,
  srcSet,
  sizes,
  alt,
  aspectRatio,
  width,
  height,
  placeholder = 'skeleton',
  cover = true,
  eager = false,
  fallback,
  transition = true,
  className,
  imgClassName,
  fallbackContent,
  onLoad,
  onError,
}: ImgProps) {
  const rootRef = React.useRef<HTMLDivElement | null>(null)
  const [state, setState] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle')
  const [visible, setVisible] = React.useState(eager)

  const aspectStyle: React.CSSProperties = React.useMemo(() => {
    if (aspectRatio === undefined) return {}
    if (typeof aspectRatio === 'number') return { aspectRatio: String(aspectRatio) }
    return { aspectRatio }
  }, [aspectRatio])

  const sizeStyle: React.CSSProperties = React.useMemo(() => {
    const out: React.CSSProperties = {}
    if (width !== undefined) out.width = typeof width === 'number' ? `${width}px` : width
    if (height !== undefined) out.height = typeof height === 'number' ? `${height}px` : height
    return out
  }, [width, height])

  const containerStyle = { ...aspectStyle, ...sizeStyle }

  // Reset + (re)observe when the source changes.
  React.useEffect(() => {
    setState('idle')
    if (eager) {
      setVisible(true)
      return
    }
    setVisible(false)

    if (typeof IntersectionObserver === 'undefined' || !rootRef.current) {
      setVisible(true)
      return
    }

    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setVisible(true)
            observer.disconnect()
            return
          }
        }
      },
      { rootMargin: '200px' },
    )
    observer.observe(rootRef.current)
    return () => observer.disconnect()
  }, [src, eager])

  // Transition idle -> loading once the element becomes visible.
  React.useEffect(() => {
    if (visible) setState((s) => (s === 'idle' ? 'loading' : s))
  }, [visible])

  function handleLoad(e: React.SyntheticEvent<HTMLImageElement, Event>) {
    setState('loaded')
    onLoad?.(e)
  }

  function handleError(e: React.SyntheticEvent<HTMLImageElement, Event>) {
    setState('error')
    onError?.(e)
  }

  return (
    <div
      ref={rootRef}
      data-uipkge=""
      data-slot="lazy-image"
      className={cn('bg-muted relative overflow-hidden', className)}
      style={containerStyle}
    >
      {placeholder === 'skeleton' && state !== 'loaded' && state !== 'error' && (
        <Skeleton className="absolute inset-0 size-full rounded-none" />
      )}

      {visible && state !== 'error' && (
        <img
          src={src}
          srcSet={srcSet}
          sizes={sizes}
          alt={alt}
          loading={eager ? 'eager' : 'lazy'}
          decoding={eager ? 'sync' : 'async'}
          className={cn(
            'block size-full',
            cover ? 'object-cover' : 'object-contain',
            transition && 'transition-opacity duration-300',
            state === 'loaded' ? 'opacity-100' : 'opacity-0',
            imgClassName,
          )}
          onLoad={handleLoad}
          onError={handleError}
        />
      )}

      {state === 'error' &&
        (fallbackContent !== undefined ? (
          fallbackContent
        ) : fallback ? (
          <img
            src={fallback}
            alt={alt}
            className={cn('block size-full', cover ? 'object-cover' : 'object-contain', imgClassName)}
          />
        ) : (
          <div
            className="text-muted-foreground absolute inset-0 flex items-center justify-center text-xs"
            aria-label="Image failed to load"
          >
            <span>Image unavailable</span>
          </div>
        ))}
    </div>
  )
}

export { Img }

```

### `packages/registry-react/components/lazy-image/index.ts`

```ts
export { Img, type ImgProps } from './Img'

```

## line-chart

- type: `registry:ui`
- description: React mirror of @uipkge/line-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/line-chart/LineChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// LineChart
// ─────────────────────────────────────────────────────────────────────────

export interface LineChartProps {
  data: Record<string, any>[]
  xField?: string
  yField?: string | string[]
  height?: number | string
  option?: any
  className?: string
}

export const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(
  ({ data, xField = 'x', yField = 'y', height = 300, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const fields = Array.isArray(yField) ? yField : [yField]
      const xData = data.map((d) => d[xField])

      const series = fields.map((field, i) => ({
        name: field,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { width: 2 },
        itemStyle: { color: theme.colors[i % theme.colors.length] },
        data: data.map((d) => d[field]),
      }))

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        legend: userLegend,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      const baseLegend =
        fields.length > 1
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : undefined

      return {
        color: theme.colors,
        grid: mergeOptionBlock(
          { left: 16, right: 16, top: 24, bottom: fields.length > 1 ? 32 : 24, containLabel: true },
          userGrid,
        ),
        tooltip: mergeOptionBlock(
          {
            trigger: 'axis',
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend ?? {}, userLegend),
        xAxis: mergeOptionBlock(
          {
            type: 'category',
            data: xData,
            axisLine: { lineStyle: { color: theme.axisColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisTick: { show: false },
          },
          userXAxis,
        ),
        yAxis: mergeOptionBlock(
          {
            type: 'value',
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { show: false },
            axisTick: { show: false },
          },
          userYAxis,
        ),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, xField, yField, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
LineChart.displayName = 'LineChart'

```

### `packages/registry-react/components/charts/line-chart/index.ts`

```ts
export { LineChart, type LineChartProps } from './LineChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## link

- type: `registry:ui`
- description: Styled anchor with router integration. Renders an <a> for href, a router-link for to, and handles external links with target/rel. Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon slots, size variants, and asChild composition.
- npm deps: `class-variance-authority`, `@radix-ui/react-slot`

### `packages/registry-react/components/link/Link.tsx`

```tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from '@/lib/utils'
import { linkVariants, type LinkVariants } from './link.variants'

export interface LinkProps
  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'>,
    LinkVariants {
  /** External URL — renders an <a> with target/rel handling. */
  href?: string
  /** Router destination — renders an <a> since there is no vue-router in React.
   *  Use asChild to render a Next.js <Link> or router-aware anchor instead. */
  to?: string | object
  as?: React.ElementType
  /** Render the child element as the link (merging props/styles) instead of
   *  emitting an <a> — the React equivalent of reka-ui's as-child. Use it to
   *  give a Next.js <Link> full link styling. */
  asChild?: boolean
  /** Open external href in a new tab. Defaults to true for http(s) hrefs. */
  external?: boolean
  /** Leading icon — the React equivalent of the Vue #left slot. */
  left?: React.ReactNode
  /** Trailing icon — the React equivalent of the Vue #right slot. */
  right?: React.ReactNode
}

const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (
    {
      className,
      href,
      to,
      as: asProp = 'a',
      asChild = false,
      underline,
      color,
      size,
      disabled,
      external,
      left,
      right,
      children,
      ...props
    },
    ref,
  ) => {
    const isExternal =
      external !== undefined
        ? external
        : typeof href === 'string' && /^https?:\/\//.test(href)

    const resolvedHref = (to as string | undefined) ?? href

    const externalAttrs = isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {}

    const Comp = (asChild ? Slot : asProp) as React.ElementType

    return (
      <Comp
        data-uipkge=""
        data-slot="link"
        data-underline={underline}
        data-color={color}
        data-size={size}
        data-disabled={disabled ? '' : undefined}
        href={resolvedHref}
        aria-disabled={disabled ? 'true' : undefined}
        tabIndex={disabled ? -1 : undefined}
        className={cn(linkVariants({ underline, color, size }), disabled && 'pointer-events-none opacity-50', className)}
        ref={ref}
        {...externalAttrs}
        {...props}
      >
        {asChild ? (
          children
        ) : (
          <>
            {left}
            {children}
            {right}
          </>
        )}
      </Comp>
    )
  },
)
Link.displayName = 'Link'

export { Link }

```

### `packages/registry-react/components/link/link.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const linkVariants = cva(
  "inline-flex items-center gap-1.5 font-medium transition-colors duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      underline: {
        none: 'no-underline',
        always: 'underline underline-offset-4',
        hover: 'no-underline hover:underline hover:underline-offset-4',
      },
      color: {
        default: 'text-foreground hover:text-foreground/80',
        primary: 'text-primary hover:text-primary/80',
        muted: 'text-muted-foreground hover:text-foreground',
      },
      size: {
        sm: 'text-xs gap-1',
        default: 'text-sm',
        lg: 'text-base',
      },
    },
    defaultVariants: {
      underline: 'hover',
      color: 'primary',
      size: 'default',
    },
  },
)

export type LinkVariants = VariantProps<typeof linkVariants>

```

### `packages/registry-react/components/link/index.ts`

```ts
export { Link, type LinkProps } from './Link'
export { linkVariants, type LinkVariants } from './link.variants'

```

## list

- type: `registry:ui`
- description: Plain content list with `<ul>` / `<li>` semantics and a few preset gap and divider modes. Use for menu items, navigation lists, or any vertical sequence of small rows.

### `packages/registry-react/components/list/list.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

export interface ListProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'ul' | 'ol' | 'div'
}

const List = React.forwardRef<HTMLElement, ListProps>(
  ({ as: Comp = 'ul', className, children, ...props }, ref) => (
    <Comp
      ref={ref as never}
      className={cn('list-none space-y-1', className)}
      {...props}
    >
      {children}
    </Comp>
  ),
)
List.displayName = 'List'

export interface ListItemProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'li' | 'div' | 'a'
  active?: boolean
  disabled?: boolean
}

const ListItem = React.forwardRef<HTMLElement, ListItemProps>(
  ({ as: Comp = 'li', active, disabled, className, children, ...props }, ref) => (
    <Comp
      ref={ref as never}
      aria-disabled={disabled}
      className={cn(
        'hover:bg-accent focus-visible:bg-accent cursor-pointer rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none',
        active && 'bg-accent text-accent-foreground',
        disabled && 'pointer-events-none opacity-50',
        className,
      )}
      {...props}
    >
      {children}
    </Comp>
  ),
)
ListItem.displayName = 'ListItem'

export interface ListSubheaderProps extends React.LiHTMLAttributes<HTMLLIElement> {
  inset?: boolean
}

const ListSubheader = React.forwardRef<HTMLLIElement, ListSubheaderProps>(
  ({ inset, className, children, ...props }, ref) => (
    <li
      ref={ref}
      className={cn(
        'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase',
        inset && 'pl-8',
        className,
      )}
      {...props}
    >
      {children}
    </li>
  ),
)
ListSubheader.displayName = 'ListSubheader'

export { List, ListItem, ListSubheader }

```

### `packages/registry-react/components/list/index.ts`

```ts
export {
  List,
  ListItem,
  ListSubheader,
  type ListProps,
  type ListItemProps,
  type ListSubheaderProps,
} from './list'

```

## loading-bar

- type: `registry:ui`
- description: Top-of-viewport NProgress-style progress bar. Drive it imperatively via the useLoadingBar hook (start/finish/error/inc) or with value/onChange. Supports indeterminate mode, custom color and height, top/bottom anchoring, and an optional trailing spinner.

### `packages/registry-react/components/loading-bar/LoadingBar.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface LoadingBarHandle {
  start: (from?: number) => void
  finish: () => void
  error: () => void
  inc: (amount?: number) => void
  set: (value: number) => void
}

export interface LoadingBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  /** 0–100 progress value. Use with value/onChange or drive via the hook. */
  value?: number
  /** Bar color. Accepts any CSS color value. */
  color?: string
  /** Bar height in px. */
  height?: number
  /** Indeterminate sliding animation (ignores value). */
  indeterminate?: boolean
  /** Anchor the bar to the top or bottom of the viewport. */
  position?: 'top' | 'bottom'
  /** Show a spinner at the trailing edge of the bar. */
  spinner?: boolean
  /** Error state tints the bar. */
  error?: boolean
  /** Hide the bar entirely (e.g. when finished). */
  hidden?: boolean
  /** Fired with the new value on every internal update (v-model equivalent). */
  onValueChange?: (value: number) => void
  /** Fired when progress reaches 100. */
  onFinish?: () => void
}

const LoadingBar = React.forwardRef<LoadingBarHandle, LoadingBarProps>(
  (
    {
      value = 0,
      color = '',
      height = 3,
      indeterminate = false,
      position = 'top',
      spinner = false,
      error = false,
      hidden = false,
      className,
      onValueChange,
      onFinish,
      ...props
    },
    ref,
  ) => {
    const [internal, setInternal] = React.useState(value)
    const rafRef = React.useRef<number | null>(null)
    const onValueChangeRef = React.useRef(onValueChange)
    const onFinishRef = React.useRef(onFinish)
    onValueChangeRef.current = onValueChange
    onFinishRef.current = onFinish

    // Keep internal in sync when the controlled value prop changes.
    React.useEffect(() => {
      setInternal(value)
    }, [value])

    const set = React.useCallback((v: number) => {
      setInternal(v)
      onValueChangeRef.current?.(v)
      if (v >= 100) onFinishRef.current?.()
    }, [])

    const tick = React.useCallback(
      (target: number) => {
        if (rafRef.current) cancelAnimationFrame(rafRef.current)
        const step = () => {
          setInternal((prev) => {
            if (prev >= 100 || prev >= target) return prev
            const next = Math.min(target, prev + (100 - prev) * 0.02 + 0.5)
            onValueChangeRef.current?.(next)
            if (next >= 100) onFinishRef.current?.()
            if (next < target) rafRef.current = requestAnimationFrame(step)
            return next
          })
        }
        rafRef.current = requestAnimationFrame(step)
      },
      [],
    )

    const start = React.useCallback(
      (from = 20) => {
        set(from)
        tick(from)
      },
      [set, tick],
    )

    const inc = React.useCallback((amount = 10) => {
      setInternal((prev) => {
        const next = Math.min(99, prev + amount)
        onValueChangeRef.current?.(next)
        return next
      })
    }, [])

    const finish = React.useCallback(() => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
      set(100)
    }, [set])

    const fail = React.useCallback(() => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current)
      setInternal(100)
      // error prop drives the color; emit finish so callers can hide.
      onValueChangeRef.current?.(100)
      onFinishRef.current?.()
    }, [])

    React.useEffect(() => {
      return () => {
        if (rafRef.current) cancelAnimationFrame(rafRef.current)
      }
    }, [])

    React.useImperativeHandle(ref, () => ({ start, finish, error: fail, fail, inc, set }), [
      start,
      finish,
      fail,
      inc,
      set,
    ])

    const pct = Math.min(100, Math.max(0, internal))
    const barColor = color || (error ? 'var(--destructive)' : 'var(--primary)')
    const visible = !hidden && (indeterminate || internal > 0)

    return (
      <div
        data-uipkge=""
        data-slot="loading-bar"
        data-position={position}
        data-state={error ? 'error' : indeterminate ? 'indeterminate' : 'determinate'}
        className={cn(
          'pointer-events-none fixed left-0 z-[9999] w-full transition-opacity duration-300',
          position === 'top' ? 'top-0' : 'bottom-0',
          visible ? 'opacity-100' : 'opacity-0',
          className,
        )}
        style={{ height: `${height}px`, ...(props.style ?? {}) }}
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={indeterminate ? undefined : pct}
        aria-hidden={!visible}
        {...props}
      >
        {/* Track */}
        <div className="absolute inset-0 bg-transparent" />

        {indeterminate ? (
          // Indeterminate sliding bar
          <div
            data-slot="loading-bar-indeterminate"
            className="loading-bar-indeterminate absolute inset-y-0 w-1/3"
            style={{ backgroundColor: barColor }}
          >
            {spinner && (
              <div
                data-slot="loading-bar-spinner"
                className="absolute top-1/2 right-0 size-3 translate-x-1/2 -translate-y-1/2 animate-spin rounded-full border-2 border-current border-t-transparent"
                style={{ color: barColor }}
              />
            )}
          </div>
        ) : (
          // Determinate bar
          <div
            data-slot="loading-bar-fill"
            className="absolute inset-y-0 left-0 transition-[width] duration-200 ease-out"
            style={{ width: `${pct}%`, backgroundColor: barColor }}
          >
            {spinner && (
              <div
                data-slot="loading-bar-spinner"
                className="absolute top-1/2 right-0 size-3 translate-x-1/2 -translate-y-1/2 animate-spin rounded-full border-2 border-current border-t-transparent"
                style={{ color: barColor }}
              />
            )}
          </div>
        )}

        <style>{`
@media (prefers-reduced-motion: no-preference) {
  .loading-bar-indeterminate {
    animation: loading-bar-slide 1.2s ease-in-out infinite;
  }
}
@keyframes loading-bar-slide {
  0% { left: -33%; }
  100% { left: 100%; }
}
`}</style>
      </div>
    )
  },
)
LoadingBar.displayName = 'LoadingBar'

export { LoadingBar }

```

### `packages/registry-react/components/loading-bar/useLoadingBar.ts`

```ts
'use client'

import * as React from 'react'
import type { LoadingBarHandle } from './LoadingBar'

export type { LoadingBarHandle }

/**
 * Hook that drives a <LoadingBar> instance via a ref callback.
 *
 * Usage:
 *   const bar = useLoadingBar()
 *   <LoadingBar ref={bar.setRef} />
 *   bar.start()
 *   await fetch(...)
 *   bar.finish()
 */
export function useLoadingBar() {
  const handleRef = React.useRef<LoadingBarHandle | null>(null)
  const [loading, setLoading] = React.useState(false)
  const [isError, setIsError] = React.useState(false)

  const setRef = React.useCallback((el: LoadingBarHandle | null) => {
    handleRef.current = el
  }, [])

  function start(from = 20) {
    setIsError(false)
    setLoading(true)
    handleRef.current?.start(from)
  }

  function finish() {
    setLoading(false)
    handleRef.current?.finish()
  }

  function error() {
    setIsError(true)
    setLoading(false)
    handleRef.current?.error()
  }

  function inc(amount = 10) {
    handleRef.current?.inc(amount)
  }

  function set(value: number) {
    handleRef.current?.set(value)
  }

  return {
    setRef,
    loading,
    isError,
    start,
    finish,
    error,
    inc,
    set,
  }
}

```

### `packages/registry-react/components/loading-bar/index.ts`

```ts
export { LoadingBar, type LoadingBarHandle, type LoadingBarProps } from './LoadingBar'
export { useLoadingBar } from './useLoadingBar'

```

## login-01

- type: `registry:block`
- description: Centered login card. Email + password fields with a "Forgot password?" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.
- npm deps: `lucide-react`
- registry deps: `button`, `card`, `input`, `label`, `separator`

### `packages/registry-react/blocks/login-01/Login01.tsx`

```tsx
'use client'

import * as React from 'react'
const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

type OauthProvider = 'github' | 'google'

export interface Login01Props {
  onSubmit?: (payload: { email: string; password: string }) => void
  onForgotPassword?: () => void
  onSignUp?: () => void
  onOauth?: (provider: OauthProvider) => void
}

export function Login01({ onSubmit, onForgotPassword, onSignUp, onOauth }: Login01Props) {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    onSubmit?.({ email, password })
  }

  // ----- Optional: zod validation -----
  // HTML5 `type="email"` + `required` already block obviously bad input,
  // but for typed parsing + custom rules drop in zod. Add `zod` to your
  // project, uncomment, and route `handleSubmit` through `loginSchema.parse`.
  //
  // import { z } from 'zod'
  // const loginSchema = z.object({
  //   email: z.string().email('Enter a valid email'),
  //   password: z.string().min(1, 'Password is required'),
  // })
  // function handleSubmit(e: React.FormEvent) {
  //   e.preventDefault()
  //   const parsed = loginSchema.safeParse({ email, password })
  //   if (!parsed.success) {
  //     // surface parsed.error.flatten().fieldErrors however you want
  //     return
  //   }
  //   onSubmit?.(parsed.data)
  // }

  return (
    <div className="bg-muted/30 flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Welcome back</CardTitle>
          <CardDescription>Sign in to your account to continue.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                required
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <button
                  type="button"
                  className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  onClick={() => onForgotPassword?.()}
                >
                  Forgot password?
                </button>
              </div>
              <Input
                id="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                autoComplete="current-password"
                required
              />
            </div>
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>

          <div className="relative">
            <Separator />
            <span className="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase">
              Or continue with
            </span>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <Button type="button" variant="outline" onClick={() => onOauth?.('google')}>
              <svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
                <path
                  fill="#4285F4"
                  d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
                />
                <path
                  fill="#34A853"
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                />
                <path
                  fill="#FBBC05"
                  d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
                />
                <path
                  fill="#EA4335"
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
                />
              </svg>
              Google
            </Button>
            <Button type="button" variant="outline" onClick={() => onOauth?.('github')}>
              <Github className="size-4" />
              GitHub
            </Button>
          </div>
        </CardContent>
        <CardFooter className="justify-center">
          <p className="text-muted-foreground text-xs">
            Don&apos;t have an account?
            <button
              type="button"
              className="text-foreground ml-1 font-medium hover:underline"
              onClick={() => onSignUp?.()}
            >
              Sign up
            </button>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

```

## login-02

- type: `registry:block`
- description: Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.
- npm deps: `lucide-react`
- registry deps: `button`, `input`, `label`, `separator`

### `packages/registry-react/blocks/login-02/Login02.tsx`

```tsx
'use client'

import * as React from 'react'
import { ShieldCheck, Sparkles, Zap } from 'lucide-react'

const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

type OauthProvider = 'github' | 'google'

export interface Login02Props {
  onSubmit?: (payload: { email: string; password: string }) => void
  onForgotPassword?: () => void
  onSignUp?: () => void
  onOauth?: (provider: OauthProvider) => void
}

export function Login02({ onSubmit, onForgotPassword, onSignUp, onOauth }: Login02Props) {
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    onSubmit?.({ email, password })
  }

  // ----- Optional: zod validation -----
  // HTML5 `type="email"` + `required` already block obviously bad input,
  // but for typed parsing + custom rules drop in zod. Add `zod` to your
  // project, uncomment, and route `handleSubmit` through `loginSchema.parse`.
  //
  // import { z } from 'zod'
  // const loginSchema = z.object({
  //   email: z.string().email('Enter a valid email'),
  //   password: z.string().min(1, 'Password is required'),
  // })
  // function handleSubmit(e: React.FormEvent) {
  //   e.preventDefault()
  //   const parsed = loginSchema.safeParse({ email, password })
  //   if (!parsed.success) {
  //     // surface parsed.error.flatten().fieldErrors however you want
  //     return
  //   }
  //   onSubmit?.(parsed.data)
  // }

  return (
    <div className="grid min-h-svh lg:grid-cols-2">
      {/* Brand / marketing panel */}
      <aside
        className="border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex"
        style={{ background: 'color-mix(in oklch, var(--primary) 6%, var(--card))' }}
      >
        <div className="text-foreground relative z-[1] flex items-center gap-2.5">
          <div
            className="text-background font-display grid size-8 place-items-center rounded-md font-bold"
            style={{ background: 'var(--primary)' }}
          >
            U
          </div>
          <span className="font-display text-base font-semibold">Your Product</span>
        </div>

        <div className="relative z-[1] max-w-md">
          <p className="text-muted-foreground/80 mb-3 text-[11px] font-medium tracking-[0.14em] uppercase">
            Why teams switch
          </p>
          <h2 className="font-display text-3xl leading-tight font-semibold tracking-tight text-balance">
            Ship features in{' '}
            <em className="font-display font-semibold not-italic" style={{ color: 'var(--primary)' }}>
              hours
            </em>
            , not sprints.
          </h2>
          <p className="text-muted-foreground mt-4 text-sm leading-relaxed">
            Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead
            of reinventing the same UI.
          </p>

          <ul className="mt-8 space-y-3 text-sm">
            <li className="flex items-start gap-3">
              <Zap className="mt-0.5 size-4 shrink-0" style={{ color: 'var(--primary)' }} />
              <span className="text-foreground">One-command install, full source ownership</span>
            </li>
            <li className="flex items-start gap-3">
              <ShieldCheck className="mt-0.5 size-4 shrink-0" style={{ color: 'var(--primary)' }} />
              <span className="text-foreground">SOC 2 compliant, SSO out of the box</span>
            </li>
            <li className="flex items-start gap-3">
              <Sparkles className="mt-0.5 size-4 shrink-0" style={{ color: 'var(--primary)' }} />
              <span className="text-foreground">Themeable tokens, dark mode, RTL ready</span>
            </li>
          </ul>
        </div>

        <p className="text-muted-foreground/70 relative z-[1] text-xs">
          © {new Date().getFullYear()} Your Product, Inc.
        </p>
      </aside>

      {/* Form panel */}
      <div className="flex items-center justify-center p-6 sm:p-12">
        <div className="w-full max-w-sm space-y-6">
          <div className="space-y-1.5 text-center lg:text-left">
            <h1 className="font-display text-3xl font-semibold tracking-tight">Welcome back</h1>
            <p className="text-muted-foreground text-sm">Sign in to continue to your workspace.</p>
          </div>

          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                required
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <button
                  type="button"
                  className="text-muted-foreground hover:text-foreground text-xs transition-colors"
                  onClick={() => onForgotPassword?.()}
                >
                  Forgot?
                </button>
              </div>
              <Input
                id="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                autoComplete="current-password"
                required
              />
            </div>
            <Button type="submit" className="w-full">
              Sign in
            </Button>
          </form>

          <div className="relative">
            <Separator />
            <span className="bg-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase">
              Or
            </span>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <Button type="button" variant="outline" onClick={() => onOauth?.('google')}>
              <svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
                <path
                  fill="#4285F4"
                  d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
                />
                <path
                  fill="#34A853"
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                />
                <path
                  fill="#FBBC05"
                  d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
                />
                <path
                  fill="#EA4335"
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
                />
              </svg>
              Google
            </Button>
            <Button type="button" variant="outline" onClick={() => onOauth?.('github')}>
              <Github className="size-4" />
              GitHub
            </Button>
          </div>

          <p className="text-muted-foreground text-center text-xs">
            Don&apos;t have an account?
            <button
              type="button"
              className="text-foreground ml-1 font-medium hover:underline"
              onClick={() => onSignUp?.()}
            >
              Sign up
            </button>
          </p>
        </div>
      </div>
    </div>
  )
}

```

## logos-01

- type: `registry:block`
- description: Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.

### `packages/registry-react/blocks/logos-01/Logos01.tsx`

```tsx
// Sample logo set sourced from simpleicons.org (MIT). Swap these paths and
// labels for your own customer logos before shipping.
const LOGOS = [
  {
    label: 'Vercel',
    d: 'm12 1.608 12 20.784H0Z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

export function Logos01() {
  return (
    <section className="bg-muted/30 border-y">
      <div className="mx-auto max-w-6xl px-6 py-14">
        <p className="text-muted-foreground text-center text-xs font-medium tracking-widest uppercase">
          Trusted by teams at
        </p>
        <div className="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-6">
          {LOGOS.map((logo) => (
            <div
              key={logo.label}
              className="text-foreground/55 hover:text-foreground inline-flex items-center gap-2 transition-colors"
            >
              <svg viewBox="0 0 24 24" className="size-5 shrink-0" fill="currentColor" role="img" aria-label={logo.label}>
                <title>{logo.label}</title>
                <path d={logo.d} />
              </svg>
              <span className="text-base font-semibold tracking-tight">{logo.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

```

## logos-02

- type: `registry:block`
- description: Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.

### `packages/registry-react/blocks/logos-02/Logos02.tsx`

```tsx
// Single-row infinite marquee. The track is rendered twice back-to-back
// and translated -50% over the duration so the seam between the two
// copies is invisible.
const LOGOS = [
  { label: 'Vercel', d: 'm12 1.608 12 20.784H0Z' },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

export function Logos02() {
  return (
    <section className="bg-muted/30 border-y">
      <style>{`
        @keyframes logos-marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .logos02-track {
          animation: logos-marquee 30s linear infinite;
        }
        .group:hover .logos02-track {
          animation-play-state: paused;
        }
        @media (prefers-reduced-motion: reduce) {
          .logos02-track { animation: none !important; }
        }
      `}</style>
      <div className="mx-auto max-w-6xl px-6 py-14">
        <p className="text-muted-foreground mb-10 text-center text-xs font-medium tracking-widest uppercase">
          Trusted by teams at
        </p>

        {/* Marquee viewport: edges fade out via mask-image so logos appear/disappear softly */}
        <div
          className="group relative overflow-hidden"
          style={{
            maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)',
            WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)',
          }}
        >
          {/* Track: brands rendered twice so the -50% slide loops seamlessly */}
          <div className="logos02-track flex w-max gap-12 will-change-transform">
            {[...LOGOS, ...LOGOS].map((logo, i) => (
              <div
                key={`${logo.label}-${i}`}
                className="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
              >
                <svg viewBox="0 0 24 24" className="size-5 shrink-0" fill="currentColor" role="img" aria-label={logo.label}>
                  <title>{logo.label}</title>
                  <path d={logo.d} />
                </svg>
                <span className="text-base font-semibold tracking-tight">{logo.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

```

## logos-03

- type: `registry:block`
- description: Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.

### `packages/registry-react/blocks/logos-03/Logos03.tsx`

```tsx
// Three rows of customer logos sliding in alternating directions. Each
// row's track is rendered twice and translated by 50% so the loop has no
// visible seam; speeds are slightly offset between rows so the eye
// doesn't lock onto a single rhythm.

const ROW_1 = [
  { label: 'Vercel', d: 'm12 1.608 12 20.784H0Z' },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

const ROW_2 = [
  {
    label: 'React',
    d: 'M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z',
  },
  {
    label: 'Next.js',
    d: 'M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z',
  },
  {
    label: 'Vue.js',
    d: 'M24,1.61H14.06L12,5.16,9.94,1.61H0L12,22.39ZM12,14.08,5.16,2.23H9.59L12,6.41l2.41-4.18h4.43Z',
  },
  {
    label: 'Tailwind',
    d: 'M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z',
  },
  {
    label: 'Supabase',
    d: 'M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z',
  },
  {
    label: 'GitHub',
    d: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
  },
]

const ROW_3 = [
  {
    label: 'Anthropic',
    d: 'M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z',
  },
  {
    label: 'Sentry',
    d: 'M13.91 2.505c-.873-1.448-2.972-1.448-3.844 0L6.904 7.92a15.478 15.478 0 0 1 8.53 12.811h-2.221A13.301 13.301 0 0 0 5.784 9.814l-2.926 5.06a7.65 7.65 0 0 1 4.435 5.848H2.194a.365.365 0 0 1-.298-.534l1.413-2.402a5.16 5.16 0 0 0-1.614-.913L.296 19.275a2.182 2.182 0 0 0 .812 2.999 2.24 2.24 0 0 0 1.086.288h6.983a9.322 9.322 0 0 0-3.845-8.318l1.11-1.922a11.47 11.47 0 0 1 4.95 10.24h5.915a17.242 17.242 0 0 0-7.885-15.28l2.244-3.845a.37.37 0 0 1 .504-.13c.255.14 9.75 16.708 9.928 16.9a.365.365 0 0 1-.327.543h-2.287c.029.612.029 1.223 0 1.831h2.297a2.206 2.206 0 0 0 1.922-3.31z',
  },
  {
    label: 'PlanetScale',
    d: 'M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z',
  },
  {
    label: 'Render',
    d: 'M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507-1.388 0-2.691-.356-3.825-.979a.2024.2024 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75',
  },
  {
    label: 'Railway',
    d: 'M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
]

type Logo = { label: string; d: string }

function MarqueeRow({ logos, trackClass, prefix }: { logos: Logo[]; trackClass: string; prefix: string }) {
  return (
    <div className={`logos03-track ${trackClass} flex w-max gap-12 will-change-transform`}>
      {[...logos, ...logos].map((logo, i) => (
        <div
          key={`${prefix}-${i}`}
          className="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
        >
          <svg viewBox="0 0 24 24" className="size-5 shrink-0" fill="currentColor" role="img" aria-label={logo.label}>
            <title>{logo.label}</title>
            <path d={logo.d} />
          </svg>
          <span className="text-base font-semibold tracking-tight">{logo.label}</span>
        </div>
      ))}
    </div>
  )
}

export function Logos03() {
  return (
    <section className="bg-muted/30 border-y">
      <style>{`
        @keyframes logos-marquee-left {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        @keyframes logos-marquee-right {
          from { transform: translateX(-50%); }
          to { transform: translateX(0); }
        }
        .logos03-left-32 { animation: logos-marquee-left 32s linear infinite; }
        .logos03-right-26 { animation: logos-marquee-right 26s linear infinite; }
        .logos03-left-38 { animation: logos-marquee-left 38s linear infinite; }
        .group:hover .logos03-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .logos03-track { animation: none !important; }
        }
      `}</style>
      <div className="mx-auto max-w-6xl px-6 py-14">
        <p className="text-muted-foreground mb-10 text-center text-xs font-medium tracking-widest uppercase">
          Powering teams everywhere
        </p>

        <div
          className="group relative space-y-5 overflow-hidden"
          style={{
            maskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)',
            WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)',
          }}
        >
          {/* Row 1: scrolls left, 32s */}
          <MarqueeRow logos={ROW_1} trackClass="logos03-left-32" prefix="r1" />

          {/* Row 2: scrolls right, 26s */}
          <MarqueeRow logos={ROW_2} trackClass="logos03-right-26" prefix="r2" />

          {/* Row 3: scrolls left, 38s (slowest) */}
          <MarqueeRow logos={ROW_3} trackClass="logos03-left-38" prefix="r3" />
        </div>
      </div>
    </section>
  )
}

```

## map

- type: `registry:ui`
- description: A thin, theme-aware Mapbox GL JS wrapper (built on react-map-gl). Pass an access token and drop MapMarker / MapPopup / MapLayer into the children to build any map — fleet boards, journey maps, store locators. The base style follows light/dark automatically, an opt-in `muted` prop desaturates the basemap so overlaid data is the only colour, and `onCreated` hands you the raw map instance for custom layers and fitBounds. Import `mapbox-gl/dist/mapbox-gl.css` once in your app.
- npm deps: `react-map-gl`, `mapbox-gl`, `next-themes`

### `packages/registry-react/components/map/map.tsx`

```tsx
'use client'

/**
 * Map — a thin, theme-aware wrapper around react-map-gl's Mapbox `Map`. Pass an
 * `accessToken`; drop `<MapMarker>` / `<MapPopup>` / `<MapLayer>` (re-exported
 * from this package) or any react-map-gl child into the children to build any
 * kind of map.
 *
 * - The base style follows the app theme (light-v11 / dark-v11) unless you pass
 *   an explicit `mapStyle`.
 * - `muted` repaints the basemap to a quiet, desaturated canvas (graphite in
 *   dark, light-grey in light) so overlaid data is the only colour on the map —
 *   ideal for dashboards, fleet boards and journey maps.
 * - `onCreated` hands you the raw mapbox-gl Map instance for imperative work
 *   (custom layers, fitBounds, controls).
 *
 * Requires a Mapbox access token (https://account.mapbox.com).
 *
 * IMPORTANT: consumers must import Mapbox GL's stylesheet once (e.g. in their
 * root layout / app entry):  import 'mapbox-gl/dist/mapbox-gl.css'
 * It's intentionally not imported here so bundlers that can't resolve CSS from a
 * library file (some RSC/SSR setups) don't choke — own the import in your app.
 */
import * as React from 'react'
import type mapboxgl from 'mapbox-gl'
import Map, {
  NavigationControl as MapboxNavigationControl,
  type MapRef,
  type MapProps as MapboxMapProps,
} from 'react-map-gl/mapbox'
import { useTheme } from '@/lib/use-theme'
import { cn } from '@/lib/utils'

export interface MapProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Mapbox access token. */
  accessToken: string
  /** Override the base style. Defaults to a theme-aware light/dark style. */
  mapStyle?: string
  /** Initial [lng, lat]. */
  center?: [number, number]
  zoom?: number
  /** 'mercator' (flat) or 'globe'. */
  projection?: string
  /** Show the zoom/compass control. */
  navigation?: boolean
  /** Repaint the basemap to a quiet, desaturated canvas. */
  muted?: boolean
  /** Hands you the raw mapbox-gl Map instance once the style has loaded. */
  onCreated?: (map: mapboxgl.Map) => void
}

/** Desaturate the basemap to a quiet canvas. Each op is guarded — style layer
 *  ids drift between style versions and the wrong property for a layer type
 *  throws. */
function applyMuted(map: mapboxgl.Map, dark: boolean) {
  let styleLayers: any[]
  try {
    styleLayers = map.getStyle()?.layers ?? []
  } catch {
    return // style not loaded yet
  }
  const P = dark
    ? { land: 'rgb(23,24,29)', water: 'rgb(17,18,22)', use: 'rgb(31,32,38)', road: 'rgb(50,52,60)', label: 'rgb(150,152,165)', halo: 'rgb(23,24,29)', admin: 'rgb(50,52,60)' }
    : { land: 'rgb(246,247,249)', water: 'rgb(226,230,235)', use: 'rgb(238,240,243)', road: 'rgb(221,224,229)', label: 'rgb(120,124,134)', halo: 'rgb(246,247,249)', admin: 'rgb(213,216,221)' }
  for (const l of styleLayers) {
    const id = l.id
    try {
      if (id === 'background' || id === 'land') map.setPaintProperty(id, 'background-color', P.land)
      else if (/water/.test(id) && l.type === 'fill') map.setPaintProperty(id, 'fill-color', P.water)
      else if (/landuse|landcover|national-park/.test(id) && l.type === 'fill') map.setPaintProperty(id, 'fill-color', P.use)
      else if (/^road-(motorway|trunk|primary)/.test(id) && l.type === 'line') {
        map.setPaintProperty(id, 'line-color', P.road)
        map.setPaintProperty(id, 'line-opacity', 0.55)
      } else if (/^road-(secondary|tertiary|street|minor|service|path|pedestrian)/.test(id)) {
        map.setLayoutProperty(id, 'visibility', 'none')
      } else if (/poi|transit|airport|natural-point|water-point|waterway-label|building/.test(id)) {
        map.setLayoutProperty(id, 'visibility', 'none')
      } else if (/road-label|settlement-major-label|settlement-minor-label|state-label/.test(id) && l.type === 'symbol') {
        map.setPaintProperty(id, 'text-color', P.label)
        map.setPaintProperty(id, 'text-halo-color', P.halo)
        map.setPaintProperty(id, 'text-opacity', 0.6)
      } else if (id === 'admin-1-boundary' && l.type === 'line') {
        map.setPaintProperty(id, 'line-color', P.admin)
        map.setPaintProperty(id, 'line-opacity', 0.6)
      } else if (id === 'admin-1-boundary-bg') map.setPaintProperty(id, 'line-opacity', 0)
    } catch {
      /* skip */
    }
  }
}

const MapComponent = React.forwardRef<HTMLDivElement, MapProps>(
  (
    {
      className,
      accessToken,
      mapStyle,
      center = [0, 20],
      zoom = 1.4,
      projection = 'mercator',
      navigation = true,
      muted = false,
      onCreated,
      children,
      ...props
    },
    ref,
  ) => {
    const { resolvedTheme } = useTheme()
    const isDark = resolvedTheme === 'dark'

    const resolvedStyle = mapStyle ?? (isDark ? 'mapbox://styles/mapbox/dark-v11' : 'mapbox://styles/mapbox/light-v11')

    // Render the map only on the client — Mapbox needs the DOM, and rendering it
    // on the server would hydrate-mismatch. The bg-muted box is the SSR
    // placeholder.
    const [mounted, setMounted] = React.useState(false)
    React.useEffect(() => {
      setMounted(true)
    }, [])

    const mapRef = React.useRef<MapRef | null>(null)

    const onLoad = React.useCallback(() => {
      const map = mapRef.current?.getMap()
      if (!map) return
      try {
        ;(map as any).setProjection(projection)
      } catch {
        /* older api */
      }
      if (muted) applyMuted(map, isDark)
      onCreated?.(map)
    }, [projection, muted, isDark, onCreated])

    const onStyleData = React.useCallback(() => {
      const map = mapRef.current?.getMap()
      if (map && muted) applyMuted(map, isDark)
    }, [muted, isDark])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="map"
        className={cn('bg-muted size-full overflow-hidden', className)}
        {...props}
      >
        {mounted && (
          <Map
            ref={mapRef}
            mapboxAccessToken={accessToken}
            mapStyle={resolvedStyle}
            initialViewState={{ longitude: center[0], latitude: center[1], zoom }}
            attributionControl={false}
            style={{ width: '100%', height: '100%' }}
            onLoad={onLoad}
            onStyleData={onStyleData}
          >
            {navigation && <MapboxNavigationControl position="bottom-right" showCompass={false} />}
            {children}
          </Map>
        )}
      </div>
    )
  },
)
MapComponent.displayName = 'Map'

export { MapComponent as Map }
export type { MapboxMapProps }

// Re-exported here too (not just index.ts) so the toolkit resolves whether a
// consumer imports from the package dir or the file (shadcn rewrites to the
// file). Place these inside <Map>'s children.
export {
  Marker as MapMarker,
  Popup as MapPopup,
  Layer as MapLayer,
  Source as MapSource,
  NavigationControl as MapNavigationControl,
} from 'react-map-gl/mapbox'

```

### `packages/registry-react/components/map/index.ts`

```ts
export { Map } from './map'
export type { MapProps } from './map'

// Re-exported from react-map-gl under Map* names so consumers get the whole map
// toolkit from one import. Place these inside <Map>'s children — they read the
// map instance from the wrapping react-map-gl context.
export {
  Marker as MapMarker,
  Popup as MapPopup,
  Layer as MapLayer,
  Source as MapSource,
  NavigationControl as MapNavigationControl,
} from 'react-map-gl/mapbox'

```

### `packages/registry-react/components/map/map.css`

```css
/**
 * Map chrome — re-skins Mapbox GL's controls + popups to the design-system
 * tokens so they sit naturally on light and dark surfaces. Global (Mapbox
 * renders this chrome outside the component subtree). Import once, e.g. in your
 * root CSS: `@import './components/ui/map/map.css';`
 */
.mapboxgl-ctrl-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));
}
.mapboxgl-ctrl-group button {
  background: transparent;
}
.mapboxgl-ctrl-group button + button {
  border-top-color: var(--border);
}
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(var(--map-ctrl-invert, 0)) opacity(0.7);
}
.dark .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  filter: invert(1) opacity(0.7);
}
.mapboxgl-ctrl-attrib {
  background: color-mix(in oklab, var(--card) 80%, transparent);
  color: var(--muted-foreground);
}
.mapboxgl-ctrl-attrib a {
  color: var(--muted-foreground);
}
.mapboxgl-popup-content {
  padding: 8px 12px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 4px 12px rgb(0 0 0 / 0.12));
}
.mapboxgl-popup-close-button {
  color: var(--muted-foreground);
}
.mapboxgl-popup-tip {
  border-top-color: var(--popover);
  border-bottom-color: var(--popover);
}

```

## marquee

- type: `registry:ui`
- description: Continuously auto-scrolling content. Scrolls horizontally or vertically in any direction, with configurable speed, gap, repeat count for a seamless loop, pause-on-hover, and a hard pause prop. Respects prefers-reduced-motion.

### `packages/registry-react/components/marquee/Marquee.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Scroll axis. */
  orientation?: 'horizontal' | 'vertical'
  /** Travel direction. */
  direction?: 'left' | 'right' | 'up' | 'down'
  /** Animation duration in seconds. Lower = faster. */
  speed?: number
  /** Pause the animation on hover. */
  pauseOnHover?: boolean
  /** Gap between repeated content groups (px). */
  gap?: number
  /** Number of times the slot content is duplicated for a seamless loop. */
  repeat?: number
  /** Hard pause the animation. */
  paused?: boolean
}

/* ------------------------------------------------------------------ */
/* Marquee keyframes                                                   */
/* Ported from Marquee.vue's non-scoped <style> block. Injected as a   */
/* global <style> so the inline animationName can resolve the          */
/* @keyframes (scoped hashes would break the name lookup).             */
/* ------------------------------------------------------------------ */
const marqueeCss = `
@keyframes uipkge-marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes uipkge-marquee-y {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='marquee-track'] {
    animation: none !important;
  }
}
`

function MarqueeStyle() {
  return <style dangerouslySetInnerHTML={{ __html: marqueeCss }} />
}

const Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(
  (
    {
      className,
      orientation = 'horizontal',
      direction = 'left',
      speed = 20,
      pauseOnHover = false,
      gap = 16,
      repeat = 2,
      paused = false,
      style,
      children,
      ...props
    },
    ref,
  ) => {
    const isVertical = orientation === 'vertical'
    const reverse = direction === 'right' || direction === 'down'

    const containerClass = React.useMemo(
      () =>
        cn(
          'group flex overflow-hidden',
          isVertical ? 'flex-col' : 'flex-row',
          pauseOnHover ? 'hover:[&>[data-slot=marquee-track]]:[animation-play-state:paused]' : '',
          className,
        ),
      [isVertical, pauseOnHover, className],
    )

    const trackClass = React.useMemo(
      () => cn('flex shrink-0', isVertical ? 'flex-col' : 'flex-row', paused ? '![animation-play-state:paused]' : ''),
      [isVertical, paused],
    )

    const trackStyle = React.useMemo<React.CSSProperties>(
      () => ({
        gap: 'var(--marquee-gap)',
        animationName: isVertical ? 'uipkge-marquee-y' : 'uipkge-marquee-x',
        animationDuration: `${speed}s`,
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite',
        animationDirection: reverse ? 'reverse' : 'normal',
      }),
      [isVertical, speed, reverse],
    )

    const containerStyle = React.useMemo<React.CSSProperties>(
      () => ({ '--marquee-gap': `${gap}px`, ...style }) as React.CSSProperties,
      [gap, style],
    )

    return (
      <>
        <MarqueeStyle />
        <div
          ref={ref}
          data-uipkge=""
          data-slot="marquee"
          data-orientation={orientation}
          data-direction={direction}
          className={containerClass}
          style={containerStyle}
          {...props}
        >
          {Array.from({ length: repeat }, (_, i) => (
            <div
              key={i}
              data-slot="marquee-track"
              className={trackClass}
              style={trackStyle}
              aria-hidden={i > 1 ? true : undefined}
            >
              {children}
            </div>
          ))}
        </div>
      </>
    )
  },
)
Marquee.displayName = 'Marquee'

export { Marquee }

```

### `packages/registry-react/components/marquee/index.ts`

```ts
export { Marquee, type MarqueeProps } from './Marquee'

```

## masked-input

- type: `registry:ui`
- description: Input with a fixed format mask — phone numbers, credit cards, dates, postal codes. Pass a mask string (e.g. `(###) ###-####`) and the input enforces it as the user types. Customizable placeholder character and replacement marker.

### `packages/registry-react/components/masked-input/masked-input.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface MaskedInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange'> {
  /** Controlled masked value (e.g. `(212) 555-____`). */
  value?: string
  defaultValue?: string
  /** Mask template — `replacement` chars are editable, everything else is literal. */
  mask: string
  /** The character in `mask` that marks an editable slot. */
  replacement?: string
  /** Character shown for unfilled editable slots when `showMask` is on. */
  placeholderChar?: string
  /** Render the literal mask (separators + placeholders) even when empty. */
  showMask?: boolean
  /** Fires with the masked string on every edit. */
  onValueChange?: (value: string) => void
  /** Fires with the masked string once every editable slot is filled. */
  onComplete?: (value: string) => void
  className?: string
}

const MaskedInput = React.forwardRef<HTMLInputElement, MaskedInputProps>(
  (
    {
      value,
      defaultValue,
      mask,
      replacement = '#',
      placeholderChar = '_',
      showMask = true,
      onValueChange,
      onComplete,
      disabled,
      readOnly,
      className,
      ...rest
    },
    ref,
  ) => {
    const innerRef = React.useRef<HTMLInputElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLInputElement | null) => {
        innerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node
      },
      [ref],
    )

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<string>(defaultValue ?? '')
    const modelValue = isControlled ? value : internal

    // Positions in the mask that are editable (not separators).
    const editablePositions = React.useMemo(() => {
      const positions: number[] = []
      for (let i = 0; i < mask.length; i++) {
        if (mask[i] === replacement) positions.push(i)
      }
      return positions
    }, [mask, replacement])

    const maxLength = editablePositions.length

    const isSeparatorChar = React.useCallback(
      (char: string): boolean => {
        for (let i = 0; i < mask.length; i++) {
          if (mask[i] !== replacement && mask[i] === char) return true
        }
        return false
      },
      [mask, replacement],
    )

    const unmask = React.useCallback(
      (val: string): string => {
        let result = ''
        for (const char of val) {
          if (char !== placeholderChar && char !== ' ' && !isSeparatorChar(char)) result += char
        }
        return result
      },
      [placeholderChar, isSeparatorChar],
    )

    const applyMask = React.useCallback(
      (rawValue: string): string => {
        const chars = rawValue.split('')
        let result = ''
        let charIndex = 0
        for (let i = 0; i < mask.length; i++) {
          if (mask[i] === replacement) {
            if (charIndex < chars.length) {
              result += chars[charIndex]
              charIndex++
            } else if (showMask) {
              result += placeholderChar
            } else {
              break
            }
          } else {
            result += mask[i]
          }
        }
        return result
      },
      [mask, replacement, showMask, placeholderChar],
    )

    const getNextEditablePos = React.useCallback(
      (currentPos: number): number => {
        for (const pos of editablePositions) {
          if (pos >= currentPos) return pos
        }
        return editablePositions[editablePositions.length - 1] ?? mask.length
      },
      [editablePositions, mask.length],
    )

    const getPrevEditablePos = React.useCallback(
      (currentPos: number): number => {
        for (let i = editablePositions.length - 1; i >= 0; i--) {
          const p = editablePositions[i]
          if (p !== undefined && p < currentPos) return p
        }
        return editablePositions[0] ?? 0
      },
      [editablePositions],
    )

    const findRawIndexAtCursor = React.useCallback(
      (cursorPos: number): number => {
        let rawIndex = 0
        for (let i = 0; i < cursorPos && i < mask.length; i++) {
          if (mask[i] === replacement) rawIndex++
        }
        return rawIndex
      },
      [mask, replacement],
    )

    const findCursorPosFromRaw = React.useCallback(
      (rawIndex: number): number => {
        let count = 0
        for (let i = 0; i < mask.length; i++) {
          if (mask[i] === replacement) {
            if (count === rawIndex) return i
            count++
          }
        }
        return mask.length
      },
      [mask, replacement],
    )

    const emit = React.useCallback(
      (next: string) => {
        if (!isControlled) setInternal(next)
        onValueChange?.(next)
        if (unmask(next).length === maxLength) onComplete?.(next)
      },
      [isControlled, onValueChange, onComplete, unmask, maxLength],
    )

    const setCursor = React.useCallback((pos: number) => {
      // Defer to after the controlled re-render commits the new value.
      requestAnimationFrame(() => {
        innerRef.current?.setSelectionRange(pos, pos)
      })
    }, [])

    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
      const target = event.target
      const oldValue = modelValue ?? ''
      const newValue = target.value
      const cursorPos = target.selectionStart ?? 0

      const rawNew = unmask(newValue)
      const rawOld = unmask(oldValue)
      const clampedRaw = rawNew.slice(0, maxLength)
      const masked = applyMask(clampedRaw)

      let newCursorPos: number
      if (clampedRaw.length > rawOld.length) {
        const addedIndex = clampedRaw.length - 1
        newCursorPos = findCursorPosFromRaw(addedIndex) + 1
        newCursorPos = getNextEditablePos(newCursorPos)
      } else if (clampedRaw.length < rawOld.length) {
        newCursorPos = getPrevEditablePos(cursorPos) + 1
      } else {
        newCursorPos = cursorPos
      }

      emit(masked)
      setCursor(newCursorPos)
    }

    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
      const target = event.currentTarget
      const cursorPos = target.selectionStart ?? 0

      if (event.key === 'Backspace') {
        const raw = unmask(modelValue ?? '')
        const rawIndex = findRawIndexAtCursor(cursorPos)
        if (rawIndex > 0) {
          const newRaw = raw.slice(0, rawIndex - 1) + raw.slice(rawIndex)
          emit(applyMask(newRaw))
          setCursor(findCursorPosFromRaw(rawIndex - 1) + 1)
        }
        event.preventDefault()
      } else if (event.key === 'Delete') {
        const raw = unmask(modelValue ?? '')
        const rawIndex = findRawIndexAtCursor(cursorPos)
        if (rawIndex < raw.length) {
          const newRaw = raw.slice(0, rawIndex) + raw.slice(rawIndex + 1)
          emit(applyMask(newRaw))
          setCursor(findCursorPosFromRaw(rawIndex) + 1)
        }
        event.preventDefault()
      } else if (event.key === 'ArrowLeft') {
        const newPos = getPrevEditablePos(cursorPos)
        setCursor(newPos + 1)
        event.preventDefault()
      } else if (event.key === 'ArrowRight') {
        const newPos = getNextEditablePos(cursorPos + 1)
        setCursor(newPos + 1)
        event.preventDefault()
      }
    }

    function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
      if (!modelValue && showMask) emit(applyMask(''))
      const firstEditable = editablePositions[0] ?? 0
      setCursor(firstEditable + 1)
      rest.onFocus?.(event)
    }

    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
      event.preventDefault()
      const pasted = event.clipboardData?.getData('text') ?? ''
      const raw = unmask(modelValue ?? '')
      const cursorPos = innerRef.current?.selectionStart ?? 0
      const rawIndex = findRawIndexAtCursor(cursorPos)
      const newRaw = raw.slice(0, rawIndex) + unmask(pasted) + raw.slice(rawIndex)
      const clamped = newRaw.slice(0, maxLength)
      emit(applyMask(clamped))
      setCursor(findCursorPosFromRaw(Math.min(rawIndex + unmask(pasted).length, maxLength)) + 1)
    }

    const displayValue = !modelValue && !showMask ? '' : (modelValue ?? '')

    return (
      <input
        {...rest}
        ref={setRefs}
        value={displayValue}
        data-uipkge=""
        data-slot="masked-input"
        disabled={disabled}
        readOnly={readOnly}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onFocus={handleFocus}
        onPaste={handlePaste}
        className={cn(
          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
          className,
        )}
      />
    )
  },
)
MaskedInput.displayName = 'MaskedInput'

export { MaskedInput }

```

### `packages/registry-react/components/masked-input/index.ts`

```ts
export { MaskedInput, type MaskedInputProps } from './masked-input'

```

## mentions

- type: `registry:ui`
- description: Textarea with trigger-character autocomplete. Type a configured trigger (default @) to open a filtered popover; pick to insert. Static or async options.
- registry deps: `popover`

### `packages/registry-react/components/mentions/mentions.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { Popover, PopoverAnchor, PopoverContent } from '@/components/ui/popover'
import { getCaretRect, type CaretRect } from './caret-position'

export interface MentionOption {
  value: string
  label: string
  description?: string
  avatar?: string
  disabled?: boolean
}

export interface MentionsProps<O extends MentionOption = MentionOption> {
  /** Controlled textarea value. */
  value?: string
  /** Fires with the next textarea value on every input + on insert. */
  onValueChange?: (value: string) => void
  options?: O[]
  triggers?: string[]
  prefix?: string
  rows?: number
  loading?: boolean
  loadOptions?: (query: string, trigger: string) => Promise<O[]>
  format?: (option: O, trigger: string) => string
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  className?: string
  /** Fires when an option is committed into the text. */
  onSelect?: (option: O) => void
  /** Fires whenever the active mention query changes. */
  onSearch?: (payload: { trigger: string; query: string }) => void
}

function MentionsInner<O extends MentionOption = MentionOption>(
  {
    value = '',
    onValueChange,
    options = [] as unknown as O[],
    triggers = ['@'],
    prefix = '@',
    rows = 4,
    loading = false,
    loadOptions,
    format,
    placeholder = '',
    disabled = false,
    readOnly = false,
    className,
    onSelect,
    onSearch,
  }: MentionsProps<O>,
  ref: React.ForwardedRef<HTMLTextAreaElement>,
) {
  const innerRef = React.useRef<HTMLTextAreaElement | null>(null)
  const setRefs = React.useCallback(
    (node: HTMLTextAreaElement | null) => {
      innerRef.current = node
      if (typeof ref === 'function') ref(node)
      else if (ref) (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
    },
    [ref],
  )

  const [open, setOpen] = React.useState(false)
  const [activeTrigger, setActiveTrigger] = React.useState('')
  const [query, setQuery] = React.useState('')
  const [triggerIndex, setTriggerIndex] = React.useState(-1)
  const [highlightedIndex, setHighlightedIndex] = React.useState(0)
  const [asyncResults, setAsyncResults] = React.useState<O[]>([])
  const [isAsyncLoading, setIsAsyncLoading] = React.useState(false)
  const [caretRect, setCaretRect] = React.useState<CaretRect | null>(null)

  const filtered = React.useMemo<O[]>(() => {
    if (loadOptions) return asyncResults
    if (!query) return options
    const q = query.toLowerCase()
    return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
  }, [loadOptions, asyncResults, query, options])

  const totalLoading = loading || isAsyncLoading

  function findActiveMention(
    val: string,
    caret: number,
  ): { trigger: string; index: number; query: string } | null {
    for (let i = caret - 1; i >= 0; i--) {
      const ch = val[i]!
      if (triggers.includes(ch)) {
        const before = i === 0 ? '' : val[i - 1]!
        if (i === 0 || /\s/.test(before)) {
          return { trigger: ch, index: i, query: val.substring(i + 1, caret) }
        }
        return null
      }
      if (/\s/.test(ch)) return null
    }
    return null
  }

  const updateAnchor = React.useCallback(() => {
    if (!innerRef.current) return
    setCaretRect(getCaretRect(innerRef.current, innerRef.current.selectionStart ?? 0))
  }, [])

  const asyncToken = React.useRef(0)
  const runAsync = React.useCallback(
    async (trigger: string, q: string) => {
      if (!loadOptions) return
      const token = ++asyncToken.current
      setIsAsyncLoading(true)
      try {
        const results = await loadOptions(q, trigger)
        if (token === asyncToken.current) setAsyncResults(results)
      } finally {
        if (token === asyncToken.current) setIsAsyncLoading(false)
      }
    },
    [loadOptions],
  )

  const debounceTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)
  const scheduleAsync = React.useCallback(
    (trigger: string, q: string) => {
      if (debounceTimer.current) clearTimeout(debounceTimer.current)
      debounceTimer.current = setTimeout(() => runAsync(trigger, q), 200)
    },
    [runAsync],
  )

  React.useEffect(() => {
    return () => {
      if (debounceTimer.current) clearTimeout(debounceTimer.current)
    }
  }, [])

  function onInput(e: React.ChangeEvent<HTMLTextAreaElement>) {
    const ta = e.target
    onValueChange?.(ta.value)

    const match = findActiveMention(ta.value, ta.selectionStart ?? 0)
    if (match) {
      setOpen(true)
      setActiveTrigger(match.trigger)
      setTriggerIndex(match.index)
      setQuery(match.query)
      setHighlightedIndex(0)
      onSearch?.({ trigger: match.trigger, query: match.query })
      if (loadOptions) scheduleAsync(match.trigger, match.query)
      requestAnimationFrame(updateAnchor)
    } else {
      setOpen(false)
    }
  }

  function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
    if (!open || filtered.length === 0) return
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      setHighlightedIndex((v) => (v + 1) % filtered.length)
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      setHighlightedIndex((v) => (v - 1 + filtered.length) % filtered.length)
    } else if (e.key === 'Enter' || e.key === 'Tab') {
      e.preventDefault()
      const opt = filtered[highlightedIndex]
      if (opt && !opt.disabled) insert(opt)
    } else if (e.key === 'Escape') {
      e.preventDefault()
      setOpen(false)
    }
  }

  function defaultFormat(option: O, _trigger: string) {
    return `${prefix}${option.value} `
  }

  function insert(option: O) {
    const ta = innerRef.current
    if (!ta) return
    const caret = ta.selectionStart ?? 0
    const before = value.substring(0, triggerIndex)
    const after = value.substring(caret)
    const token = (format ?? defaultFormat)(option, activeTrigger)
    const next = before + token + after
    onValueChange?.(next)
    onSelect?.(option)
    setOpen(false)
    requestAnimationFrame(() => {
      const pos = before.length + token.length
      ta.focus()
      ta.setSelectionRange(pos, pos)
    })
  }

  const anchorStyle: React.CSSProperties = caretRect
    ? {
        position: 'fixed',
        top: `${caretRect.top + caretRect.height}px`,
        left: `${caretRect.left}px`,
        width: '0px',
        height: '0px',
        pointerEvents: 'none',
      }
    : { display: 'none' }

  return (
    <div className={cn('relative w-full', className)} data-uipkge="" data-slot="mentions">
      <textarea
        ref={setRefs}
        value={value}
        rows={rows}
        placeholder={placeholder}
        disabled={disabled}
        readOnly={readOnly}
        className="border-input bg-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
        onChange={onInput}
        onKeyDown={onKeyDown}
        onScroll={updateAnchor}
      />
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverAnchor asChild>
          <div style={anchorStyle} aria-hidden="true" />
        </PopoverAnchor>
        <PopoverContent
          align="start"
          sideOffset={4}
          className="w-64 p-1"
          onOpenAutoFocus={(e) => e.preventDefault()}
        >
          {totalLoading ? (
            <div className="text-muted-foreground px-2 py-3 text-sm">Loading...</div>
          ) : filtered.length === 0 ? (
            <div className="text-muted-foreground px-2 py-3 text-sm">No matches</div>
          ) : (
            <ul className="max-h-64 overflow-auto" role="listbox">
              {filtered.map((opt, i) => (
                <li
                  key={opt.value}
                  role="option"
                  aria-selected={i === highlightedIndex}
                  className={cn(
                    'flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm',
                    i === highlightedIndex && !opt.disabled ? 'bg-accent text-accent-foreground' : '',
                    opt.disabled ? 'cursor-not-allowed opacity-50' : '',
                  )}
                  onMouseEnter={() => setHighlightedIndex(i)}
                  onMouseDown={(e) => {
                    e.preventDefault()
                    if (!opt.disabled) insert(opt)
                  }}
                >
                  {opt.avatar && <img src={opt.avatar} alt="" className="size-6 rounded-full" />}
                  <div className="min-w-0 flex-1">
                    <div className="truncate">{opt.label}</div>
                    {opt.description && (
                      <div className="text-muted-foreground truncate text-xs">{opt.description}</div>
                    )}
                  </div>
                </li>
              ))}
            </ul>
          )}
        </PopoverContent>
      </Popover>
    </div>
  )
}

// forwardRef erases the generic; the cast restores the generic call signature so
// consumers can still get type inference on `options`/`onSelect`.
const Mentions = React.forwardRef(MentionsInner) as <O extends MentionOption = MentionOption>(
  props: MentionsProps<O> & { ref?: React.ForwardedRef<HTMLTextAreaElement> },
) => React.ReactElement

export { Mentions }

```

### `packages/registry-react/components/mentions/caret-position.ts`

```ts
const PROPERTIES_TO_COPY = [
  'direction',
  'boxSizing',
  'width',
  'height',
  'overflowX',
  'overflowY',
  'borderTopWidth',
  'borderRightWidth',
  'borderBottomWidth',
  'borderLeftWidth',
  'borderStyle',
  'paddingTop',
  'paddingRight',
  'paddingBottom',
  'paddingLeft',
  'fontStyle',
  'fontVariant',
  'fontWeight',
  'fontStretch',
  'fontSize',
  'fontSizeAdjust',
  'lineHeight',
  'fontFamily',
  'textAlign',
  'textTransform',
  'textIndent',
  'textDecoration',
  'letterSpacing',
  'wordSpacing',
  'tabSize',
  'whiteSpace',
  'wordBreak',
  'wordWrap',
] as const

export interface CaretRect {
  top: number
  left: number
  height: number
}

export function getCaretRect(textarea: HTMLTextAreaElement, position: number): CaretRect {
  const div = document.createElement('div')
  document.body.appendChild(div)

  const style = div.style
  const computed = window.getComputedStyle(textarea)

  style.position = 'absolute'
  style.visibility = 'hidden'
  style.whiteSpace = 'pre-wrap'
  style.wordWrap = 'break-word'
  style.top = '0'
  style.left = '0'

  for (const prop of PROPERTIES_TO_COPY) {
    ;(style as any)[prop] = (computed as any)[prop]
  }

  style.overflow = 'hidden'

  const text = textarea.value.substring(0, position)
  div.textContent = text

  const span = document.createElement('span')
  span.textContent = textarea.value.substring(position) || '.'
  div.appendChild(span)

  const spanRect = span.getBoundingClientRect()
  const divRect = div.getBoundingClientRect()
  const taRect = textarea.getBoundingClientRect()

  const result: CaretRect = {
    top: taRect.top + (spanRect.top - divRect.top) - textarea.scrollTop,
    left: taRect.left + (spanRect.left - divRect.left) - textarea.scrollLeft,
    height: spanRect.height,
  }

  document.body.removeChild(div)
  return result
}

```

### `packages/registry-react/components/mentions/index.ts`

```ts
export { Mentions, type MentionsProps, type MentionOption } from './mentions'

```

## menubar

- type: `registry:ui`
- description: Top-level menu bar — File / Edit / View — for desktop-style apps. Same primitives as Dropdown Menu but laid out horizontally and keyboard-navigable across siblings (left/right arrows).
- npm deps: `@radix-ui/react-menubar`, `lucide-react`

### `packages/registry-react/components/menubar/menubar.tsx`

```tsx
'use client'

import * as React from 'react'
import * as MenubarPrimitive from '@radix-ui/react-menubar'
import { Check, ChevronRight, Circle } from 'lucide-react'
import { cn } from '@/lib/utils'

const Menubar = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="menubar"
    className={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
    {...props}
  />
))
Menubar.displayName = MenubarPrimitive.Root.displayName

function MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
  return <MenubarPrimitive.Menu data-uipkge="" data-slot="menubar-menu" {...props} />
}

function MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>) {
  return <MenubarPrimitive.Group data-uipkge="" data-slot="menubar-group" {...props} />
}

function MenubarRadioGroup(props: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
  return <MenubarPrimitive.RadioGroup data-uipkge="" data-slot="menubar-radio-group" {...props} />
}

function MenubarSub(props: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
  return <MenubarPrimitive.Sub data-uipkge="" data-slot="menubar-sub" {...props} />
}

const MenubarPortal = MenubarPrimitive.Portal

const MenubarTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Trigger
    ref={ref}
    data-uipkge=""
    data-slot="menubar-trigger"
    className={cn(
      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
      className,
    )}
    {...props}
  />
))
MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName

const MenubarContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
  <MenubarPrimitive.Portal>
    <MenubarPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="menubar-content"
      align={align}
      alignOffset={alignOffset}
      sideOffset={sideOffset}
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
        className,
      )}
      {...props}
    />
  </MenubarPrimitive.Portal>
))
MenubarContent.displayName = MenubarPrimitive.Content.displayName

const MenubarItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
    inset?: boolean
    variant?: 'default' | 'destructive'
  }
>(({ className, inset, variant = 'default', ...props }, ref) => (
  <MenubarPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="menubar-item"
    data-inset={inset ? '' : undefined}
    data-variant={variant}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  />
))
MenubarItem.displayName = MenubarPrimitive.Item.displayName

const MenubarCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenubarPrimitive.CheckboxItem
    ref={ref}
    data-uipkge=""
    data-slot="menubar-checkbox-item"
    checked={checked}
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Check className="size-4" aria-hidden="true" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.CheckboxItem>
))
MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName

const MenubarRadioItem = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenubarPrimitive.RadioItem
    ref={ref}
    data-uipkge=""
    data-slot="menubar-radio-item"
    className={cn(
      "focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  >
    <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
      <MenubarPrimitive.ItemIndicator>
        <Circle className="size-2 fill-current" />
      </MenubarPrimitive.ItemIndicator>
    </span>
    {children}
  </MenubarPrimitive.RadioItem>
))
MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName

const MenubarLabel = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { inset?: boolean }
>(({ className, inset, ...props }, ref) => (
  <MenubarPrimitive.Label
    ref={ref}
    data-uipkge=""
    data-slot="menubar-label"
    data-inset={inset ? '' : undefined}
    className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
    {...props}
  />
))
MenubarLabel.displayName = MenubarPrimitive.Label.displayName

const MenubarSeparator = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Separator
    ref={ref}
    data-uipkge=""
    data-slot="menubar-separator"
    className={cn('bg-border -mx-1 my-1 h-px', className)}
    {...props}
  />
))
MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName

function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
  return (
    <span
      data-uipkge=""
      data-slot="menubar-shortcut"
      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
      {...props}
    />
  )
}

const MenubarSubTrigger = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & { inset?: boolean }
>(({ className, inset, children, ...props }, ref) => (
  <MenubarPrimitive.SubTrigger
    ref={ref}
    data-uipkge=""
    data-slot="menubar-sub-trigger"
    data-inset={inset ? '' : undefined}
    className={cn(
      'focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus-visible:ring-2 focus-visible:ring-inset data-[inset]:pl-8',
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto size-4" />
  </MenubarPrimitive.SubTrigger>
))
MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName

const MenubarSubContent = React.forwardRef<
  React.ElementRef<typeof MenubarPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <MenubarPrimitive.Portal>
    <MenubarPrimitive.SubContent
      ref={ref}
      data-uipkge=""
      data-slot="menubar-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  </MenubarPrimitive.Portal>
))
MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName

export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarLabel,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarGroup,
  MenubarPortal,
}

```

### `packages/registry-react/components/menubar/index.ts`

```ts
export {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarLabel,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarGroup,
  MenubarPortal,
} from './menubar'

```

## metrics-grid

- type: `registry:block`
- description: Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
- npm deps: `echarts`, `echarts-for-react`
- registry deps: `pie-chart`, `bar-chart`

### `packages/registry-react/blocks/metrics-grid/MetricsGrid.tsx`

```tsx
'use client'

// Six-tile KPI grid. Each tile renders a labeled KPI header (title +
// big number / percentage / count) above a small chart -- pie or
// horizontal bar -- that gives the breakdown.
//
// Per the registry's primitive-vs-block rule: tile shapes are spelled
// out inline as siblings. Different tiles use different chart types
// (donut, full pie, horizontal bar) -- those differences are the whole
// point of the layout, so they don't hide behind a wrapper.
import { PieChart, BarChart } from '@/components/ui/charts'

// --- KPI 1: status pie (e.g. successful / partially / error) ---
const totalRuns = 770
const runsByStatus = [
  { name: 'Successful', value: 638 },
  { name: 'Partial', value: 0 },
  { name: 'Error / Skipped', value: 132 },
]

// --- KPI 2: disposition split ---
const totalProcessed = 638
const dispositionSplit = [
  { name: 'Non-disputable', value: 168 },
  { name: 'Disputable', value: 470 },
]

// --- KPI 3: classification breakdown ---
const totalClassified = 638
const classification = [
  { name: 'Type A', value: 525 },
  { name: 'Type B', value: 113 },
]

// --- KPI 4: top reasons (horizontal bar) ---
const skipReasons = [
  { reason: 'CREDIT_NOTE', count: 11 },
  { reason: 'CUSTOMS_INSPECT', count: 5 },
  { reason: 'NEGATIVE_COST', count: 8 },
]
const totalSkipped = skipReasons.reduce((a, r) => a + r.count, 0)

// --- KPI 5: error reasons (horizontal bar) ---
const errorReasons = [
  { reason: 'INVALID_CUTOFF', count: 3 },
  { reason: 'NO_SHIPMENT_DATA', count: 20 },
  { reason: 'SELF_BILLING', count: 42 },
  { reason: 'MISSING_OBLIGATORY_FIELD', count: 2 },
  { reason: 'MISSING_OBLIGATORY_TIME', count: 4 },
  { reason: 'UNABLE_TO_CLASSIFY', count: 40 },
]
const totalErrors = errorReasons.reduce((a, r) => a + r.count, 0)

// --- KPI 6: workflow status ---
const openShare = 0.7602
const workflowStatus = [
  { name: 'Open', value: 485 },
  { name: 'Pending', value: 151 },
  { name: 'Closed', value: 2 },
]

const pieOption = {
  legend: { show: false },
  series: [
    {
      radius: ['0%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `${p.value}\n(${p.percent}%)`,
        fontSize: 11,
        color: '#fff',
        fontWeight: 600,
      },
      labelLine: { show: false },
    },
  ],
}

const donutOption = {
  legend: { show: false },
  series: [
    {
      radius: ['40%', '70%'],
      label: {
        show: true,
        formatter: (p: any) => `${p.value}\n(${p.percent}%)`,
        fontSize: 11,
        color: '#fff',
        fontWeight: 600,
      },
      labelLine: { show: false },
    },
  ],
}

const horizontalBarOption = {
  legend: { show: false },
  xAxis: { type: 'value' as const, axisLabel: { fontSize: 10 } },
  yAxis: { type: 'category' as const, axisLabel: { fontSize: 10 } },
  grid: { left: 16, right: 16, top: 8, bottom: 24, containLabel: true },
  series: [
    {
      type: 'bar' as const,
      barMaxWidth: 18,
      itemStyle: { borderRadius: [0, 3, 3, 0] },
    },
  ],
}

export function MetricsGrid() {
  return (
    <div className="space-y-4">
      <h2 className="text-primary text-[15px] font-semibold tracking-tight">Results Overview</h2>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {/* Tile 1: Runs by status (pie) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Runs by status</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{totalRuns} runs</div>
          <div className="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-1)' }} />
              Successful
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-4)' }} />
              Error / Skipped
            </span>
          </div>
          <PieChart data={runsByStatus} option={pieOption} height="220" />
        </article>

        {/* Tile 2: Disposition split (pie) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Disposition split</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{totalProcessed} processed</div>
          <div className="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-1)' }} />
              Non-disputable
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-3)' }} />
              Disputable
            </span>
          </div>
          <PieChart data={dispositionSplit} option={pieOption} height="220" />
        </article>

        {/* Tile 3: Classification (pie) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Classification</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{totalClassified} classified</div>
          <div className="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-1)' }} />
              Type A
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-3)' }} />
              Type B
            </span>
          </div>
          <PieChart data={classification} option={pieOption} height="220" />
        </article>

        {/* Tile 4: Skip reasons (horizontal bar) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Top skip reasons</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{totalSkipped} skipped</div>
          <div className="text-muted-foreground mb-3 text-[11px]">By trigger</div>
          <BarChart data={skipReasons} xField="reason" yField="count" option={horizontalBarOption} height="220" />
        </article>

        {/* Tile 5: Error reasons (horizontal bar) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Top error reasons</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{totalErrors} errors</div>
          <div className="text-muted-foreground mb-3 text-[11px]">By failure mode</div>
          <BarChart data={errorReasons} xField="reason" yField="count" option={horizontalBarOption} height="220" />
        </article>

        {/* Tile 6: Workflow status (donut + highlight) */}
        <article className="bg-card border-border rounded-lg border p-4">
          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Workflow status</h3>
          <div className="text-primary mt-1 mb-2 text-2xl font-semibold">{(openShare * 100).toFixed(2)}% open</div>
          <div className="text-muted-foreground mb-3 flex items-center gap-3 text-[11px]">
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-1)' }} />
              Open
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-5)' }} />
              Pending
            </span>
            <span className="inline-flex items-center gap-1.5">
              <span className="size-2 rounded-full" style={{ background: 'var(--chart-3)' }} />
              Closed
            </span>
          </div>
          <PieChart data={workflowStatus} option={donutOption} donut height="220" />
        </article>
      </div>
    </div>
  )
}

```

## motion-list

- type: `registry:style`
- description: Drop-in transition styles for sortable lists, kanban columns, and reorderable cards. The enter/leave/move class convention pairs with any list-animation layer that toggles `motion-list-*` classes — siblings reflow smoothly while items fade-and-scale on enter/leave. Leaving items are taken out of layout flow (position: absolute) so the parent collapses immediately instead of waiting for the leave fade. All four timings and the settle curve are CSS variables (`--motion-list-curve`, `--motion-list-duration-{enter,leave,move}`, `--motion-list-leave-width`) so consumers tune per-context with one line. Consumed by `@uipkge/board` by default; usable standalone for any reorderable list. Tiny — one .css file, zero JS.

### `packages/registry-react/bootstrap/motion-list/motion-list.css`

```css
/*
 * @uipkge/motion-list — drop-in transition styles for sortable
 * lists, kanban columns, reorderable cards.
 *
 * The class names follow the enter/leave/move convention (the same
 * shape Vue's <TransitionGroup> emits) so they pair with any list-
 * animation layer that toggles `*-enter-from` / `*-enter-active` /
 * `*-leave-to` / `*-leave-active` / `*-move` classes — e.g. a thin
 * React wrapper, react-transition-group, or AutoAnimate-style helper.
 *
 * The parent must be `position: relative` so leaving items can be
 * taken out of flow without escaping the column. The `enter` and
 * `move` animations share the same settle curve so a card moving
 * between two columns reads as one continuous motion.
 *
 * Tokens are exposed as CSS variables so consumers can per-context
 * override (e.g. quicker move for very short lists, slower for hero
 * boards). Override at any ancestor:
 *
 *   <div style={{ '--motion-list-duration-move': '240ms' }}> ... </div>
 *
 * Staged in this repo before promotion to the uipkge registry —
 * once published, consume via
 *   `shadcn add @uipkge/motion-list`.
 */

@theme inline {
  --motion-list-curve: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-list-duration-move: 320ms;
  --motion-list-duration-enter: 220ms;
  --motion-list-duration-leave: 220ms;
}

.motion-list-move,
.motion-list-enter-active,
.motion-list-leave-active {
  transition:
    transform var(--motion-list-duration-move) var(--motion-list-curve),
    opacity var(--motion-list-duration-enter) var(--motion-list-curve);
}

.motion-list-enter-from {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.motion-list-leave-to {
  opacity: 0;
  transform: scale(0.94);
}

/* Take leaving items out of flow so siblings reflow immediately —
 * the parent collapses smoothly while the leave fade completes.
 * Override `--motion-list-leave-width` when the parent has padding
 * that the absolute child would otherwise ignore. */
.motion-list-leave-active {
  position: absolute;
  width: var(--motion-list-leave-width, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .motion-list-move,
  .motion-list-enter-active,
  .motion-list-leave-active {
    transition: none;
  }
  .motion-list-enter-from,
  .motion-list-leave-to {
    opacity: 1;
    transform: none;
  }
}

```

## navigation-menu

- type: `registry:ui`
- description: Top-of-page horizontal navigation with hover/click triggered megamenus. Use for marketing sites and product navs that need rich content — featured links, mini-cards, and submenu columns.
- npm deps: `@radix-ui/react-navigation-menu`, `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/navigation-menu/navigation-menu.tsx`

```tsx
'use client'

import * as React from 'react'
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
import { ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import { navigationMenuTriggerStyle } from './navigation-menu.variants'

const NavigationMenu = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
    viewport?: boolean
  }
>(({ className, children, viewport = true, ...props }, ref) => (
  <NavigationMenuPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu"
    data-viewport={viewport}
    className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
    {...props}
  >
    {children}
    {viewport && <NavigationMenuViewport />}
  </NavigationMenuPrimitive.Root>
))
NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName

const NavigationMenuList = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.List
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-list"
    className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
    {...props}
  />
))
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName

const NavigationMenuItem = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-item"
    className={cn('relative', className)}
    {...props}
  />
))
NavigationMenuItem.displayName = NavigationMenuPrimitive.Item.displayName

const NavigationMenuTrigger = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <NavigationMenuPrimitive.Trigger
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-trigger"
    className={cn(navigationMenuTriggerStyle(), 'group', className)}
    {...props}
  >
    {children}
    <ChevronDown
      className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
      aria-hidden="true"
    />
  </NavigationMenuPrimitive.Trigger>
))
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName

const NavigationMenuContent = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Content
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-content"
    className={cn(
      'data-[motion^=from-]:motion-safe:animate-in data-[motion^=to-]:motion-safe:animate-out data-[motion^=from-]:motion-safe:fade-in data-[motion^=to-]:motion-safe:fade-out data-[motion=from-end]:motion-safe:slide-in-from-right-52 data-[motion=from-start]:motion-safe:slide-in-from-left-52 data-[motion=to-end]:motion-safe:slide-out-to-right-52 data-[motion=to-start]:motion-safe:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
      'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:motion-safe:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:motion-safe:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
      className,
    )}
    {...props}
  />
))
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName

const NavigationMenuLink = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Link
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-link"
    className={cn(
      "data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
      className,
    )}
    {...props}
  />
))
NavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName

const NavigationMenuIndicator = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
>(({ className, ...props }, ref) => (
  <NavigationMenuPrimitive.Indicator
    ref={ref}
    data-uipkge=""
    data-slot="navigation-menu-indicator"
    className={cn(
      'data-[state=visible]:motion-safe:animate-in data-[state=hidden]:motion-safe:animate-out data-[state=hidden]:motion-safe:fade-out data-[state=visible]:motion-safe:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
      className,
    )}
    {...props}
  >
    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
  </NavigationMenuPrimitive.Indicator>
))
NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName

const NavigationMenuViewport = React.forwardRef<
  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <div className="absolute top-full left-0 isolate z-50 flex justify-center">
    <NavigationMenuPrimitive.Viewport
      ref={ref}
      data-uipkge=""
      data-slot="navigation-menu-viewport"
      className={cn(
        'origin-top-center bg-popover text-popover-foreground data-[state=open]:motion-safe:animate-in data-[state=closed]:motion-safe:animate-out data-[state=closed]:motion-safe:zoom-out-95 data-[state=open]:motion-safe:zoom-in-90 relative left-[var(--radix-navigation-menu-viewport-left)] mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
        className,
      )}
      {...props}
    />
  </div>
))
NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
}

```

### `packages/registry-react/components/navigation-menu/navigation-menu.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const navigationMenuTriggerStyle = cva(
  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
)

```

### `packages/registry-react/components/navigation-menu/index.ts`

```ts
export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
} from './navigation-menu'

export { navigationMenuTriggerStyle } from './navigation-menu.variants'

```

## notifications-popover

- type: `registry:block`
- description: Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
- npm deps: `lucide-react`
- registry deps: `button`, `badge`, `popover`

### `packages/registry-react/blocks/notifications-popover/NotificationsPopover.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  UserPlus,
  Calendar,
  CreditCard,
  FileText,
  GraduationCap,
  Target,
  X,
  BellOff,
  Archive,
  type LucideIcon,
} from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

type NotificationCategory = 'hr' | 'payroll' | 'timeoff' | 'performance' | 'training' | 'system'

interface Notification {
  id: string
  title: string
  body: string
  category: NotificationCategory
  timestamp: Date
  read: boolean
  actionUrl?: string
  actor?: string
}

const categoryConfig: Record<NotificationCategory, { icon: LucideIcon; accent: string; bg: string }> = {
  hr: {
    icon: UserPlus,
    accent: 'bg-success',
    bg: 'bg-success/10 text-success',
  },
  payroll: {
    icon: CreditCard,
    accent: 'bg-info',
    bg: 'bg-info/10 text-info',
  },
  timeoff: {
    icon: Calendar,
    accent: 'bg-chart-3',
    bg: 'bg-chart-3/10 text-chart-3',
  },
  performance: {
    icon: Target,
    accent: 'bg-warning',
    bg: 'bg-warning/10 text-warning',
  },
  training: {
    icon: GraduationCap,
    accent: 'bg-primary',
    bg: 'bg-primary/10 text-primary',
  },
  system: {
    icon: FileText,
    accent: 'bg-muted-foreground',
    bg: 'bg-muted text-muted-foreground',
  },
}

const now = new Date()

const initialNotifications: Notification[] = [
  {
    id: '1',
    title: 'Time off approved',
    body: 'Your annual leave request for Mar 15-18 has been approved by Sarah Connor.',
    category: 'timeoff',
    timestamp: new Date(now.getTime() - 12 * 60 * 1000),
    read: false,
    actor: 'Sarah Connor',
  },
  {
    id: '2',
    title: 'New employee onboarded',
    body: 'Marcus Rivera has joined the Engineering team as Senior Developer.',
    category: 'hr',
    timestamp: new Date(now.getTime() - 45 * 60 * 1000),
    read: false,
    actor: 'Marcus Rivera',
  },
  {
    id: '3',
    title: 'Performance review due',
    body: 'Annual performance review for 3 direct reports is due by end of this week.',
    category: 'performance',
    timestamp: new Date(now.getTime() - 2 * 60 * 60 * 1000),
    read: false,
  },
  {
    id: '4',
    title: 'Payroll processed',
    body: 'March 2026 payroll has been processed successfully. 103 employees paid.',
    category: 'payroll',
    timestamp: new Date(now.getTime() - 5 * 60 * 60 * 1000),
    read: true,
  },
  {
    id: '5',
    title: 'Training enrollment open',
    body: 'New course available: "Leadership Fundamentals Q2". Enroll before Mar 20.',
    category: 'training',
    timestamp: new Date(now.getTime() - 8 * 60 * 60 * 1000),
    read: true,
  },
  {
    id: '6',
    title: 'Document requires signature',
    body: 'Updated Employee Handbook 2026 needs your acknowledgement.',
    category: 'system',
    timestamp: new Date(now.getTime() - 26 * 60 * 60 * 1000),
    read: true,
    actionUrl: '/documents',
  },
  {
    id: '7',
    title: 'Time off request pending',
    body: 'Alice Johnson requested sick leave for Mar 12. Awaiting your approval.',
    category: 'timeoff',
    timestamp: new Date(now.getTime() - 28 * 60 * 60 * 1000),
    read: true,
    actor: 'Alice Johnson',
  },
  {
    id: '8',
    title: 'Benefits enrollment closing',
    body: "Open enrollment period ends Mar 31. 12 employees haven't enrolled yet.",
    category: 'hr',
    timestamp: new Date(now.getTime() - 48 * 60 * 60 * 1000),
    read: true,
  },
]

const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())

function formatTime(date: Date): string {
  const diffMs = now.getTime() - date.getTime()
  const diffMin = Math.floor(diffMs / 60000)
  if (diffMin < 1) return 'Just now'
  if (diffMin < 60) return `${diffMin}m ago`
  const diffHrs = Math.floor(diffMin / 60)
  if (diffHrs < 24) return `${diffHrs}h ago`
  const diffDays = Math.floor(diffHrs / 24)
  if (diffDays === 1) return 'Yesterday'
  return `${diffDays}d ago`
}

const STYLE_ID = 'notifications-popover-styles'
const STYLE_CONTENT = `
.notification-panel {
  --scrollbar-size: 4px;
}
.notification-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
}
.notification-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.notification-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.notification-item {
  cursor: pointer;
  transition: background-color 0.15s ease;
  animation: notif-slide-in 0.25s ease both;
}
.notification-item:hover {
  background-color: var(--muted);
}
@keyframes notif-slide-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notification-scroll {
  position: relative;
}
.notification-scroll::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 24px;
  margin-top: -24px;
  background: linear-gradient(to bottom, transparent, var(--popover));
  pointer-events: none;
}
`

export interface NotificationsPopoverProps {
  /** Custom trigger. Receives the live unread count. */
  trigger?: (ctx: { unreadCount: number }) => React.ReactNode
}

export function NotificationsPopover({ trigger }: NotificationsPopoverProps) {
  // Inject scoped styles once.
  React.useEffect(() => {
    if (typeof document === 'undefined') return
    if (document.getElementById(STYLE_ID)) return
    const el = document.createElement('style')
    el.id = STYLE_ID
    el.textContent = STYLE_CONTENT
    document.head.appendChild(el)
  }, [])

  const [notifications, setNotifications] = React.useState<Notification[]>(initialNotifications)
  const [activeFilter, setActiveFilter] = React.useState<'all' | 'unread'>('all')
  const [isOpen, setIsOpen] = React.useState(false)

  const unreadCount = React.useMemo(() => notifications.filter((n) => !n.read).length, [notifications])

  const filteredNotifications = React.useMemo(() => {
    if (activeFilter === 'unread') {
      return notifications.filter((n) => !n.read)
    }
    return notifications
  }, [notifications, activeFilter])

  const groupedNotifications = React.useMemo(() => {
    const today = filteredNotifications.filter((n) => n.timestamp >= todayStart)
    const earlier = filteredNotifications.filter((n) => n.timestamp < todayStart)
    return { today, earlier }
  }, [filteredNotifications])

  function markAsRead(id: string) {
    setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n)))
  }

  function markAllRead() {
    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
  }

  function dismissNotification(id: string) {
    setNotifications((prev) => prev.filter((n) => n.id !== id))
  }

  function renderItem(n: Notification, animationDelay: number) {
    const Icon = categoryConfig[n.category].icon
    return (
      <div
        key={n.id}
        className="notification-item group relative"
        style={{ animationDelay: `${animationDelay}ms` }}
        onClick={() => markAsRead(n.id)}
      >
        <div
          className={[
            'absolute top-2 bottom-2 left-0 w-[3px] rounded-r-full transition-opacity',
            !n.read ? categoryConfig[n.category].accent : 'opacity-0',
          ].join(' ')}
        />

        <div className="flex gap-3 px-4 py-3">
          <div
            className={[
              'mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg',
              categoryConfig[n.category].bg,
            ].join(' ')}
          >
            <Icon className="size-4" />
          </div>

          <div className="min-w-0 flex-1">
            <div className="flex items-start justify-between gap-2">
              <p className={['text-[13px] leading-snug', !n.read ? 'font-semibold' : 'font-medium'].join(' ')}>
                {n.title}
              </p>
              <div className="flex shrink-0 items-center gap-1.5">
                <span className="text-muted-foreground text-[10px] whitespace-nowrap tabular-nums">
                  {formatTime(n.timestamp)}
                </span>
                {!n.read ? <span className="bg-primary size-1.5 shrink-0 rounded-full" /> : null}
              </div>
            </div>
            <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs leading-relaxed">{n.body}</p>
          </div>

          <button
            className="text-muted-foreground hover:text-foreground mt-0.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
            title="Dismiss"
            onClick={(e) => {
              e.stopPropagation()
              dismissNotification(n.id)
            }}
          >
            <X className="size-3.5" />
          </button>
        </div>
      </div>
    )
  }

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>{trigger ? trigger({ unreadCount }) : <span />}</PopoverTrigger>
      <PopoverContent
        align="end"
        sideOffset={8}
        className="notification-panel w-[380px] overflow-hidden rounded-lg border p-0 shadow-xl"
      >
        <div className="flex items-center justify-between px-4 pt-4 pb-3">
          <div className="flex items-center gap-2.5">
            <h3 className="text-sm font-semibold tracking-tight">Notifications</h3>
            {unreadCount > 0 ? (
              <Badge className="bg-primary/15 text-primary hover:bg-primary/15 h-5 rounded-full px-1.5 text-[10px] font-bold tabular-nums">
                {unreadCount}
              </Badge>
            ) : null}
          </div>
          {unreadCount > 0 ? (
            <Button
              variant="ghost"
              size="sm"
              className="text-muted-foreground hover:text-foreground -mr-1 h-7 px-2 text-xs"
              onClick={markAllRead}
            >
              Mark all read
            </Button>
          ) : null}
        </div>

        <div className="border-b px-4">
          <div className="flex gap-0">
            <button
              className={[
                'relative px-3 pb-2.5 text-xs font-medium transition-colors',
                activeFilter === 'all' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
              ].join(' ')}
              onClick={() => setActiveFilter('all')}
            >
              All
              {activeFilter === 'all' ? (
                <span className="bg-primary absolute right-0 bottom-0 left-0 h-[2px] rounded-t-full" />
              ) : null}
            </button>
            <button
              className={[
                'relative px-3 pb-2.5 text-xs font-medium transition-colors',
                activeFilter === 'unread' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground',
              ].join(' ')}
              onClick={() => setActiveFilter('unread')}
            >
              Unread
              {activeFilter === 'unread' ? (
                <span className="bg-primary absolute right-0 bottom-0 left-0 h-[2px] rounded-t-full" />
              ) : null}
            </button>
          </div>
        </div>

        <div className="notification-scroll max-h-[420px] overflow-y-auto">
          {filteredNotifications.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-14 text-center">
              <div className="bg-muted mb-3 rounded-full p-3">
                <BellOff className="text-muted-foreground size-5" />
              </div>
              <p className="text-sm font-medium">All caught up</p>
              <p className="text-muted-foreground mt-0.5 text-xs">
                No {activeFilter === 'unread' ? 'unread ' : ''}notifications
              </p>
            </div>
          ) : (
            <>
              {groupedNotifications.today.length > 0 ? (
                <>
                  <div className="px-4 pt-3 pb-1">
                    <span className="text-muted-foreground text-[10px] font-semibold tracking-widest uppercase">
                      Today
                    </span>
                  </div>
                  {groupedNotifications.today.map((n, index) => renderItem(n, index * 30))}
                </>
              ) : null}

              {groupedNotifications.earlier.length > 0 ? (
                <>
                  <div className="px-4 pt-3 pb-1">
                    <span className="text-muted-foreground text-[10px] font-semibold tracking-widest uppercase">
                      Earlier
                    </span>
                  </div>
                  {groupedNotifications.earlier.map((n, index) =>
                    renderItem(n, (groupedNotifications.today.length + index) * 30),
                  )}
                </>
              ) : null}
            </>
          )}
        </div>

        <div className="border-t px-4 py-2.5">
          <a
            href="#"
            className="text-muted-foreground hover:text-foreground flex items-center justify-center gap-1.5 text-xs transition-colors"
            onClick={() => setIsOpen(false)}
          >
            <Archive className="size-3" />
            View all notifications
          </a>
        </div>
      </PopoverContent>
    </Popover>
  )
}

```

## number-field

- type: `registry:ui`
- description: Numeric input with stepper buttons, min/max bounds, step size, and decimal precision. Use for quantities, prices, and any field that should be a number rather than free text.
- npm deps: `lucide-react`

### `packages/registry-react/components/number-field/number-field.tsx`

```tsx
'use client'

import * as React from 'react'
import { Minus, Plus } from 'lucide-react'
import { cn } from '@/lib/utils'

export type NumberFieldSize = 'small' | 'middle' | 'large'
export type NumberFieldStatus = 'error' | 'warning'
export type NumberFieldControlsPosition = 'default' | 'right'

export interface NumberFieldProps {
  /** Controlled value. `undefined` renders an empty field. */
  value?: number
  defaultValue?: number
  onValueChange?: (value: number | undefined) => void
  min?: number
  max?: number
  step?: number
  /** Fixed number of decimal digits in the formatted display. */
  precision?: number
  disabled?: boolean
  readOnly?: boolean
  size?: NumberFieldSize
  status?: NumberFieldStatus
  controlsPosition?: NumberFieldControlsPosition
  /** Enable Arrow/Page/Home/End keyboard stepping. */
  keyboard?: boolean
  /** Intl number-format options merged into the display formatter. */
  formatOptions?: Intl.NumberFormatOptions
  /** Custom display formatter — wins over `formatOptions`/`precision`. */
  formatter?: (value: number | undefined) => string
  /** Custom parser from the typed text back to a number. */
  parser?: (displayValue: string) => number | undefined
  prefix?: string
  suffix?: string
  placeholder?: string
  id?: string
  className?: string
  'aria-label'?: string
}

const decrementIncrementBase =
  'focus-visible:ring-ring inline-flex shrink-0 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-30'

function clamp(value: number, min?: number, max?: number) {
  let next = value
  if (min !== undefined) next = Math.max(min, next)
  if (max !== undefined) next = Math.min(max, next)
  return next
}

const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
  (
    {
      value,
      defaultValue,
      onValueChange,
      min,
      max,
      step = 1,
      precision,
      disabled,
      readOnly,
      size = 'middle',
      status,
      controlsPosition = 'default',
      keyboard = true,
      formatOptions,
      formatter,
      parser,
      prefix,
      suffix,
      placeholder,
      id,
      className,
      'aria-label': ariaLabel,
    },
    ref,
  ) => {
    const innerRef = React.useRef<HTMLInputElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLInputElement | null) => {
        innerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node
      },
      [ref],
    )

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<number | undefined>(defaultValue)
    const currentValue = isControlled ? value : internal

    const isRight = controlsPosition === 'right'

    const intlOptions = React.useMemo<Intl.NumberFormatOptions | undefined>(() => {
      if (precision !== undefined) {
        return { ...formatOptions, minimumFractionDigits: precision, maximumFractionDigits: precision }
      }
      return formatOptions
    }, [formatOptions, precision])

    const formatValue = React.useCallback(
      (val: number | undefined): string => {
        if (formatter) return formatter(val)
        if (val === undefined || Number.isNaN(val)) return ''
        if (intlOptions) return new Intl.NumberFormat(undefined, intlOptions).format(val)
        return String(val)
      },
      [formatter, intlOptions],
    )

    const [displayValue, setDisplayValue] = React.useState<string>(() => formatValue(currentValue))
    const [isUserTyping, setIsUserTyping] = React.useState(false)

    // Keep the display in sync with the value whenever the user isn't typing.
    React.useEffect(() => {
      if (!isUserTyping) setDisplayValue(formatValue(currentValue))
    }, [currentValue, formatValue, isUserTyping])

    const emit = React.useCallback(
      (next: number | undefined) => {
        if (!isControlled) setInternal(next)
        onValueChange?.(next)
      },
      [isControlled, onValueChange],
    )

    const stepBy = React.useCallback(
      (delta: number) => {
        if (disabled || readOnly) return
        const base = currentValue ?? 0
        const next = clamp(base + delta, min, max)
        emit(next)
        setIsUserTyping(false)
        setDisplayValue(formatValue(next))
      },
      [currentValue, disabled, readOnly, min, max, emit, formatValue],
    )

    const handleIncrease = (mult = 1) => stepBy(step * mult)
    const handleDecrease = (mult = 1) => stepBy(-step * mult)

    function commitValue() {
      setIsUserTyping(false)
      const raw = displayValue.trim()
      if (raw === '') {
        emit(undefined)
        setDisplayValue('')
        return
      }
      let num: number | undefined
      if (parser) num = parser(raw)
      else num = Number(raw)

      if (num !== undefined && !Number.isNaN(num)) {
        const next = clamp(num, min, max)
        emit(next)
        setDisplayValue(formatValue(next))
      } else {
        setDisplayValue(formatValue(currentValue))
      }
    }

    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
      if (event.key === 'ArrowUp') {
        if (keyboard) {
          event.preventDefault()
          handleIncrease()
        }
      } else if (event.key === 'ArrowDown') {
        if (keyboard) {
          event.preventDefault()
          handleDecrease()
        }
      } else if (event.key === 'PageUp') {
        if (keyboard) {
          event.preventDefault()
          handleIncrease(10)
        }
      } else if (event.key === 'PageDown') {
        if (keyboard) {
          event.preventDefault()
          handleDecrease(10)
        }
      } else if (event.key === 'Home') {
        if (keyboard && min !== undefined) {
          event.preventDefault()
          emit(min)
          setIsUserTyping(false)
          setDisplayValue(formatValue(min))
        }
      } else if (event.key === 'End') {
        if (keyboard && max !== undefined) {
          event.preventDefault()
          emit(max)
          setIsUserTyping(false)
          setDisplayValue(formatValue(max))
        }
      } else if (event.key === 'Enter') {
        commitValue()
      }
    }

    function handleWheel(event: React.WheelEvent<HTMLInputElement>) {
      if (event.currentTarget !== document.activeElement) return
      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
      if (event.deltaY > 0) handleDecrease()
      else handleIncrease()
    }

    const iconSize = size === 'small' ? 'h-3 w-3' : size === 'large' ? 'h-5 w-5' : 'h-4 w-4'

    const buttonPadding = !isRight
      ? size === 'small'
        ? 'p-1.5'
        : size === 'large'
          ? 'p-4'
          : 'p-3'
      : ''

    const inputSizeClasses =
      size === 'small'
        ? 'h-7 text-xs px-2 py-0.5'
        : size === 'large'
          ? 'h-11 text-base px-4 py-2'
          : 'h-9 text-sm px-3 py-1'

    const inputStatusClasses = !isRight
      ? status === 'error'
        ? 'border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 aria-invalid:border-destructive'
        : status === 'warning'
          ? 'border-[var(--warning)] focus-visible:ring-[var(--warning)]/20'
          : ''
      : ''

    const contentClasses = cn(
      'relative',
      isRight &&
        'border-input focus-within:ring-ring inline-grid grid-cols-[1fr_auto] grid-rows-[1fr_1fr] items-stretch overflow-hidden rounded-md border focus-within:ring-1',
    )

    const decrement = (
      <button
        type="button"
        data-uipkge=""
        data-slot="decrement"
        tabIndex={-1}
        aria-label="Decrease"
        disabled={disabled || readOnly || (min !== undefined && (currentValue ?? 0) <= min)}
        onClick={() => handleDecrease()}
        className={cn(
          decrementIncrementBase,
          !isRight && 'absolute top-1/2 left-0 -translate-y-1/2',
          buttonPadding,
          isRight && 'hover:bg-accent col-start-2 row-start-2 h-full w-auto rounded-none border-t border-l p-0 px-2',
        )}
      >
        <Minus className={iconSize} aria-hidden="true" />
      </button>
    )

    const increment = (
      <button
        type="button"
        data-uipkge=""
        data-slot="increment"
        tabIndex={-1}
        aria-label="Increase"
        disabled={disabled || readOnly || (max !== undefined && (currentValue ?? 0) >= max)}
        onClick={() => handleIncrease()}
        className={cn(
          decrementIncrementBase,
          !isRight && 'absolute top-1/2 right-0 -translate-y-1/2',
          buttonPadding,
          isRight && 'hover:bg-accent col-start-2 row-start-1 h-full w-auto rounded-none border-l p-0 px-2',
        )}
      >
        <Plus className={iconSize} aria-hidden="true" />
      </button>
    )

    const inputBlock = (
      <div
        data-uipkge=""
        data-slot="input"
        className={cn(
          'relative flex-1',
          isRight && 'col-span-1 row-span-2',
          // Non-right layout: pad the input to clear the overlaid steppers.
          !isRight && '[&>input]:pl-5 [&>input]:pr-5',
        )}
      >
        {prefix && (
          <span className="text-muted-foreground pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-sm">
            {prefix}
          </span>
        )}
        <input
          id={id}
          ref={setRefs}
          value={displayValue}
          type="text"
          role="spinbutton"
          aria-label={ariaLabel}
          aria-valuenow={currentValue}
          aria-valuemin={min}
          aria-valuemax={max}
          aria-invalid={status === 'error' ? true : undefined}
          inputMode={precision !== undefined ? 'decimal' : 'numeric'}
          disabled={disabled}
          readOnly={readOnly}
          placeholder={placeholder}
          autoComplete="off"
          autoCorrect="off"
          spellCheck={false}
          aria-roledescription="Number field"
          onFocus={() => setIsUserTyping(true)}
          onChange={(e) => setDisplayValue(e.target.value)}
          onBlur={commitValue}
          onKeyDown={handleKeyDown}
          onWheel={handleWheel}
          className={cn(
            'placeholder:text-muted-foreground w-full bg-transparent text-center shadow-sm transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50',
            !isRight && 'border-input focus-visible:ring-ring rounded-md border focus-visible:ring-1',
            isRight && 'rounded-none border-0 focus-visible:ring-0',
            prefix && 'pl-6',
            suffix && 'pr-6',
            inputSizeClasses,
            inputStatusClasses,
          )}
        />
        {suffix && (
          <span className="text-muted-foreground pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-sm">
            {suffix}
          </span>
        )}
      </div>
    )

    return (
      <div data-uipkge="" data-slot="number-field" className={cn('inline-flex', className)}>
        <div className={contentClasses}>
          {decrement}
          {inputBlock}
          {increment}
        </div>
      </div>
    )
  },
)
NumberField.displayName = 'NumberField'

export { NumberField }

```

### `packages/registry-react/components/number-field/index.ts`

```ts
export {
  NumberField,
  type NumberFieldProps,
  type NumberFieldSize,
  type NumberFieldStatus,
  type NumberFieldControlsPosition,
} from './number-field'

```

## organization-chart

- type: `registry:ui`
- description: Organization hierarchy visualization with a tree of nodes (name, title, avatar). Expand/collapse branches, top-down or left-right direction, connector lines, optional zoom/pan controls, node click events, and a customizable node render prop.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/organization-chart/OrganizationChart.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { organizationChartVariants } from './organization-chart.variants'
import { OrgChartNode } from './OrgChartNode'
import type { OrgNode } from './types'
import './organization-chart.css'

export interface OrganizationChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
  data: OrgNode
  direction?: 'top-down' | 'left-right'
  defaultExpanded?: boolean
  showConnectors?: boolean
  zoomable?: boolean
  onNodeClick?: (node: OrgNode) => void
  onToggle?: (node: OrgNode, expanded: boolean) => void
  renderNode?: (node: OrgNode) => React.ReactNode
}

function collectIds(node: OrgNode, acc: string[] = []): string[] {
  acc.push(node.id)
  if (node.children) for (const c of node.children) collectIds(c, acc)
  return acc
}

const OrganizationChart = React.forwardRef<HTMLDivElement, OrganizationChartProps>(
  (
    {
      data,
      direction = 'top-down',
      defaultExpanded = true,
      showConnectors = true,
      zoomable = false,
      className,
      onNodeClick,
      onToggle,
      renderNode,
      ...props
    },
    ref,
  ) => {
    const [expanded, setExpanded] = React.useState<Set<string>>(() => {
      if (defaultExpanded) return new Set(collectIds(data))
      return new Set([data.id])
    })
    const [zoom, setZoom] = React.useState(1)

    // Re-sync expanded state when data or defaultExpanded changes
    React.useEffect(() => {
      if (defaultExpanded) {
        setExpanded(new Set(collectIds(data)))
      } else {
        setExpanded(new Set([data.id]))
      }
    }, [data, defaultExpanded])

    function toggleNode(node: OrgNode) {
      setExpanded((prev) => {
        const next = new Set(prev)
        if (next.has(node.id)) next.delete(node.id)
        else next.add(node.id)
        onToggle?.(node, next.has(node.id))
        return next
      })
    }

    function isExpanded(node: OrgNode): boolean {
      return expanded.has(node.id)
    }

    function expandAll() {
      setExpanded(new Set(collectIds(data)))
    }

    function collapseAll() {
      setExpanded(new Set([data.id]))
    }

    function zoomIn() {
      setZoom((z) => Math.min(2, z + 0.1))
    }

    function zoomOut() {
      setZoom((z) => Math.max(0.5, z - 0.1))
    }

    function resetZoom() {
      setZoom(1)
    }

    // Imperative handle mirroring Vue's defineExpose
    React.useImperativeHandle(ref, () => ({
      expandAll,
      collapseAll,
      zoomIn,
      zoomOut,
      resetZoom,
    }))

    const containerStyle = React.useMemo(
      () => ({
        transform: `scale(${zoom})`,
        transformOrigin: 'top center',
      }),
      [zoom],
    )

    return (
      <div
        data-uipkge=""
        data-slot="organization-chart"
        data-direction={direction}
        className={cn(organizationChartVariants(), className)}
        {...props}
      >
        {zoomable && (
          <div className="border-border flex items-center gap-2 border-b px-3 py-2">
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md text-sm"
              aria-label="Zoom out"
              onClick={zoomOut}
            >
              −
            </button>
            <span className="text-muted-foreground w-12 text-center text-xs tabular-nums">
              {Math.round(zoom * 100)}%
            </span>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md text-sm"
              aria-label="Zoom in"
              onClick={zoomIn}
            >
              +
            </button>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground hover:bg-accent ml-1 rounded-md px-2 py-1 text-xs"
              aria-label="Reset zoom"
              onClick={resetZoom}
            >
              Reset
            </button>
            <div className="ml-auto flex gap-1">
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md px-2 py-1 text-xs"
                onClick={expandAll}
              >
                Expand all
              </button>
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md px-2 py-1 text-xs"
                onClick={collapseAll}
              >
                Collapse all
              </button>
            </div>
          </div>
        )}
        <div className="overflow-auto p-4">
          <div style={containerStyle} className="transition-transform duration-200">
            <OrgChartNode
              node={data}
              depth={0}
              isRoot
              direction={direction}
              showConnectors={showConnectors}
              isExpanded={isExpanded}
              toggle={toggleNode}
              onNodeClick={onNodeClick}
              renderNode={renderNode}
            />
          </div>
        </div>
      </div>
    )
  },
)
OrganizationChart.displayName = 'OrganizationChart'

export { OrganizationChart }

```

### `packages/registry-react/components/organization-chart/OrgChartNode.tsx`

```tsx
import * as React from 'react'
import { ChevronDown, ChevronRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { OrgNode } from './types'

export interface OrgChartNodeProps {
  node: OrgNode
  depth: number
  isRoot?: boolean
  direction?: 'top-down' | 'left-right'
  showConnectors?: boolean
  isExpanded: (node: OrgNode) => boolean
  toggle: (node: OrgNode) => void
  onNodeClick?: (node: OrgNode) => void
  renderNode?: (node: OrgNode) => React.ReactNode
}

function initials(name: string): string {
  return name.split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase()
}

const OrgChartNode = React.forwardRef<HTMLDivElement, OrgChartNodeProps>(
  (
    { node, depth, isRoot = false, direction = 'top-down', showConnectors = true, isExpanded, toggle, onNodeClick, renderNode },
    ref,
  ) => {
    const open = isExpanded(node)
    const hasChildren = !!node.children?.length
    const isHorizontal = direction === 'left-right'
    const childCount = node.children?.length ?? 0
    const isOnlyChild = childCount <= 1

    function onClick() {
      onNodeClick?.(node)
    }

    function onToggle(e: React.MouseEvent) {
      e.stopPropagation()
      if (hasChildren) toggle(node)
    }

    const cardClass = cn(
      'group relative flex w-52 cursor-pointer flex-col rounded-lg border p-3 shadow-xs transition-colors',
      'border-border bg-card hover:bg-accent/50',
      isRoot && 'ring-2 ring-primary/20',
    )

    const avatarBlock = (
      <>
        {node.avatar ? (
          <img
            src={node.avatar}
            alt={node.name}
            className="border-border size-10 shrink-0 rounded-full border object-cover"
          />
        ) : (
          <div className="bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-full text-xs font-semibold">
            {initials(node.name)}
          </div>
        )}
        <div className="min-w-0 flex-1">
          <p className="truncate text-sm font-semibold">{node.name}</p>
          {node.title && <p className="text-muted-foreground truncate text-xs">{node.title}</p>}
        </div>
        {hasChildren && (
          <button
            type="button"
            className="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-5 shrink-0 items-center justify-center rounded"
            aria-expanded={open}
            aria-label={open ? 'Collapse' : 'Expand'}
            onClick={onToggle}
          >
            {open ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}
          </button>
        )}
      </>
    )

    // ══ Top-down (vertical) layout ══
    if (!isHorizontal) {
      return (
        <div ref={ref} className="org-v" data-root={isRoot ? '' : undefined}>
          {/* Node card */}
          <div className="org-v-card">
            <div className={cardClass} onClick={onClick}>
              <div className="flex items-center gap-2.5">
                {avatarBlock}
              </div>
              {renderNode?.(node)}
            </div>
          </div>

          {/* Children */}
          {hasChildren && open && (
            <div className="org-v-children">
              {showConnectors && <div className="org-v-line-down" />}
              <div className="org-v-children-row" data-single={isOnlyChild ? '' : undefined}>
                {showConnectors && !isOnlyChild && <div className="org-v-line-across" />}
                {node.children!.map((child) => (
                  <OrgChartNode
                    key={child.id}
                    node={child}
                    depth={depth + 1}
                    isRoot={false}
                    direction={direction}
                    showConnectors={showConnectors}
                    isExpanded={isExpanded}
                    toggle={toggle}
                    onNodeClick={onNodeClick}
                    renderNode={renderNode}
                  />
                ))}
              </div>
            </div>
          )}
        </div>
      )
    }

    // ══ Left-right (horizontal) layout ══
    return (
      <div ref={ref} className="org-h" data-root={isRoot ? '' : undefined}>
        <div className="flex items-start">
          {/* Node card */}
          <div className="org-h-card">
            <div className={cardClass} onClick={onClick}>
              <div className="flex items-center gap-2.5">
                {avatarBlock}
              </div>
              {renderNode?.(node)}
            </div>
          </div>

          {/* Children */}
          {hasChildren && open && (
            <>
              {showConnectors && <div className="org-h-line-right" />}
              <div className="org-h-children">
                {node.children!.map((child) => (
                  <OrgChartNode
                    key={child.id}
                    node={child}
                    depth={depth + 1}
                    isRoot={false}
                    direction={direction}
                    showConnectors={showConnectors}
                    isExpanded={isExpanded}
                    toggle={toggle}
                    onNodeClick={onNodeClick}
                    renderNode={renderNode}
                  />
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    )
  },
)
OrgChartNode.displayName = 'OrgChartNode'

export { OrgChartNode }

```

### `packages/registry-react/components/organization-chart/organization-chart.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const organizationChartVariants = cva('bg-background rounded-lg border')

export type OrganizationChartVariants = VariantProps<typeof organizationChartVariants>

```

### `packages/registry-react/components/organization-chart/organization-chart.css`

```css
/* ══ Vertical (top-down) layout ══ */
.org-v {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line from horizontal bar up to each child card */
.org-v:not([data-root]) .org-v-card {
  position: relative;
  padding-top: 20px;
}
.org-v:not([data-root]) .org-v-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 20px;
  background: var(--color-border, hsl(var(--border)));
}

.org-v-children {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vertical line from parent down to the sibling bar */
.org-v-line-down {
  width: 1px;
  height: 20px;
  background: var(--color-border, hsl(var(--border)));
}

.org-v-children-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  position: relative;
  padding-top: 20px;
}

/* Horizontal bar: spans from the center of the first child to the center
   of the last child. We use a full-width bar with the first/last child
   vertical lines connecting to it. The bar itself is positioned using
   the half-width of the first and last cards (w-52 = 208px, half = 104px). */
.org-v-line-across {
  position: absolute;
  top: 0;
  left: 104px; /* half of w-52 (208px) — center of first child */
  right: 104px; /* half of w-52 — center of last child */
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
}

/* When single child, no horizontal bar needed — just the vertical line */
.org-v-children-row[data-single] .org-v-line-across {
  display: none;
}

/* ══ Horizontal (left-right) layout ══ */
.org-h {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Horizontal line from parent to children column */
.org-h-line-right {
  width: 20px;
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
  margin-top: 40px;
  flex-shrink: 0;
}

.org-h-children {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* Vertical line connecting siblings in horizontal mode */
.org-h-children::before {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--color-border, hsl(var(--border)));
}

/* Horizontal line from vertical bar to each child */
.org-h:not([data-root]) .org-h-card {
  position: relative;
  padding-left: 20px;
}
.org-h:not([data-root]) .org-h-card::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--color-border, hsl(var(--border)));
}

```

### `packages/registry-react/components/organization-chart/types.ts`

```ts
export interface OrgNode {
  id: string
  name: string
  title?: string
  avatar?: string
  department?: string
  children?: OrgNode[]
  [key: string]: unknown
}

```

### `packages/registry-react/components/organization-chart/index.ts`

```ts
export { OrganizationChart, type OrganizationChartProps } from './OrganizationChart'
export { OrgChartNode, type OrgChartNodeProps } from './OrgChartNode'
export { organizationChartVariants, type OrganizationChartVariants } from './organization-chart.variants'
export type { OrgNode } from './types'

```

## overlay-scroll

- type: `registry:ui`
- description: Slack-style overlay scrollbar. Hides the native scrollbar so the scrolled content uses the full container width (no gutter reservation), then draws a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll via Pointer Events covers mouse, touch, and pen. Vertical only. The component does not enforce a height — give it a bounded height via the parent (`flex-1 min-h-0` in a flex column, or a fixed `h-*` / `max-h-*`).

### `packages/registry-react/components/overlay-scroll/overlay-scroll.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

// Slack-style overlay scrollbar. Hides the native scrollbar entirely so the
// scrolled content uses the full container width (no reservation), then draws
// a thin auto-fading thumb absolutely positioned on top. Drag-to-scroll on the
// thumb is supported via Pointer Events (mouse + touch + pen). Vertical only.
//
// Give the component a bounded height via the parent (e.g. `flex-1 min-h-0`
// inside a flex column, or a fixed `h-*` / `max-h-*`). Without a bound it
// expands to its content and the thumb is hidden.

// Ported from OverlayScroll.vue's <style scoped> block. Injected once so the
// component ships self-contained (Tailwind has no equivalent overlay-scrollbar
// utility). Class names match the Vue source 1:1.
const overlayScrollCss = `
.overlay-scroll__inner {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Stop wheel events from chaining to the page once the inner scroller
     hits its top/bottom. Without this, scrolling a long activity feed
     past its last item keeps scrolling the surrounding page — confusing
     when the inner region is a clearly bounded card. */
  overscroll-behavior: contain;
}
.overlay-scroll__inner::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.overlay-scroll__thumb {
  position: absolute;
  top: 0;
  border-radius: 2px;
  background: var(--muted-foreground);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    opacity 0.2s ease,
    background-color 0.15s,
    width 0.12s ease;
  will-change: transform, opacity;
}
.overlay-scroll__thumb--draggable {
  cursor: pointer;
}
.overlay-scroll__thumb--visible {
  opacity: 0.4;
  pointer-events: auto;
}
.overlay-scroll:hover .overlay-scroll__thumb--visible {
  opacity: 0.6;
}
.overlay-scroll:hover .overlay-scroll__thumb--draggable:hover {
  opacity: 0.8;
  width: 8px !important;
  background: var(--foreground);
}
.overlay-scroll__thumb--dragging {
  opacity: 1 !important;
  background: var(--foreground) !important;
  width: 8px !important;
}
`

function OverlayScrollStyle() {
  return <style dangerouslySetInnerHTML={{ __html: overlayScrollCss }} />
}

export interface OverlayScrollHandle {
  /** Underlying scroller DOM element; call .scrollTo() on it from a parent. */
  scrollerEl: HTMLElement | null
  /** Force thumb recalc after a non-DOM size change. */
  recompute: () => void
}

export interface OverlayScrollProps {
  /** Thumb width in px when idle. Expands to ~2x on hover / drag. */
  thumbWidth?: number
  /** Right offset of the thumb from the inner edge, in px. */
  thumbOffset?: number
  /** ms of scroll inactivity before the thumb fades. */
  idleHideMs?: number
  /** Allow dragging the thumb to scroll. */
  draggable?: boolean
  /** Tailwind classes forwarded to the outer wrapper. */
  className?: string
  children?: React.ReactNode
}

const OverlayScroll = React.forwardRef<OverlayScrollHandle, OverlayScrollProps>(
  ({ thumbWidth = 4, thumbOffset = 2, idleHideMs = 800, draggable = true, className, children }, ref) => {
    const scrollerRef = React.useRef<HTMLDivElement | null>(null)
    const thumbRef = React.useRef<HTMLDivElement | null>(null)

    const [thumbHeight, setThumbHeight] = React.useState(0)
    const [thumbTop, setThumbTop] = React.useState(0)
    const [showThumb, setShowThumb] = React.useState(false)
    const [isDragging, setIsDragging] = React.useState(false)

    // Refs that hold the latest value for callbacks bound once (no re-bind on
    // every render). Mirrors the Vue refs that the closures read directly.
    const isHoveredRef = React.useRef(false)
    const isDraggingRef = React.useRef(false)
    const thumbHeightRef = React.useRef(0)
    const hideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
    const idleHideMsRef = React.useRef(idleHideMs)
    const draggableRef = React.useRef(draggable)

    React.useEffect(() => {
      idleHideMsRef.current = idleHideMs
    }, [idleHideMs])
    React.useEffect(() => {
      draggableRef.current = draggable
    }, [draggable])

    const recompute = React.useCallback(() => {
      const el = scrollerRef.current
      if (!el) return
      const ratio = el.clientHeight / el.scrollHeight
      if (!Number.isFinite(ratio) || ratio >= 1) {
        thumbHeightRef.current = 0
        setThumbHeight(0)
        return
      }
      const h = Math.max(24, el.clientHeight * ratio)
      thumbHeightRef.current = h
      setThumbHeight(h)
      const maxScroll = el.scrollHeight - el.clientHeight
      const maxThumb = el.clientHeight - h
      setThumbTop(maxScroll > 0 ? (el.scrollTop / maxScroll) * maxThumb : 0)
    }, [])

    const flashThumb = React.useCallback(() => {
      if (thumbHeightRef.current === 0) return
      setShowThumb(true)
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
      hideTimerRef.current = setTimeout(() => {
        if (!isHoveredRef.current && !isDraggingRef.current) setShowThumb(false)
      }, idleHideMsRef.current)
    }, [])

    const onScroll = React.useCallback(() => {
      recompute()
      flashThumb()
    }, [recompute, flashThumb])

    const onEnter = React.useCallback(() => {
      isHoveredRef.current = true
      recompute()
      if (thumbHeightRef.current > 0) setShowThumb(true)
    }, [recompute])

    const onLeave = React.useCallback(() => {
      isHoveredRef.current = false
      if (isDraggingRef.current) return
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
      setShowThumb(false)
    }, [])

    // Pointer Events cover mouse + touch + pen on every modern browser
    // (Chrome 55+, Firefox 59+, Safari 13+, Edge). setPointerCapture keeps the
    // drag alive even if the pointer leaves the thumb, matching native feel.
    const activePointerIdRef = React.useRef<number | null>(null)
    const dragStartYRef = React.useRef(0)
    const dragStartScrollTopRef = React.useRef(0)

    const onPointerMove = React.useCallback((e: PointerEvent) => {
      if (activePointerIdRef.current !== e.pointerId) return
      const el = scrollerRef.current
      if (!el) return
      const maxScroll = el.scrollHeight - el.clientHeight
      const maxThumb = el.clientHeight - thumbHeightRef.current
      if (maxThumb <= 0) return
      const scrollRatio = maxScroll / maxThumb
      el.scrollTop = dragStartScrollTopRef.current + (e.clientY - dragStartYRef.current) * scrollRatio
    }, [])

    const endDrag = React.useCallback(
      (e?: PointerEvent) => {
        if (e && activePointerIdRef.current !== e.pointerId) return
        isDraggingRef.current = false
        setIsDragging(false)
        if (thumbRef.current && activePointerIdRef.current !== null) {
          try {
            thumbRef.current.releasePointerCapture(activePointerIdRef.current)
          } catch {
            // pointer may already be released; ignore
          }
        }
        activePointerIdRef.current = null
        thumbRef.current?.removeEventListener('pointermove', onPointerMove)
        thumbRef.current?.removeEventListener('pointerup', endDrag)
        thumbRef.current?.removeEventListener('pointercancel', endDrag)
        if (!isHoveredRef.current) setShowThumb(false)
      },
      [onPointerMove],
    )

    const onThumbPointerDown = React.useCallback(
      (e: React.PointerEvent) => {
        if (!draggableRef.current || !scrollerRef.current || !thumbRef.current) return
        if (e.pointerType === 'mouse' && e.button !== 0) return
        e.preventDefault()
        isDraggingRef.current = true
        setIsDragging(true)
        activePointerIdRef.current = e.pointerId
        dragStartYRef.current = e.clientY
        dragStartScrollTopRef.current = scrollerRef.current.scrollTop
        thumbRef.current.setPointerCapture(e.pointerId)
        thumbRef.current.addEventListener('pointermove', onPointerMove)
        thumbRef.current.addEventListener('pointerup', endDrag)
        thumbRef.current.addEventListener('pointercancel', endDrag)
      },
      [onPointerMove, endDrag],
    )

    React.useEffect(() => {
      recompute()
      const scroller = scrollerRef.current
      if (!scroller) return

      const resizeObserver = new ResizeObserver(recompute)
      resizeObserver.observe(scroller)

      const inner = scroller.firstElementChild as HTMLElement | null
      let mutationObserver: MutationObserver | null = null
      if (inner) {
        resizeObserver.observe(inner)
        mutationObserver = new MutationObserver(recompute)
        mutationObserver.observe(inner, { childList: true, subtree: true })
      }

      return () => {
        resizeObserver.disconnect()
        mutationObserver?.disconnect()
        if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
        endDrag()
      }
    }, [recompute, endDrag])

    React.useImperativeHandle(
      ref,
      () => ({
        get scrollerEl() {
          return scrollerRef.current
        },
        recompute,
      }),
      [recompute],
    )

    return (
      <div
        data-uipkge=""
        data-slot="overlay-scroll"
        className={cn('overlay-scroll relative', className)}
        onMouseEnter={onEnter}
        onMouseLeave={onLeave}
      >
        <OverlayScrollStyle />
        <div
          ref={scrollerRef}
          data-slot="overlay-scroll-viewport"
          className="overlay-scroll__inner h-full overflow-x-hidden overflow-y-auto"
          onScroll={onScroll}
        >
          {children}
        </div>
        <div
          ref={thumbRef}
          data-slot="overlay-scroll-thumb"
          className={cn(
            'overlay-scroll__thumb',
            showThumb && 'overlay-scroll__thumb--visible',
            isDragging && 'overlay-scroll__thumb--dragging',
            draggable && 'overlay-scroll__thumb--draggable',
          )}
          style={{
            width: `${thumbWidth}px`,
            /* Read the right offset from --ovs-thumb-right when an ancestor
               sets it (e.g. Sidebar pushes the thumb away from SidebarRail),
               otherwise fall back to the prop. Lets the same primitive sit
               flush in a card AND clear a rail without per-call config. */
            right: `var(--ovs-thumb-right, ${thumbOffset}px)`,
            height: `${thumbHeight}px`,
            transform: `translateY(${thumbTop}px)`,
          }}
          onPointerDown={onThumbPointerDown}
        />
      </div>
    )
  },
)
OverlayScroll.displayName = 'OverlayScroll'

export { OverlayScroll }

```

### `packages/registry-react/components/overlay-scroll/index.ts`

```ts
export { OverlayScroll, type OverlayScrollProps, type OverlayScrollHandle } from './overlay-scroll'

```

## page

- type: `registry:ui`
- description: Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for route pages so every screen looks consistent.

### `packages/registry-react/components/page/page.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

const Page = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page" className={cn('space-y-6', className)} {...props} />
  ),
)
Page.displayName = 'Page'

const PageBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page-body" className={cn('', className)} {...props} />
  ),
)
PageBody.displayName = 'PageBody'

export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Right-aligned action bar (buttons, menus). The Vue `#actions` slot. */
  actions?: React.ReactNode
}

const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
  ({ className, children, actions, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="page-header"
      className={cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', className)}
      {...props}
    >
      <div className="flex-1">{children}</div>
      {actions}
    </div>
  ),
)
PageHeader.displayName = 'PageHeader'

export interface PageHeaderHeadingProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  description?: string
}

const PageHeaderHeading = React.forwardRef<HTMLDivElement, PageHeaderHeadingProps>(
  ({ className, title, description, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page-header-heading" className={cn('', className)} {...props}>
      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
      {description && <p className="text-muted-foreground mt-1 text-sm leading-relaxed">{description}</p>}
    </div>
  ),
)
PageHeaderHeading.displayName = 'PageHeaderHeading'

export { Page, PageBody, PageHeader, PageHeaderHeading }

```

### `packages/registry-react/components/page/index.ts`

```ts
export { Page, PageBody, PageHeader, PageHeaderHeading } from './page'
export type { PageHeaderProps, PageHeaderHeadingProps } from './page'

```

## pagination

- type: `registry:ui`
- description: Page-number bar with previous/next, ellipsis collapse, and a configurable visible-window size. Pair with a data-table or any paged list.
- npm deps: `lucide-react`

### `packages/registry-react/components/pagination/pagination.tsx`

```tsx
import * as React from 'react'
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, MoreHorizontal } from 'lucide-react'
import { cn } from '@/lib/utils'

/**
 * Native React port of the Vue (reka-ui) pagination. reka-ui's PaginationRoot
 * owns the page-window/ellipsis logic and exposes it through slot props; React
 * (radix) has no pagination primitive, so — following shadcn-react — these are
 * presentational parts. The caller drives `currentPage` and renders the page
 * items. The Tailwind classes carried by the Vue parts are preserved 1:1.
 */

const Pagination = ({ className, 'aria-label': ariaLabel, ...props }: React.ComponentPropsWithoutRef<'nav'>) => (
  <nav
    aria-label={ariaLabel ?? 'Pagination'}
    data-uipkge=""
    data-slot="pagination"
    className={cn('flex items-center gap-1', className)}
    {...props}
  />
)
Pagination.displayName = 'Pagination'

const PaginationList = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(
  ({ className, ...props }, ref) => (
    <ul
      ref={ref}
      data-uipkge=""
      data-slot="pagination-list"
      className={cn('flex items-center gap-1', className)}
      {...props}
    />
  ),
)
PaginationList.displayName = 'PaginationList'

const PaginationListItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
  ({ className, ...props }, ref) => (
    <li ref={ref} data-uipkge="" data-slot="pagination-list-item" className={cn('shrink-0', className)} {...props} />
  ),
)
PaginationListItem.displayName = 'PaginationListItem'

const PaginationFirst = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
  ({ children, ...props }, ref) => (
    <button ref={ref} type="button" aria-label="Go to first page" {...props}>
      {children ?? <ChevronsLeft className="size-4" aria-hidden="true" />}
    </button>
  ),
)
PaginationFirst.displayName = 'PaginationFirst'

const PaginationPrev = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
  ({ children, ...props }, ref) => (
    <button ref={ref} type="button" aria-label="Go to previous page" {...props}>
      {children ?? <ChevronLeft className="size-4" aria-hidden="true" />}
    </button>
  ),
)
PaginationPrev.displayName = 'PaginationPrev'

const PaginationNext = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
  ({ children, ...props }, ref) => (
    <button ref={ref} type="button" aria-label="Go to next page" {...props}>
      {children ?? <ChevronRight className="size-4" aria-hidden="true" />}
    </button>
  ),
)
PaginationNext.displayName = 'PaginationNext'

const PaginationLast = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
  ({ children, ...props }, ref) => (
    <button ref={ref} type="button" aria-label="Go to last page" {...props}>
      {children ?? <ChevronsRight className="size-4" aria-hidden="true" />}
    </button>
  ),
)
PaginationLast.displayName = 'PaginationLast'

const PaginationEllipsis = ({ children, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
  <span aria-hidden="true" {...props}>
    {children ?? <MoreHorizontal className="size-4" aria-hidden="true" />}
  </span>
)
PaginationEllipsis.displayName = 'PaginationEllipsis'

export {
  Pagination,
  PaginationList,
  PaginationListItem,
  PaginationFirst,
  PaginationPrev,
  PaginationNext,
  PaginationLast,
  PaginationEllipsis,
}

```

### `packages/registry-react/components/pagination/index.ts`

```ts
export {
  Pagination,
  PaginationList,
  PaginationListItem,
  PaginationFirst,
  PaginationPrev,
  PaginationNext,
  PaginationLast,
  PaginationEllipsis,
} from './pagination'

```

## parallel-chart

- type: `registry:ui`
- description: React mirror of @uipkge/parallel-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/parallel-chart/ParallelChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// ParallelChart
// ─────────────────────────────────────────────────────────────────────────

interface ParallelAxis {
  name: string
  /** Set explicitly for fixed scales, otherwise computed from data. */
  min?: number
  max?: number
}
interface ParallelRow {
  /** One value per axis, in the same order as `axes`. */
  values: number[]
  /** Optional name shown in the tooltip. */
  name?: string
  /** Optional series grouping (index → chart-N colour). */
  group?: number
}

export interface ParallelChartProps {
  axes: ParallelAxis[]
  data: ParallelRow[]
  /** Optional group labels (shown in legend). */
  groups?: string[]
  height?: number | string
  option?: any
  className?: string
}

export const ParallelChart = React.forwardRef<HTMLDivElement, ParallelChartProps>(
  ({ axes, data, groups, height = 360, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      // Build one series per group so the legend can toggle them.
      const groupList = groups ?? ['series']
      const series = groupList.map((name, gi) => ({
        name,
        type: 'parallel' as const,
        lineStyle: { width: 1, opacity: 0.6 },
        data: data
          .filter((r) => (typeof r.group === 'number' ? r.group === gi : gi === 0))
          .map((r) => ({ value: r.values, name: r.name })),
      }))

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        legend: groups?.length
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : undefined,
        parallelAxis: axes.map((a, dim) => ({
          dim,
          name: a.name,
          min: a.min,
          max: a.max,
          nameTextStyle: { fontSize: 11, color: theme.textColor },
          axisLine: { lineStyle: { color: theme.axisColor } },
          axisLabel: { color: theme.textColor, fontSize: 11 },
        })),
        parallel: {
          left: 36,
          right: 24,
          top: 36,
          bottom: groups?.length ? 36 : 24,
          parallelAxisDefault: { axisLine: { lineStyle: { color: theme.axisColor } } },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [axes, data, groups, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
ParallelChart.displayName = 'ParallelChart'

```

### `packages/registry-react/components/charts/parallel-chart/index.ts`

```ts
export { ParallelChart, type ParallelChartProps } from './ParallelChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## password-input

- type: `registry:ui`
- description: Password input with show/hide toggle (Eye/EyeOff) and optional strength meter (weak/fair/good/strong with colored bar). Supports min length display, disabled, placeholder, and size variants.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/password-input/PasswordInput.tsx`

```tsx
'use client'

import * as React from 'react'
import { Eye, EyeOff } from 'lucide-react'
import { cn } from '@/lib/utils'
import { passwordInputVariants, type PasswordInputVariants } from './password-input.variants'

export interface PasswordInputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>,
    PasswordInputVariants {
  defaultValue?: string
  showStrength?: boolean
  showToggle?: boolean
  minLength?: number
  /** Wrapper className. Falls through to the bordered control, not the <input>. */
  className?: string
}

interface StrengthResult {
  score: number
  label: 'weak' | 'fair' | 'good' | 'strong'
  color: string
  barColor: string
  percent: number
}

function computeStrength(pwd: string): StrengthResult {
  if (!pwd) return { score: 0, label: 'weak', color: '', barColor: 'bg-transparent', percent: 0 }

  let score = 0
  if (pwd.length >= 6) score++
  if (pwd.length >= 10) score++
  if (/[A-Z]/.test(pwd) && /[a-z]/.test(pwd)) score++
  if (/\d/.test(pwd)) score++
  if (/[^A-Za-z0-9]/.test(pwd)) score++

  if (score <= 1) {
    return { score, label: 'weak', color: 'text-destructive', barColor: 'bg-destructive', percent: 25 }
  }
  if (score <= 2) {
    return {
      score,
      label: 'fair',
      color: 'text-[var(--warning)]',
      barColor: 'bg-[var(--warning)]',
      percent: 50,
    }
  }
  if (score <= 3) {
    return {
      score,
      label: 'good',
      color: 'text-[var(--info)]',
      barColor: 'bg-[var(--info)]',
      percent: 75,
    }
  }
  return {
    score,
    label: 'strong',
    color: 'text-[var(--success)]',
    barColor: 'bg-[var(--success)]',
    percent: 100,
  }
}

const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
  (
    {
      value,
      defaultValue,
      placeholder = 'Enter password',
      size = 'default',
      variant = 'outlined',
      disabled = false,
      readOnly = false,
      showStrength = false,
      showToggle = true,
      minLength = 0,
      maxLength,
      id,
      name,
      autoComplete = 'current-password',
      className,
      onChange,
      onFocus,
      onBlur,
      ...rest
    },
    ref,
  ) => {
    const innerRef = React.useRef<HTMLInputElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLInputElement | null) => {
        innerRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node
      },
      [ref],
    )

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<string>(
      defaultValue != null ? String(defaultValue) : '',
    )
    const currentValue = isControlled ? String(value ?? '') : internal

    const [passwordVisible, setPasswordVisible] = React.useState(false)
    const computedType = passwordVisible ? 'text' : 'password'

    const strength = React.useMemo<StrengthResult>(() => computeStrength(currentValue), [currentValue])
    const meetsMinLength = currentValue.length >= minLength

    function toggleVisibility() {
      if (disabled || readOnly) return
      setPasswordVisible((v) => !v)
      innerRef.current?.focus()
    }

    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
      if (!isControlled) setInternal(e.target.value)
      onChange?.(e)
    }

    const wrapperClasses = cn(
      passwordInputVariants({ size, variant }),
      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
      disabled && 'pointer-events-none opacity-50 cursor-not-allowed bg-muted/30',
      className,
    )

    const inputPadding = size === 'sm' ? 'px-2.5' : size === 'lg' ? 'px-4' : 'px-3'
    const togglePadding = size === 'sm' ? 'pr-2' : size === 'lg' ? 'pr-3' : 'pr-2.5'

    return (
      <div className="flex w-full flex-col gap-2">
        <div className={wrapperClasses} data-uipkge="" data-slot="password-input" data-size={size} data-variant={variant}>
          <input
            id={id}
            ref={setRefs}
            value={currentValue}
            type={computedType}
            disabled={disabled}
            readOnly={readOnly}
            maxLength={maxLength}
            placeholder={placeholder}
            name={name}
            autoComplete={autoComplete}
            onChange={handleChange}
            onFocus={onFocus}
            onBlur={onBlur}
            className={cn('placeholder:text-muted-foreground w-full min-w-0 flex-1 bg-transparent outline-none', inputPadding)}
            {...rest}
          />
          {showToggle && (
            <div className={cn('flex shrink-0 items-center', togglePadding)}>
              <button
                type="button"
                aria-label={passwordVisible ? 'Hide password' : 'Show password'}
                aria-pressed={passwordVisible}
                disabled={disabled || readOnly}
                onMouseDown={(e) => e.preventDefault()}
                onClick={toggleVisibility}
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 shrink-0 rounded p-0.5 transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed"
              >
                {passwordVisible ? (
                  <Eye className="size-4" aria-hidden="true" />
                ) : (
                  <EyeOff className="size-4" aria-hidden="true" />
                )}
              </button>
            </div>
          )}
        </div>

        {showStrength && currentValue && (
          <div className="flex flex-col gap-1.5">
            <div className="bg-muted h-1.5 w-full overflow-hidden rounded-full">
              <div
                className={cn('h-full rounded-full transition-all duration-300', strength.barColor)}
                style={{ width: `${strength.percent}%` }}
              />
            </div>
            <div className="flex items-center justify-between text-xs">
              <span className={cn('font-medium capitalize', strength.color)}>{strength.label}</span>
              {minLength > 0 && (
                <span className={meetsMinLength ? 'text-[var(--success)]' : 'text-muted-foreground'}>
                  {currentValue.length} / {minLength} chars
                </span>
              )}
            </div>
          </div>
        )}

        {minLength > 0 && !showStrength && currentValue && (
          <p className="text-muted-foreground text-xs">Minimum {minLength} characters</p>
        )}
      </div>
    )
  },
)
PasswordInput.displayName = 'PasswordInput'

export { PasswordInput }

```

### `packages/registry-react/components/password-input/password-input.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const passwordInputVariants = cva(
  'flex w-full items-center gap-1.5 overflow-hidden border transition-[color,box-shadow] outline-none rounded-md',
  {
    variants: {
      size: {
        sm: 'h-8 text-xs',
        default: 'h-9 text-base md:text-sm',
        lg: 'h-11 text-base',
      },
      variant: {
        outlined: 'border-input bg-transparent shadow-xs',
        filled: 'border-transparent bg-muted/50 shadow-none',
        borderless: 'border-transparent bg-transparent shadow-none',
      },
    },
    defaultVariants: {
      size: 'default',
      variant: 'outlined',
    },
  },
)

export type PasswordInputVariants = VariantProps<typeof passwordInputVariants>

```

### `packages/registry-react/components/password-input/index.ts`

```ts
export { PasswordInput, type PasswordInputProps } from './PasswordInput'
export { passwordInputVariants, type PasswordInputVariants } from './password-input.variants'

```

## payment-card

- type: `registry:ui`
- description: Animated 3D credit-card visual. Auto-detects brand (Visa, Mastercard, Amex, Discover) from the card number, flips between front and back, and supports opt-in mouse-parallax tilt and a shimmering gradient sweep. Pure presentational — pass typed values in via props.

### `packages/registry-react/components/payment-card/payment-card.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'

// Brand wordmark paths (from simpleicons.org, MIT-licensed). Single-path SVGs
// drawn against a 24x24 viewBox. Fill is set to currentColor so the parent
// controls color (white on the dark card gradient).
const BRAND_PATHS: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: 'M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z',
  mastercard:
    'M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z',
  amex: 'M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507',
  discover:
    'M14.58 12a2.023 2.023 0 1 1-2.025-2.023h.002c1.118 0 2.023.906 2.023 2.023zm-5.2-2.001c-1.124 0-2.025.884-2.025 1.99 0 1.118.878 1.984 2.007 1.984.319 0 .593-.063.93-.221v-.873c-.296.297-.559.416-.895.416-.747 0-1.277-.542-1.277-1.312 0-.73.547-1.306 1.243-1.306.354 0 .622.126.93.428v-.873a1.898 1.898 0 0 0-.913-.233zm-3.352 1.545c-.445-.165-.576-.273-.576-.479 0-.239.233-.422.553-.422.222 0 .405.091.598.308l.388-.508a1.665 1.665 0 0 0-1.117-.422c-.673 0-1.186.467-1.186 1.089 0 .524.239.792.936 1.043.291.103.438.171.513.217a.456.456 0 0 1 .222.394c0 .308-.245.536-.576.536-.354 0-.639-.177-.809-.507l-.479.461c.342.502.752.724 1.317.724.771 0 1.311-.513 1.311-1.249-.002-.603-.252-.876-1.095-1.185zM24 10.3a.29.29 0 0 1-.288.291.29.29 0 0 1-.291-.291v-.003A.29.29 0 1 1 24 10.3zm-.059.001a.235.235 0 0 0-.231-.239.234.234 0 0 0-.232.239c0 .132.104.239.232.239a.235.235 0 0 0 .231-.239zM3.472 13.887h.742v-3.803h-.742v3.803zm12.702-1.248l-1.014-2.554h-.81l1.614 3.9h.399l1.643-3.9h-.804l-1.028 2.554zm2.166 1.248h2.104v-.644h-1.362v-1.027h1.312v-.644h-1.312v-.844h1.362v-.644H18.34v3.803zm5.409-3.557l.11.138h-.097l-.094-.13v.13h-.08v-.334h.107c.081 0 .126.036.126.103.001.046-.025.08-.072.093zm-.006-.092c0-.029-.021-.043-.06-.043h-.014v.087h.014c.039 0 .06-.014.06-.044zm-1.228 2.047l1.197 1.602H22.8l-1.027-1.528h-.097v1.528h-.741v-3.803h1.1c.855 0 1.346.411 1.346 1.123 0 .583-.308.965-.866 1.078zm.103-1.038c0-.37-.251-.563-.713-.563h-.228v1.152h.217c.473-.001.724-.207.724-.589zm-19.487.742a1.91 1.91 0 0 1-.69 1.46c-.365.303-.781.439-1.357.439H.001v-3.803H1.09c1.202 0 2.041.781 2.041 1.904zm-.764-.006c0-.364-.154-.718-.411-.947-.245-.222-.536-.308-1.015-.308H.742v2.515h.199c.479 0 .782-.092 1.015-.302.256-.228.411-.593.411-.958z',
}

// Tight viewBox per brand so the visible glyph fills its slot. The default
// simpleicons 24x24 canvas leaves a lot of empty space around wordmarks like
// Visa and Discover, which made them render visibly smaller than the
// Mastercard / Amex marks at the same nominal size.
const BRAND_VIEWBOX: Record<Exclude<CardBrand, 'unknown'>, string> = {
  visa: '0 7 24 10',
  mastercard: '0 4 24 16',
  amex: '0 0 24 24',
  discover: '0 8 24 8',
}

export interface PaymentCardProps {
  number?: string
  name?: string
  expiry?: string
  cvc?: string
  brand?: 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' | 'auto'
  flipped?: boolean
  variant?: 'default' | 'compact'
  tilt?: boolean
  shimmer?: boolean
  flip?: boolean
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

function detectBrand(raw: string): CardBrand {
  const n = raw.replace(/\D/g, '')
  if (!n) return 'unknown'
  if (/^4/.test(n)) return 'visa'
  if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'
  if (/^3[47]/.test(n)) return 'amex'
  if (/^(6011|65|64[4-9])/.test(n)) return 'discover'
  return 'unknown'
}

function maskedNumber(raw: string, brand: CardBrand): string {
  const digits = raw.replace(/\D/g, '').slice(0, brand === 'amex' ? 15 : 16)
  const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]
  const total = groups.reduce((a, b) => a + b, 0)
  const padded = (digits + '•'.repeat(total)).slice(0, total)
  let i = 0
  return groups
    .map((g) => {
      const slice = padded.slice(i, i + g)
      i += g
      return slice
    })
    .join(' ')
}

const STYLE_ID = 'payment-card-styles'
const STYLE_CONTENT = `
@keyframes payment-card-shimmer {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(150%); }
}
[data-slot='payment-card'] .payment-card-brand {
  transition: opacity 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-slot='payment-card'] [class*='transition-'] {
    transition-duration: 0ms !important;
  }
  [data-slot='payment-card'] [style*='payment-card-shimmer'] {
    animation: none !important;
  }
}
`

const PaymentCard = React.forwardRef<HTMLDivElement, PaymentCardProps>(
  (
    {
      number = '',
      name = '',
      expiry = '',
      cvc = '',
      brand = 'auto',
      flipped = false,
      variant = 'default',
      tilt = false,
      shimmer = false,
      flip = true,
      size = 'md',
      className,
    },
    ref,
  ) => {
    // Inject keyframes + reduced-motion rules once.
    React.useEffect(() => {
      if (typeof document === 'undefined') return
      if (document.getElementById(STYLE_ID)) return
      const el = document.createElement('style')
      el.id = STYLE_ID
      el.textContent = STYLE_CONTENT
      document.head.appendChild(el)
    }, [])

    const detectedBrand: CardBrand = brand === 'auto' ? detectBrand(number) : (brand as CardBrand)

    const displayNumber = maskedNumber(number, detectedBrand)
    const displayName = (name || (variant === 'compact' ? '' : 'CARDHOLDER NAME')).toUpperCase()
    const displayExpiry = expiry || 'MM/YY'
    const displayCvc = (() => {
      const want = detectedBrand === 'amex' ? 4 : 3
      const v = (cvc || '').replace(/\D/g, '').slice(0, want)
      return v.padEnd(want, '•')
    })()

    const brandGradient = (() => {
      switch (detectedBrand) {
        case 'visa':
          return 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900'
        case 'mastercard':
          return 'bg-gradient-to-br from-orange-500 via-red-500 to-red-700'
        case 'amex':
          return 'bg-gradient-to-br from-teal-500 via-teal-600 to-teal-800'
        case 'discover':
          return 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-700'
        default:
          return 'bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900'
      }
    })()

    const sizeClass =
      variant === 'compact' ? 'w-[120px]' : { sm: 'w-[280px]', md: 'w-[340px]', lg: 'w-[400px]' }[size]

    const fontClass = variant === 'compact' ? 'text-[7px]' : { sm: 'text-xs', md: 'text-sm', lg: 'text-base' }[size]

    const numberFontClass =
      variant === 'compact'
        ? 'text-[7px] tracking-tight'
        : { sm: 'text-base tracking-wider', md: 'text-lg tracking-wider', lg: 'text-xl tracking-widest' }[size]

    const brandHeightClass = variant === 'compact' ? 'h-2.5' : { sm: 'h-4', md: 'h-5', lg: 'h-6' }[size]

    // Tilt — mouse-parallax
    const cardRef = React.useRef<HTMLDivElement | null>(null)
    const setRefs = React.useCallback(
      (node: HTMLDivElement | null) => {
        cardRef.current = node
        if (typeof ref === 'function') ref(node)
        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
      },
      [ref],
    )
    const [tiltX, setTiltX] = React.useState(0)
    const [tiltY, setTiltY] = React.useState(0)
    const rafId = React.useRef<number | null>(null)

    function onMove(e: React.MouseEvent) {
      if (!tilt || !cardRef.current) return
      if (rafId.current) cancelAnimationFrame(rafId.current)
      const clientX = e.clientX
      const clientY = e.clientY
      rafId.current = requestAnimationFrame(() => {
        if (!cardRef.current) return
        const rect = cardRef.current.getBoundingClientRect()
        const dx = (clientX - rect.left) / rect.width - 0.5
        const dy = (clientY - rect.top) / rect.height - 0.5
        setTiltY(dx * 16)
        setTiltX(-dy * 16)
      })
    }
    function onLeave() {
      setTiltX(0)
      setTiltY(0)
    }

    const flipDeg = flipped ? 180 : 0
    const innerTransform = `rotateX(${tiltX}deg) rotateY(${tiltY + flipDeg}deg)`

    return (
      <div
        ref={setRefs}
        data-uipkge=""
        data-slot="payment-card"
        className={cn('group relative inline-block select-none [perspective:1200px]', sizeClass, className)}
        onMouseMove={onMove}
        onMouseLeave={onLeave}
      >
        <div
          className={cn(
            'relative aspect-[1.586/1] w-full transition-transform [transform-style:preserve-3d]',
            flip ? 'duration-[600ms] ease-[cubic-bezier(0.4,0,0.2,1)]' : 'duration-300',
          )}
          style={{ transform: innerTransform }}
        >
          {/* FRONT */}
          <div
            className={cn(
              'absolute inset-0 overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
              'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
              brandGradient,
            )}
          >
            {/* Lighting overlay: subtle radial highlight top-left */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)' }}
            />
            {/* Subtle bottom-right darkening */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(80% 60% at 100% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 60%)' }}
            />
            {/* Shimmer sweep */}
            {shimmer && (
              <div
                className="pointer-events-none absolute -inset-x-full inset-y-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
                style={{ animation: 'payment-card-shimmer 2.5s linear infinite' }}
              />
            )}

            <div className={cn('absolute inset-0 flex flex-col', variant === 'compact' ? 'p-2' : 'p-4')}>
              {/* Brand top-right */}
              <div className="flex h-auto justify-end text-white">
                {detectedBrand !== 'unknown' ? (
                  <svg
                    key={detectedBrand}
                    viewBox={BRAND_VIEWBOX[detectedBrand]}
                    className={cn('payment-card-brand w-auto', brandHeightClass)}
                    fill="currentColor"
                    preserveAspectRatio="xMidYMid meet"
                    aria-hidden="true"
                  >
                    <path d={BRAND_PATHS[detectedBrand]} />
                  </svg>
                ) : (
                  <span
                    key="unknown"
                    className={cn(
                      'payment-card-brand font-semibold tracking-wider opacity-60',
                      variant === 'compact' ? 'text-[8px]' : 'text-xs',
                    )}
                  >
                    CARD
                  </span>
                )}
              </div>

              {/* Chip + contactless NFC, below brand on left */}
              <div className={cn('flex items-center gap-2', variant === 'compact' ? 'mt-1' : 'mt-3')}>
                {/* EMV chip with 8-contact layout */}
                <div
                  className={cn(
                    'relative rounded-[4px] bg-gradient-to-br from-amber-100 via-yellow-300 to-yellow-600 shadow-[inset_0_0_4px_rgba(0,0,0,0.25)]',
                    variant === 'compact' ? 'h-3 w-4' : 'h-7 w-10',
                  )}
                >
                  {/* Outer ring */}
                  <div className="absolute inset-[2px] rounded-[2px] border border-yellow-700/30" />
                  {/* Horizontal divider */}
                  <div className="absolute inset-x-[2px] top-1/2 h-px -translate-y-px bg-yellow-700/40" />
                  {/* Vertical dividers */}
                  <div className="absolute inset-y-[2px] left-1/3 w-px bg-yellow-700/40" />
                  <div className="absolute inset-y-[2px] left-2/3 w-px bg-yellow-700/40" />
                </div>

                {/* Contactless NFC waves */}
                {variant !== 'compact' && (
                  <svg
                    viewBox="0 0 24 24"
                    className="h-6 w-auto opacity-80"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    aria-hidden="true"
                  >
                    <path d="M7 8.5a6 6 0 0 1 0 7" />
                    <path d="M10 6a9.5 9.5 0 0 1 0 12" />
                    <path d="M13 4a13 13 0 0 1 0 16" />
                  </svg>
                )}
              </div>

              {/* spacer to push number+bottom down */}
              <div className="flex-1" />

              {/* Number — embossed look via subtle text shadow */}
              <div
                className={cn(
                  'overflow-hidden font-mono font-semibold whitespace-nowrap',
                  variant === 'compact' ? 'mb-1' : 'mb-3',
                  numberFontClass,
                )}
                style={{
                  textShadow: '0 1px 0 rgba(0, 0, 0, 0.18), 0 -1px 0 rgba(255, 255, 255, 0.08)',
                }}
              >
                {displayNumber}
              </div>

              {/* Bottom row: name + expiry */}
              <div className="flex items-end justify-between gap-2">
                <div className="min-w-0 flex-1">
                  {variant !== 'compact' && (
                    <div className="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">Cardholder</div>
                  )}
                  <div className={cn('truncate font-semibold tracking-wide whitespace-nowrap uppercase', fontClass)}>
                    {displayName}
                  </div>
                </div>
                <div className="shrink-0 text-right">
                  {variant !== 'compact' && (
                    <div className="text-[9px] font-medium tracking-[0.18em] uppercase opacity-50">Expires</div>
                  )}
                  <div className={cn('font-mono font-semibold tracking-wide whitespace-nowrap', fontClass)}>
                    {displayExpiry}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* BACK */}
          <div
            className={cn(
              'absolute inset-0 [transform:rotateY(180deg)] overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',
              'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',
              brandGradient,
            )}
          >
            {/* Lighting overlay */}
            <div
              className="pointer-events-none absolute inset-0"
              style={{ background: 'radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)' }}
            />
            {/* Magstripe */}
            <div
              className={cn(
                'w-full bg-gradient-to-b from-black via-neutral-900 to-black/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.5)]',
                variant === 'compact' ? 'mt-3 h-5' : 'mt-6 h-10',
              )}
            />

            <div className={cn('relative', variant === 'compact' ? 'p-2' : 'p-4')}>
              {/* Signature strip + CVC */}
              <div className={cn('flex items-stretch gap-2', variant === 'compact' ? 'mt-1' : 'mt-2')}>
                {/* Signature strip with diagonal hatching */}
                <div
                  className={cn(
                    'relative flex-1 overflow-hidden rounded bg-white/95 px-2 py-1.5',
                    variant === 'compact' ? 'h-5' : 'h-9',
                  )}
                  style={{
                    backgroundImage:
                      'repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px)',
                    backgroundColor: 'rgba(248, 248, 248, 0.95)',
                  }}
                >
                  {variant !== 'compact' && (
                    <div className="absolute top-1 right-1.5 text-[7px] tracking-wider text-slate-500/80 uppercase">
                      Signature
                    </div>
                  )}
                </div>
                {/* CVC pill */}
                <div
                  className={cn(
                    'flex flex-col items-center justify-center rounded bg-white font-mono text-slate-900 shadow-sm',
                    variant === 'compact' ? 'px-1 text-[9px]' : 'px-2.5 text-sm',
                  )}
                >
                  {variant !== 'compact' && (
                    <span className="text-[7px] font-medium tracking-wider text-slate-500 uppercase">CVC</span>
                  )}
                  <span className="leading-none font-semibold">{displayCvc}</span>
                </div>
              </div>

              {variant !== 'compact' && (
                <div className="mt-3 text-[9px] tracking-wide opacity-50">
                  Authorized signature. Not valid unless signed. For customer service, see your card issuer.
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    )
  },
)
PaymentCard.displayName = 'PaymentCard'

export { PaymentCard }

```

### `packages/registry-react/components/payment-card/index.ts`

```ts
export { PaymentCard, type PaymentCardProps } from './payment-card'

```

## payment-form

- type: `registry:block`
- description: Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons call `onWallet` so the consumer wires the actual SDK; the card form calls `onSuccess` / `onError` after the consumer-provided `onSubmit` settles.
- npm deps: `lucide-react`
- registry deps: `payment-card`, `input`, `label`, `button`

### `packages/registry-react/blocks/payment-form/PaymentForm.tsx`

```tsx
'use client'

import * as React from 'react'
import { Loader2 } from 'lucide-react'
import { PaymentCard } from '@/components/ui/payment-card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'
type Wallet = 'apple' | 'google' | 'paypal'

export interface PaymentPayload {
  number: string
  name: string
  expiry: string
  cvc: string
  brand: CardBrand
}

export interface PaymentFormProps {
  amount: number
  currency?: string
  showWallets?: boolean
  wallets?: Wallet[]
  onSubmit?: (data: PaymentPayload) => Promise<void>
  onSuccess?: () => void
  onError?: (err: Error) => void
  onBrandChange?: (brand: CardBrand) => void
  onWallet?: (kind: Wallet) => void
}

function detectBrand(raw: string): CardBrand {
  const n = raw.replace(/\D/g, '')
  if (!n) return 'unknown'
  if (/^4/.test(n)) return 'visa'
  if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'
  if (/^3[47]/.test(n)) return 'amex'
  if (/^(6011|65|64[4-9])/.test(n)) return 'discover'
  return 'unknown'
}

function luhn(digits: string): boolean {
  let sum = 0
  let alt = false
  for (let i = digits.length - 1; i >= 0; i--) {
    let d = Number(digits[i])
    if (alt) {
      d *= 2
      if (d > 9) d -= 9
    }
    sum += d
    alt = !alt
  }
  return sum % 10 === 0 && digits.length >= 13
}

// Wallet brand wordmark paths (from simpleicons.org, MIT-licensed).
const APPLE_PAY_PATH =
  'M2.15 4.318a42.16 42.16 0 0 0-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43-.028.148-.037.3-.04.45A10.2 10.2 0 0 0 0 6.222v11.557c0 .07.002.138.003.207.004.15.013.303.04.452.027.15.072.291.142.429a1.436 1.436 0 0 0 .63.63c.138.07.278.115.43.142.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04.15-.027.291-.071.428-.141a1.432 1.432 0 0 0 .631-.631c.07-.138.115-.278.141-.43.027-.148.036-.3.04-.45.002-.07.003-.138.003-.208l.001-.246V6.221c0-.07-.002-.138-.004-.207a2.995 2.995 0 0 0-.04-.452 1.446 1.446 0 0 0-1.2-1.201 3.022 3.022 0 0 0-.452-.04 10.448 10.448 0 0 0-.453-.003zm0 .512h19.942c.066 0 .131.002.197.003.115.004.25.01.375.032.109.02.2.05.287.094a.927.927 0 0 1 .407.407.997.997 0 0 1 .094.288c.022.123.028.258.031.374.002.065.003.13.003.197v11.552c0 .065 0 .13-.003.196-.003.115-.009.25-.032.375a.927.927 0 0 1-.5.693 1.002 1.002 0 0 1-.286.094 2.598 2.598 0 0 1-.373.032l-.2.003H1.906c-.066 0-.133-.002-.196-.003a2.61 2.61 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.918.918 0 0 1-.406-.407 1.006 1.006 0 0 1-.094-.288 2.531 2.531 0 0 1-.032-.373 9.588 9.588 0 0 1-.002-.197V6.224c0-.065 0-.131.002-.197.004-.114.01-.248.032-.375.02-.108.05-.199.094-.287a.925.925 0 0 1 .407-.406 1.03 1.03 0 0 1 .287-.094c.125-.022.26-.029.375-.032.065-.002.131-.002.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456-.191.22-.36.58-.316.918.338.03.675-.169.888-.418.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812 0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089 0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28-.235 0-.593-.264-.981-.257a1.446 1.446 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995.249.366.549.769.944.754.373-.014.52-.242.973-.242.454 0 .586.242.98.235.41-.007.667-.366.915-.733.286-.417.403-.82.41-.841-.007-.008-.79-.308-.797-1.209-.008-.754.615-1.113.644-1.135-.352-.52-.9-.578-1.09-.593a1.123 1.123 0 0 0-.092-.002zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184 0 .72.548 1.207 1.332 1.207.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317zm1.94.072l1.446 4.009c0 .003-.073.24-.073.247-.125.41-.33.571-.711.571-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917-.442 0-.731-.228-.731-.579 0-.342.278-.56.769-.593z'
const GOOGLE_PAY_PATH =
  'M3.963 7.235A3.963 3.963 0 00.422 9.419a3.963 3.963 0 000 3.559 3.963 3.963 0 003.541 2.184c1.07 0 1.97-.352 2.627-.957.748-.69 1.18-1.71 1.18-2.916a4.722 4.722 0 00-.07-.806H3.964v1.526h2.14a1.835 1.835 0 01-.79 1.205c-.356.241-.814.379-1.35.379-1.034 0-1.911-.697-2.225-1.636a2.375 2.375 0 010-1.517c.314-.94 1.191-1.636 2.225-1.636a2.152 2.152 0 011.52.594l1.132-1.13a3.808 3.808 0 00-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465c.603 0 1.11-.196 1.522-.588a1.911 1.911 0 00.635-1.464 1.92 1.92 0 00-.635-1.456 2.125 2.125 0 00-1.522-.598zm2.427.85a1.156 1.156 0 01.823.365 1.176 1.176 0 010 1.686 1.171 1.171 0 01-.877.357H11.35V8.635h1.487a1.156 1.156 0 01.054 0zm4.124 1.175c-.842 0-1.477.308-1.907.925l.781.491c.288-.417.68-.626 1.175-.626a1.255 1.255 0 01.856.323 1.009 1.009 0 01.366.785v.202c-.34-.193-.774-.289-1.3-.289-.617 0-1.11.145-1.479.434-.37.288-.554.677-.554 1.165a1.476 1.476 0 00.525 1.156c.35.308.785.463 1.305.463.61 0 1.098-.27 1.465-.81h.038v.655h.848v-2.909c0-.61-.19-1.09-.568-1.44-.38-.35-.896-.525-1.551-.525zm2.263.154l1.946 4.422-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368c.494 0 .88.11 1.156.33 0 .372-.147.696-.44.973a1.413 1.413 0 01-.997.414 1.081 1.081 0 01-.69-.232.708.708 0 01-.293-.578c0-.257.12-.47.363-.647.24-.173.54-.26.9-.26Z'
const PAYPAL_PATH =
  'M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z'

const SHAKE_STYLE_ID = 'payment-form-styles'
const SHAKE_STYLE_CONTENT = `
@keyframes payment-form-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.payment-form-shake {
  animation: payment-form-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@media (prefers-reduced-motion: reduce) {
  .payment-form-shake { animation: none; }
}
`

export function PaymentForm({
  amount,
  currency = 'USD',
  showWallets = true,
  wallets = ['apple', 'google', 'paypal'],
  onSubmit,
  onSuccess,
  onError,
  onBrandChange,
  onWallet,
}: PaymentFormProps) {
  // Inject keyframes once.
  React.useEffect(() => {
    if (typeof document === 'undefined') return
    if (document.getElementById(SHAKE_STYLE_ID)) return
    const el = document.createElement('style')
    el.id = SHAKE_STYLE_ID
    el.textContent = SHAKE_STYLE_CONTENT
    document.head.appendChild(el)
  }, [])

  const [number, setNumber] = React.useState('')
  const [name, setName] = React.useState('')
  const [expiry, setExpiry] = React.useState('')
  const [cvc, setCvc] = React.useState('')
  const [cvcFocused, setCvcFocused] = React.useState(false)

  const [submitting, setSubmitting] = React.useState(false)
  const [succeeded, setSucceeded] = React.useState(false)
  const [errors, setErrors] = React.useState<Record<string, string | null>>({
    number: null,
    name: null,
    expiry: null,
    cvc: null,
  })
  const [shakeKey, setShakeKey] = React.useState(0)

  const brand = React.useMemo<CardBrand>(() => detectBrand(number), [number])
  const lastBrand = React.useRef<CardBrand>('unknown')

  function onBrandMaybeChanged(nextBrand: CardBrand) {
    if (nextBrand !== lastBrand.current) {
      lastBrand.current = nextBrand
      onBrandChange?.(nextBrand)
    }
  }

  function formatNumber(raw: string, b: CardBrand): string {
    const digits = raw.replace(/\D/g, '').slice(0, b === 'amex' ? 15 : 16)
    if (b === 'amex') {
      return digits.replace(/^(\d{0,4})(\d{0,6})(\d{0,5}).*$/, (_m, a, bb, c) => [a, bb, c].filter(Boolean).join(' '))
    }
    return digits.replace(/(.{4})/g, '$1 ').trim()
  }

  function onNumberInput(e: React.ChangeEvent<HTMLInputElement>) {
    const nextBrand = detectBrand(e.target.value)
    const next = formatNumber(e.target.value, nextBrand)
    setNumber(next)
    setErrors((prev) => ({ ...prev, number: null }))
    onBrandMaybeChanged(nextBrand)
  }

  function formatExpiry(raw: string): string {
    const d = raw.replace(/\D/g, '').slice(0, 4)
    if (d.length <= 2) return d
    return `${d.slice(0, 2)}/${d.slice(2)}`
  }

  function onExpiryInput(e: React.ChangeEvent<HTMLInputElement>) {
    setExpiry(formatExpiry(e.target.value))
    setErrors((prev) => ({ ...prev, expiry: null }))
  }

  function onCvcInput(e: React.ChangeEvent<HTMLInputElement>) {
    const max = brand === 'amex' ? 4 : 3
    setCvc(e.target.value.replace(/\D/g, '').slice(0, max))
    setErrors((prev) => ({ ...prev, cvc: null }))
  }

  function onNameInput(e: React.ChangeEvent<HTMLInputElement>) {
    setName(e.target.value)
  }

  function validate(): boolean {
    const digits = number.replace(/\D/g, '')
    const expectedLen = brand === 'amex' ? 15 : 16
    const next: Record<string, string | null> = { number: null, name: null, expiry: null, cvc: null }

    next.number = !digits
      ? 'Card number required'
      : digits.length !== expectedLen
        ? `Card number must be ${expectedLen} digits`
        : !luhn(digits)
          ? 'Card number is invalid'
          : null

    next.name = !name.trim() ? 'Name required' : name.trim().length < 2 ? 'Name too short' : null

    const expOk = /^(0[1-9]|1[0-2])\/\d{2}$/.test(expiry)
    if (!expOk) {
      next.expiry = 'Use MM/YY'
    } else {
      const [m, y] = expiry.split('/').map(Number)
      const now = new Date()
      const expDate = new Date(2000 + y, m - 1, 1)
      expDate.setMonth(expDate.getMonth() + 1)
      next.expiry = expDate <= now ? 'Card has expired' : null
    }

    const cvcLen = brand === 'amex' ? 4 : 3
    next.cvc = cvc.length !== cvcLen ? `CVC must be ${cvcLen} digits` : null

    setErrors(next)
    const ok = Object.values(next).every((e) => !e)
    if (!ok) setShakeKey((k) => k + 1)
    return ok
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    if (submitting || succeeded) return
    if (!validate()) return

    setSubmitting(true)
    try {
      const payload: PaymentPayload = {
        number: number.replace(/\D/g, ''),
        name: name.trim(),
        expiry,
        cvc,
        brand,
      }
      if (onSubmit) await onSubmit(payload)
      setSucceeded(true)
      onSuccess?.()
    } catch (err) {
      onError?.(err instanceof Error ? err : new Error(String(err)))
      setShakeKey((k) => k + 1)
    } finally {
      setSubmitting(false)
    }
  }

  const formattedAmount = React.useMemo(() => {
    try {
      return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
    } catch {
      return `${currency} ${amount.toFixed(2)}`
    }
  }, [currency, amount])

  const walletList = React.useMemo(
    () => wallets.filter((w) => ['apple', 'google', 'paypal'].includes(w)),
    [wallets],
  )

  return (
    <div className="bg-card text-card-foreground mx-auto w-full max-w-md rounded-xl border p-6 shadow-sm">
      <div className="mb-4 flex items-baseline justify-between">
        <h3 className="text-lg font-semibold">Pay {formattedAmount}</h3>
        <span className="text-muted-foreground text-xs tracking-wider uppercase">Secure checkout</span>
      </div>

      {/* Wallets row */}
      {showWallets && walletList.length > 0 && (
        <div className="mb-4 space-y-3">
          <div
            className={[
              'grid gap-2',
              walletList.length === 1 ? '' : walletList.length === 2 ? 'grid-cols-2' : 'grid-cols-3',
            ]
              .filter(Boolean)
              .join(' ')}
          >
            {walletList.includes('apple') && (
              <button
                type="button"
                aria-label="Pay with Apple Pay"
                className="flex h-11 items-center justify-center rounded-md bg-black px-3 text-white transition-transform hover:scale-[1.02] active:scale-100"
                onClick={() => onWallet?.('apple')}
              >
                <svg viewBox="0 0 24 24" className="h-7 w-auto" fill="currentColor" aria-hidden="true">
                  <path d={APPLE_PAY_PATH} />
                </svg>
              </button>
            )}
            {walletList.includes('google') && (
              <button
                type="button"
                aria-label="Pay with Google Pay"
                className="flex h-11 items-center justify-center rounded-md border bg-white px-3 text-slate-800 shadow-sm transition-transform hover:scale-[1.02] active:scale-100"
                onClick={() => onWallet?.('google')}
              >
                <svg viewBox="0 0 24 24" className="h-6 w-auto" fill="currentColor" aria-hidden="true">
                  <path d={GOOGLE_PAY_PATH} />
                </svg>
              </button>
            )}
            {walletList.includes('paypal') && (
              <button
                type="button"
                aria-label="Pay with PayPal"
                className="flex h-11 items-center justify-center rounded-md bg-[#003087] px-3 text-white transition-transform hover:scale-[1.02] active:scale-100"
                onClick={() => onWallet?.('paypal')}
              >
                <svg viewBox="0 0 24 24" className="h-6 w-auto" fill="currentColor" aria-hidden="true">
                  <path d={PAYPAL_PATH} />
                </svg>
              </button>
            )}
          </div>

          <div className="flex items-center gap-3">
            <div className="bg-border h-px flex-1" />
            <span className="text-muted-foreground text-[10px] tracking-widest uppercase">or pay with card</span>
            <div className="bg-border h-px flex-1" />
          </div>
        </div>
      )}

      {/* Live preview card */}
      <div aria-hidden="true" className="mb-5 flex justify-center">
        <PaymentCard number={number} name={name} expiry={expiry} cvc={cvc} flipped={cvcFocused} size="md" />
      </div>

      {/* Form */}
      <form className="space-y-3" data-shake={shakeKey} onSubmit={submit}>
        <div className="grid gap-1.5">
          <Label htmlFor="cc-number">Card number</Label>
          <Input
            id="cc-number"
            inputMode="numeric"
            autoComplete="cc-number"
            placeholder="1234 5678 9012 3456"
            value={number}
            aria-invalid={!!errors.number}
            aria-describedby="cc-number-err"
            className={errors.number ? 'border-destructive payment-form-shake' : ''}
            onChange={onNumberInput}
          />
          {errors.number && (
            <p id="cc-number-err" className="text-destructive text-xs" role="alert">
              {errors.number}
            </p>
          )}
        </div>

        <div className="grid gap-1.5">
          <Label htmlFor="cc-name">Name on card</Label>
          <Input
            id="cc-name"
            value={name}
            autoComplete="cc-name"
            placeholder="Jane Doe"
            aria-invalid={!!errors.name}
            aria-describedby="cc-name-err"
            className={errors.name ? 'border-destructive payment-form-shake' : ''}
            onChange={onNameInput}
          />
          {errors.name && (
            <p id="cc-name-err" className="text-destructive text-xs" role="alert">
              {errors.name}
            </p>
          )}
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="grid gap-1.5">
            <Label htmlFor="cc-exp">Expiry</Label>
            <Input
              id="cc-exp"
              inputMode="numeric"
              autoComplete="cc-exp"
              placeholder="MM/YY"
              value={expiry}
              aria-invalid={!!errors.expiry}
              aria-describedby="cc-exp-err"
              className={errors.expiry ? 'border-destructive payment-form-shake' : ''}
              onChange={onExpiryInput}
            />
            {errors.expiry && (
              <p id="cc-exp-err" className="text-destructive text-xs" role="alert">
                {errors.expiry}
              </p>
            )}
          </div>
          <div className="grid gap-1.5">
            <Label htmlFor="cc-cvc">CVC</Label>
            <Input
              id="cc-cvc"
              inputMode="numeric"
              autoComplete="cc-csc"
              placeholder={brand === 'amex' ? '1234' : '123'}
              value={cvc}
              aria-invalid={!!errors.cvc}
              aria-describedby="cc-cvc-err"
              className={errors.cvc ? 'border-destructive payment-form-shake' : ''}
              onChange={onCvcInput}
              onFocus={() => setCvcFocused(true)}
              onBlur={() => setCvcFocused(false)}
            />
            {errors.cvc && (
              <p id="cc-cvc-err" className="text-destructive text-xs" role="alert">
                {errors.cvc}
              </p>
            )}
          </div>
        </div>

        <Button type="submit" className="mt-2 h-11 w-full text-base" disabled={submitting || succeeded}>
          {submitting && <Loader2 className="mr-2 size-4 animate-spin" />}
          {succeeded ? <span>Paid ✓</span> : submitting ? <span>Processing…</span> : <span>Pay {formattedAmount}</span>}
        </Button>
      </form>
    </div>
  )
}

```

## pie-chart

- type: `registry:ui`
- description: React mirror of @uipkge/pie-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/pie-chart/PieChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// PieChart
// ─────────────────────────────────────────────────────────────────────────

export interface PieChartProps {
  data: Record<string, any>[]
  nameField?: string
  valueField?: string
  height?: number | string
  donut?: boolean
  option?: any
  className?: string
}

export const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(
  ({ data, nameField = 'name', valueField = 'value', height = 300, donut = false, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const chartData = data.map((d) => ({
        name: d[nameField],
        value: d[valueField],
      }))

      const series = [
        {
          type: 'pie',
          radius: donut ? ['45%', '70%'] : '65%',
          center: ['50%', '45%'],
          itemStyle: { borderWidth: 0 },
          label: { show: false },
          data: chartData,
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [data, nameField, valueField, donut, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
PieChart.displayName = 'PieChart'

```

### `packages/registry-react/components/charts/pie-chart/index.ts`

```ts
export { PieChart, type PieChartProps } from './PieChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## pin-input

- type: `registry:ui`
- description: One-time-code input — N separate boxes that auto-advance and accept paste. Use for SMS verification, 2FA, and short numeric codes. Length, masking, and per-slot status all configurable.
- npm deps: `input-otp`, `lucide-react`

### `packages/registry-react/components/pin-input/pin-input.tsx`

```tsx
'use client'

import * as React from 'react'
import { OTPInput, OTPInputContext } from 'input-otp'
import { Minus } from 'lucide-react'
import { cn } from '@/lib/utils'

type PinInputStatus = 'error' | 'warning' | 'success' | 'default'
type PinInputSize = 'sm' | 'md' | 'lg'

interface PinInputContextValue {
  mask: boolean
  status: PinInputStatus
  size: PinInputSize
}

const PinInputUiContext = React.createContext<PinInputContextValue>({
  mask: false,
  status: 'default',
  size: 'md',
})

export interface PinInputProps
  extends Omit<React.ComponentPropsWithoutRef<typeof OTPInput>, 'render' | 'children' | 'maxLength' | 'size'> {
  /** Number of slots. Maps to input-otp's `maxLength`. */
  maxLength?: number
  /** Render the typed characters as dots instead of plain text. */
  mask?: boolean
  status?: PinInputStatus
  size?: PinInputSize
  /** Fires with the joined string once every slot is filled. */
  onComplete?: (value: string) => void
  children?: React.ReactNode
  className?: string
  containerClassName?: string
}

const PinInput = React.forwardRef<React.ElementRef<typeof OTPInput>, PinInputProps>(
  (
    {
      className,
      containerClassName,
      maxLength = 6,
      mask = false,
      status = 'default',
      size = 'md',
      onComplete,
      children,
      ...props
    },
    ref,
  ) => {
    return (
      <PinInputUiContext.Provider value={{ mask, status, size }}>
        <OTPInput
          ref={ref}
          data-uipkge=""
          data-slot="pin-input"
          maxLength={maxLength}
          onComplete={onComplete}
          containerClassName={cn(
            'flex items-center gap-2 has-disabled:opacity-50',
            containerClassName,
          )}
          className={cn('disabled:cursor-not-allowed', className)}
          {...props}
        >
          {children}
        </OTPInput>
      </PinInputUiContext.Provider>
    )
  },
)
PinInput.displayName = 'PinInput'

const PinInputGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="pin-input-group"
      className={cn('flex items-center', className)}
      {...props}
    />
  ),
)
PinInputGroup.displayName = 'PinInputGroup'

const sizeClassMap: Record<PinInputSize, string> = {
  sm: 'h-8 w-8 text-sm',
  lg: 'h-12 w-12 text-xl',
  md: 'h-10 w-10 text-base',
}

const statusClassMap: Record<PinInputStatus, string> = {
  error: 'border-destructive focus-within:border-destructive focus-within:ring-destructive/40 text-destructive',
  warning: 'border-warning focus-within:border-warning focus-within:ring-warning/40 text-warning',
  success: 'border-success focus-within:border-success focus-within:ring-success/40 text-success',
  default: '',
}

export interface PinInputSlotProps extends React.ComponentPropsWithoutRef<'div'> {
  index: number
  /** Override the inherited mask flag for this slot. */
  mask?: boolean
}

const PinInputSlot = React.forwardRef<HTMLDivElement, PinInputSlotProps>(
  ({ index, mask: maskProp, className, ...props }, ref) => {
    const ui = React.useContext(PinInputUiContext)
    const inputContext = React.useContext(OTPInputContext)
    const slot = inputContext.slots[index]
    const char = slot?.char ?? null
    const isActive = slot?.isActive ?? false
    const effectiveMask = maskProp ?? ui.mask

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="pin-input-slot"
        data-active={isActive ? '' : undefined}
        className={cn(
          'border-input bg-background text-foreground relative -ml-px flex items-center justify-center border text-center shadow-xs transition-[border-color,box-shadow] outline-none first:ml-0 first:rounded-l-md last:rounded-r-md',
          'focus-within:border-ring focus-within:ring-ring/40 focus-within:relative focus-within:z-10 focus-within:ring-2',
          'disabled:cursor-not-allowed disabled:opacity-50',
          isActive && 'border-ring ring-ring/40 z-10 ring-2',
          sizeClassMap[ui.size],
          statusClassMap[ui.status],
          className,
        )}
        {...props}
      >
        {char != null && (effectiveMask ? <span className="bg-foreground size-2 rounded-full" /> : char)}
      </div>
    )
  },
)
PinInputSlot.displayName = 'PinInputSlot'

const PinInputSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
  ({ children, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="pin-input-separator" role="separator" {...props}>
      {children ?? <Minus />}
    </div>
  ),
)
PinInputSeparator.displayName = 'PinInputSeparator'

export { PinInput, PinInputGroup, PinInputSlot, PinInputSeparator }

```

### `packages/registry-react/components/pin-input/index.ts`

```ts
export {
  PinInput,
  PinInputGroup,
  PinInputSlot,
  PinInputSeparator,
  type PinInputProps,
  type PinInputSlotProps,
} from './pin-input'

```

## popover

- type: `registry:ui`
- description: Click-triggered floating panel anchored to a trigger element. Supports optional localStorage persistence and configurable dismissal (click-outside, escape, manual). Built on @radix-ui/react-popover with collision detection.
- npm deps: `@radix-ui/react-popover`

### `packages/registry-react/components/popover/popover.tsx`

```tsx
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'
import { cn } from '@/lib/utils'

export type PopoverCloseBehavior = 'auto' | 'click-outside' | 'esc' | 'manual' | 'none'

interface PopoverContextValue {
  closeBehavior: PopoverCloseBehavior
}

const PopoverContext = React.createContext<PopoverContextValue>({ closeBehavior: 'auto' })

export interface PopoverProps extends React.ComponentProps<typeof PopoverPrimitive.Root> {
  /** Persist open state in localStorage. `true` uses an auto-generated key,
   *  a string uses that key verbatim, `false` (default) disables. */
  persist?: string | boolean
  /** Controls how the popover may be dismissed. */
  closeBehavior?: PopoverCloseBehavior
}

function Popover({
  persist = false,
  closeBehavior = 'auto',
  open,
  defaultOpen,
  onOpenChange,
  children,
  ...props
}: PopoverProps) {
  const autoId = React.useId()
  const storageKey = React.useMemo(() => {
    if (persist === false) return null
    if (persist === true) return `uipkge-popover-${autoId}`
    return persist
  }, [persist, autoId])

  const isControlled = open !== undefined
  const [localOpen, setLocalOpen] = React.useState<boolean>(defaultOpen ?? false)

  // Hydrate from localStorage on mount.
  React.useEffect(() => {
    if (!storageKey || typeof localStorage === 'undefined') return
    if (localStorage.getItem(storageKey) === '1') {
      setLocalOpen(true)
      if (!isControlled) onOpenChange?.(true)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [storageKey])

  // Persist current open state.
  const effectiveOpen = isControlled ? open : localOpen
  React.useEffect(() => {
    if (!storageKey || typeof localStorage === 'undefined') return
    if (effectiveOpen) localStorage.setItem(storageKey, '1')
    else localStorage.removeItem(storageKey)
  }, [storageKey, effectiveOpen])

  function handleOpenChange(value: boolean) {
    setLocalOpen(value)
    onOpenChange?.(value)
  }

  return (
    <PopoverContext.Provider value={{ closeBehavior }}>
      <PopoverPrimitive.Root
        data-uipkge=""
        data-slot="popover"
        open={open}
        defaultOpen={defaultOpen}
        onOpenChange={handleOpenChange}
        {...props}
      >
        {children}
      </PopoverPrimitive.Root>
    </PopoverContext.Provider>
  )
}

const PopoverTrigger = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
>((props, ref) => (
  <PopoverPrimitive.Trigger ref={ref} data-uipkge="" data-slot="popover-trigger" {...props} />
))
PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName

const PopoverAnchor = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Anchor>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>
>((props, ref) => (
  <PopoverPrimitive.Anchor ref={ref} data-uipkge="" data-slot="popover-anchor" {...props} />
))
PopoverAnchor.displayName = PopoverPrimitive.Anchor.displayName

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
  const { closeBehavior } = React.useContext(PopoverContext)

  function handlePointerDownOutside(e: Event) {
    if (closeBehavior === 'esc' || closeBehavior === 'manual' || closeBehavior === 'none') {
      e.preventDefault()
    }
  }

  function handleEscapeKeyDown(e: KeyboardEvent) {
    if (closeBehavior === 'click-outside' || closeBehavior === 'manual' || closeBehavior === 'none') {
      e.preventDefault()
    }
  }

  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        ref={ref}
        data-uipkge=""
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        onPointerDownOutside={handlePointerDownOutside}
        onEscapeKeyDown={handleEscapeKeyDown}
        className={cn(
          'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
})
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent }

```

### `packages/registry-react/components/popover/index.ts`

```ts
export {
  Popover,
  PopoverTrigger,
  PopoverAnchor,
  PopoverContent,
  type PopoverProps,
  type PopoverCloseBehavior,
} from './popover'

```

## pricing-01

- type: `registry:block`
- description: Three-tier pricing table (Starter / Team / Enterprise) with a monthly/yearly ToggleGroup that flips prices live. Middle tier is highlighted with a ring + "Most popular" badge. Each tier spells out its bullet list inline so consumers can edit any line directly.
- npm deps: `lucide-react`
- registry deps: `badge`, `button`, `card`, `toggle-group`

### `packages/registry-react/blocks/pricing-01/Pricing01.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, Sparkles } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'

type Cycle = 'monthly' | 'yearly'

export function Pricing01() {
  const [cycle, setCycle] = React.useState<Cycle>('monthly')

  return (
    <section className="bg-background">
      <div className="mx-auto max-w-6xl px-6 py-24">
        <div className="mb-10 text-center">
          <p className="text-primary text-sm font-medium tracking-widest uppercase">Pricing</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Plans for teams of every size</h2>
          <p className="text-muted-foreground mx-auto mt-3 max-w-xl text-lg">
            No hidden fees. Cancel anytime. Save 20% with annual billing.
          </p>

          <div className="mt-6 inline-flex">
            <ToggleGroup
              type="single"
              value={cycle}
              onValueChange={(v) => v && setCycle(v as Cycle)}
            >
              <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
              <ToggleGroupItem value="yearly">
                Yearly
                <Badge variant="secondary" className="ml-2">−20%</Badge>
              </ToggleGroupItem>
            </ToggleGroup>
          </div>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle className="text-xl">Starter</CardTitle>
              <CardDescription>For small teams trying things out.</CardDescription>
              <div className="mt-4 flex items-baseline gap-1">
                <span className="text-4xl font-semibold tracking-tight">${cycle === 'monthly' ? 9 : 7}</span>
                <span className="text-muted-foreground text-sm">/ user / month</span>
              </div>
            </CardHeader>
            <CardContent>
              <ul className="space-y-3 text-sm">
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Up to 10 employees</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Core HR + directory</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Time off + holidays</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Email support</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button className="w-full" variant="outline">Start free</Button>
            </CardFooter>
          </Card>

          <div className="relative">
            <Badge className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 gap-1 shadow-sm">
              <Sparkles className="size-3" /> Most popular
            </Badge>
            <Card className="border-primary ring-primary/10 shadow-lg ring-1">
              <CardHeader>
                <CardTitle className="text-xl">Team</CardTitle>
                <CardDescription>For growing companies scaling people ops.</CardDescription>
                <div className="mt-4 flex items-baseline gap-1">
                  <span className="text-4xl font-semibold tracking-tight">${cycle === 'monthly' ? 29 : 24}</span>
                  <span className="text-muted-foreground text-sm">/ user / month</span>
                </div>
              </CardHeader>
              <CardContent>
                <ul className="space-y-3 text-sm">
                  <li className="flex items-start gap-2">
                    <Check className="text-success mt-0.5 size-4 shrink-0" />
                    <span>Unlimited employees</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="text-success mt-0.5 size-4 shrink-0" />
                    <span>Payroll + tax filing</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="text-success mt-0.5 size-4 shrink-0" />
                    <span>Onboarding workflows</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="text-success mt-0.5 size-4 shrink-0" />
                    <span>Performance reviews</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <Check className="text-success mt-0.5 size-4 shrink-0" />
                    <span>Slack + priority support</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button className="w-full">Start 14-day trial</Button>
              </CardFooter>
            </Card>
          </div>

          <Card>
            <CardHeader>
              <CardTitle className="text-xl">Enterprise</CardTitle>
              <CardDescription>Custom controls for regulated industries.</CardDescription>
              <div className="mt-4 flex items-baseline gap-1">
                <span className="text-3xl font-semibold tracking-tight">Custom</span>
              </div>
            </CardHeader>
            <CardContent>
              <ul className="space-y-3 text-sm">
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Everything in Team</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>SSO + SCIM provisioning</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Audit logs + role policies</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>Dedicated success manager</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="text-success mt-0.5 size-4 shrink-0" />
                  <span>99.99% SLA</span>
                </li>
              </ul>
            </CardContent>
            <CardFooter>
              <Button className="w-full" variant="outline">Talk to sales</Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </section>
  )
}

```

## profile-menu

- type: `registry:block`
- description: Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
- npm deps: `lucide-react`
- registry deps: `avatar`, `dropdown-menu`

### `packages/registry-react/blocks/profile-menu/ProfileMenu.tsx`

```tsx
'use client'

import * as React from 'react'
import { BadgeCheck, Bell, CreditCard, LogOut, Sparkles, Settings } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

interface User {
  name: string
  email: string
  avatar?: string
}

type ProfileMenuKey = 'upgrade' | 'account' | 'billing' | 'notifications' | 'settings' | 'logout'

export interface ProfileMenuProps {
  user?: User
  /** Custom trigger. Receives the resolved user + computed initials. When
   *  omitted, a default avatar button is rendered. */
  trigger?: (ctx: { user: User; initials: string }) => React.ReactNode
  onSelect?: (key: ProfileMenuKey) => void
}

export function ProfileMenu({
  user = { name: 'Alex Morgan', email: 'alex@example.com', avatar: '' },
  trigger,
  onSelect,
}: ProfileMenuProps) {
  const initials = React.useMemo(() => {
    const parts = user.name.trim().split(/\s+/).slice(0, 2)
    return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'
  }, [user.name])

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        {trigger ? (
          trigger({ user, initials })
        ) : (
          <button
            type="button"
            className="hover:bg-accent focus-visible:ring-ring flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-1 focus-visible:outline-none"
            aria-label="Open profile menu"
          >
            <Avatar className="size-7">
              {user.avatar ? <AvatarImage src={user.avatar} alt={user.name} /> : null}
              <AvatarFallback className="bg-primary/10 text-primary text-[11px] font-semibold">
                {initials}
              </AvatarFallback>
            </Avatar>
          </button>
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-60 rounded-lg" align="end" sideOffset={8}>
        <DropdownMenuLabel className="p-0 font-normal">
          <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
            <Avatar className="size-9 rounded-lg">
              {user.avatar ? <AvatarImage src={user.avatar} alt={user.name} /> : null}
              <AvatarFallback className="bg-primary/10 text-primary rounded-lg text-xs font-semibold">
                {initials}
              </AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-left leading-tight">
              <span className="truncate text-sm font-semibold">{user.name}</span>
              <span className="text-muted-foreground truncate text-xs">{user.email}</span>
            </div>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem onSelect={() => onSelect?.('upgrade')}>
            <Sparkles className="size-4" />
            Upgrade to Pro
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem onSelect={() => onSelect?.('account')}>
            <BadgeCheck className="size-4" />
            Account
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onSelect?.('billing')}>
            <CreditCard className="size-4" />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onSelect?.('notifications')}>
            <Bell className="size-4" />
            Notifications
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => onSelect?.('settings')}>
            <Settings className="size-4" />
            Settings
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={() => onSelect?.('logout')}>
          <LogOut className="size-4" />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

```

## progress

- type: `registry:ui`
- description: Linear progress bar — determinate or indeterminate. Two visual densities (slim, default), four tones, and an optional inline percentage label.
- npm deps: `@radix-ui/react-progress`

### `packages/registry-react/components/progress/Progress.tsx`

```tsx
'use client'

import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'
import { cn } from '@/lib/utils'

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="progress"
    value={value}
    className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      data-uipkge=""
      data-slot="progress-indicator"
      className="bg-primary h-full w-full flex-1 transition-colors duration-200"
      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = 'Progress'

export { Progress }

```

### `packages/registry-react/components/progress/index.ts`

```ts
export { Progress } from './Progress'

```

## progress-breakdown

- type: `registry:block`
- description: Labeled progress bars in a SectionCard. Each bar cycles through chart-1..5 colors.
- npm deps: `lucide-react`
- registry deps: `section-card`, `progress-item`

### `packages/registry-react/blocks/progress-breakdown/ProgressBreakdown.tsx`

```tsx
import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import { ProgressItem } from '@/components/ui/progress-item'

interface BreakdownItem {
  name: string
  value: number
  secondaryLabel?: string
}

export interface ProgressBreakdownProps {
  title?: string
  description?: string
  items: BreakdownItem[]
  headerIcon?: LucideIcon
  className?: string
}

export function ProgressBreakdown({ title, description, items, headerIcon: HeaderIcon, className }: ProgressBreakdownProps) {
  return (
    <SectionCard
      title={title ?? 'Breakdown'}
      description={description}
      className={className}
      contentClassName="space-y-4"
      headerAction={HeaderIcon ? <HeaderIcon className="text-muted-foreground size-5" /> : undefined}
    >
      {items.map((item, index) => (
        <ProgressItem
          key={item.name}
          label={item.name}
          value={item.value}
          secondaryLabel={item.secondaryLabel}
          colorIndex={index}
        />
      ))}
    </SectionCard>
  )
}

```

## progress-item

- type: `registry:ui`
- description: Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.
- registry deps: `progress`

### `packages/registry-react/components/progress-item/ProgressItem.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { Progress } from '@/components/ui/progress'

export interface ProgressItemProps {
  label: string
  value: number
  secondaryLabel?: string
  barClass?: string
  className?: string
  colorIndex?: number
}

// Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.
const barColors = [
  '[&_[data-slot=progress-indicator]]:bg-primary',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',
  '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',
]

function ProgressItem({ label, value, secondaryLabel, barClass, className, colorIndex }: ProgressItemProps) {
  const colorClass = colorIndex !== undefined ? barColors[colorIndex % barColors.length] : ''

  return (
    <div className={cn('group/progress space-y-1.5', className)}>
      <div className="flex items-center justify-between text-sm">
        <span className="font-medium">{label}</span>
        <span className="text-muted-foreground text-xs tabular-nums">{secondaryLabel ?? `${value}%`}</span>
      </div>
      <Progress value={value} className={cn('h-2 transition-colors duration-200', colorClass, barClass)} />
    </div>
  )
}

export { ProgressItem }

```

### `packages/registry-react/components/progress-item/index.ts`

```ts
export { ProgressItem, type ProgressItemProps } from './ProgressItem'

```

## progress-linear

- type: `registry:ui`
- description: Top-of-screen page-loading bar (à la NProgress / nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/progress-linear/ProgressLinear.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'

export interface ProgressLinearProps {
  className?: string
  value?: number
  bgColor?: string
  buffer?: number
  color?: string
  height?: number | string
  indeterminate?: boolean
  reverse?: boolean
  rounded?: ProgressLinearVariants['rounded']
  stream?: boolean
  striped?: boolean
  active?: boolean
}

// Keyframes are scoped in the Vue SFC via <style scoped>; React has no
// scoped styles, so we inline the same keyframes + animation utilities once.
// The class names (animate-indeterminate*, animate-stream) are referenced
// from the markup below and match the Vue source 1:1.
const styles = `
@media (prefers-reduced-motion: no-preference) {
  .uipkge-pl .animate-indeterminate {
    animation: uipkge-pl-indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .uipkge-pl .animate-indeterminate1 {
    animation: uipkge-pl-indeterminate1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .uipkge-pl .animate-indeterminate2 {
    animation: uipkge-pl-indeterminate2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}
.uipkge-pl .animate-stream {
  animation: uipkge-pl-stream 1s linear infinite;
}
@keyframes uipkge-pl-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes uipkge-pl-indeterminate1 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes uipkge-pl-indeterminate2 {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}
@keyframes uipkge-pl-stream {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}
`

function ProgressLinear({
  className,
  value = 0,
  bgColor,
  buffer,
  color,
  height,
  indeterminate = false,
  reverse = false,
  rounded,
  stream = false,
  striped = false,
  active = true,
}: ProgressLinearProps) {
  const normalizedValue = Math.min(100, Math.max(0, value))
  const normalizedBuffer = Math.min(100, Math.max(0, buffer || 0))

  const heightValue =
    typeof height === 'number' ? `${height}px` : typeof height === 'string' ? height : '4px'

  const bgColorValue = bgColor || 'currentColor'
  const progressColorValue = color || 'currentColor'

  const containerClasses = cn('uipkge-pl', progressLinearVariants({ rounded }), className)

  return (
    <div
      data-uipkge=""
      data-slot="progress-linear"
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={indeterminate ? undefined : normalizedValue}
      className={containerClasses}
      style={{ height: heightValue }}
    >
      <style>{styles}</style>

      {/* Background */}
      <div
        className={cn(
          'absolute inset-0 transition-colors duration-300',
          striped
            ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.1)_8px,rgba(255,255,255,0.1)_16px)]'
            : '',
          !indeterminate && normalizedBuffer > 0 ? 'opacity-30' : 'opacity-100',
        )}
        style={{
          backgroundColor: bgColorValue,
          width: normalizedBuffer > 0 ? `${normalizedBuffer}%` : '100%',
        }}
      />

      {/* Buffer (if buffer > 0) */}
      {!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100 && (
        <div
          className={cn(
            'absolute inset-0 transition-colors duration-300',
            reverse ? 'right-0 left-auto' : 'right-auto left-0',
            striped
              ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.15)_8px,rgba(255,255,255,0.15)_16px)]'
              : '',
          )}
          style={{
            backgroundColor: bgColorValue,
            width: `${normalizedBuffer}%`,
            opacity: 0.3,
          }}
        />
      )}

      {/* Stream lines (when stream is true) */}
      {stream && !indeterminate && active && (
        <div
          className={cn('absolute inset-0 overflow-hidden', reverse ? 'right-0 left-auto' : 'right-auto left-0')}
        >
          <div
            className="animate-stream absolute inset-0 bg-[repeating-linear-gradient(90deg,transparent,transparent_10px,rgba(255,255,255,0.2)_10px,rgba(255,255,255,0.2)_20px)] bg-[length:40px_40px]"
            style={{ width: `${normalizedBuffer || 100}%` }}
          />
        </div>
      )}

      {/* Progress bar */}
      <div
        className={cn(
          'absolute inset-y-0 transition-colors duration-300',
          reverse ? 'right-0 left-auto' : 'right-auto left-0',
          indeterminate ? 'motion-safe:animate-indeterminate' : '',
          striped && !indeterminate
            ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.25)_8px,rgba(255,255,255,0.25)_16px)]'
            : '',
        )}
        style={{
          width: indeterminate ? '100%' : `${normalizedValue}%`,
          backgroundColor: indeterminate ? undefined : progressColorValue,
        }}
      >
        {/* Indeterminate animations */}
        {indeterminate && (
          <>
            <div
              className="motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit"
              style={{ backgroundColor: progressColorValue }}
            />
            <div
              className="motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit"
              style={{ backgroundColor: progressColorValue }}
            />
          </>
        )}
      </div>
    </div>
  )
}

export { ProgressLinear }

```

### `packages/registry-react/components/progress-linear/progress-linear.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than inline in the
 * SFC) so `ProgressLinear.vue` can import them without the cva runtime
 * coupling that breaks SSR when several `<ProgressLinear>` instances
 * render before the module graph fully resolves. Sibling pattern to
 * `card/card.variants.ts`.
 */
export const progressLinearVariants = cva('relative overflow-hidden w-full', {
  variants: {
    rounded: {
      none: 'rounded-none',
      sm: 'rounded-sm',
      default: 'rounded-full',
      md: 'rounded-md',
      lg: 'rounded-lg',
      xl: 'rounded-xl',
      full: 'rounded-full',
    },
    color: {
      default: 'bg-primary',
      primary: 'bg-primary',
      secondary: 'bg-secondary',
      destructive: 'bg-destructive',
      success: 'bg-[var(--success)]',
      warning: 'bg-[var(--warning)]',
      info: 'bg-[var(--info)]',
      error: 'bg-destructive',
    },
  },
  defaultVariants: {
    rounded: 'default',
    color: 'default',
  },
})

export type ProgressLinearVariants = VariantProps<typeof progressLinearVariants>

```

### `packages/registry-react/components/progress-linear/index.ts`

```ts
export { ProgressLinear, type ProgressLinearProps } from './ProgressLinear'
export { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'

```

## qr-code

- type: `registry:ui`
- description: Static QR code renderer — pass `value` and a size, get an SVG. Useful for sign-in links, share URLs, and Wi-Fi credentials. No dependencies on a heavy QR library.
- npm deps: `qrcode`

### `packages/registry-react/components/qr-code/QrCode.tsx`

```tsx
'use client'

import * as React from 'react'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- qrcode ships no types unless @types/qrcode (a devDependency) is installed; @ts-ignore stays valid either way
import QRCodeLib from 'qrcode'
import { Loader2, RotateCcw, Check, ScanLine } from 'lucide-react'
import { cn } from '@/lib/utils'

export type QRCodeType = 'canvas' | 'svg'
export type QRCodeStatus = 'active' | 'expired' | 'loading' | 'scanned'
export type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'

export interface QrCodeProps {
  value: string
  type?: QRCodeType
  size?: number
  color?: string
  bgColor?: string
  icon?: string
  iconSize?: number | { width: number; height: number }
  errorLevel?: QRCodeErrorLevel
  bordered?: boolean
  status?: QRCodeStatus
  marginSize?: number
  className?: string
  /** Fired when the "Refresh" action of the expired overlay is clicked. */
  onRefresh?: () => void
  /** Overrides the default download button (parity with the Vue `extra` slot). */
  extra?: React.ReactNode
}

const QrCode = React.forwardRef<HTMLDivElement, QrCodeProps>(
  (
    {
      value,
      type = 'canvas',
      size = 160,
      color = '#000000',
      bgColor = '#ffffff',
      icon,
      iconSize,
      errorLevel = 'M',
      bordered = true,
      status = 'active',
      marginSize = 0,
      className,
      onRefresh,
      extra,
    },
    ref,
  ) => {
    const [qrDataUrl, setQrDataUrl] = React.useState('')
    const [qrSvg, setQrSvg] = React.useState('')

    const iconDimensions =
      typeof iconSize === 'number'
        ? { width: iconSize, height: iconSize }
        : iconSize ?? { width: 40, height: 40 }

    React.useEffect(() => {
      let cancelled = false
      async function generateQR() {
        if (!value || status === 'loading') return
        try {
          const options = {
            width: size,
            margin: marginSize,
            color: { dark: color, light: bgColor },
            errorCorrectionLevel: errorLevel,
          }
          if (type === 'svg') {
            const svg = await QRCodeLib.toString(value, { type: 'svg', ...options })
            if (!cancelled) setQrSvg(svg)
          } else {
            const url = await QRCodeLib.toDataURL(value, options)
            if (!cancelled) setQrDataUrl(url)
          }
        } catch (e) {
          console.error('QR Code generation failed:', e)
        }
      }
      generateQR()
      return () => {
        cancelled = true
      }
    }, [value, type, size, color, bgColor, errorLevel, marginSize, status])

    function downloadQR() {
      const link = document.createElement('a')
      link.download = `qrcode-${value.slice(0, 20)}.png`
      link.href = qrDataUrl
      link.click()
    }

    const statusOverlay = (() => {
      switch (status) {
        case 'expired':
          return { Icon: RotateCcw, text: 'Expired', action: onRefresh ?? null }
        case 'scanned':
          return { Icon: Check, text: 'Scanned', action: null }
        case 'loading':
          return { Icon: Loader2, text: 'Loading...', action: null }
        default:
          return null
      }
    })()

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="qr-code"
        className={cn(
          'inline-flex flex-col items-center gap-2',
          bordered && 'bg-background rounded-lg border p-4',
          className,
        )}
      >
        <div
          className="relative inline-flex items-center justify-center overflow-hidden"
          style={{ width: `${size}px`, height: `${size}px` }}
        >
          {/* QR Code */}
          {type === 'svg' && qrSvg ? (
            <div className="size-full" dangerouslySetInnerHTML={{ __html: qrSvg }} />
          ) : qrDataUrl ? (
            <img src={qrDataUrl} alt={`QR Code for ${value}`} className="size-full" />
          ) : null}

          {/* Icon overlay */}
          {icon && status === 'active' && (
            <div className="absolute inset-0 flex items-center justify-center">
              <div
                className="overflow-hidden rounded-md bg-white shadow-sm"
                style={{ width: `${iconDimensions.width}px`, height: `${iconDimensions.height}px` }}
              >
                <img src={icon} alt="" className="size-full object-cover" />
              </div>
            </div>
          )}

          {/* Status overlay */}
          {statusOverlay && (
            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-white/90 backdrop-blur-sm">
              <statusOverlay.Icon className={cn('size-8', status === 'loading' && 'animate-spin')} />
              <span className="text-foreground text-sm font-medium">{statusOverlay.text}</span>
              {statusOverlay.action && (
                <button
                  type="button"
                  className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-3 py-1 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
                  onClick={statusOverlay.action}
                >
                  <ScanLine className="size-3" />
                  Refresh
                </button>
              )}
            </div>
          )}
        </div>

        {/* Download button (overridable via the `extra` prop) */}
        {extra !== undefined
          ? extra
          : type === 'canvas' &&
            status === 'active' &&
            qrDataUrl && (
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs underline-offset-2 hover:underline focus-visible:ring-2 focus-visible:outline-none"
                onClick={downloadQR}
              >
                Download
              </button>
            )}
      </div>
    )
  },
)
QrCode.displayName = 'QrCode'

export { QrCode }

```

### `packages/registry-react/components/qr-code/index.ts`

```ts
export { QrCode, type QrCodeProps, type QRCodeType, type QRCodeStatus, type QRCodeErrorLevel } from './QrCode'

```

## quick-actions

- type: `registry:block`
- description: Vertical list of clickable shortcuts in a SectionCard. Pass linkComponent (Next.js Link or your router Link) for SPA routing.
- npm deps: `lucide-react`
- registry deps: `section-card`, `icon-box`

### `packages/registry-react/blocks/quick-actions/QuickActions.tsx`

```tsx
import * as React from 'react'
import { ArrowUpRight } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import { IconBox } from '@/components/ui/icon-box'

interface QuickAction {
  id: string | number
  label: string
  icon?: LucideIcon
  route: string
}

export interface QuickActionsProps {
  title?: string
  description?: string
  actions: QuickAction[]
  /** Link element to render for each action — `'a'` (default) or a router
   *  Link component (e.g. Next.js `Link`). It receives `to`, `href`, and
   *  `className`, mirroring the Vue polymorphic `linkComponent`. */
  linkComponent?: React.ElementType
  className?: string
}

export function QuickActions({
  title,
  description,
  actions,
  linkComponent: LinkComponent = 'a',
  className,
}: QuickActionsProps) {
  return (
    <SectionCard
      title={title ?? 'Quick Actions'}
      description={description}
      contentClassName="flex flex-col gap-2"
      className={className}
    >
      {actions.map((action) => (
        <LinkComponent
          key={action.id}
          to={action.route}
          href={action.route}
          className="hover:border-border hover:bg-muted/50 group flex cursor-pointer items-center gap-3 rounded-lg border border-transparent p-3 transition-all duration-200"
        >
          {action.icon && <IconBox icon={action.icon} />}
          <span className="flex-1 text-sm font-medium">{action.label}</span>
          <ArrowUpRight className="text-muted-foreground size-4 opacity-0 transition-all duration-200 group-hover:opacity-100" />
        </LinkComponent>
      ))}
    </SectionCard>
  )
}

```

## radar-chart

- type: `registry:ui`
- description: React mirror of @uipkge/radar-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/radar-chart/RadarChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// RadarChart
// ─────────────────────────────────────────────────────────────────────────

export interface RadarChartProps {
  indicators: { name: string; max: number }[]
  data: { name: string; value: number[] }[]
  height?: number | string
  option?: any
  className?: string
}

export const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(
  ({ indicators, data, height = 300, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'radar',
          data: data.map((d, i) => ({
            ...d,
            itemStyle: { color: theme.colors[i % theme.colors.length] },
            areaStyle: { opacity: 0.15 },
            lineStyle: { width: 2 },
          })),
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        legend: {
          bottom: 0,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: { fontSize: 11 },
        },
        radar: {
          indicator: indicators,
          radius: '60%',
          center: ['50%', '45%'],
          axisName: { fontSize: 11 },
          splitArea: { areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.05)'] } },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [indicators, data, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
RadarChart.displayName = 'RadarChart'

```

### `packages/registry-react/components/charts/radar-chart/index.ts`

```ts
export { RadarChart, type RadarChartProps } from './RadarChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## radio-group

- type: `registry:ui`
- description: Single-selection group of radio inputs. Vertical or horizontal layout, optional descriptions per item, and full keyboard navigation. Pair with Form for validation messages.
- npm deps: `lucide-react`, `@radix-ui/react-radio-group`

### `packages/registry-react/components/radio-group/radio-group.tsx`

```tsx
'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { Circle } from 'lucide-react'
import { cn } from '@/lib/utils'

export type RadioOption = string | { label: string; value: string; disabled?: boolean }

// Make group-level config (disabled / size / optionType / buttonVariant /
// orientation) reachable from items without manual prop drilling — the React
// equivalent of the Vue provide('radioGroup').
type RadioGroupContextValue = {
  disabled?: boolean
  size?: 'small' | 'middle' | 'large'
  optionType?: 'default' | 'button'
  buttonVariant?: 'outline' | 'solid'
  orientation?: 'horizontal' | 'vertical'
}

const RadioGroupContext = React.createContext<RadioGroupContextValue>({})

function normalizeOption(option: RadioOption): { label: string; value: string; disabled?: boolean } {
  if (typeof option === 'string') {
    return { label: option, value: option }
  }
  return option
}

export interface RadioGroupProps
  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'defaultValue' | 'dir'> {
  /** The controlled value of the radio items to check. */
  value?: string
  /** The value of the radio items that should be checked when initially rendered. */
  defaultValue?: string
  /** When `true`, prevents the user from interacting with the radio group */
  disabled?: boolean
  /** The orientation of the radio items */
  orientation?: 'horizontal' | 'vertical'
  /** When `true`, keyboard navigation will loop from last item to first, and vice versa */
  loop?: boolean
  /** Label for the radio group */
  label?: string
  /** Hint text for the radio group */
  hint?: string
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Density of the radio items */
  density?: 'compact' | 'default' | 'comfortable'
  /** Whether the radio group appears flat */
  flat?: boolean
  /** Whether to show a border around the group */
  bordered?: boolean
  /** The reading direction */
  dir?: 'ltr' | 'rtl'
  /** Array of options to render automatically */
  options?: RadioOption[]
  /** Size of button-style radios */
  size?: 'small' | 'middle' | 'large'
  /** Type of options to render */
  optionType?: 'default' | 'button'
  /** Visual variant for button-style radios */
  buttonVariant?: 'outline' | 'solid'
}

// Density classes
const groupDensityClasses = {
  compact: 'gap-1',
  default: 'gap-3',
  comfortable: 'gap-4',
}

const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(
  (
    {
      className,
      value,
      defaultValue,
      disabled = false,
      orientation = 'vertical',
      loop = true,
      label,
      hint,
      errorMessages,
      error,
      density = 'default',
      flat = false,
      bordered = false,
      dir,
      options,
      size = 'middle',
      optionType = 'default',
      buttonVariant = 'outline',
      children,
      ...props
    },
    ref,
  ) => {
    const hasError =
      Boolean(error) ||
      Boolean(errorMessages && (typeof errorMessages === 'string' ? errorMessages : errorMessages.length > 0))

    return (
      <RadioGroupContext.Provider value={{ disabled, size, optionType, buttonVariant, orientation }}>
        {/*
          `className` is forwarded ONLY to RadioGroupRoot below (per shadcn
          convention). Applying it on the outer wrapper as well caused grid-*
          utilities to fight the wrapper's `flex flex-col`, so consumers had
          to fall back to column-count hacks. Forwarding to one element keeps
          layout intent unambiguous.
        */}
        <div className="flex flex-col gap-2">
          {label && <label className="text-sm font-medium">{label}</label>}

          {hint && !hasError && <p className="text-muted-foreground text-xs">{hint}</p>}

          <RadioGroupPrimitive.Root
            ref={ref}
            data-slot="radio-group"
            value={value}
            defaultValue={defaultValue}
            disabled={disabled}
            orientation={orientation}
            loop={loop}
            dir={dir}
            className={cn(
              'grid gap-3',
              orientation === 'horizontal' && 'flex flex-row items-center gap-4',
              optionType === 'button' && orientation === 'horizontal' && 'flex flex-row items-stretch gap-0',
              optionType === 'button' && orientation === 'vertical' && 'flex flex-col items-stretch gap-0',
              optionType !== 'button' && groupDensityClasses[density],
              bordered && 'rounded-lg border p-4',
              className,
            )}
            {...props}
          >
            {options && options.length > 0
              ? optionType === 'button'
                ? options.map((option) => {
                    const opt = normalizeOption(option)
                    return <RadioButton key={opt.value} value={opt.value} disabled={opt.disabled} label={opt.label} />
                  })
                : options.map((option) => {
                    const opt = normalizeOption(option)
                    return (
                      <div key={opt.value} className="flex items-center gap-2">
                        <RadioGroupItem id={opt.value} value={opt.value} disabled={opt.disabled} />
                        <label
                          htmlFor={opt.value}
                          className={cn(
                            'cursor-pointer text-sm font-medium select-none',
                            opt.disabled && 'cursor-not-allowed opacity-50',
                          )}
                        >
                          {opt.label}
                        </label>
                      </div>
                    )
                  })
              : children}
          </RadioGroupPrimitive.Root>

          {hasError && (
            <div className="flex flex-col gap-0.5">
              {typeof errorMessages === 'string' ? (
                <p className="text-destructive text-xs">{errorMessages}</p>
              ) : (
                errorMessages?.map((msg, i) => (
                  <p key={i} className="text-destructive text-xs">
                    {msg}
                  </p>
                ))
              )}
            </div>
          )}
        </div>
      </RadioGroupContext.Provider>
    )
  },
)
RadioGroup.displayName = 'RadioGroup'

export interface RadioGroupItemProps
  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'children'> {
  /** Size of the radio item */
  size?: 'sm' | 'md' | 'lg'
  /** Custom color for the checked state */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Label text displayed next to the radio item */
  label?: string
  /** Hint text shown below the radio item */
  hint?: string
  /** Error message to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Density of the radio item */
  density?: 'compact' | 'default' | 'comfortable'
  /** Label position - before or after the radio */
  labelPosition?: 'before' | 'after'
  /** Loading state */
  loading?: boolean
  /** Hide the indicator icon */
  hideIcon?: boolean
  children?: React.ReactNode
}

// Size classes
const sizeClasses = {
  sm: 'size-3.5',
  md: 'size-4',
  lg: 'size-5',
}

const indicatorSizes = {
  sm: 'size-1.5',
  md: 'size-2',
  lg: 'size-2.5',
}

// Color classes
const colorClasses: Record<string, string> = {
  primary: 'data-[state=checked]:border-primary',
  secondary: 'data-[state=checked]:border-secondary',
  success: 'data-[state=checked]:border-[var(--success)] data-[state=checked]:text-[var(--success)]',
  warning: 'data-[state=checked]:border-[var(--warning)] data-[state=checked]:text-[var(--warning)]',
  error: 'data-[state=checked]:border-destructive data-[state=checked]:text-destructive',
  info: 'data-[state=checked]:border-[var(--info)] data-[state=checked]:text-[var(--info)]',
}

// Density classes
const itemDensityClasses = {
  compact: 'gap-1',
  default: 'gap-2',
  comfortable: 'gap-3',
}

const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemProps>(
  (
    {
      className,
      id,
      value,
      disabled,
      size = 'md',
      color = 'primary',
      label,
      hint,
      errorMessages,
      error,
      density = 'default',
      labelPosition = 'after',
      loading,
      hideIcon = false,
      children,
      ...props
    },
    ref,
  ) => {
    const groupContext = React.useContext(RadioGroupContext)
    const effectiveDisabled = disabled ?? groupContext.disabled ?? false

    const hasError =
      Boolean(error) ||
      Boolean(errorMessages && (typeof errorMessages === 'string' ? errorMessages : errorMessages.length > 0))

    const labelClasses = cn(
      'cursor-pointer text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
      hasError ? 'text-destructive' : '',
      effectiveDisabled && 'cursor-not-allowed opacity-50',
    )

    return (
      <div className={cn('flex items-start', itemDensityClasses[density])}>
        {label && labelPosition === 'before' && (
          <label htmlFor={id} className={cn('mr-2', labelClasses)}>
            {label}
          </label>
        )}

        <div className="flex items-center">
          <RadioGroupPrimitive.Item
            ref={ref}
            id={id}
            data-uipkge=""
            data-slot="radio-group-item"
            value={value!}
            disabled={effectiveDisabled}
            className={cn(
              'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square shrink-0 rounded-full border shadow-sm transition-colors duration-200 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
              sizeClasses[size],
              colorClasses[color] || colorClasses.primary,
              hasError && 'border-destructive',
              className,
            )}
            {...props}
          >
            <RadioGroupPrimitive.Indicator
              data-uipkge=""
              data-slot="radio-group-indicator"
              className="relative flex items-center justify-center"
            >
              {children ??
                (!hideIcon ? (
                  <Circle
                    className={cn(
                      'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-current text-current',
                      indicatorSizes[size],
                    )}
                  />
                ) : null)}
            </RadioGroupPrimitive.Indicator>
          </RadioGroupPrimitive.Item>

          {label && labelPosition === 'after' && (
            <label htmlFor={id} className={cn('ml-2', labelClasses)}>
              {label}
            </label>
          )}
        </div>

        {hint && !hasError && <p className="text-muted-foreground mt-1 ml-6 text-xs">{hint}</p>}

        {hasError && (
          <div className="mt-1 ml-6 flex flex-col gap-0.5">
            {typeof errorMessages === 'string' ? (
              <p className="text-destructive text-xs">{errorMessages}</p>
            ) : (
              errorMessages?.map((msg, i) => (
                <p key={i} className="text-destructive text-xs">
                  {msg}
                </p>
              ))
            )}
          </div>
        )}
      </div>
    )
  },
)
RadioGroupItem.displayName = 'RadioGroupItem'

export interface RadioButtonProps
  extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'children'> {
  /** Size of the button radio */
  size?: 'small' | 'middle' | 'large'
  /** Visual variant */
  variant?: 'outline' | 'solid'
  /** Label text */
  label?: string
  children?: React.ReactNode
}

const buttonSizeClasses = {
  small: 'h-7 px-2.5 text-xs',
  middle: 'h-8 px-4 text-sm',
  large: 'h-10 px-4.5 text-base',
}

const buttonVariantClasses = {
  outline: cn(
    'border border-input bg-transparent text-foreground hover:text-foreground hover:bg-muted/50',
    'data-[state=checked]:border-primary data-[state=checked]:text-primary',
    'disabled:hover:bg-transparent',
  ),
  solid: cn(
    'border border-input bg-transparent text-foreground hover:text-foreground hover:bg-muted/50',
    'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
    'disabled:hover:bg-transparent',
  ),
}

const RadioButton = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.Item>, RadioButtonProps>(
  ({ className, value, disabled, size, variant, label, children, ...props }, ref) => {
    const context = React.useContext(RadioGroupContext)
    const effectiveSize = size ?? context.size ?? 'middle'
    const effectiveVariant = variant ?? context.buttonVariant ?? 'outline'
    const effectiveDisabled = disabled ?? context.disabled ?? false

    const groupClasses =
      context.orientation === 'vertical'
        ? 'rounded-md w-full justify-start'
        : cn('rounded-none first:rounded-l-md last:rounded-r-md', 'border-l-0 first:border-l', '-ml-px first:ml-0')

    return (
      <RadioGroupPrimitive.Item
        ref={ref}
        data-uipkge=""
        data-slot="radio-button"
        value={value!}
        disabled={effectiveDisabled}
        className={cn(
          'inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-colors duration-200',
          'focus-visible:border-ring focus-visible:ring-ring/50 outline-none focus-visible:ring-[3px]',
          'disabled:cursor-not-allowed disabled:opacity-50',
          buttonSizeClasses[effectiveSize],
          buttonVariantClasses[effectiveVariant],
          groupClasses,
          className,
        )}
        {...props}
      >
        {children ?? (label ?? value)}
      </RadioGroupPrimitive.Item>
    )
  },
)
RadioButton.displayName = 'RadioButton'

export { RadioGroup, RadioGroupItem, RadioButton }

```

### `packages/registry-react/components/radio-group/index.ts`

```ts
export {
  RadioGroup,
  RadioGroupItem,
  RadioButton,
  type RadioGroupProps,
  type RadioGroupItemProps,
  type RadioButtonProps,
  type RadioOption,
} from './radio-group'

```

## range-calendar

- type: `registry:ui`
- description: Calendar variant for from/to date selection — click two dates and the range fills in between. Same min/max and disabled-date support as the single-date Calendar.
- npm deps: `react-day-picker`, `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/range-calendar/RangeCalendar.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { DayPicker, type DateRange } from 'react-day-picker'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

// `selected`/`onSelect` are re-declared explicitly: a bare
// Omit<ComponentProps<DayPicker>, 'mode'> distributes over DayPicker's prop
// union and drops `selected` (not common to every mode), so consumers couldn't
// pass a range. Forcing mode="range" makes the range shape exact.
export interface RangeCalendarProps
  extends Omit<React.ComponentProps<typeof DayPicker>, 'mode' | 'selected' | 'onSelect'> {
  selected?: DateRange
  onSelect?: (range: DateRange | undefined) => void
}

/**
 * Date-range calendar — click two dates and the range fills in between. The
 * React mirror of the reka-ui-based Vue RangeCalendar: range start/end cells
 * get the primary fill, the middle gets the accent fill, with the same cell
 * sizes, today / outside / disabled states, and outline nav chevrons mapped
 * 1:1 from the Vue registry's Tailwind class strings. Forces `mode="range"`.
 */
function RangeCalendar({ className, classNames, showOutsideDays = true, selected, onSelect, ...props }: RangeCalendarProps) {
  return (
    <DayPicker
      mode="range"
      selected={selected}
      onSelect={onSelect}
      data-uipkge=""
      data-slot="range-calendar"
      showOutsideDays={showOutsideDays}
      className={cn('p-3', className)}
      classNames={{
        // react-day-picker v10 renders <Nav> as the FIRST child of .rdp-months
        // (a sibling of the month, NOT inside month_caption). The nav is
        // `absolute inset-x-0 top-0`, so .rdp-months MUST be `relative` or the
        // chevrons escape to the nearest positioned ancestor and float away from
        // the calendar. months relative + an h-9 caption overlays the nav on the
        // caption row, prev/next pinned to the inset-x edges — matching Vue.
        // No mt-4: rdp's .rdp-months wraps the nav + caption, so a top margin
        // would push the header down 16px vs Vue (where mt-4 sits on the grid
        // wrapper). Caption→grid gap is the Month's gap-4.
        months: 'relative flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0',
        // flex-1: the extra Month wrapper (Months > Month > grid) collapses to the
        // grid's intrinsic width in the sm:flex-row track, leaving the grid narrow
        // and the centered caption drifting left. flex-1 makes Month fill its track
        // → full-width grid + centered label, matching Vue.
        month: 'flex flex-1 flex-col gap-4',
        // Label-height (no h-9) so the nav's top-0 aligns with the caption label,
        // matching Vue (size-9 buttons overflow below the heading-sized header).
        month_caption: 'flex items-center justify-center',
        caption_label: 'text-sm font-medium',
        // Vue's RangeCalendar nav is NOT the single Calendar's nav: it uses the
        // smaller size-7 / opacity-50 buttons pinned 4px in (left-1 / right-1),
        // not size-9 / opacity-70 at the inset-x-0 edge. inset-x-1 reproduces the
        // left-1 / right-1 offset; the buttons match RangeCalendarPrev/NextButton.
        nav: 'absolute inset-x-1 top-0 flex items-center justify-between',
        button_previous: cn(
          buttonVariants({ variant: 'outline' }),
          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
        ),
        button_next: cn(
          buttonVariants({ variant: 'outline' }),
          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
        ),
        month_grid: 'w-full border-collapse space-y-1',
        weekdays: 'flex',
        weekday: 'text-muted-foreground flex-1 rounded-md text-xs font-normal',
        week: 'mt-2 flex w-full',
        day: cn(
          'relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20',
          '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
          '[&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',
        ),
        day_button: cn(
          buttonVariants({ variant: 'ghost' }),
          'h-8 w-8 cursor-pointer p-0 font-normal aria-selected:opacity-100',
        ),
        today: '[&:not([aria-selected])]:bg-accent [&:not([aria-selected])]:text-accent-foreground',
        outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
        disabled: 'text-muted-foreground opacity-50',
        // Range start / end → primary fill (mirrors Vue's data-[selection-start] / -end)
        range_start:
          'day-range-start rounded-l-md [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:bg-primary [&>button:focus]:text-primary-foreground',
        range_end:
          'day-range-end rounded-r-md [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground [&>button:focus]:bg-primary [&>button:focus]:text-primary-foreground',
        // Range middle → accent fill
        range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground [&>button]:hover:bg-accent',
        hidden: 'invisible',
        ...classNames,
      }}
      formatters={{
        // Match Vue's narrow (single-letter) weekday labels; react-day-picker
        // defaults to short 'cccccc' (two-letter "Mo"). Locale-aware narrow.
        formatWeekdayName: (weekday, options) =>
          weekday.toLocaleDateString(options?.locale?.code, { weekday: 'narrow' }),
        ...props.formatters,
      }}
      components={{
        Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) =>
          orientation === 'left' ? (
            <ChevronLeft className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
          ) : (
            <ChevronRight className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
          ),
      }}
      {...props}
    />
  )
}
RangeCalendar.displayName = 'RangeCalendar'

export { RangeCalendar }

```

### `packages/registry-react/components/range-calendar/index.ts`

```ts
export { RangeCalendar, type RangeCalendarProps } from './RangeCalendar'

```

## range-slider

- type: `registry:ui`
- description: Two-thumb range slider for "between X and Y" inputs — price filters, age ranges, time windows. Built on @radix-ui/react-slider with proper keyboard handling and aria-valuetext.
- npm deps: `@radix-ui/react-slider`

### `packages/registry-react/components/range-slider/RangeSlider.tsx`

```tsx
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'
import { cn } from '@/lib/utils'

export interface RangeSliderProps
  extends Omit<
    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
    'value' | 'defaultValue' | 'onValueChange' | 'min' | 'max' | 'step'
  > {
  className?: string
  /** The controlled value of the range slider. */
  value?: [number, number]
  /** The value of the range slider when initially rendered. */
  defaultValue?: [number, number]
  onValueChange?: (value: [number, number]) => void
  /** When `true`, prevents the user from interacting with the range slider */
  disabled?: boolean
  /** Minimum value */
  min?: number
  /** Maximum value */
  max?: number
  /** Step value */
  step?: number
  /** Label for the range slider */
  label?: string
  /** Hint text for the range slider */
  hint?: string
  /** Error messages to display */
  errorMessages?: string | string[]
  /** Whether to show error state */
  error?: boolean
  /** Custom color for the track fill */
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Thumb size */
  thumbSize?: 'sm' | 'md' | 'lg'
  /** Track height */
  trackHeight?: 'sm' | 'md' | 'lg'
  /** Show ticks */
  showTicks?: boolean
  /** Tick interval */
  tickInterval?: number
  /** Show thumb labels */
  thumbLabel?: boolean
  /** Format thumb label */
  thumbLabelFormat?: (value: number) => string
}

// Color classes
const colorClasses: Record<string, string> = {
  primary: 'bg-primary',
  secondary: 'bg-secondary',
  success: 'bg-[var(--success)]',
  warning: 'bg-[var(--warning)]',
  error: 'bg-destructive',
  info: 'bg-[var(--info)]',
}

// Track height classes
const trackHeightClasses = {
  sm: 'h-1',
  md: 'h-1.5',
  lg: 'h-2',
}

// Thumb size classes
const thumbSizeClasses = {
  sm: 'size-3',
  md: 'size-4',
  lg: 'size-5',
}

const RangeSlider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, RangeSliderProps>(
  (
    {
      className,
      value,
      defaultValue,
      onValueChange,
      disabled,
      min = 0,
      max = 100,
      step = 1,
      label,
      hint,
      errorMessages,
      error,
      color = 'primary',
      thumbSize = 'md',
      trackHeight = 'md',
      showTicks,
      tickInterval,
      thumbLabel,
      thumbLabelFormat,
      ...props
    },
    ref,
  ) => {
    const isControlled = value !== undefined
    const [internalValue, setInternalValue] = React.useState<[number, number]>(
      defaultValue ?? [min, max],
    )
    const currentValue = isControlled ? value! : internalValue

    const handleChange = React.useCallback(
      (next: number[]) => {
        const tuple = [next[0], next[1]] as [number, number]
        if (!isControlled) setInternalValue(tuple)
        onValueChange?.(tuple)
      },
      [isControlled, onValueChange],
    )

    // Generate ticks
    const ticks = React.useMemo(() => {
      if (!showTicks || !tickInterval) return []
      const result: number[] = []
      for (let i = min; i <= max; i += tickInterval) {
        result.push(i)
      }
      return result
    }, [showTicks, tickInterval, min, max])

    // Build error state
    const hasError = React.useMemo(() => {
      if (error) return true
      if (errorMessages && (typeof errorMessages === 'string' ? errorMessages : errorMessages.length > 0))
        return true
      return false
    }, [error, errorMessages])

    const thumbClass = cn(
      'border-primary ring-ring/50 bg-background block rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
      thumbSizeClasses[thumbSize],
      hasError && 'border-destructive',
    )

    return (
      <div className="flex flex-col gap-2">
        {label && <label className="text-sm font-medium">{label}</label>}

        {hint && !hasError && <p className="text-muted-foreground text-xs">{hint}</p>}

        <div className="flex items-center gap-4">
          {/* Min value display */}
          <div className="text-muted-foreground min-w-[3rem] text-sm">{currentValue?.[0] ?? min}</div>

          <SliderPrimitive.Root
            ref={ref}
            data-slot="range-slider"
            disabled={disabled}
            min={min}
            max={max}
            step={step}
            value={isControlled ? value : undefined}
            defaultValue={isControlled ? undefined : (defaultValue ?? [min, max])}
            onValueChange={handleChange}
            className={cn('relative flex w-full touch-none items-center select-none', className)}
            {...props}
          >
            <SliderPrimitive.Track
              data-uipkge=""
              data-slot="slider-track"
              className={cn(
                'bg-muted relative w-full overflow-hidden rounded-full',
                trackHeightClasses[trackHeight],
              )}
            >
              <SliderPrimitive.Range
                data-uipkge=""
                data-slot="slider-range"
                className={cn('absolute h-full', colorClasses[color as string] || colorClasses.primary)}
              />
            </SliderPrimitive.Track>

            {/* Ticks */}
            {showTicks && ticks.length > 0 && (
              <div className="pointer-events-none absolute top-1/2 right-0 left-0 flex -translate-y-1/2 justify-between">
                {ticks.map((tick) => (
                  <div key={tick} className="bg-muted-foreground/30 h-2 w-0.5 rounded-full" />
                ))}
              </div>
            )}

            {/* Start Thumb (Min) */}
            <SliderPrimitive.Thumb data-uipkge="" data-slot="slider-thumb" className={thumbClass}>
              {thumbLabel && (
                <span className="bg-background absolute -top-6 left-1/2 -translate-x-1/2 rounded px-1 text-xs whitespace-nowrap">
                  {thumbLabelFormat
                    ? thumbLabelFormat(currentValue?.[0] ?? 0)
                    : (currentValue?.[0] ?? 0)}
                </span>
              )}
            </SliderPrimitive.Thumb>

            {/* End Thumb (Max) */}
            <SliderPrimitive.Thumb data-uipkge="" data-slot="slider-thumb" className={thumbClass}>
              {thumbLabel && (
                <span className="bg-background absolute -top-6 left-1/2 -translate-x-1/2 rounded px-1 text-xs whitespace-nowrap">
                  {thumbLabelFormat
                    ? thumbLabelFormat(currentValue?.[1] ?? 0)
                    : (currentValue?.[1] ?? 0)}
                </span>
              )}
            </SliderPrimitive.Thumb>
          </SliderPrimitive.Root>

          {/* Max value display */}
          <div className="text-muted-foreground min-w-[3rem] text-sm">{currentValue?.[1] ?? max}</div>
        </div>

        {/* Tick labels */}
        {showTicks && ticks.length > 0 && (
          <div className="text-muted-foreground flex justify-between px-1 text-xs">
            <span>{min}</span>
            <span>{max}</span>
          </div>
        )}

        {hasError && (
          <div className="flex flex-col gap-0.5">
            {typeof errorMessages === 'string' ? (
              <p className="text-destructive text-xs">{errorMessages}</p>
            ) : (
              errorMessages?.map((msg, i) => (
                <p key={i} className="text-destructive text-xs">
                  {msg}
                </p>
              ))
            )}
          </div>
        )}
      </div>
    )
  },
)
RangeSlider.displayName = 'RangeSlider'

export { RangeSlider }

```

### `packages/registry-react/components/range-slider/index.ts`

```ts
export { RangeSlider, type RangeSliderProps } from './RangeSlider'

```

## rating

- type: `registry:ui`
- description: Star (or custom icon) rating control — pick a value from 1 to N. Read-only mode for displaying review averages, with half-step support.

### `packages/registry-react/components/rating/Rating.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface RatingProps {
  /** Currently selected value */
  value?: number
  /** Default value when uncontrolled */
  defaultValue?: number
  /** Emitted when the value changes */
  onValueChange?: (value: number) => void
  /** Maximum rating value */
  max?: number
  /** If true, prevents user interaction */
  readonly?: boolean
  /** If true, disables the rating */
  disabled?: boolean
  /** Density of the component */
  density?: 'compact' | 'default' | 'comfortable'
  /** Color of the selected stars */
  color?: string
  /** If true, clicking the same value clears the rating */
  clearable?: boolean
  /** If true, stars grow on hover */
  hover?: boolean
  /** ARIA label for each rating item */
  itemAriaLabel?: string
  /** Size of the stars */
  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large'
  /** Custom class for the component */
  className?: string
  /** Show rating count */
  showValue?: boolean
  /** Card variant styling */
  variant?: 'outlined' | 'filled' | 'soft'
  /** If true, creates a half star at 0.5 */
  halfIncrements?: boolean
}

// Star path shared by all three icon states.
const STAR_PATH =
  'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'

// Ported 1:1 from the Vue scoped stylesheet. React has no scoped styles, so the
// per-size star dimensions and per-variant container chrome live inline here.
const variantClasses: Record<NonNullable<RatingProps['variant']>, string> = {
  outlined: '',
  filled: 'bg-muted p-1 rounded-lg',
  soft: 'bg-accent p-1 rounded-lg',
}

const sizeIcon: Record<NonNullable<RatingProps['size']>, React.CSSProperties> = {
  'x-small': { width: '0.875rem', height: '0.875rem' },
  small: { width: '1.125rem', height: '1.125rem' },
  medium: { width: '1.375rem', height: '1.375rem' },
  large: { width: '1.625rem', height: '1.625rem' },
  'x-large': { width: '2rem', height: '2rem' },
}

const densityPad: Record<NonNullable<RatingProps['density']>, string> = {
  compact: '0',
  default: '0.0625rem',
  comfortable: '0.125rem',
}

const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
  (
    {
      value,
      defaultValue = 0,
      onValueChange,
      max = 5,
      readonly = false,
      disabled = false,
      density = 'default',
      color = 'var(--warning)',
      clearable = false,
      hover = false,
      itemAriaLabel = 'rating',
      size = 'medium',
      className,
      showValue = false,
      variant = 'outlined',
      halfIncrements = false,
    },
    ref,
  ) => {
    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState(defaultValue)
    const current = isControlled ? value! : internal

    function emit(next: number) {
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
    }

    function handleClick(n: number) {
      if (disabled || readonly) return
      if (clearable && n === current) emit(0)
      else emit(n)
    }

    function handleKeydown(e: React.KeyboardEvent, n: number) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault()
        handleClick(n)
      } else if (e.key === 'ArrowRight' && n < max) {
        emit(n + 1)
      } else if (e.key === 'ArrowLeft' && n > 1) {
        emit(n - 1)
      }
    }

    const iconStyle = sizeIcon[size]

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="rating"
        className={cn(
          'inline-flex items-center gap-0.5',
          variantClasses[variant],
          disabled && 'cursor-not-allowed opacity-50',
          readonly && 'cursor-default',
          showValue && 'flex items-center gap-1',
          className,
        )}
        role="radiogroup"
        aria-valuenow={current}
        aria-valuemin={0}
        aria-valuemax={max}
        aria-label={`Rating: ${current} of ${max}`}
      >
        {Array.from({ length: max }, (_, i) => i + 1).map((n) => (
          <button
            key={n}
            type="button"
            disabled={disabled || readonly}
            aria-label={`${itemAriaLabel} ${n} of ${max}`}
            tabIndex={readonly || disabled ? -1 : 0}
            onClick={() => handleClick(n)}
            onKeyDown={(e) => handleKeydown(e, n)}
            style={{ padding: densityPad[density], outlineColor: color }}
            className={cn(
              'inline-flex items-center justify-center border-none bg-none leading-none',
              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',
              clearable && 'cursor-pointer',
              hover && 'transition-transform duration-150 ease-in-out hover:scale-115',
            )}
          >
            {current >= n ? (
              // Full star
              <svg viewBox="0 0 24 24" fill="currentColor" style={{ ...iconStyle, color }}>
                <path d={STAR_PATH} />
              </svg>
            ) : current >= n - 0.5 && halfIncrements ? (
              // Half star
              <svg viewBox="0 0 24 24" style={{ ...iconStyle, color }}>
                <defs>
                  <linearGradient id={`half-${n}`}>
                    <stop offset="50%" stopColor="currentColor" />
                    <stop offset="50%" stopColor="transparent" />
                  </linearGradient>
                </defs>
                <path d={STAR_PATH} fill={`url(#half-${n})`} stroke="currentColor" strokeWidth="1" />
              </svg>
            ) : (
              // Empty star
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                style={{ ...iconStyle, color: 'var(--muted-foreground)' }}
              >
                <path d={STAR_PATH} />
              </svg>
            )}
          </button>
        ))}
        {showValue && (
          <span className="ml-2 font-semibold text-foreground">{current}</span>
        )}
      </div>
    )
  },
)
Rating.displayName = 'Rating'

export { Rating }

```

### `packages/registry-react/components/rating/index.ts`

```ts
export { Rating, type RatingProps } from './Rating'

```

## raw-chart

- type: `registry:ui`
- description: React mirror of @uipkge/raw-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/raw-chart/RawChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// RawChart
// ─────────────────────────────────────────────────────────────────────────

export interface RawChartProps {
  option: any
  height?: number | string
  /** Auto-resize on container width change. Default true. */
  autoresize?: boolean
  className?: string
}

/**
 * Raw escape hatch. The opinionated wrappers (AreaChart, BarChart,
 * FunnelChart, ...) cover the common cases with sensible defaults +
 * a `data` prop. When you need a chart type they don't wrap -- or a
 * level of customisation the wrappers can't expose without leaking
 * ECharts internals -- reach for this component and pass a complete
 * ECharts option object.
 *
 * Every chart type the registry wraps is already `use()`-registered by
 * importing this module, so you can pass any of them via `option`.
 * Theme tokens are available from `useChartTheme()` (and `toRgba`,
 * `mergeOptionBlock` from `./useChartTheme`) -- weave them into your
 * option for visual consistency with the rest of the registry's charts.
 */
export const RawChart = React.forwardRef<HTMLDivElement, RawChartProps>(
  ({ option, height = 300, autoresize = true, className }, ref) => (
    <ChartFrame ref={ref} height={height} className={className}>
      <ReactECharts
        echarts={echartsCoreModule as any}
        option={option}
        notMerge
        lazyUpdate
        // ReactECharts resizes with its container by default; opt out by
        // disabling the resize observer when `autoresize` is false.
        opts={autoresize ? undefined : { width: 'auto', height: 'auto' }}
        style={{ width: '100%', height: '100%' }}
      />
    </ChartFrame>
  ),
)
RawChart.displayName = 'RawChart'

// ─────────────────────────────────────────────────────────────────────────
// SegmentedGauge — pure SVG, no ECharts
// ─────────────────────────────────────────────────────────────────────────

interface GaugeSegment {
  /** Relative size of the segment. Segments are normalised by their sum. */
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
  /** Optional label, surfaced via the `children` for consumers that want to
   *  render their own legend. */
  label?: string
}

export interface SegmentedGaugeProps {
  segments: GaugeSegment[]
  /** Container height (px when numeric, raw CSS when string). Default 200. */
  height?: number | string
  /** Stroke width of the arc in SVG units. Default 18. */
  stroke?: number
  /** Angular gap between segments, in degrees. Default 4. */
  gap?: number
  /** Optional fallback palette when `color` is omitted on a segment. */
  colors?: string[]
  /** Show a faint background track behind the arc. Default true. */
  showTrack?: boolean
  className?: string
  /** Rendered into the dish centre (the Vue `center` slot). */
  children?: React.ReactNode
}

// SVG geometry. The viewBox uses the centre + radius + stroke so the
// canvas grows with the stroke width and the centre content can sit
// underneath without overlapping the arc.
const SG_CX = 140
const SG_CY = 124
const SG_R = 100

function sgPolar(angleDeg: number) {
  const a = ((angleDeg - 90) * Math.PI) / 180
  return [SG_CX + SG_R * Math.cos(a), SG_CY + SG_R * Math.sin(a)] as const
}

function sgArcPath(startA: number, endA: number) {
  const [sx, sy] = sgPolar(startA)
  const [ex, ey] = sgPolar(endA)
  const largeArc = endA - startA > 180 ? 1 : 0
  return `M ${sx.toFixed(2)} ${sy.toFixed(2)} A ${SG_R} ${SG_R} 0 ${largeArc} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`
}

export const SegmentedGauge = React.forwardRef<HTMLDivElement, SegmentedGaugeProps>(
  (
    {
      segments,
      height = 200,
      stroke = 18,
      gap = 4,
      colors = ['#3b82f6', '#0ea5e9', '#34d399', '#facc15', '#fb7185', '#a855f7'],
      showTrack = true,
      className,
      children,
    },
    ref,
  ) => {
    const startAngle = 180
    const sweep = 180

    const arcs = React.useMemo(() => {
      const total = segments.reduce((acc, s) => acc + s.value, 0) || 1
      let cursor = startAngle
      return segments.map((s, i) => {
        const span = (s.value / total) * sweep
        const isLast = i === segments.length - 1
        const segEnd = cursor + span - (isLast ? 0 : gap)
        const arc = { d: sgArcPath(cursor, segEnd), color: s.color ?? colors[i % colors.length] }
        cursor = cursor + span
        return arc
      })
    }, [segments, gap, colors])

    const trackPath = sgArcPath(startAngle, startAngle + sweep)

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="segmented-gauge"
        tabIndex={0}
        style={{ height: heightToStyle(height) }}
        className={cn(
          'focus-visible:ring-ring relative w-full focus-visible:ring-2 focus-visible:outline-none',
          className,
        )}
      >
        <svg
          viewBox={`0 0 ${SG_CX * 2} ${SG_CY + stroke}`}
          className="block h-full w-full"
          preserveAspectRatio="xMidYMid meet"
          role="img"
        >
          {showTrack && (
            <path
              d={trackPath}
              fill="none"
              stroke="currentColor"
              strokeWidth={stroke}
              strokeLinecap="round"
              className="text-muted/40"
              opacity="0.35"
            />
          )}
          {arcs.map((a, i) => (
            <path key={i} d={a.d} fill="none" stroke={a.color} strokeWidth={stroke} strokeLinecap="round" />
          ))}
        </svg>
        {children != null && (
          <div className="pointer-events-none absolute inset-x-0 bottom-[8%] flex flex-col items-center">
            {children}
          </div>
        )}
      </div>
    )
  },
)
SegmentedGauge.displayName = 'SegmentedGauge'

// ─────────────────────────────────────────────────────────────────────────
// SmoothFunnel — pure SVG, no ECharts
// ─────────────────────────────────────────────────────────────────────────

interface FunnelStage {
  name: string
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
}

export interface SmoothFunnelProps {
  data: FunnelStage[]
  /** Container height (px when numeric, raw CSS when string). Defaults to 240. */
  height?: number | string
  /** Show the percent pill on each stage. Defaults to true. */
  showLabels?: boolean
  /** Minimum segment height in px so tail stages stay visible at tiny percents. Default 18. */
  minHeight?: number
  /** Optional fallback palette when `color` is omitted on a stage. */
  colors?: string[]
  className?: string
}

// SVG geometry. Width/height are virtual (the SVG fits to container
// via viewBox). The aspect ratio (W:H ≈ 4:1) matches the horizontal
// "flow" layout consumers typically want for a 4-6 stage funnel; if
// you need taller bands, override `height` and the curves stretch
// vertically without distorting horizontally.
const SF_W = 720
const SF_H = 180
const SF_CY = SF_H / 2

export const SmoothFunnel = React.forwardRef<HTMLDivElement, SmoothFunnelProps>(
  (
    {
      data,
      height = 240,
      showLabels = true,
      minHeight = 18,
      colors = ['#3b82f6', '#a855f7', '#34d399', '#facc15', '#fb7185', '#06b6d4'],
      className,
    },
    ref,
  ) => {
    const segments = React.useMemo(() => {
      const stages = data
      const n = stages.length
      if (n === 0) return []
      const segW = SF_W / n
      const max = Math.max(...stages.map((s) => s.value))
      const pctOf = (v: number) => (max > 0 ? (v / max) * 100 : 0)
      const heightFor = (pct: number) => Math.max((pct / 100) * SF_H, minHeight)

      return stages.map((s, i) => {
        const next = stages[i + 1] ?? s
        const startPct = pctOf(s.value)
        const endPct = pctOf(next.value)
        const h0 = heightFor(startPct)
        const h1 = heightFor(endPct)
        const x0 = i * segW
        const x1 = x0 + segW
        const yTop0 = SF_CY - h0 / 2
        const yTop1 = SF_CY - h1 / 2
        const yBot0 = SF_CY + h0 / 2
        const yBot1 = SF_CY + h1 / 2

        // Cubic bezier control points at 38% / 62% of segment width produce
        // a soft S-curve transition between stages rather than the
        // trapezoidal default of an ECharts funnel.
        const cx1 = x0 + segW * 0.38
        const cx2 = x0 + segW * 0.62

        const d = [
          `M ${x0.toFixed(1)} ${yTop0.toFixed(1)}`,
          `C ${cx1.toFixed(1)} ${yTop0.toFixed(1)}, ${cx2.toFixed(1)} ${yTop1.toFixed(1)}, ${x1.toFixed(1)} ${yTop1.toFixed(1)}`,
          `L ${x1.toFixed(1)} ${yBot1.toFixed(1)}`,
          `C ${cx2.toFixed(1)} ${yBot1.toFixed(1)}, ${cx1.toFixed(1)} ${yBot0.toFixed(1)}, ${x0.toFixed(1)} ${yBot0.toFixed(1)}`,
          'Z',
        ].join(' ')

        return {
          d,
          color: s.color ?? colors[i % colors.length],
          percent: startPct,
          name: s.name,
          value: s.value,
          labelX: x0 + segW * 0.42,
          labelY: SF_CY,
        }
      })
    }, [data, minHeight, colors])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="smooth-funnel"
        tabIndex={0}
        style={{ height: heightToStyle(height) }}
        className={cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)}
      >
        <svg viewBox={`0 0 ${SF_W} ${SF_H}`} className="block h-full w-full" preserveAspectRatio="none" role="img">
          {segments.map((seg, i) => (
            <g key={i}>
              <path d={seg.d} fill={seg.color} />
              {showLabels && (
                <foreignObject x={seg.labelX - 28} y={seg.labelY - 12} width={56} height={24}>
                  <div className="bg-background text-foreground inline-flex h-6 items-center rounded-full border px-2 text-[11px] font-semibold shadow-sm">
                    {Math.round(seg.percent * 10) / 10}%
                  </div>
                </foreignObject>
              )}
            </g>
          ))}
        </svg>
      </div>
    )
  },
)
SmoothFunnel.displayName = 'SmoothFunnel'

```

### `packages/registry-react/components/charts/raw-chart/index.ts`

```ts
export { RawChart, type RawChartProps } from './RawChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## register-01

- type: `registry:block`
- description: Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.
- npm deps: `lucide-react`
- registry deps: `button`, `card`, `checkbox`, `input`, `label`, `separator`

### `packages/registry-react/blocks/register-01/Register01.tsx`

```tsx
'use client'

import * as React from 'react'
const Github = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
  </svg>
)
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

export interface Register01Props {
  onSubmit?: (payload: { name: string; email: string; password: string }) => void
  onSignIn?: () => void
  onOauth?: (provider: 'github' | 'google') => void
  onViewTerms?: () => void
  onViewPrivacy?: () => void
}

export function Register01({
  onSubmit,
  onSignIn,
  onOauth,
  onViewTerms,
  onViewPrivacy,
}: Register01Props) {
  const [name, setName] = React.useState('')
  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')
  const [confirmPassword, setConfirmPassword] = React.useState('')
  const [acceptTerms, setAcceptTerms] = React.useState(false)

  const passwordsMatch = !confirmPassword || password === confirmPassword

  const canSubmit =
    name.length > 0 &&
    email.length > 0 &&
    password.length >= 8 &&
    passwordsMatch &&
    acceptTerms

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!canSubmit) return
    onSubmit?.({ name, email, password })
  }

  // ----- Optional: zod validation -----
  // The `canSubmit` flag already guards basic shape (lengths +
  // matching passwords + terms checked), but for typed parsing,
  // regex-driven password rules, or shared schema with the backend,
  // drop in zod. Add `zod` to your project and uncomment below.
  //
  // import { z } from 'zod'
  // const registerSchema = z
  //   .object({
  //     name: z.string().min(1, 'Name is required'),
  //     email: z.string().email('Enter a valid email'),
  //     password: z
  //       .string()
  //       .min(8, 'At least 8 characters')
  //       .regex(/[A-Z]/, 'One uppercase letter')
  //       .regex(/[0-9]/, 'One number'),
  //     confirmPassword: z.string(),
  //     acceptTerms: z.literal(true, { errorMap: () => ({ message: 'Required' }) }),
  //   })
  //   .refine((d) => d.password === d.confirmPassword, {
  //     path: ['confirmPassword'],
  //     message: "Passwords don't match",
  //   })
  // function handleSubmit(e: React.FormEvent) {
  //   e.preventDefault()
  //   const parsed = registerSchema.safeParse({
  //     name, email, password, confirmPassword, acceptTerms,
  //   })
  //   if (!parsed.success) {
  //     // parsed.error.flatten().fieldErrors -> { email: [...], password: [...], ... }
  //     return
  //   }
  //   onSubmit?.({
  //     name: parsed.data.name,
  //     email: parsed.data.email,
  //     password: parsed.data.password,
  //   })
  // }

  return (
    <div className="bg-muted/30 flex min-h-svh items-center justify-center p-6">
      <Card className="w-full max-w-sm">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl">Create your account</CardTitle>
          <CardDescription>Free for personal projects. No credit card.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div className="space-y-2">
              <Label htmlFor="r-name">Full name</Label>
              <Input
                id="r-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                type="text"
                placeholder="Ada Lovelace"
                autoComplete="name"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="r-email">Email</Label>
              <Input
                id="r-email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                placeholder="you@example.com"
                autoComplete="email"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="r-password">Password</Label>
              <Input
                id="r-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                autoComplete="new-password"
                minLength={8}
                required
              />
              <p className="text-muted-foreground text-xs">Minimum 8 characters.</p>
            </div>
            <div className="space-y-2">
              <Label htmlFor="r-confirm">Confirm password</Label>
              <Input
                id="r-confirm"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                type="password"
                autoComplete="new-password"
                required
              />
              {!passwordsMatch && (
                <p className="text-destructive text-xs" role="alert">
                  Passwords don't match.
                </p>
              )}
            </div>

            <div className="flex items-start gap-2.5 pt-1">
              <Checkbox
                id="r-terms"
                checked={acceptTerms}
                onCheckedChange={(value) => setAcceptTerms(value === true)}
              />
              <Label
                htmlFor="r-terms"
                className="text-muted-foreground cursor-pointer text-xs leading-relaxed font-normal"
              >
                I agree to the
                <button
                  type="button"
                  className="text-foreground mx-0.5 hover:underline"
                  onClick={() => onViewTerms?.()}
                >
                  Terms of Service
                </button>
                and
                <button
                  type="button"
                  className="text-foreground mx-0.5 hover:underline"
                  onClick={() => onViewPrivacy?.()}
                >
                  Privacy Policy
                </button>
                .
              </Label>
            </div>

            <Button type="submit" className="w-full" disabled={!canSubmit}>
              Create account
            </Button>
          </form>

          <div className="relative">
            <Separator />
            <span className="bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase">
              Or continue with
            </span>
          </div>

          <div className="grid grid-cols-2 gap-2">
            <Button type="button" variant="outline" onClick={() => onOauth?.('google')}>
              <svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
                <path
                  fill="#4285F4"
                  d="M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z"
                />
                <path
                  fill="#34A853"
                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                />
                <path
                  fill="#FBBC05"
                  d="M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
                />
                <path
                  fill="#EA4335"
                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z"
                />
              </svg>
              Google
            </Button>
            <Button type="button" variant="outline" onClick={() => onOauth?.('github')}>
              <Github className="size-4" />
              GitHub
            </Button>
          </div>
        </CardContent>
        <CardFooter className="justify-center">
          <p className="text-muted-foreground text-xs">
            Already have an account?
            <button
              type="button"
              className="text-foreground ml-1 font-medium hover:underline"
              onClick={() => onSignIn?.()}
            >
              Sign in
            </button>
          </p>
        </CardFooter>
      </Card>
    </div>
  )
}

```

## resizable

- type: `registry:ui`
- description: Drag-to-resize panel layout — horizontal or vertical splits with persistent sizes. Use for IDE-style sidebars, split views, and any layout the user should be able to reshape.
- npm deps: `react-resizable-panels@^2.1.7`, `lucide-react`

### `packages/registry-react/components/resizable/resizable.tsx`

```tsx
'use client'

import * as React from 'react'
import { GripVertical } from 'lucide-react'
// Named exports (the package exposes these directly, not under a namespace).
import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'
import { cn } from '@/lib/utils'

function ResizablePanelGroup({
  className,
  ...props
}: React.ComponentProps<typeof PanelGroup>) {
  return (
    <PanelGroup
      data-uipkge=""
      data-slot="resizable-panel-group"
      className={cn(
        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
        className,
      )}
      {...props}
    />
  )
}

function ResizablePanel({
  ...props
}: React.ComponentProps<typeof Panel>) {
  return <Panel data-uipkge="" data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  children,
  ...props
}: React.ComponentProps<typeof PanelResizeHandle> & {
  withHandle?: boolean
}) {
  return (
    <PanelResizeHandle
      data-uipkge=""
      data-slot="resizable-handle"
      className={cn(
        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
        className,
      )}
      {...props}
    >
      {withHandle && (
        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
          {children ?? <GripVertical className="size-2.5" />}
        </div>
      )}
    </PanelResizeHandle>
  )
}

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

```

### `packages/registry-react/components/resizable/index.ts`

```ts
export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable'

```

## rich-text-editor

- type: `registry:ui`
- description: WYSIWYG editor wrapped around TipTap — bold/italic/links/lists/headings/blockquote/code, plus a configurable toolbar. Drop into forms where Markdown is too low-level.
- npm deps: `@tiptap/react`, `@tiptap/starter-kit`, `@tiptap/pm`, `@tiptap/extension-link`, `@tiptap/extension-placeholder`, `@tiptap/extension-task-item`, `@tiptap/extension-task-list`, `@tiptap/extension-text-align`, `@tiptap/extension-underline`, `lucide-react`
- registry deps: `separator`, `toggle`

### `packages/registry-react/components/rich-text-editor/rich-text-editor.tsx`

```tsx
'use client'

import * as React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import Underline from '@tiptap/extension-underline'
import Link from '@tiptap/extension-link'
import TextAlign from '@tiptap/extension-text-align'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import {
  Bold,
  Italic,
  Underline as UnderlineIcon,
  Strikethrough,
  List,
  ListOrdered,
  ListChecks,
  AlignLeft,
  AlignCenter,
  AlignRight,
  Link as LinkIcon,
  Heading1,
  Heading2,
  Quote,
  Minus,
  Undo2,
  Redo2,
  Code,
  RemoveFormatting,
  ChevronDown,
} from 'lucide-react'
import { Toggle } from '@/components/ui/toggle'
import { Separator } from '@/components/ui/separator'
import { cn } from '@/lib/utils'

// Ported from RichTextEditor.vue's <style> block. Injected once so the
// component ships self-contained (placeholder, prose overrides, task-list,
// blockquote/code/hr/link styling). Selectors match the Vue source 1:1.
const richTextEditorCss = `
/* Editor placeholder */
.rich-text-editor .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--muted-foreground);
  opacity: 0.5;
  pointer-events: none;
  height: 0;
}

/* Prose overrides for compact styling */
.rich-text-content .tiptap {
  min-height: inherit;
}

.rich-text-content .tiptap > *:first-child {
  margin-top: 0;
}

.rich-text-content .tiptap > *:last-child {
  margin-bottom: 0;
}

.rich-text-content .tiptap h1 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.rich-text-content .tiptap h2 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.75rem;
  margin-bottom: 0.375rem;
}

.rich-text-content .tiptap p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.rich-text-content .tiptap ul,
.rich-text-content .tiptap ol {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.rich-text-content .tiptap li {
  font-size: 0.875rem;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.rich-text-content .tiptap blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--muted-foreground);
  font-style: italic;
}

.rich-text-content .tiptap code {
  background: var(--muted);
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.8rem;
  font-family: ui-monospace, monospace;
}

.rich-text-content .tiptap pre {
  background: var(--muted);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.rich-text-content .tiptap pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
}

.rich-text-content .tiptap hr {
  border-color: var(--border);
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Task list styling */
.rich-text-content .tiptap ul[data-type='taskList'] {
  list-style: none;
  padding-left: 0;
}

.rich-text-content .tiptap ul[data-type='taskList'] li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > label {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > label input[type='checkbox'] {
  accent-color: var(--primary);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.rich-text-content .tiptap ul[data-type='taskList'] li > div {
  flex: 1;
}

/* Link styling */
.rich-text-content .tiptap a {
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
`

export interface RichTextEditorProps {
  value?: string
  onValueChange?: (value: string) => void
  placeholder?: string
  className?: string
  editorClassName?: string
  minHeight?: string
}

interface ToolbarItem {
  type: 'button' | 'separator'
  icon?: React.ComponentType<{ className?: string }>
  action?: () => void
  isActive?: () => boolean
  title?: string
}

const RichTextEditor = React.forwardRef<HTMLDivElement, RichTextEditorProps>(
  (
    {
      value = '',
      onValueChange,
      placeholder = 'Start writing...',
      className,
      editorClassName,
      minHeight = '120px',
    },
    ref,
  ) => {
    const [showExtended, setShowExtended] = React.useState(false)

    const editor = useEditor({
      content: value,
      immediatelyRender: false,
      extensions: [
        StarterKit.configure({
          heading: { levels: [1, 2, 3] },
          // StarterKit ships its own link + underline since v3 — disable them so
          // we can register the standalone packages with our own configuration
          // without TipTap warning about duplicate extension names.
          link: false,
          underline: false,
        }),
        Placeholder.configure({ placeholder }),
        Underline,
        Link.configure({
          openOnClick: false,
          HTMLAttributes: { class: 'text-primary underline cursor-pointer' },
        }),
        TextAlign.configure({ types: ['heading', 'paragraph'] }),
        TaskList,
        TaskItem.configure({ nested: true }),
      ],
      editorProps: {
        attributes: {
          class: 'prose prose-sm dark:prose-invert max-w-none focus:outline-none',
        },
      },
      onUpdate: ({ editor: e }) => {
        onValueChange?.(e.getHTML())
      },
    })

    React.useEffect(() => {
      if (editor && editor.getHTML() !== value) {
        editor.commands.setContent(value || '', { emitUpdate: false })
      }
    }, [editor, value])

    const toggleLink = React.useCallback(() => {
      if (!editor) return
      if (editor.isActive('link')) {
        editor.chain().focus().unsetLink().run()
      } else {
        const url = window.prompt('Enter URL')
        if (url) {
          editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
        }
      }
    }, [editor])

    const essentialItems = React.useMemo<ToolbarItem[]>(() => {
      if (!editor) return []
      const e = editor
      return [
        {
          type: 'button',
          icon: Bold,
          action: () => e.chain().focus().toggleBold().run(),
          isActive: () => e.isActive('bold'),
          title: 'Bold',
        },
        {
          type: 'button',
          icon: Italic,
          action: () => e.chain().focus().toggleItalic().run(),
          isActive: () => e.isActive('italic'),
          title: 'Italic',
        },
        {
          type: 'button',
          icon: UnderlineIcon,
          action: () => e.chain().focus().toggleUnderline().run(),
          isActive: () => e.isActive('underline'),
          title: 'Underline',
        },
        {
          type: 'button',
          icon: Strikethrough,
          action: () => e.chain().focus().toggleStrike().run(),
          isActive: () => e.isActive('strike'),
          title: 'Strikethrough',
        },
        { type: 'separator' },
        {
          type: 'button',
          icon: List,
          action: () => e.chain().focus().toggleBulletList().run(),
          isActive: () => e.isActive('bulletList'),
          title: 'Bullet list',
        },
        {
          type: 'button',
          icon: ListOrdered,
          action: () => e.chain().focus().toggleOrderedList().run(),
          isActive: () => e.isActive('orderedList'),
          title: 'Numbered list',
        },
        { type: 'separator' },
        { type: 'button', icon: LinkIcon, action: toggleLink, isActive: () => e.isActive('link'), title: 'Link' },
        { type: 'separator' },
        { type: 'button', icon: Undo2, action: () => e.chain().focus().undo().run(), isActive: () => false, title: 'Undo' },
        { type: 'button', icon: Redo2, action: () => e.chain().focus().redo().run(), isActive: () => false, title: 'Redo' },
      ]
    }, [editor, toggleLink])

    const extendedItems = React.useMemo<ToolbarItem[]>(() => {
      if (!editor) return []
      const e = editor
      return [
        {
          type: 'button',
          icon: Heading1,
          action: () => e.chain().focus().toggleHeading({ level: 1 }).run(),
          isActive: () => e.isActive('heading', { level: 1 }),
          title: 'Heading 1',
        },
        {
          type: 'button',
          icon: Heading2,
          action: () => e.chain().focus().toggleHeading({ level: 2 }).run(),
          isActive: () => e.isActive('heading', { level: 2 }),
          title: 'Heading 2',
        },
        { type: 'separator' },
        {
          type: 'button',
          icon: Code,
          action: () => e.chain().focus().toggleCode().run(),
          isActive: () => e.isActive('code'),
          title: 'Inline code',
        },
        {
          type: 'button',
          icon: Quote,
          action: () => e.chain().focus().toggleBlockquote().run(),
          isActive: () => e.isActive('blockquote'),
          title: 'Blockquote',
        },
        {
          type: 'button',
          icon: Minus,
          action: () => e.chain().focus().setHorizontalRule().run(),
          isActive: () => false,
          title: 'Divider',
        },
        {
          type: 'button',
          icon: ListChecks,
          action: () => e.chain().focus().toggleTaskList().run(),
          isActive: () => e.isActive('taskList'),
          title: 'Task list',
        },
        { type: 'separator' },
        {
          type: 'button',
          icon: AlignLeft,
          action: () => e.chain().focus().setTextAlign('left').run(),
          isActive: () => e.isActive({ textAlign: 'left' }),
          title: 'Align left',
        },
        {
          type: 'button',
          icon: AlignCenter,
          action: () => e.chain().focus().setTextAlign('center').run(),
          isActive: () => e.isActive({ textAlign: 'center' }),
          title: 'Align center',
        },
        {
          type: 'button',
          icon: AlignRight,
          action: () => e.chain().focus().setTextAlign('right').run(),
          isActive: () => e.isActive({ textAlign: 'right' }),
          title: 'Align right',
        },
        { type: 'separator' },
        {
          type: 'button',
          icon: RemoveFormatting,
          action: () => e.chain().focus().clearNodes().unsetAllMarks().run(),
          isActive: () => false,
          title: 'Clear formatting',
        },
      ]
    }, [editor])

    React.useEffect(() => {
      return () => {
        editor?.destroy()
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
      <div ref={ref} data-uipkge="" data-slot="rich-text-editor" className={cn('rich-text-editor rounded-lg border', className)}>
        <style dangerouslySetInnerHTML={{ __html: richTextEditorCss }} />
        {/* Toolbar */}
        {editor && (
          <div className="border-b">
            {/* Essential row */}
            <div className="flex items-center gap-0.5 px-2 py-1.5">
              {essentialItems.map((item, i) =>
                item.type === 'separator' ? (
                  <Separator key={'e' + i} orientation="vertical" className="mx-1 h-5" />
                ) : (
                  <Toggle
                    key={'e' + i}
                    size="sm"
                    pressed={item.isActive?.()}
                    title={item.title}
                    className="focus-visible:ring-ring size-7 p-0 focus-visible:ring-2 focus-visible:outline-none"
                    onClick={() => item.action?.()}
                  >
                    {item.icon && <item.icon className="size-3.5" />}
                  </Toggle>
                ),
              )}

              <Separator orientation="vertical" className="mx-1 h-5" />

              {/* Expand toggle */}
              <button
                type="button"
                title={showExtended ? 'Hide more options' : 'Show more options'}
                className={cn(
                  'text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring inline-flex size-7 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:outline-none',
                  showExtended && 'bg-muted text-foreground',
                )}
                onClick={() => setShowExtended((v) => !v)}
              >
                <ChevronDown className={cn('size-3.5 transition-transform duration-200', showExtended && 'rotate-180')} />
              </button>
            </div>

            {/* Extended row (collapsible) */}
            <div
              className={cn(
                'grid transition-colors duration-200 ease-in-out',
                showExtended ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
              )}
            >
              <div className="overflow-hidden">
                <div className="flex items-center gap-0.5 border-t px-2 py-1.5">
                  {extendedItems.map((item, i) =>
                    item.type === 'separator' ? (
                      <Separator key={'x' + i} orientation="vertical" className="mx-1 h-5" />
                    ) : (
                      <Toggle
                        key={'x' + i}
                        size="sm"
                        pressed={item.isActive?.()}
                        title={item.title}
                        className="focus-visible:ring-ring size-7 p-0 focus-visible:ring-2 focus-visible:outline-none"
                        onClick={() => item.action?.()}
                      >
                        {item.icon && <item.icon className="size-3.5" />}
                      </Toggle>
                    ),
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Editor */}
        <EditorContent
          editor={editor}
          className={cn('rich-text-content overflow-y-auto px-3 py-2', editorClassName)}
          style={{ minHeight }}
        />
      </div>
    )
  },
)
RichTextEditor.displayName = 'RichTextEditor'

export { RichTextEditor }

```

### `packages/registry-react/components/rich-text-editor/index.ts`

```ts
export { RichTextEditor, type RichTextEditorProps } from './rich-text-editor'

```

## sankey-chart

- type: `registry:ui`
- description: React mirror of @uipkge/sankey-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/sankey-chart/SankeyChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// SankeyChart
// ─────────────────────────────────────────────────────────────────────────

interface SankeyLink {
  source: string
  target: string
  value: number
}

export interface SankeyChartProps {
  /** Node names. If omitted, derived from the union of link sources + targets. */
  nodes?: string[]
  /** `{ source, target, value }` edges between nodes. */
  links: SankeyLink[]
  height?: number | string
  /** Curvature of the link ribbons. 0 = straight, 1 = max curve. */
  curveness?: number
  option?: any
  className?: string
}

export const SankeyChart = React.forwardRef<HTMLDivElement, SankeyChartProps>(
  ({ nodes, links, height = 360, curveness = 0.5, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const nodeNames = nodes ?? Array.from(new Set(links.flatMap((l) => [l.source, l.target])))

      const series = [
        {
          type: 'sankey',
          left: 16,
          right: 72,
          top: 12,
          bottom: 12,
          data: nodeNames.map((name) => ({ name })),
          links,
          lineStyle: { color: 'gradient', curveness },
          label: { fontSize: 11, color: theme.tooltipText },
          emphasis: { focus: 'adjacency' },
          itemStyle: { borderWidth: 0 },
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [nodes, links, curveness, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
SankeyChart.displayName = 'SankeyChart'

```

### `packages/registry-react/components/charts/sankey-chart/index.ts`

```ts
export { SankeyChart, type SankeyChartProps } from './SankeyChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## saved-cards-list

- type: `registry:block`
- description: List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
- npm deps: `lucide-react`
- registry deps: `payment-card`, `payment-form`, `button`, `badge`, `dialog`

### `packages/registry-react/blocks/saved-cards-list/SavedCardsList.tsx`

```tsx
'use client'

import * as React from 'react'
import { CheckCircle2, Plus, Trash2 } from 'lucide-react'
import { PaymentCard } from '@/components/ui/payment-card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { PaymentForm } from '@/components/blocks/PaymentForm'

type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'

interface SavedCard {
  id: string
  brand: CardBrand
  last4: string
  expiry: string
  holder: string
}

interface AddPayload {
  number: string
  name: string
  expiry: string
  cvc: string
  brand: CardBrand
}

export interface SavedCardsListProps {
  cards: SavedCard[]
  defaultId?: string
  onAdd?: (payload: AddPayload) => void
  onRemove?: (id: string) => void
  onSetDefault?: (id: string) => void
}

function brandLabel(b: CardBrand) {
  return { visa: 'Visa', mastercard: 'Mastercard', amex: 'Amex', discover: 'Discover', unknown: 'Card' }[b]
}

function maskedNumberFromLast4(last4: string, brand: CardBrand): string {
  if (brand === 'amex') return `•••• •••••• •${last4}`
  return `•••• •••• •••• ${last4}`
}

export function SavedCardsList({ cards, defaultId, onAdd, onRemove, onSetDefault }: SavedCardsListProps) {
  const [showAdd, setShowAdd] = React.useState(false)
  const [removeTarget, setRemoveTarget] = React.useState<SavedCard | null>(null)

  const confirmOpen = !!removeTarget

  function confirmRemove() {
    if (!removeTarget) return
    onRemove?.(removeTarget.id)
    setRemoveTarget(null)
  }

  return (
    <div className="bg-card text-card-foreground mx-auto w-full max-w-2xl rounded-xl border shadow-sm">
      <div className="flex items-center justify-between border-b px-5 py-4">
        <div>
          <h3 className="text-base font-semibold">Saved cards</h3>
          <p className="text-muted-foreground text-xs">Manage the cards used for billing.</p>
        </div>
        <Button size="sm" onClick={() => setShowAdd((v) => !v)}>
          <Plus className="size-4" /> Add card
        </Button>
      </div>

      {/* Add form (collapses inline) */}
      {showAdd ? (
        <div className="bg-muted/30 max-h-[1000px] overflow-hidden border-b p-4 opacity-100 transition-all duration-300 ease-out">
          <PaymentForm
            amount={0}
            showWallets={false}
            onSubmit={async (p) => {
              onAdd?.(p as AddPayload)
              setShowAdd(false)
            }}
          />
        </div>
      ) : null}

      {/* Empty state */}
      {cards.length === 0 && !showAdd ? (
        <div className="px-6 py-14 text-center">
          <div className="bg-muted text-muted-foreground mx-auto grid size-12 place-items-center rounded-full">
            <Plus className="size-5" />
          </div>
          <h4 className="mt-3 text-sm font-medium">No cards saved</h4>
          <p className="text-muted-foreground text-xs">Add a card to use it for future payments.</p>
          <Button size="sm" className="mt-4" onClick={() => setShowAdd(true)}>
            Add your first card
          </Button>
        </div>
      ) : (
        /* List */
        <ul className="divide-border divide-y">
          {cards.map((card) => (
            <li
              key={card.id}
              className="hover:bg-muted/30 flex items-center gap-4 px-5 py-4 transition-colors"
            >
              <PaymentCard
                number={maskedNumberFromLast4(card.last4, card.brand)}
                name={card.holder}
                expiry={card.expiry}
                brand={card.brand}
                variant="compact"
                flip={false}
              />
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium">
                    {brandLabel(card.brand)} ending {card.last4}
                  </p>
                  {card.id === defaultId ? (
                    <Badge variant="secondary">
                      <CheckCircle2 className="size-3" /> Default
                    </Badge>
                  ) : null}
                </div>
                <p className="text-muted-foreground text-xs">
                  Expires {card.expiry} · {card.holder}
                </p>
              </div>
              <div className="flex gap-1">
                {card.id !== defaultId ? (
                  <Button variant="ghost" size="sm" onClick={() => onSetDefault?.(card.id)}>
                    Set default
                  </Button>
                ) : null}
                <Button
                  variant="ghost"
                  size="icon-sm"
                  aria-label="Remove card"
                  onClick={() => setRemoveTarget(card)}
                >
                  <Trash2 className="text-muted-foreground size-4" />
                </Button>
              </div>
            </li>
          ))}
        </ul>
      )}

      {/* Remove confirmation */}
      <Dialog open={confirmOpen} onOpenChange={(open) => !open && setRemoveTarget(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Remove this card?</DialogTitle>
            <DialogDescription>
              {removeTarget && brandLabel(removeTarget.brand)} ending {removeTarget?.last4} will no longer be
              available for payments.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setRemoveTarget(null)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={confirmRemove}>
              Remove
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

```

## scatter-chart

- type: `registry:ui`
- description: React mirror of @uipkge/scatter-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/scatter-chart/ScatterChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// ScatterChart
// ─────────────────────────────────────────────────────────────────────────

export interface ScatterChartProps {
  data: Record<string, any>[]
  xField?: string
  yField?: string
  sizeField?: string
  categoryField?: string
  height?: number | string
  option?: any
  className?: string
}

export const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(
  ({ data, xField = 'x', yField = 'y', sizeField, categoryField, height = 300, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const categories = categoryField ? [...new Set(data.map((d) => d[categoryField]))] : ['default']

      const series = categories.map((cat, i) => ({
        name: cat,
        type: 'scatter',
        symbolSize: (val: any[]) => (sizeField ? Math.sqrt(val[2]) * 3 + 4 : 10),
        itemStyle: { color: theme.colors[i % theme.colors.length] },
        data: categoryField
          ? data
              .filter((d) => d[categoryField] === cat)
              .map((d) => [d[xField], d[yField], sizeField ? d[sizeField] : 0])
          : data.map((d) => [d[xField], d[yField], sizeField ? d[sizeField] : 0]),
      }))

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        xAxis: userXAxis,
        yAxis: userYAxis,
        grid: userGrid,
        tooltip: userTooltip,
        legend: userLegend,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      const baseLegend =
        categories.length > 1
          ? {
              bottom: 0,
              icon: 'circle',
              itemWidth: 8,
              itemHeight: 8,
              textStyle: { fontSize: 11, color: theme.textColor },
            }
          : undefined

      return {
        color: theme.colors,
        grid: mergeOptionBlock(
          { left: 16, right: 16, top: 24, bottom: categories.length > 1 ? 32 : 24, containLabel: true },
          userGrid,
        ),
        tooltip: mergeOptionBlock(
          {
            trigger: 'item',
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
            formatter: (params: any) =>
              `${params.seriesName}<br/>${xField}: ${params.value[0]}<br/>${yField}: ${params.value[1]}`,
          },
          userTooltip,
        ),
        legend: userLegend?.show === false ? undefined : mergeOptionBlock(baseLegend ?? {}, userLegend),
        xAxis: mergeOptionBlock(
          {
            type: 'value',
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { lineStyle: { color: theme.axisColor } },
            axisTick: { show: false },
            scale: true,
          },
          userXAxis,
        ),
        yAxis: mergeOptionBlock(
          {
            type: 'value',
            splitLine: { lineStyle: { color: theme.splitLineColor } },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { show: false },
            axisTick: { show: false },
            scale: true,
          },
          userYAxis,
        ),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, xField, yField, sizeField, categoryField, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
ScatterChart.displayName = 'ScatterChart'

```

### `packages/registry-react/components/charts/scatter-chart/index.ts`

```ts
export { ScatterChart, type ScatterChartProps } from './ScatterChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## scroll-area

- type: `registry:ui`
- description: Custom scrollbar that always renders the same way across OSes (no flashing native scrollbars on Windows). Use for sidebars, dropdown content, and any overflow region you want to feel consistent.
- npm deps: `@radix-ui/react-scroll-area`

### `packages/registry-react/components/scroll-area/scroll-area.tsx`

```tsx
'use client'

import * as React from 'react'
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
import { cn } from '@/lib/utils'

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="scroll-area"
    className={cn('relative', className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport
      data-uipkge=""
      data-slot="scroll-area-viewport"
      className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
    >
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = 'vertical', ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    data-uipkge=""
    data-slot="scroll-area-scrollbar"
    orientation={orientation}
    className={cn(
      'flex touch-none p-px transition-colors select-none',
      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb
      data-uipkge=""
      data-slot="scroll-area-thumb"
      className="bg-border relative flex-1 rounded-full"
    />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }

```

### `packages/registry-react/components/scroll-area/index.ts`

```ts
export { ScrollArea, ScrollBar } from './scroll-area'

```

## section-card

- type: `registry:ui`
- description: Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.
- registry deps: `card`

### `packages/registry-react/components/section-card/section-card.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'

export interface SectionCardProps {
  title: string
  description?: string
  className?: string
  contentClassName?: string
  /** Rendered top-right of the header — the React equivalent of the
   *  `header-action` named slot. */
  headerAction?: React.ReactNode
  /** Rendered after the content, outside CardContent — the React
   *  equivalent of the `footer` named slot. */
  footer?: React.ReactNode
  children?: React.ReactNode
}

const SectionCard = React.forwardRef<HTMLDivElement, SectionCardProps>(
  ({ title, description, className, contentClassName, headerAction, footer, children }, ref) => (
    <Card ref={ref} className={cn('flex flex-col', className)}>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-base font-semibold">{title}</CardTitle>
            {description && <CardDescription className="mt-0.5">{description}</CardDescription>}
          </div>
          {headerAction}
        </div>
      </CardHeader>
      <CardContent className={cn('flex-1', contentClassName)}>{children}</CardContent>
      {footer}
    </Card>
  ),
)
SectionCard.displayName = 'SectionCard'

export { SectionCard }

```

### `packages/registry-react/components/section-card/index.ts`

```ts
export { SectionCard, type SectionCardProps } from './section-card'

```

## segmented-gauge

- type: `registry:ui`
- description: React mirror of @uipkge/segmented-gauge.

### `packages/registry-react/components/charts/segmented-gauge/SegmentedGauge.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

// ─────────────────────────────────────────────────────────────────────────
// SegmentedGauge — pure SVG, no ECharts
// ─────────────────────────────────────────────────────────────────────────

interface GaugeSegment {
  /** Relative size of the segment. Segments are normalised by their sum. */
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
  /** Optional label, surfaced via the `children` for consumers that want to
   *  render their own legend. */
  label?: string
}

export interface SegmentedGaugeProps {
  segments: GaugeSegment[]
  /** Container height (px when numeric, raw CSS when string). Default 200. */
  height?: number | string
  /** Stroke width of the arc in SVG units. Default 18. */
  stroke?: number
  /** Angular gap between segments, in degrees. Default 4. */
  gap?: number
  /** Optional fallback palette when `color` is omitted on a segment. */
  colors?: string[]
  /** Show a faint background track behind the arc. Default true. */
  showTrack?: boolean
  className?: string
  /** Rendered into the dish centre (the Vue `center` slot). */
  children?: React.ReactNode
}

// SVG geometry. The viewBox uses the centre + radius + stroke so the
// canvas grows with the stroke width and the centre content can sit
// underneath without overlapping the arc.
const SG_CX = 140
const SG_CY = 124
const SG_R = 100

function sgPolar(angleDeg: number) {
  const a = ((angleDeg - 90) * Math.PI) / 180
  return [SG_CX + SG_R * Math.cos(a), SG_CY + SG_R * Math.sin(a)] as const
}

function sgArcPath(startA: number, endA: number) {
  const [sx, sy] = sgPolar(startA)
  const [ex, ey] = sgPolar(endA)
  const largeArc = endA - startA > 180 ? 1 : 0
  return `M ${sx.toFixed(2)} ${sy.toFixed(2)} A ${SG_R} ${SG_R} 0 ${largeArc} 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`
}

export const SegmentedGauge = React.forwardRef<HTMLDivElement, SegmentedGaugeProps>(
  (
    {
      segments,
      height = 200,
      stroke = 18,
      gap = 4,
      colors = ['#3b82f6', '#0ea5e9', '#34d399', '#facc15', '#fb7185', '#a855f7'],
      showTrack = true,
      className,
      children,
    },
    ref,
  ) => {
    const startAngle = 180
    const sweep = 180

    const arcs = React.useMemo(() => {
      const total = segments.reduce((acc, s) => acc + s.value, 0) || 1
      let cursor = startAngle
      return segments.map((s, i) => {
        const span = (s.value / total) * sweep
        const isLast = i === segments.length - 1
        const segEnd = cursor + span - (isLast ? 0 : gap)
        const arc = { d: sgArcPath(cursor, segEnd), color: s.color ?? colors[i % colors.length] }
        cursor = cursor + span
        return arc
      })
    }, [segments, gap, colors])

    const trackPath = sgArcPath(startAngle, startAngle + sweep)

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="segmented-gauge"
        tabIndex={0}
        style={{ height: heightToStyle(height) }}
        className={cn(
          'focus-visible:ring-ring relative w-full focus-visible:ring-2 focus-visible:outline-none',
          className,
        )}
      >
        <svg
          viewBox={`0 0 ${SG_CX * 2} ${SG_CY + stroke}`}
          className="block h-full w-full"
          preserveAspectRatio="xMidYMid meet"
          role="img"
        >
          {showTrack && (
            <path
              d={trackPath}
              fill="none"
              stroke="currentColor"
              strokeWidth={stroke}
              strokeLinecap="round"
              className="text-muted/40"
              opacity="0.35"
            />
          )}
          {arcs.map((a, i) => (
            <path key={i} d={a.d} fill="none" stroke={a.color} strokeWidth={stroke} strokeLinecap="round" />
          ))}
        </svg>
        {children != null && (
          <div className="pointer-events-none absolute inset-x-0 bottom-[8%] flex flex-col items-center">
            {children}
          </div>
        )}
      </div>
    )
  },
)
SegmentedGauge.displayName = 'SegmentedGauge'

```

### `packages/registry-react/components/charts/segmented-gauge/index.ts`

```ts
export { SegmentedGauge, type SegmentedGaugeProps } from './SegmentedGauge'

```

## select

- type: `registry:ui`
- description: Dropdown select primitive — single-select, with optional groups and per-item descriptions. Built on Radix UI with full keyboard navigation.
- npm deps: `@radix-ui/react-select`, `lucide-react`

### `packages/registry-react/components/select/select.tsx`

```tsx
'use client'

import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check, ChevronDown, ChevronUp, Loader } from 'lucide-react'
import { cn } from '@/lib/utils'

const Select = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>
>((props, ref) => <SelectPrimitive.Root {...props} ref={ref} data-uipkge="" data-slot="select" />)
Select.displayName = SelectPrimitive.Root.displayName

const SelectGroup = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Group>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>
>((props, ref) => <SelectPrimitive.Group {...props} ref={ref} data-uipkge="" data-slot="select-group" />)
SelectGroup.displayName = SelectPrimitive.Group.displayName

const SelectValue = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Value>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
>((props, ref) => <SelectPrimitive.Value {...props} ref={ref} data-uipkge="" data-slot="select-value" />)
SelectValue.displayName = SelectPrimitive.Value.displayName

const triggerSizeClasses = {
  sm: 'h-8 text-sm px-2.5 py-1.5',
  default: 'h-9 text-sm px-3 py-2',
  lg: 'h-11 text-base px-4 py-2.5',
}

const triggerStateClasses = {
  default: 'border-input dark:hover:bg-input/50',
  error:
    'border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
  success: 'border-[var(--success)] focus-visible:border-[var(--success)]',
}

export interface SelectTriggerProps
  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
  size?: 'sm' | 'default' | 'lg'
  state?: 'default' | 'error' | 'success'
  loading?: boolean
}

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  SelectTriggerProps
>(({ className, children, size = 'default', state = 'default', loading = false, disabled, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    data-uipkge=""
    data-slot="select-trigger"
    data-size={size}
    data-state-value={state}
    disabled={disabled || loading}
    aria-busy={loading}
    className={cn(
      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
      triggerSizeClasses[size],
      triggerStateClasses[state],
      className,
    )}
    {...props}
  >
    {children}
    {loading ? (
      <Loader className="size-4 animate-spin opacity-50" />
    ) : (
      <SelectPrimitive.Icon asChild>
        <ChevronDown className="size-4 opacity-50" aria-hidden="true" />
      </SelectPrimitive.Icon>
    )}
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    data-uipkge=""
    data-slot="select-scroll-up-button"
    className={cn('flex cursor-default items-center justify-center py-1', className)}
    {...props}
  >
    {children ?? <ChevronUp className="size-4" aria-hidden="true" />}
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    data-uipkge=""
    data-slot="select-scroll-down-button"
    className={cn('flex cursor-default items-center justify-center py-1', className)}
    {...props}
  >
    {children ?? <ChevronDown className="size-4" aria-hidden="true" />}
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = 'popper', ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="select-content"
      position={position}
      className={cn(
        'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
        position === 'popper' &&
          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
        className,
      )}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          'p-1',
          position === 'popper' &&
            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    data-uipkge=""
    data-slot="select-label"
    className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    data-uipkge=""
    data-slot="select-item"
    className={cn(
      'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
      className,
    )}
    {...props}
  >
    <span className="absolute right-2 flex size-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="size-4" aria-hidden="true" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectItemText = SelectPrimitive.ItemText

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    data-uipkge=""
    data-slot="select-separator"
    className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemText,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}

```

### `packages/registry-react/components/select/index.ts`

```ts
export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectItemText,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from './select'

```

## separator

- type: `registry:ui`
- description: Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.
- npm deps: `@radix-ui/react-separator`

### `packages/registry-react/components/separator/Separator.tsx`

```tsx
'use client'

import * as React from 'react'
import * as SeparatorPrimitive from '@radix-ui/react-separator'
import { cn } from '@/lib/utils'

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="separator"
    orientation={orientation}
    decorative={decorative}
    className={cn(
      'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
      className,
    )}
    {...props}
  />
))
Separator.displayName = 'Separator'

export { Separator }

```

### `packages/registry-react/components/separator/index.ts`

```ts
export { Separator } from './Separator'

```

## sheet

- type: `registry:ui`
- description: Side-mounted modal that slides in from the top, right, bottom, or left edge. Use for filter panels, edit drawers, and mobile menus.
- npm deps: `@radix-ui/react-dialog`, `lucide-react`

### `packages/registry-react/components/sheet/sheet.tsx`

```tsx
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

const Sheet = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>
>((props, ref) => <DialogPrimitive.Root {...props} ref={ref} data-uipkge="" data-slot="sheet" />)
Sheet.displayName = DialogPrimitive.Root.displayName

const SheetTrigger = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>
>(({ ...props }, ref) => <DialogPrimitive.Trigger ref={ref} data-uipkge="" data-slot="sheet-trigger" {...props} />)
SheetTrigger.displayName = DialogPrimitive.Trigger.displayName

const SheetClose = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Close>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
>(({ ...props }, ref) => <DialogPrimitive.Close ref={ref} data-uipkge="" data-slot="sheet-close" {...props} />)
SheetClose.displayName = DialogPrimitive.Close.displayName

const SheetOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    data-uipkge=""
    data-slot="sheet-overlay"
    className={cn(
      'motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 bg-foreground/50 fixed inset-0 z-50',
      className,
    )}
    {...props}
  />
))
SheetOverlay.displayName = DialogPrimitive.Overlay.displayName

interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  side?: 'top' | 'right' | 'bottom' | 'left'
}

const SheetContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, SheetContentProps>(
  ({ side = 'right', className, children, ...props }, ref) => (
    <DialogPrimitive.Portal>
      <SheetOverlay />
      <DialogPrimitive.Content
        ref={ref}
        data-uipkge=""
        data-slot="sheet-content"
        className={cn(
          'bg-background motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out motion-safe:data-[state=closed]:duration-200 motion-safe:data-[state=open]:duration-300',
          side === 'right' &&
            'motion-safe:data-[state=closed]:slide-out-to-right motion-safe:data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
          side === 'left' &&
            'motion-safe:data-[state=closed]:slide-out-to-left motion-safe:data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
          side === 'top' &&
            'motion-safe:data-[state=closed]:slide-out-to-top motion-safe:data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
          side === 'bottom' &&
            'motion-safe:data-[state=closed]:slide-out-to-bottom motion-safe:data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
          className,
        )}
        {...props}
      >
        {children}

        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <X className="size-4" aria-hidden="true" />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPrimitive.Portal>
  ),
)
SheetContent.displayName = DialogPrimitive.Content.displayName

const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div data-uipkge="" data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
)
SheetHeader.displayName = 'SheetHeader'

const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div data-uipkge="" data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
)
SheetFooter.displayName = 'SheetFooter'

const SheetTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    data-uipkge=""
    data-slot="sheet-title"
    className={cn('text-foreground font-semibold', className)}
    {...props}
  />
))
SheetTitle.displayName = DialogPrimitive.Title.displayName

const SheetDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
    ref={ref}
    data-uipkge=""
    data-slot="sheet-description"
    className={cn('text-muted-foreground text-sm', className)}
    {...props}
  />
))
SheetDescription.displayName = DialogPrimitive.Description.displayName

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}

```

### `packages/registry-react/components/sheet/index.ts`

```ts
export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetOverlay,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from './sheet'

```

## sidebar

- type: `registry:ui`
- description: Full-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.
- npm deps: `@radix-ui/react-slot`, `class-variance-authority`, `lucide-react`
- registry deps: `button`, `input`, `separator`, `sheet`, `skeleton`, `tooltip`

### `packages/registry-react/components/sidebar/sidebar.tsx`

```tsx
'use client'

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { PanelLeft } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Separator } from '@/components/ui/separator'
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'
import { Skeleton } from '@/components/ui/skeleton'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { sidebarMenuButtonVariants } from './sidebar.variants'

/* ------------------------------------------------------------------ */
/* Constants (ported from utils.ts)                                    */
/* ------------------------------------------------------------------ */

const SIDEBAR_COOKIE_NAME = 'sidebar_state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = '16rem'
const SIDEBAR_WIDTH_MOBILE = '18rem'
const SIDEBAR_WIDTH_ICON = '3rem'
const SIDEBAR_KEYBOARD_SHORTCUT = 'b'

/* ------------------------------------------------------------------ */
/* Context (React equivalent of reka-ui's provide/inject)              */
/* ------------------------------------------------------------------ */

type SidebarContextValue = {
  state: 'expanded' | 'collapsed'
  open: boolean
  setOpen: (value: boolean) => void
  isMobile: boolean
  openMobile: boolean
  setOpenMobile: (value: boolean) => void
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextValue | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error('useSidebar must be used within a SidebarProvider.')
  }
  return context
}

/* ------------------------------------------------------------------ */
/* SidebarProvider                                                     */
/* ------------------------------------------------------------------ */

export interface SidebarProviderProps extends React.ComponentProps<'div'> {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

const SidebarProvider = React.forwardRef<HTMLDivElement, SidebarProviderProps>(
  ({ defaultOpen = true, open: openProp, onOpenChange, className, style, children, ...props }, ref) => {
    // `useMediaQuery` returns `false` during SSR (no matchMedia) and
    // re-evaluates on the client's first effect. If the viewport is < 768px,
    // SSR HTML has the desktop branch but the client wants the mobile <Sheet>
    // branch -- React throws a hydration mismatch and the Sheet renders
    // without its overlay (the desktop sidebar's div is the parent the diff
    // lands against).
    //
    // Gating on `mounted` makes both the server and the client's first render
    // produce the desktop branch unconditionally; the effect then flips the
    // flag and `Sidebar`'s mobile branch re-runs against the real matchMedia
    // signal. Cost: a brief desktop-layout flash for mobile users on first
    // paint. That's the universal tradeoff for SSR-without-viewport-detection
    // -- there is no clean way to know the viewport on the server.
    const [mounted, setMounted] = React.useState(false)
    const [mediaMobile, setMediaMobile] = React.useState(false)

    React.useEffect(() => {
      setMounted(true)
      const mql = window.matchMedia('(max-width: 768px)')
      const onChange = () => setMediaMobile(mql.matches)
      onChange()
      mql.addEventListener('change', onChange)
      return () => mql.removeEventListener('change', onChange)
    }, [])

    const isMobile = mounted && mediaMobile
    const [openMobile, setOpenMobile] = React.useState(false)

    // Internal open state with optional controlled prop, mirroring the Vue
    // provider's plain ref (it defaulted to `true`).
    const [internalOpen, setInternalOpen] = React.useState(openProp ?? defaultOpen ?? true)
    const open = openProp ?? internalOpen

    const setOpen = React.useCallback(
      (value: boolean) => {
        if (onOpenChange) onOpenChange(value)
        else setInternalOpen(value)

        // This sets the cookie to keep the sidebar state.
        document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
      },
      [onOpenChange],
    )

    // Helper to toggle the sidebar.
    const toggleSidebar = React.useCallback(() => {
      return isMobile ? setOpenMobile((v) => !v) : setOpen(!open)
    }, [isMobile, open, setOpen])

    React.useEffect(() => {
      const handler = (event: KeyboardEvent) => {
        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
          event.preventDefault()
          toggleSidebar()
        }
      }
      window.addEventListener('keydown', handler)
      return () => window.removeEventListener('keydown', handler)
    }, [toggleSidebar])

    // We add a state so that we can do data-state="expanded" or "collapsed".
    // This makes it easier to style the sidebar with Tailwind classes.
    const state = open ? 'expanded' : 'collapsed'

    const contextValue = React.useMemo<SidebarContextValue>(
      () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),
      [state, open, setOpen, isMobile, openMobile, toggleSidebar],
    )

    return (
      <SidebarContext.Provider value={contextValue}>
        <TooltipProvider delayDuration={0}>
          <div
            ref={ref}
            data-uipkge=""
            data-slot="sidebar-wrapper"
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH,
                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                ...style,
              } as React.CSSProperties
            }
            className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
            {...props}
          >
            {children}
          </div>
        </TooltipProvider>
      </SidebarContext.Provider>
    )
  },
)
SidebarProvider.displayName = 'SidebarProvider'

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

export interface SidebarProps extends React.ComponentProps<'div'> {
  side?: 'left' | 'right'
  variant?: 'sidebar' | 'floating' | 'inset'
  collapsible?: 'offcanvas' | 'icon' | 'none'
}

const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
  ({ side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children, ...props }, ref) => {
    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

    if (collapsible === 'none') {
      return (
        <div
          ref={ref}
          data-uipkge=""
          data-slot="sidebar"
          className={cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}
          {...props}
        >
          {children}
        </div>
      )
    }

    if (isMobile) {
      return (
        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
          <SheetContent
            data-sidebar="sidebar"
            data-uipkge=""
            data-slot="sidebar"
            data-mobile="true"
            side={side}
            className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
            style={
              {
                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
              } as React.CSSProperties
            }
          >
            <SheetHeader className="sr-only">
              <SheetTitle>Sidebar</SheetTitle>
              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
            </SheetHeader>
            <div className="flex h-full w-full flex-col">{children}</div>
          </SheetContent>
        </Sheet>
      )
    }

    return (
      <div
        ref={ref}
        className="group peer text-sidebar-foreground hidden md:block"
        data-uipkge=""
        data-slot="sidebar"
        data-state={state}
        data-collapsible={state === 'collapsed' ? collapsible : ''}
        data-variant={variant}
        data-side={side}
      >
        {/* This is what handles the sidebar gap on desktop  */}
        <div
          className={cn(
            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
            'group-data-[collapsible=offcanvas]:w-0',
            'group-data-[side=right]:rotate-180',
            variant === 'floating' || variant === 'inset'
              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
          )}
        />
        <div
          className={cn(
            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
            side === 'left'
              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
            // Adjust the padding for floating and inset variants.
            variant === 'floating' || variant === 'inset'
              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
            className,
          )}
          {...props}
        >
          <div
            data-sidebar="sidebar"
            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
          >
            {children}
          </div>
        </div>
      </div>
    )
  },
)
Sidebar.displayName = 'Sidebar'

/* ------------------------------------------------------------------ */
/* SidebarTrigger                                                      */
/* ------------------------------------------------------------------ */

const SidebarTrigger = React.forwardRef<
  React.ElementRef<typeof Button>,
  React.ComponentProps<typeof Button>
>(({ className, onClick, ...props }, ref) => {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      ref={ref}
      data-sidebar="trigger"
      data-uipkge=""
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn('focus-visible:ring-ring h-7 w-7 focus-visible:ring-2 focus-visible:outline-none', className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeft />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
})
SidebarTrigger.displayName = 'SidebarTrigger'

/* ------------------------------------------------------------------ */
/* SidebarRail                                                         */
/* ------------------------------------------------------------------ */

const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
  ({ className, ...props }, ref) => {
    const { toggleSidebar } = useSidebar()

    return (
      <button
        ref={ref}
        type="button"
        data-sidebar="rail"
        data-uipkge=""
        data-slot="sidebar-rail"
        aria-label="Toggle Sidebar"
        tabIndex={-1}
        title="Toggle Sidebar"
        className={cn(
          'hover:after:bg-sidebar-border focus-visible:ring-ring absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-colors duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] focus-visible:ring-2 focus-visible:outline-none sm:flex',
          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
          'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
          className,
        )}
        onClick={toggleSidebar}
        {...props}
      />
    )
  },
)
SidebarRail.displayName = 'SidebarRail'

/* ------------------------------------------------------------------ */
/* SidebarInset                                                        */
/* ------------------------------------------------------------------ */

const SidebarInset = React.forwardRef<HTMLElement, React.ComponentProps<'main'>>(
  ({ className, ...props }, ref) => (
    <main
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-inset"
      className={cn(
        // min-w-0 is load-bearing: a flex-1 child without it inherits min-width: auto,
        // which means any single wide descendant (chart, table, code block) blows the
        // inset's width past its grid track. The upstream shadcn-ui sidebar omits this.
        'bg-background relative flex w-full min-w-0 flex-1 flex-col',
        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
        className,
      )}
      {...props}
    />
  ),
)
SidebarInset.displayName = 'SidebarInset'

/* ------------------------------------------------------------------ */
/* SidebarInput                                                        */
/* ------------------------------------------------------------------ */

const SidebarInput = React.forwardRef<
  React.ElementRef<typeof Input>,
  React.ComponentProps<typeof Input>
>(({ className, ...props }, ref) => (
  // Sidebar-tuned wrapper over the kit's <Input>.
  <Input
    ref={ref}
    data-uipkge=""
    data-slot="sidebar-input"
    data-sidebar="input"
    className={cn('bg-background h-8 w-full shadow-none', className)}
    {...props}
  />
))
SidebarInput.displayName = 'SidebarInput'

/* ------------------------------------------------------------------ */
/* SidebarHeader / SidebarFooter                                       */
/* ------------------------------------------------------------------ */

const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  ),
)
SidebarHeader.displayName = 'SidebarHeader'

const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn('flex flex-col gap-2 p-2', className)}
      {...props}
    />
  ),
)
SidebarFooter.displayName = 'SidebarFooter'

/* ------------------------------------------------------------------ */
/* SidebarSeparator                                                    */
/* ------------------------------------------------------------------ */

const SidebarSeparator = React.forwardRef<
  React.ElementRef<typeof Separator>,
  React.ComponentProps<typeof Separator>
>(({ className, ...props }, ref) => (
  <Separator
    ref={ref}
    data-uipkge=""
    data-slot="sidebar-separator"
    data-sidebar="separator"
    className={cn('bg-sidebar-border mx-2 w-auto', className)}
    {...props}
  />
))
SidebarSeparator.displayName = 'SidebarSeparator'

/* ------------------------------------------------------------------ */
/* SidebarContent                                                      */
/* ------------------------------------------------------------------ */

const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
        className,
      )}
      {...props}
    />
  ),
)
SidebarContent.displayName = 'SidebarContent'

/* ------------------------------------------------------------------ */
/* SidebarGroup family                                                 */
/* ------------------------------------------------------------------ */

const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
      {...props}
    />
  ),
)
SidebarGroup.displayName = 'SidebarGroup'

const SidebarGroupLabel = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'div'

  return (
    <Comp
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        'text-sidebar-foreground/70 ring-sidebar-ring mt-2 mb-1 flex h-8 shrink-0 items-center rounded-md px-2 text-[13px] font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupLabel.displayName = 'SidebarGroupLabel'

const SidebarGroupAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'after:absolute after:-inset-2 md:after:hidden',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarGroupAction.displayName = 'SidebarGroupAction'

const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn('w-full text-sm', className)}
      {...props}
    />
  ),
)
SidebarGroupContent.displayName = 'SidebarGroupContent'

/* ------------------------------------------------------------------ */
/* SidebarMenu family                                                  */
/* ------------------------------------------------------------------ */

const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
  ({ className, ...props }, ref) => (
    <ul
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
      {...props}
    />
  ),
)
SidebarMenu.displayName = 'SidebarMenu'

const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
  ({ className, ...props }, ref) => (
    <li
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn('group/menu-item relative', className)}
      {...props}
    />
  ),
)
SidebarMenuItem.displayName = 'SidebarMenuItem'

export interface SidebarMenuButtonProps extends React.ComponentProps<'button'> {
  asChild?: boolean
  isActive?: boolean
  variant?: 'default' | 'outline'
  size?: 'default' | 'sm' | 'lg'
  tooltip?: string | React.ReactNode | React.ComponentProps<typeof TooltipContent>
}

const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
  (
    { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className, ...props },
    ref,
  ) => {
    const Comp = asChild ? Slot : 'button'
    const { isMobile, state } = useSidebar()

    const button = (
      <Comp
        ref={ref}
        data-uipkge=""
        data-slot="sidebar-menu-button"
        data-sidebar="menu-button"
        data-size={size}
        data-active={isActive}
        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
        {...props}
      />
    )

    if (!tooltip) {
      return button
    }

    let tooltipProps: React.ComponentProps<typeof TooltipContent>
    if (typeof tooltip === 'string') {
      tooltipProps = { children: tooltip }
    } else if (React.isValidElement(tooltip)) {
      tooltipProps = { children: tooltip }
    } else {
      tooltipProps = tooltip as React.ComponentProps<typeof TooltipContent>
    }

    return (
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltipProps} />
      </Tooltip>
    )
  },
)
SidebarMenuButton.displayName = 'SidebarMenuButton'

const SidebarMenuAction = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<'button'> & { asChild?: boolean; showOnHover?: boolean }
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
  const Comp = asChild ? Slot : 'button'

  return (
    <Comp
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
        'after:absolute after:-inset-2 md:after:hidden',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        showOnHover &&
          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuAction.displayName = 'SidebarMenuAction'

const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
        'peer-data-[size=sm]/menu-button:top-1',
        'peer-data-[size=default]/menu-button:top-1.5',
        'peer-data-[size=lg]/menu-button:top-2.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  ),
)
SidebarMenuBadge.displayName = 'SidebarMenuBadge'

const SidebarMenuSkeleton = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<'div'> & { showIcon?: boolean }
>(({ className, showIcon = false, ...props }, ref) => {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, [])

  return (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
      {...props}
    >
      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}

      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={{ '--skeleton-width': width } as React.CSSProperties}
      />
    </div>
  )
})
SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'

const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
  ({ className, ...props }, ref) => (
    <ul
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-badge"
      className={cn(
        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  ),
)
SidebarMenuSub.displayName = 'SidebarMenuSub'

const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
  ({ className, ...props }, ref) => (
    <li
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn('group/menu-sub-item relative', className)}
      {...props}
    />
  ),
)
SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'

const SidebarMenuSubButton = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentProps<'a'> & { asChild?: boolean; size?: 'sm' | 'md'; isActive?: boolean }
>(({ asChild = false, size = 'md', isActive = false, className, ...props }, ref) => {
  const Comp = asChild ? Slot : 'a'

  return (
    <Comp
      ref={ref}
      data-uipkge=""
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
        size === 'sm' && 'text-xs',
        size === 'md' && 'text-sm',
        'group-data-[collapsible=icon]:hidden',
        className,
      )}
      {...props}
    />
  )
})
SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}

```

### `packages/registry-react/components/sidebar/sidebar.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const sidebarMenuButtonVariants = cva(
  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-muted-foreground outline-hidden ring-sidebar-ring transition-[width,height,padding,color,background-color] hover:bg-sidebar-accent/50 hover:text-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/10 data-[active=true]:font-medium data-[active=true]:text-primary data-[state=open]:hover:bg-sidebar-accent/50 data-[state=open]:hover:text-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'hover:bg-sidebar-accent hover:text-foreground',
        outline:
          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
      },
      size: {
        default: 'h-11 text-sm',
        sm: 'h-10 text-xs',
        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

```

### `packages/registry-react/components/sidebar/index.ts`

```ts
export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
} from './sidebar'
export type { SidebarProps, SidebarProviderProps, SidebarMenuButtonProps } from './sidebar'

// Re-export variant API from the sibling file (mirrors the Vue registry's
// `<name>.variants.ts` convention to avoid a component <-> index import cycle).
export { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from './sidebar.variants'

```

## sidebar-01

- type: `registry:block`
- description: Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure markup, no props -- edit Sidebar01.tsx to change routes and NavUser.tsx to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-react/blocks/sidebar-01/Sidebar01.tsx`

```tsx
'use client'

// Edit this file to change brand, navigation, and the user dropdown.
// Every menu item is spelled out below -- copy, remove, or rename rows directly.

import { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from 'lucide-react'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from '@/components/ui/sidebar'
import { NavUser } from './NavUser'

export function Sidebar01() {
  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="uipkge" className="group-data-[collapsible=icon]:!justify-center">
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6">
                <svg
                  viewBox="0 0 24 24"
                  className="size-4 group-data-[collapsible=icon]:size-3.5"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="font-display truncate font-bold">uipkge</span>
                <span className="text-muted-foreground truncate text-xs">uipkge.dev</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                {/* TODO: wrap in a <Link> and bind isActive to your route */}
                <SidebarMenuButton isActive tooltip="Dashboard">
                  <LayoutDashboard className="size-4" />
                  <span>Dashboard</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Data tables">
                  <TableIcon className="size-4" />
                  <span>Data tables</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Forms">
                  <FileText className="size-4" />
                  <span>Forms</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Charts">
                  <BarChart3 className="size-4" />
                  <span>Charts</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Pages">
                  <Files className="size-4" />
                  <span>Pages</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Resources</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Docs">
                  <BookOpen className="size-4" />
                  <span>Docs</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Changelog">
                  <History className="size-4" />
                  <span>Changelog</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <NavUser />
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-01/NavUser.tsx`

```tsx
'use client'

// Edit this file to change the user dropdown content, avatar, and logout handler.
// The user details are inlined below -- wire them to your auth session in place.

import { BadgeCheck, ChevronsUpDown, LogOut, Monitor, Moon, Palette, Settings, Sun } from 'lucide-react'
import { useTheme } from '@/lib/use-theme'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

// Replace these with your auth session.
const user = {
  name: 'Test User',
  email: 'you@example.com',
  initials: 'TU',
}

function handleLogout() {
  // TODO: call your /api/auth/logout endpoint, then redirect.
  console.warn('NavUser: wire handleLogout() to your auth backend')
}

export function NavUser() {
  const { isMobile } = useSidebar()
  const { theme, setTheme } = useTheme()

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
            >
              <Avatar className="h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6">
                <AvatarFallback className="rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">
                  {user.initials}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarFallback className="rounded-lg">{user.initials}</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">{user.name}</span>
                  <span className="truncate text-xs">{user.email}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck className="size-4" /> Profile
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Settings className="size-4" /> Settings
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Palette className="size-4" />
                Theme
                <span className="text-muted-foreground ml-auto text-xs capitalize">{theme}</span>
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent className="min-w-36">
                <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v)}>
                  <DropdownMenuRadioItem value="light">
                    <Sun className="size-4" /> Light
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="dark">
                    <Moon className="size-4" /> Dark
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="system">
                    <Monitor className="size-4" /> System
                  </DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={handleLogout}>
              <LogOut className="size-4" />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

```

### `packages/registry-react/blocks/sidebar-01/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-01.json`.
// Visit /sidebar-01-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar01 } from '@/components/blocks/sidebar-01/Sidebar01'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar01 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-01 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-02

- type: `registry:block`
- description: Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `avatar`, `collapsible`, `dropdown-menu`, `use-theme`

### `packages/registry-react/blocks/sidebar-02/Sidebar02.tsx`

```tsx
'use client'

import { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal } from 'lucide-react'
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '@/components/ui/sidebar'
import { NavMain } from './NavMain'
import { NavProjects } from './NavProjects'
import { NavSecondary } from './NavSecondary'
import { NavUser } from './NavUser'
import { TeamSwitcher } from './TeamSwitcher'

const data = {
  user: {
    name: 'shadcn',
    email: 'm@example.com',
  },
  navMain: [
    {
      title: 'Playground',
      url: '#',
      icon: SquareTerminal,
      isActive: true,
      items: [
        { title: 'History', url: '#' },
        { title: 'Starred', url: '#' },
        { title: 'Settings', url: '#' },
      ],
    },
    {
      title: 'Models',
      url: '#',
      icon: Bot,
      items: [
        { title: 'Genesis', url: '#' },
        { title: 'Explorer', url: '#' },
        { title: 'Quantum', url: '#' },
      ],
    },
    {
      title: 'Documentation',
      url: '#',
      icon: BookOpen,
      items: [
        { title: 'Introduction', url: '#' },
        { title: 'Get Started', url: '#' },
        { title: 'Tutorials', url: '#' },
        { title: 'Changelog', url: '#' },
      ],
    },
    {
      title: 'Settings',
      url: '#',
      icon: Settings2,
      items: [
        { title: 'General', url: '#' },
        { title: 'Team', url: '#' },
        { title: 'Billing', url: '#' },
        { title: 'Limits', url: '#' },
      ],
    },
  ],
  navSecondary: [
    { title: 'Support', url: '#', icon: LifeBuoy },
    { title: 'Feedback', url: '#', icon: Send },
  ],
  projects: [
    { name: 'Design Engineering', url: '#', icon: Frame },
    { name: 'Sales & Marketing', url: '#', icon: PieChart },
    { name: 'Travel', url: '#', icon: Map },
  ],
}

export function Sidebar02() {
  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <TeamSwitcher />
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} />
        <NavProjects projects={data.projects} />
        <NavSecondary items={data.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/TeamSwitcher.tsx`

```tsx
'use client'

// Edit teams + activeTeam below to match your tenant model. The dropdown
// is the full team switcher pattern -- avatar tile, label, kbd shortcut,
// and a "Add team" footer row. Wire setActive() to your tenant API.

import * as React from 'react'
import { AudioWaveform, Check, ChevronsUpDown, Command, Plus, type LucideIcon } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

// 4-quadrant uipkge logo. Inline component so it can sit next to Lucide
// icons in the teams array without an extra file.
const UipkgeMark = ({ className }: { className?: string }) => (
  <svg viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
    <rect x="2" y="2" width="9" height="9" rx="1.5" />
    <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
    <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
    <rect x="13" y="13" width="9" height="9" rx="1.5" />
  </svg>
)

type Team = {
  name: string
  logo: LucideIcon | ((props: { className?: string }) => React.ReactElement)
  plan: string
}

const teams: Team[] = [
  { name: 'uipkge', logo: UipkgeMark, plan: 'UI registry' },
  { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },
  { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },
]

export function TeamSwitcher() {
  const { isMobile } = useSidebar()
  const [activeTeam, setActiveTeam] = React.useState<Team>(teams[0]!)
  const ActiveLogo = activeTeam.logo

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
            >
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6">
                <ActiveLogo className="size-4 group-data-[collapsible=icon]:size-3.5" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="font-display truncate font-bold">{activeTeam.name}</span>
                <span className="text-muted-foreground truncate text-xs">{activeTeam.plan}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            align="start"
            sideOffset={4}
          >
            <DropdownMenuLabel className="text-muted-foreground text-xs">Teams</DropdownMenuLabel>
            {teams.map((team, i) => {
              const Logo = team.logo
              return (
                <DropdownMenuItem key={team.name} className="gap-2 p-2" onSelect={() => setActiveTeam(team)}>
                  <div className="flex size-6 items-center justify-center rounded-sm border">
                    <Logo className="size-3.5 shrink-0" />
                  </div>
                  {team.name}
                  {activeTeam === team ? (
                    <Check className="ml-auto size-4" />
                  ) : (
                    <DropdownMenuShortcut>⌘{i + 1}</DropdownMenuShortcut>
                  )}
                </DropdownMenuItem>
              )
            })}
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-2 p-2">
              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
                <Plus className="size-4" />
              </div>
              <div className="text-muted-foreground font-medium">Add team</div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/NavMain.tsx`

```tsx
'use client'

import { ChevronRight, type LucideIcon } from 'lucide-react'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from '@/components/ui/sidebar'

export interface NavMainProps {
  items: {
    title: string
    url: string
    icon: LucideIcon
    isActive?: boolean
    items?: {
      title: string
      url: string
      isActive?: boolean
    }[]
  }[]
}

export function NavMain({ items }: NavMainProps) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Platform</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
            <SidebarMenuItem>
              <SidebarMenuButton asChild tooltip={item.title} isActive={item.isActive}>
                <a href={item.url}>
                  <item.icon />
                  <span>{item.title}</span>
                </a>
              </SidebarMenuButton>
              {item.items?.length ? (
                <>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuAction className="data-[state=open]:rotate-90">
                      <ChevronRight />
                      <span className="sr-only">Toggle</span>
                    </SidebarMenuAction>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                          <SidebarMenuSubButton asChild isActive={subItem.isActive}>
                            <a href={subItem.url}>
                              <span>{subItem.title}</span>
                            </a>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </>
              ) : null}
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/NavProjects.tsx`

```tsx
'use client'

import { Folder, Forward, MoreHorizontal, Trash2, type LucideIcon } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'

export interface NavProjectsProps {
  projects: {
    name: string
    url: string
    icon: LucideIcon
  }[]
}

export function NavProjects({ projects }: NavProjectsProps) {
  const { isMobile } = useSidebar()

  return (
    // Upstream shadcn-ui hides this entire group on icon-mode collapse
    // with `group-data-[collapsible=icon]:hidden`. We keep it visible so
    // the project icons stay reachable in the narrow column; the
    // SidebarGroupLabel below and the `<span>` children of each
    // SidebarMenuButton already self-hide on collapse, leaving an
    // icon-only column that lines up with NavMain.
    <SidebarGroup>
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontal />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-48 rounded-lg"
                side={isMobile ? 'bottom' : 'right'}
                align={isMobile ? 'end' : 'start'}
              >
                <DropdownMenuItem>
                  <Folder className="text-muted-foreground" />
                  <span>View Project</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Forward className="text-muted-foreground" />
                  <span>Share Project</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trash2 className="text-muted-foreground" />
                  <span>Delete Project</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
        <SidebarMenuItem>
          <SidebarMenuButton>
            <MoreHorizontal />
            <span>More</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/NavSecondary.tsx`

```tsx
'use client'

import * as React from 'react'
import { type LucideIcon } from 'lucide-react'
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'

export interface NavSecondaryProps extends React.ComponentProps<typeof SidebarGroup> {
  items: {
    title: string
    url: string
    icon: LucideIcon
    isActive?: boolean
  }[]
}

export function NavSecondary({ items, ...props }: NavSecondaryProps) {
  return (
    <SidebarGroup {...props}>
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton asChild size="sm" isActive={item.isActive}>
                <a href={item.url}>
                  <item.icon />
                  <span>{item.title}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/NavUser.tsx`

```tsx
'use client'

import * as React from 'react'
import {
  BadgeCheck,
  Bell,
  ChevronsUpDown,
  CreditCard,
  LogOut,
  Monitor,
  Moon,
  Palette,
  Sparkles,
  Sun,
} from 'lucide-react'
import { useTheme } from '@/lib/use-theme'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'

export interface NavUserProps {
  user: {
    name: string
    email: string
  }
}

export function NavUser({ user }: NavUserProps) {
  const { isMobile } = useSidebar()
  const { theme, setTheme } = useTheme()

  const initials = React.useMemo(() => {
    const parts = user.name.trim().split(/\s+/).slice(0, 2)
    return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'
  }, [user.name])

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
            >
              <Avatar className="h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6">
                <AvatarFallback className="rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">
                  {initials}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarFallback className="rounded-lg text-xs">{initials}</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">{user.name}</span>
                  <span className="truncate text-xs">{user.email}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Sparkles />
                Upgrade to Pro
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuSub>
              <DropdownMenuSubTrigger>
                <Palette />
                Theme
                <span className="text-muted-foreground ml-auto text-xs capitalize">{theme}</span>
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent className="min-w-36">
                <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v)}>
                  <DropdownMenuRadioItem value="light">
                    <Sun /> Light
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="dark">
                    <Moon /> Dark
                  </DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="system">
                    <Monitor /> System
                  </DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

```

### `packages/registry-react/blocks/sidebar-02/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-02.json`.
// Visit /sidebar-02-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar02 } from '@/components/blocks/sidebar-02/Sidebar02'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar02 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-02 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-03

- type: `registry:block`
- description: Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `collapsible`, `dropdown-menu`, `label`

### `packages/registry-react/blocks/sidebar-03/Sidebar03.tsx`

```tsx
'use client'

import { ChevronRight } from 'lucide-react'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from '@/components/ui/sidebar'
import { SearchForm } from './SearchForm'
import { VersionSwitcher } from './VersionSwitcher'

// This is sample data.
const data = {
  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        { title: 'Installation', url: '#' },
        { title: 'Project Structure', url: '#' },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        { title: 'Routing', url: '#' },
        { title: 'Data Fetching', url: '#', isActive: true },
        { title: 'Rendering', url: '#' },
        { title: 'Caching', url: '#' },
        { title: 'Styling', url: '#' },
        { title: 'Optimizing', url: '#' },
        { title: 'Configuring', url: '#' },
        { title: 'Testing', url: '#' },
        { title: 'Authentication', url: '#' },
        { title: 'Deploying', url: '#' },
        { title: 'Upgrading', url: '#' },
        { title: 'Examples', url: '#' },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        { title: 'Components', url: '#' },
        { title: 'File Conventions', url: '#' },
        { title: 'Functions', url: '#' },
        { title: 'next.config.js Options', url: '#' },
        { title: 'CLI', url: '#' },
        { title: 'Edge Runtime', url: '#' },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        { title: 'Accessibility', url: '#' },
        { title: 'Fast Refresh', url: '#' },
        { title: 'Next.js Compiler', url: '#' },
        { title: 'Supported Browsers', url: '#' },
        { title: 'Turbopack', url: '#' },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [{ title: 'Contribution Guide', url: '#' }],
    },
  ],
}

type NavItem = (typeof data.navMain)[number]
type NavChild = NavItem['items'][number] & { isActive?: boolean }

export function Sidebar03() {
  return (
    <Sidebar>
      <SidebarHeader>
        <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]!} />
        <SearchForm />
      </SidebarHeader>
      <SidebarContent className="gap-0">
        {data.navMain.map((item) => (
          <Collapsible key={item.title} title={item.title} defaultOpen className="group/collapsible">
            <SidebarGroup>
              <SidebarGroupLabel
                asChild
                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
              >
                <CollapsibleTrigger>
                  {item.title}
                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
                </CollapsibleTrigger>
              </SidebarGroupLabel>
              <CollapsibleContent>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {(item.items as NavChild[]).map((childItem) => (
                      <SidebarMenuItem key={childItem.title}>
                        <SidebarMenuButton asChild isActive={childItem.isActive}>
                          <a href={item.url}>{childItem.title}</a>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
                  </SidebarMenu>
                </SidebarGroupContent>
              </CollapsibleContent>
            </SidebarGroup>
          </Collapsible>
        ))}
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-03/SearchForm.tsx`

```tsx
'use client'

import { Search } from 'lucide-react'
import { Label } from '@/components/ui/label'
import { SidebarGroup, SidebarGroupContent, SidebarInput } from '@/components/ui/sidebar'

export function SearchForm() {
  return (
    <form>
      <SidebarGroup className="py-0">
        <SidebarGroupContent>
          <Label htmlFor="search" className="sr-only">
            Search
          </Label>
          <SidebarInput
            id="search"
            type="text"
            placeholder="Search the docs..."
            allowClear
            prefix={<Search className="text-muted-foreground size-3.5" />}
          />
        </SidebarGroupContent>
      </SidebarGroup>
    </form>
  )
}

```

### `packages/registry-react/blocks/sidebar-03/VersionSwitcher.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, ChevronsUpDown } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'

export interface VersionSwitcherProps {
  versions: string[]
  defaultVersion: string
}

export function VersionSwitcher({ versions, defaultVersion }: VersionSwitcherProps) {
  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div className="flex flex-col gap-0.5 leading-none">
                <span className="font-medium">uipkge</span>
                <span className="">v{selectedVersion}</span>
              </div>
              <ChevronsUpDown className="ml-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-(--radix-dropdown-menu-trigger-width)" align="start">
            {versions.map((version) => (
              <DropdownMenuItem key={version} onSelect={() => setSelectedVersion(version)}>
                v{version}
                {selectedVersion === version ? <Check className="ml-auto" /> : null}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

```

### `packages/registry-react/blocks/sidebar-03/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-03.json`.
// Visit /sidebar-03-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar03 } from '@/components/blocks/sidebar-03/Sidebar03'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar03 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-03 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-04

- type: `registry:block`
- description: Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
- npm deps: `lucide-react`
- registry deps: `sidebar`

### `packages/registry-react/blocks/sidebar-04/Sidebar04.tsx`

```tsx
'use client'

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from '@/components/ui/sidebar'

type NavChild = { title: string; url: string; isActive?: boolean }
type NavItem = { title: string; url: string; isActive?: boolean; items: NavChild[] }

// This is sample data.
const data: { navMain: NavItem[] } = {
  navMain: [
    {
      title: 'Getting Started',
      url: '#',
      items: [
        { title: 'Installation', url: '#' },
        { title: 'Project Structure', url: '#' },
      ],
    },
    {
      title: 'Building Your Application',
      url: '#',
      items: [
        { title: 'Routing', url: '#' },
        { title: 'Data Fetching', url: '#', isActive: true },
        { title: 'Rendering', url: '#' },
        { title: 'Caching', url: '#' },
        { title: 'Styling', url: '#' },
        { title: 'Optimizing', url: '#' },
        { title: 'Configuring', url: '#' },
        { title: 'Testing', url: '#' },
        { title: 'Authentication', url: '#' },
        { title: 'Deploying', url: '#' },
        { title: 'Upgrading', url: '#' },
        { title: 'Examples', url: '#' },
      ],
    },
    {
      title: 'API Reference',
      url: '#',
      items: [
        { title: 'Components', url: '#' },
        { title: 'File Conventions', url: '#' },
        { title: 'Functions', url: '#' },
        { title: 'next.config.js Options', url: '#' },
        { title: 'CLI', url: '#' },
        { title: 'Edge Runtime', url: '#' },
      ],
    },
    {
      title: 'Architecture',
      url: '#',
      items: [
        { title: 'Accessibility', url: '#' },
        { title: 'Fast Refresh', url: '#' },
        { title: 'Next.js Compiler', url: '#' },
        { title: 'Supported Browsers', url: '#' },
        { title: 'Turbopack', url: '#' },
      ],
    },
    {
      title: 'Community',
      url: '#',
      items: [{ title: 'Contribution Guide', url: '#' }],
    },
  ],
}

export function Sidebar04() {
  return (
    <Sidebar variant="floating">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="#">
                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
                    <rect x="2" y="2" width="9" height="9" rx="1.5" />
                    <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                    <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                    <rect x="13" y="13" width="9" height="9" rx="1.5" />
                  </svg>
                </div>
                <div className="flex flex-col gap-0.5 leading-none">
                  <span className="font-medium">uipkge</span>
                  <span className="">v1.0.0</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarMenu className="gap-2">
            {data.navMain.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild isActive={item.isActive}>
                  <a href={item.url} className="font-medium">
                    {item.title}
                  </a>
                </SidebarMenuButton>
                {item.items.length ? (
                  <SidebarMenuSub className="ml-0 border-l-0 px-1.5">
                    {item.items.map((childItem) => (
                      <SidebarMenuSubItem key={childItem.title}>
                        <SidebarMenuSubButton asChild isActive={childItem.isActive}>
                          <a href={childItem.url}>{childItem.title}</a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    ))}
                  </SidebarMenuSub>
                ) : null}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-04/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-04.json`.
// Visit /sidebar-04-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar04 } from '@/components/blocks/sidebar-04/Sidebar04'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar04 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-04 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-05

- type: `registry:block`
- description: Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible="icon": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style={{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }}. Modeled on the GR8R HRMS admin shell.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-react/blocks/sidebar-05/Sidebar05.tsx`

```tsx
'use client'

// Dual-rail sidebar with master/detail behavior. The thin rail picks the
// section; the main panel renders the rows for the active section. One
// <Sidebar collapsible="icon"> contains rail + panel as inline flex siblings.
//
// Desktop: when collapsed (toggle clicked), the kit shrinks the sidebar to
// --sidebar-width-icon. We set that to 3.5rem so only the rail stays.
// The panel is hidden via group-data-[collapsible=icon] which only fires
// on the desktop branch of <Sidebar> (the mobile <Sheet> has no `group`
// ancestor with that attr, so mobile sheet always shows rail+panel).
//
// IMPORTANT: the parent <SidebarProvider> must set BOTH custom widths,
// e.g. <SidebarProvider style={{ '--sidebar-width': '19.5rem',
//                                '--sidebar-width-icon': '3.5rem' }}>
// The vars set on <Sidebar> itself are too deep -- the layout-allocating
// wrapper sits above it and reads the provider's vars.
//
// To wire to your router, replace the state-based switch with route matches
// (e.g. set active = 'projects' on /projects/*).

import * as React from 'react'
import {
  Bell,
  Briefcase,
  Calendar,
  ChartLine,
  ChevronsUpDown,
  ClipboardList,
  CreditCard,
  FileText,
  Folder,
  Gauge,
  Headphones,
  HelpCircle,
  Home,
  Inbox,
  LayoutDashboard,
  Lock,
  Mail,
  MessageSquare,
  Moon,
  Search,
  Send,
  Settings as SettingsIcon,
  Star,
  Sun,
  Users,
} from 'lucide-react'
import { useTheme } from 'next-themes'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'

type RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'

const rail = [
  { id: 'home' as const, icon: Home, label: 'Home' },
  { id: 'projects' as const, icon: Folder, label: 'Projects' },
  { id: 'inbox' as const, icon: Bell, label: 'Inbox' },
  { id: 'messages' as const, icon: MessageSquare, label: 'Messages' },
]
const railLower = [
  { id: 'support' as const, icon: Headphones, label: 'Support' },
  { id: 'settings' as const, icon: SettingsIcon, label: 'Settings' },
]

const titles: Record<RailId, string> = {
  home: 'Workspace',
  projects: 'Projects',
  inbox: 'Inbox',
  messages: 'Messages',
  support: 'Support',
  settings: 'Settings',
}

export function Sidebar05() {
  const { isMobile, state, setOpen } = useSidebar()
  const { theme, setTheme } = useTheme()

  // `mounted` stays false during SSR + the client's first synchronous
  // render, so isDark is also false on both sides -- no hydration
  // mismatch on the Sun/Moon icon. Once hydration settles the effect
  // flips the flag and the computed re-runs against the real
  // matchMedia/system signal. The transition reads as a fast icon
  // swap instead of a React hydration warning.
  const [mounted, setMounted] = React.useState(false)
  React.useEffect(() => setMounted(true), [])
  const isDark =
    mounted &&
    (theme === 'dark' ||
      (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches))

  const [active, setActive] = React.useState<RailId>('home')

  // Slack-style rail click: expand the panel if collapsed, or collapse if
  // the user clicks the already-active icon while expanded. On mobile the
  // sheet open/close is owned by the inset trigger, so we just swap active.
  function selectRail(id: RailId) {
    if (isMobile) {
      setActive(id)
      return
    }
    if (state === 'expanded' && active === id) {
      setOpen(false)
      return
    }
    setActive(id)
    setOpen(true)
  }

  return (
    // Single Sidebar primitive containing BOTH rails inline. On desktop the
    // rail (56px) stays visible when the sidebar is collapsed thanks to
    // collapsible="icon" + --sidebar-width-icon: 3.5rem; the panel is
    // hidden only when state=collapsed. On mobile the kit's <Sheet>
    // renders the entire dual rail inside a single sheet pane.
    <Sidebar collapsible="icon">
      <div className="flex h-full w-full">
        {/* Thin icon rail -- 56px wide. Clicking an icon updates `active`
            which swaps the main panel content below. */}
        <aside className="border-sidebar-border flex w-14 shrink-0 flex-col items-center gap-0.5 border-r py-2">
          <button
            type="button"
            aria-label="uipkge"
            className="bg-sidebar-primary text-sidebar-primary-foreground mb-1 flex aspect-square size-9 items-center justify-center rounded-lg shadow-sm ring-1 ring-white/10 transition-transform ring-inset hover:scale-105"
          >
            <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
              <rect x="2" y="2" width="9" height="9" rx="1.5" />
              <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
              <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
              <rect x="13" y="13" width="9" height="9" rx="1.5" />
            </svg>
          </button>

          {rail.map((item) => (
            <button
              key={item.id}
              type="button"
              aria-label={item.label}
              aria-current={active === item.id ? 'page' : undefined}
              className={[
                'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',
                active === item.id
                  ? 'bg-sidebar-accent text-foreground'
                  : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',
              ].join(' ')}
              onClick={() => selectRail(item.id)}
            >
              {active === item.id && (
                <span className="bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full" />
              )}
              <item.icon className="size-4" />
            </button>
          ))}

          <div className="bg-sidebar-border/70 my-2 h-px w-7" />

          {railLower.map((item) => (
            <button
              key={item.id}
              type="button"
              aria-label={item.label}
              aria-current={active === item.id ? 'page' : undefined}
              className={[
                'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',
                active === item.id
                  ? 'bg-sidebar-accent text-foreground'
                  : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',
              ].join(' ')}
              onClick={() => selectRail(item.id)}
            >
              {active === item.id && (
                <span className="bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full" />
              )}
              <item.icon className="size-4" />
            </button>
          ))}

          <div className="mt-auto flex flex-col items-center gap-1.5">
            <button
              type="button"
              aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
              className="text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground flex aspect-square size-9 items-center justify-center rounded-lg transition-colors"
              onClick={() => setTheme(isDark ? 'light' : 'dark')}
            >
              {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
            </button>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  type="button"
                  aria-label="James Carter"
                  className="ring-offset-sidebar focus-visible:ring-ring data-[state=open]:ring-ring rounded-full transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-[state=open]:ring-2"
                >
                  <Avatar className="size-8">
                    <AvatarFallback className="bg-sidebar-accent text-sidebar-accent-foreground text-xs">
                      JC
                    </AvatarFallback>
                  </Avatar>
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="min-w-56 rounded-lg"
                side={isMobile ? 'top' : 'right'}
                align="end"
                sideOffset={8}
              >
                <DropdownMenuLabel className="p-0 font-normal">
                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                    <Avatar className="size-8 rounded-lg">
                      <AvatarFallback className="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs">
                        JC
                      </AvatarFallback>
                    </Avatar>
                    <div className="grid flex-1 leading-tight">
                      <span className="truncate font-medium">James Carter</span>
                      <span className="text-muted-foreground truncate text-xs">Admin</span>
                    </div>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Send className="size-4" /> Invite teammates
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <SettingsIcon className="size-4" /> Workspace settings
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </aside>

        {/* Main panel -- header is the same for every section; the content
            area swaps based on `active`. Each section's rows are spelled out
            inline so consumers can edit them in place.
            Hidden on desktop when state=collapsed (rail stays). The mobile
            <Sheet> branch in <Sidebar> has no data-collapsible group, so this
            rule never applies on mobile -- the sheet always shows rail + panel. */}
        <div className="flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden">
          <SidebarHeader>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton size="lg">
                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg">
                    <svg viewBox="0 0 24 24" className="size-4" fill="currentColor" aria-hidden="true">
                      <rect x="2" y="2" width="9" height="9" rx="1.5" />
                      <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                      <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                      <rect x="13" y="13" width="9" height="9" rx="1.5" />
                    </svg>
                  </div>
                  <div className="grid flex-1 text-left text-sm leading-tight">
                    <span className="font-display truncate font-bold">uipkge</span>
                    <span className="text-muted-foreground truncate text-xs">{titles[active]}</span>
                  </div>
                  <ChevronsUpDown className="ml-auto size-4" />
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>

            <div className="px-1 pt-1">
              <SidebarInput
                type="text"
                placeholder="Search..."
                allowClear
                prefix={<Search className="text-muted-foreground size-3.5" />}
                suffix={
                  <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none">
                    <span>&#8984;</span>F
                  </kbd>
                }
              />
            </div>
          </SidebarHeader>

          <SidebarContent>
            {/* HOME: full workspace nav */}
            {active === 'home' && (
              <>
                <SidebarGroup>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton isActive>
                          <LayoutDashboard className="size-4" />
                          <span>Dashboard</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Users className="size-4" />
                          <span>Employees</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Briefcase className="size-4" />
                          <span>Clients</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Folder className="size-4" />
                          <span>Projects</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                  <SidebarGroupLabel>Workforce</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Calendar className="size-4" />
                          <span>Calendar</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <ClipboardList className="size-4" />
                          <span>Attendance</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Mail className="size-4" />
                          <span>Mail</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <ChartLine className="size-4" />
                          <span>Analytics</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </>
            )}

            {/* PROJECTS: pinned and recent projects */}
            {active === 'projects' && (
              <>
                <SidebarGroup>
                  <SidebarGroupLabel>Pinned</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <div className="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                            <Folder className="size-3" />
                          </div>
                          <span>Shift Planner</span>
                          <Star className="text-warning ml-auto size-3.5 fill-current" />
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <div className="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                            <Folder className="size-3" />
                          </div>
                          <span>Training Portal</span>
                          <Star className="text-warning ml-auto size-3.5 fill-current" />
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <div className="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                            <Folder className="size-3" />
                          </div>
                          <span>Performance Hub</span>
                          <Star className="text-warning ml-auto size-3.5 fill-current" />
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <div className="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                            <Folder className="size-3" />
                          </div>
                          <span>Expense Claims</span>
                          <Star className="text-warning ml-auto size-3.5 fill-current" />
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                  <SidebarGroupLabel>Recent</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Folder className="size-4" />
                          <span>Onboarding 2026</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Folder className="size-4" />
                          <span>Q1 hiring plan</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Folder className="size-4" />
                          <span>Compliance refresh</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </>
            )}

            {/* INBOX: notifications list */}
            {active === 'inbox' && (
              <>
                <SidebarGroup>
                  <SidebarGroupLabel>Today</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Inbox className="size-4" />
                          <span>3 PTO requests pending</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Bell className="size-4" />
                          <span>Payroll cycle closes today</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                  <SidebarGroupLabel>This week</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <FileText className="size-4" />
                          <span>5 contracts awaiting sign-off</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Users className="size-4" />
                          <span>2 new hires start Monday</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </>
            )}

            {/* MESSAGES: conversations */}
            {active === 'messages' && (
              <>
                <SidebarGroup>
                  <SidebarGroupLabel>Direct messages</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Avatar className="size-5">
                            <AvatarFallback className="bg-chart-1/15 text-foreground text-[10px]">OB</AvatarFallback>
                          </Avatar>
                          <span>Olivia Bennett</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Avatar className="size-5">
                            <AvatarFallback className="bg-chart-2/15 text-foreground text-[10px]">DM</AvatarFallback>
                          </Avatar>
                          <span>Daniel Morgan</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Avatar className="size-5">
                            <AvatarFallback className="bg-chart-3/15 text-foreground text-[10px]">ER</AvatarFallback>
                          </Avatar>
                          <span>Ethan Reynolds</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                  <SidebarGroupLabel>Channels</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <MessageSquare className="size-4" />
                          <span># announcements</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <MessageSquare className="size-4" />
                          <span># hiring</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </>
            )}

            {/* SUPPORT: help links */}
            {active === 'support' && (
              <SidebarGroup>
                <SidebarGroupLabel>Help center</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    <SidebarMenuItem>
                      <SidebarMenuButton>
                        <HelpCircle className="size-4" />
                        <span>Getting started</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                    <SidebarMenuItem>
                      <SidebarMenuButton>
                        <FileText className="size-4" />
                        <span>Onboarding guide</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                    <SidebarMenuItem>
                      <SidebarMenuButton>
                        <Send className="size-4" />
                        <span>Contact support</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            )}

            {/* SETTINGS: workspace settings */}
            {active === 'settings' && (
              <>
                <SidebarGroup>
                  <SidebarGroupLabel>Workspace</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <SettingsIcon className="size-4" />
                          <span>General</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Users className="size-4" />
                          <span>Members</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <CreditCard className="size-4" />
                          <span>Billing</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Gauge className="size-4" />
                          <span>Limits</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                <SidebarGroup>
                  <SidebarGroupLabel>Account</SidebarGroupLabel>
                  <SidebarGroupContent>
                    <SidebarMenu>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Lock className="size-4" />
                          <span>Security</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                      <SidebarMenuItem>
                        <SidebarMenuButton>
                          <Bell className="size-4" />
                          <span>Notifications</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>
              </>
            )}
          </SidebarContent>
        </div>
      </div>
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-05/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-05.json`.
// The dual-rail layout needs both width vars on SidebarProvider (see
// Sidebar05.tsx for the why) -- they're inlined here so the route just
// works after install.
import type { CSSProperties } from 'react'
import { Sidebar05 } from '@/components/blocks/Sidebar05'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

const sidebarWidths = {
  '--sidebar-width': '19.5rem',
  '--sidebar-width-icon': '3.5rem',
} as CSSProperties

export default function Page() {
  return (
    <SidebarProvider style={sidebarWidths}>
      <Sidebar05 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-05 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-06

- type: `registry:block`
- description: Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `avatar`, `dropdown-menu`, `use-theme`

### `packages/registry-react/blocks/sidebar-06/Sidebar06.tsx`

```tsx
'use client'

// Colorful, customised HRMS-style sidebar -- branded project tiles, badges,
// status dots, and a user pill footer. Every row is spelled out inline so
// you can swap colors and labels in place.

import {
  Briefcase,
  Calendar,
  ChartLine,
  ChevronsUpDown,
  ClipboardList,
  Folder,
  GraduationCap,
  HeartPulse,
  HelpCircle,
  Inbox,
  LayoutDashboard,
  Monitor,
  Moon,
  Palette,
  Search,
  Send,
  Settings as SettingsIcon,
  Star,
  Sun,
  Users,
} from 'lucide-react'
import { useTheme } from 'next-themes'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
  useSidebar,
} from '@/components/ui/sidebar'

export function Sidebar06() {
  const { isMobile } = useSidebar()
  const { theme, setTheme } = useTheme()

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="uipkge" className="group-data-[collapsible=icon]:!justify-center">
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg shadow-sm group-data-[collapsible=icon]:size-6">
                <svg
                  viewBox="0 0 24 24"
                  className="size-4 group-data-[collapsible=icon]:size-3.5"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="font-display truncate font-bold">uipkge</span>
                <span className="text-muted-foreground truncate text-xs">uipkge.dev</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>

        <div className="px-1 pt-1 group-data-[collapsible=icon]:hidden">
          <SidebarInput
            type="text"
            placeholder="Search..."
            allowClear
            prefix={<Search className="text-muted-foreground size-3.5" />}
            suffix={
              <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none">
                <span>&#8984;</span>F
              </kbd>
            }
          />
        </div>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton isActive tooltip="Dashboard">
                  <LayoutDashboard className="size-4" />
                  <span>Dashboard</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Employees">
                  <Users className="size-4" />
                  <span>Employees</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Clients">
                  <Briefcase className="size-4" />
                  <span>Clients</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Projects">
                  <Folder className="size-4" />
                  <span>Projects</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupLabel>Workforce</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Calendar">
                  <Calendar className="size-4" />
                  <span>Calendar</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Attendance">
                  <ClipboardList className="size-4" />
                  <span>Attendance</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Inbox">
                  <Inbox className="size-4" />
                  <span>Inbox</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="bg-destructive text-white">6</SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Analytics">
                  <ChartLine className="size-4" />
                  <span>Analytics</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Shift Planner">
                  <div className="bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                    <Folder className="size-3" />
                  </div>
                  <span>Shift Planner</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="text-warning">
                  <Star className="size-3.5 fill-current" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Training Portal">
                  <div className="bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                    <GraduationCap className="size-3" />
                  </div>
                  <span>Training Portal</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="text-warning">
                  <Star className="size-3.5 fill-current" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Performance Hub">
                  <div className="bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                    <HeartPulse className="size-3" />
                  </div>
                  <span>Performance Hub</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="text-warning">
                  <Star className="size-3.5 fill-current" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Expense Claims">
                  <div className="bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white">
                    <ChartLine className="size-3" />
                  </div>
                  <span>Expense Claims</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="text-warning">
                  <Star className="size-3.5 fill-current" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupLabel>My team</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Olivia Bennett">
                  <Avatar className="size-5">
                    <AvatarFallback className="bg-chart-1/15 text-foreground text-[10px]">OB</AvatarFallback>
                  </Avatar>
                  <span>Olivia Bennett</span>
                </SidebarMenuButton>
                <SidebarMenuBadge>
                  <span className="bg-destructive size-1.5 rounded-full" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Daniel Morgan">
                  <Avatar className="size-5">
                    <AvatarFallback className="bg-chart-2/15 text-foreground text-[10px]">DM</AvatarFallback>
                  </Avatar>
                  <span>Daniel Morgan</span>
                </SidebarMenuButton>
                <SidebarMenuBadge>
                  <span className="bg-warning size-1.5 rounded-full" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Ethan Reynolds">
                  <Avatar className="size-5">
                    <AvatarFallback className="bg-chart-3/15 text-foreground text-[10px]">ER</AvatarFallback>
                  </Avatar>
                  <span>Ethan Reynolds</span>
                </SidebarMenuButton>
                <SidebarMenuBadge>
                  <span className="bg-success size-1.5 rounded-full" />
                </SidebarMenuBadge>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarSeparator />

        <SidebarGroup>
          <SidebarGroupLabel>Administration</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Settings">
                  <SettingsIcon className="size-4" />
                  <span>Settings</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Help center">
                  <HelpCircle className="size-4" />
                  <span>Help center</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuButton
                  size="lg"
                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center"
                >
                  <div className="relative shrink-0">
                    <Avatar className="h-8 w-8 rounded-lg group-data-[collapsible=icon]:size-6">
                      <AvatarFallback className="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">
                        JC
                      </AvatarFallback>
                    </Avatar>
                    <span className="bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
                  </div>
                  <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                    <span className="truncate font-medium">James Carter</span>
                    <span className="text-muted-foreground truncate text-xs">Admin</span>
                  </div>
                  <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
                </SidebarMenuButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                side={isMobile ? 'bottom' : 'right'}
                align="end"
                sideOffset={4}
              >
                <DropdownMenuLabel>James Carter</DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Send className="size-4" /> Invite teammates
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <SettingsIcon className="size-4" /> Workspace settings
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <Palette className="size-4" />
                    Theme
                    <span className="text-muted-foreground ml-auto text-xs capitalize">{theme}</span>
                  </DropdownMenuSubTrigger>
                  <DropdownMenuSubContent className="min-w-36">
                    <DropdownMenuRadioGroup
                      value={theme}
                      onValueChange={(v) => setTheme(v)}
                    >
                      <DropdownMenuRadioItem value="light">
                        <Sun className="size-4" /> Light
                      </DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="dark">
                        <Moon className="size-4" /> Dark
                      </DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="system">
                        <Monitor className="size-4" /> System
                      </DropdownMenuRadioItem>
                    </DropdownMenuRadioGroup>
                  </DropdownMenuSubContent>
                </DropdownMenuSub>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-06/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-06.json`.
// Visit /sidebar-06-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar06 } from '@/components/blocks/Sidebar06'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar06 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-06 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## sidebar-07

- type: `registry:block`
- description: App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.
- npm deps: `lucide-react`
- registry deps: `sidebar`, `avatar`, `use-theme`

### `packages/registry-react/blocks/sidebar-07/Sidebar07.tsx`

```tsx
'use client'

// App sidebar with a bottom action bar. Workspace pill + search at the top,
// three grouped nav sections, user pill above an icon toolbar (Settings,
// Help, Notifications, Command palette, Log out) anchored at the very
// bottom. Every row is spelled out inline so you can edit in place.

import * as React from 'react'
import {
  Bell,
  ChartBar,
  ChevronsUpDown,
  Command,
  CreditCard,
  FileText,
  HelpCircle,
  LineChart,
  Mail,
  Moon,
  Package,
  Plus,
  Search,
  Settings as SettingsIcon,
  ShoppingCart,
  Sun,
  Users,
} from 'lucide-react'
import { useTheme } from 'next-themes'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
} from '@/components/ui/sidebar'

export function Sidebar07() {
  const { state } = useSidebar()
  const { theme, setTheme } = useTheme()

  // `mounted` stays false during SSR + the client's first synchronous
  // render, so isDark is also false on both sides -- no hydration
  // mismatch on the Sun/Moon icon. Once hydration settles the effect
  // flips the flag and the computed re-runs against the real
  // matchMedia/system signal. Mirrors the sidebar-05 pattern.
  const [mounted, setMounted] = React.useState(false)
  React.useEffect(() => setMounted(true), [])
  const isDark =
    mounted &&
    (theme === 'dark' ||
      (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches))

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" tooltip="uipkge" className="group-data-[collapsible=icon]:!justify-center">
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6">
                <svg
                  viewBox="0 0 24 24"
                  className="size-4 group-data-[collapsible=icon]:size-3.5"
                  fill="currentColor"
                  aria-hidden="true"
                >
                  <rect x="2" y="2" width="9" height="9" rx="1.5" />
                  <rect x="13" y="2" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="2" y="13" width="9" height="9" rx="1.5" opacity="0.55" />
                  <rect x="13" y="13" width="9" height="9" rx="1.5" />
                </svg>
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="font-display truncate font-semibold">uipkge</span>
                <span className="text-muted-foreground truncate text-xs">uipkge.dev</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>

        <div className="px-1 pt-1 group-data-[collapsible=icon]:hidden">
          <SidebarInput
            type="text"
            placeholder="Search..."
            allowClear
            prefix={<Search className="text-muted-foreground size-3.5" />}
            suffix={
              <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none">
                <span>&#8984;</span>K
              </kbd>
            }
          />
        </div>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                {/* Active row gets a subtle success-tinted gradient to mark it
                    without competing with the rest of the nav. */}
                <SidebarMenuButton
                  isActive
                  tooltip="Analytics"
                  className="data-[active=true]:!bg-success/20 data-[active=true]:!text-foreground"
                >
                  <ChartBar className="size-4" />
                  <span>Analytics</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Performance">
                  <LineChart className="size-4" />
                  <span>Performance</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Management</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Products">
                  <Package className="size-4" />
                  <span>Products</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Orders">
                  <ShoppingCart className="size-4" />
                  <span>Orders</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Subscribers">
                  <Users className="size-4" />
                  <span>Subscribers</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Transactions">
                  <CreditCard className="size-4" />
                  <span>Transactions</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel>Content</SidebarGroupLabel>
          <SidebarGroupAction aria-label="Add content">
            <Plus className="size-4" />
          </SidebarGroupAction>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Posts">
                  <FileText className="size-4" />
                  <span>Posts</span>
                </SidebarMenuButton>
                <SidebarMenuBadge className="bg-destructive text-white">10</SidebarMenuBadge>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Pages">
                  <Mail className="size-4" />
                  <span>Pages</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" className="group-data-[collapsible=icon]:!justify-center">
              <Avatar className="size-8 rounded-lg group-data-[collapsible=icon]:size-6">
                <AvatarFallback className="bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]">
                  SW
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
                <span className="truncate font-medium">Sarah Wilson</span>
                <span className="text-muted-foreground truncate text-xs">Admin Account</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4 group-data-[collapsible=icon]:hidden" />
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>

        {state === 'expanded' ? (
          <>
            <SidebarSeparator className="my-1" />

            {/* Action toolbar -- evenly spaced quick icons. Last button is the
                SidebarTrigger collapse toggle. Replace others with
                <Link> / <button onClick={...}> as needed. */}
            <div className="flex items-center justify-between px-1 pb-1">
              <button
                type="button"
                aria-label="Settings"
                className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
              >
                <SettingsIcon className="size-4" />
              </button>
              <button
                type="button"
                aria-label="Help"
                className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
              >
                <HelpCircle className="size-4" />
              </button>
              <button
                type="button"
                aria-label="Notifications"
                className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
              >
                <Bell className="size-4" />
              </button>
              <button
                type="button"
                aria-label="Command palette"
                className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
              >
                <Command className="size-4" />
              </button>
              <button
                type="button"
                aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
                className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors"
                onClick={() => setTheme(isDark ? 'light' : 'dark')}
              >
                {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
              </button>
              <SidebarTrigger className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md" />
            </div>
          </>
        ) : (
          /* Collapsed-state: surface the trigger on its own so the rail always
             has an expand affordance. */
          <div className="flex items-center justify-center pb-1">
            <SidebarTrigger className="text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md" />
          </div>
        )}
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}

```

### `packages/registry-react/blocks/sidebar-07/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-07.json`.
// Visit /sidebar-07-demo after install to see the block without
// editing your own pages. Free to edit or delete me.
import { Sidebar07 } from '@/components/blocks/Sidebar07'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

export default function Page() {
  return (
    <SidebarProvider>
      <Sidebar07 />
      <SidebarInset>
        <header className="border-border flex h-14 shrink-0 items-center gap-3 border-b px-4">
          <SidebarTrigger className="size-7" />
          <h1 className="text-sm font-semibold">sidebar-07 demo</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="grid auto-rows-min gap-4 md:grid-cols-3">
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
            <div className="bg-muted/50 aspect-video rounded-xl" />
          </div>
          <div className="bg-muted/50 mt-4 min-h-[60vh] rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## signature-pad

- type: `registry:ui`
- description: Canvas-based digital signature capture with pointer events (mouse + touch). The value is a PNG data URL, with pen color/thickness, background, clear method, disabled/readonly states, and a live point count.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/signature-pad/SignaturePad.tsx`

```tsx
import * as React from 'react'
import { Eraser } from 'lucide-react'
import { cn } from '@/lib/utils'
import { signaturePadVariants } from './signature-pad.variants'

export interface SignaturePadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  /** PNG data URL of the current canvas contents, or null when empty. The
   *  React equivalent of the Vue `v-model` binding — pair with `onModelChange`. */
  modelValue?: string | null
  width?: number
  height?: number
  penColor?: string
  penThickness?: number
  backgroundColor?: string
  exportFormat?: string
  disabled?: boolean
  readonly?: boolean
  showClearButton?: boolean
  clearLabel?: string
  /** Fired with the new data URL (or null) whenever the signature changes. */
  onModelChange?: (value: string | null) => void
  /** Fired when a stroke begins. */
  onBegin?: () => void
  /** Fired when a stroke ends. */
  onEnd?: () => void
  /** Fired with the new data URL (or null) on every change (same payload as onModelChange). */
  onChange?: (value: string | null) => void
  /** Render-prop for custom action controls. Mirrors the Vue `actions` slot. */
  actions?: (state: { clear: () => void; exportSignature: () => void; empty: boolean }) => React.ReactNode
}

export interface SignaturePadRef {
  clear: () => void
  exportSignature: () => void
  toDataURL: () => void
  pointCount: number
  isEmpty: boolean
}

const SignaturePad = React.forwardRef<SignaturePadRef, SignaturePadProps>(
  (
    {
      modelValue,
      width = 400,
      height = 200,
      penColor = '#0a0a0a',
      penThickness = 2,
      backgroundColor = '#ffffff',
      exportFormat = 'image/png',
      disabled = false,
      readonly = false,
      showClearButton = true,
      clearLabel = 'Clear',
      className,
      onModelChange,
      onBegin,
      onEnd,
      onChange,
      actions,
      ...props
    },
    ref,
  ) => {
    const canvasRef = React.useRef<HTMLCanvasElement | null>(null)
    const ctxRef = React.useRef<CanvasRenderingContext2D | null>(null)
    const isDrawingRef = React.useRef(false)
    const lastPosRef = React.useRef({ x: 0, y: 0 })

    const [pointCount, setPointCount] = React.useState(0)
    const [hasInk, setHasInk] = React.useState(false)

    // Keep the latest callbacks without re-running the canvas setup effect.
    const callbacksRef = React.useRef({ onModelChange, onBegin, onEnd, onChange })
    callbacksRef.current = { onModelChange, onBegin, onEnd, onChange }

    const isInteractive = !disabled && !readonly

    const setupCanvas = React.useCallback(() => {
      const canvas = canvasRef.current
      if (!canvas) return
      const dpr = window.devicePixelRatio || 1
      canvas.width = width * dpr
      canvas.height = height * dpr
      canvas.style.width = `${width}px`
      canvas.style.height = `${height}px`
      const context = canvas.getContext('2d')
      if (!context) return
      context.scale(dpr, dpr)
      context.lineCap = 'round'
      context.lineJoin = 'round'
      context.strokeStyle = penColor
      context.lineWidth = penThickness
      context.fillStyle = backgroundColor
      context.fillRect(0, 0, width, height)
      ctxRef.current = context
      setPointCount(0)
      setHasInk(false)
    }, [width, height, penColor, penThickness, backgroundColor])

    const getPointerPos = React.useCallback((e: React.PointerEvent<HTMLCanvasElement>) => {
      const canvas = canvasRef.current
      if (!canvas) return { x: 0, y: 0 }
      const rect = canvas.getBoundingClientRect()
      return { x: e.clientX - rect.left, y: e.clientY - rect.top }
    }, [])

    const exportSignature = React.useCallback(() => {
      const canvas = canvasRef.current
      if (!canvas) return
      const { onModelChange, onChange } = callbacksRef.current
      if (!hasInk) {
        onModelChange?.(null)
        onChange?.(null)
        return
      }
      const dataUrl = canvas.toDataURL(exportFormat)
      onModelChange?.(dataUrl)
      onChange?.(dataUrl)
    }, [exportFormat, hasInk])

    const clear = React.useCallback(() => {
      const canvas = canvasRef.current
      const context = ctxRef.current
      if (!canvas || !context) return
      context.fillStyle = backgroundColor
      context.fillRect(0, 0, width, height)
      setPointCount(0)
      setHasInk(false)
      callbacksRef.current.onModelChange?.(null)
      callbacksRef.current.onChange?.(null)
    }, [backgroundColor, width, height])

    React.useImperativeHandle(
      ref,
      (): SignaturePadRef => ({
        clear,
        exportSignature,
        toDataURL: exportSignature,
        pointCount,
        isEmpty: !hasInk,
      }),
      [clear, exportSignature, pointCount, hasInk],
    )

    React.useEffect(() => {
      setupCanvas()
      return () => {
        ctxRef.current = null
      }
    }, [setupCanvas])

    // modelValue is read-only from the outside; we do not paint it back onto
    // the canvas (mirrors the Vue component, which also never restores ink).

    const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
      if (!isInteractive || !ctxRef.current) return
      e.preventDefault()
      isDrawingRef.current = true
      const { x, y } = getPointerPos(e)
      lastPosRef.current = { x, y }
      ctxRef.current.beginPath()
      ctxRef.current.moveTo(x, y)
      setPointCount((c) => c + 1)
      setHasInk(true)
      callbacksRef.current.onBegin?.()
      canvasRef.current?.setPointerCapture(e.pointerId)
    }

    const handlePointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
      if (!isDrawingRef.current || !ctxRef.current) return
      e.preventDefault()
      const { x, y } = getPointerPos(e)
      const { x: lastX, y: lastY } = lastPosRef.current
      ctxRef.current.beginPath()
      ctxRef.current.moveTo(lastX, lastY)
      ctxRef.current.lineTo(x, y)
      ctxRef.current.stroke()
      lastPosRef.current = { x, y }
      setPointCount((c) => c + 1)
    }

    const handlePointerUp = (e: React.PointerEvent<HTMLCanvasElement>) => {
      if (!isDrawingRef.current) return
      isDrawingRef.current = false
      ctxRef.current?.closePath()
      canvasRef.current?.releasePointerCapture(e.pointerId)
      exportSignature()
      callbacksRef.current.onEnd?.()
    }

    return (
      <div
        data-uipkge=""
        data-slot="signature-pad"
        data-disabled={disabled ? '' : undefined}
        data-readonly={readonly ? '' : undefined}
        className={cn(signaturePadVariants(), className)}
        {...props}
      >
        <canvas
          ref={canvasRef}
          className={cn('block touch-none rounded-md', !isInteractive && 'pointer-events-none')}
          style={{ touchAction: 'none' }}
          aria-label={`Signature pad${disabled ? ' (disabled)' : ''}`}
          role="img"
          onPointerDown={handlePointerDown}
          onPointerMove={handlePointerMove}
          onPointerUp={handlePointerUp}
          onPointerCancel={handlePointerUp}
          onPointerLeave={handlePointerUp}
        />
        {showClearButton && isInteractive ? (
          <div className="flex items-center justify-between gap-2 pt-2">
            <span className="text-muted-foreground text-xs tabular-nums">{pointCount} points</span>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex items-center gap-1 rounded-md text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
              disabled={!hasInk}
              onClick={clear}
            >
              <Eraser className="size-3.5" />
              {clearLabel}
            </button>
          </div>
        ) : null}
        {actions ? actions({ clear, exportSignature, empty: !hasInk }) : null}
      </div>
    )
  },
)
SignaturePad.displayName = 'SignaturePad'

export { SignaturePad }

```

### `packages/registry-react/components/signature-pad/signature-pad.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

export const signaturePadVariants = cva(
  'border-input bg-background inline-flex flex-col gap-1 rounded-lg border p-2 shadow-xs',
)

export type SignaturePadVariants = VariantProps<typeof signaturePadVariants>

```

### `packages/registry-react/components/signature-pad/index.ts`

```ts
export { SignaturePad, type SignaturePadProps, type SignaturePadRef } from './SignaturePad'
export { signaturePadVariants, type SignaturePadVariants } from './signature-pad.variants'

```

## skeleton

- type: `registry:ui`
- description: Animated placeholder rectangles for loading states — drop one in shape of the content that’s about to render. Variants for text lines, avatars, rounded rectangles, and circles.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/skeleton/skeleton.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import { skeletonLoaderVariants } from './skeleton.variants'

/* ------------------------------------------------------------------ */
/* Shimmer keyframes                                                   */
/* Ported from Skeleton.vue's <style scoped> block. Injected once so    */
/* the component ships self-contained (Tailwind has no equivalent      */
/* color-mix gradient sweep utility). Slow 1.8s sweep per NN/g.        */
/* ------------------------------------------------------------------ */
const shimmerCss = `
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 100%, transparent) 0%,
    color-mix(in srgb, var(--muted) 60%, var(--foreground) 8%) 50%,
    color-mix(in srgb, var(--muted) 100%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s linear infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer {
    animation: none;
    background: var(--muted);
  }
}
`

function ShimmerStyle() {
  return <style dangerouslySetInnerHTML={{ __html: shimmerCss }} />
}

/* ------------------------------------------------------------------ */
/* Skeleton                                                            */
/* ------------------------------------------------------------------ */

const skeletonVariantClasses: Record<NonNullable<SkeletonProps['variant']>, string> = {
  rectangular: '',
  rounded: 'rounded-md',
  circular: 'rounded-full',
  text: 'rounded h-4 w-full',
  avatar: 'rounded-full size-10',
  image: 'rounded-lg size-24',
  card: 'rounded-xl size-full min-h-[120px]',
  'table-row': 'rounded h-10 w-full',
}

export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'rectangular' | 'rounded' | 'circular' | 'text' | 'avatar' | 'image' | 'card' | 'table-row'
  width?: string
  height?: string
  loading?: boolean
}

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ className, variant = 'rectangular', width, height, loading = true, style, children, ...props }, ref) => {
    if (!loading) return <>{children}</>

    const variantStyle: React.CSSProperties = { ...style }
    if (width) variantStyle.width = width
    if (height) variantStyle.height = height

    return (
      <>
        <ShimmerStyle />
        <div
          ref={ref}
          data-uipkge=""
          data-slot="skeleton"
          className={cn('skeleton-shimmer', skeletonVariantClasses[variant ?? 'rectangular'], className)}
          style={variantStyle}
          {...props}
        />
      </>
    )
  },
)
Skeleton.displayName = 'Skeleton'

/* ------------------------------------------------------------------ */
/* SkeletonGroup                                                       */
/* ------------------------------------------------------------------ */

export interface SkeletonGroupProps extends React.HTMLAttributes<HTMLElement> {
  tag?: keyof React.JSX.IntrinsicElements
}

const SkeletonGroup = React.forwardRef<HTMLElement, SkeletonGroupProps>(
  ({ className, tag = 'div', children, ...props }, ref) => {
    const Tag = tag as React.ElementType
    return (
      <Tag
        ref={ref}
        data-uipkge=""
        data-slot="skeleton-group"
        className={cn('space-y-2', className)}
        {...props}
      >
        {children}
      </Tag>
    )
  },
)
SkeletonGroup.displayName = 'SkeletonGroup'

/* ------------------------------------------------------------------ */
/* SkeletonText                                                        */
/* ------------------------------------------------------------------ */

export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {
  lines?: number
  lastLineWidth?: string
  firstLineWidth?: string
}

const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
  ({ className, lines = 3, lastLineWidth = '80%', firstLineWidth = '100%', ...props }, ref) => {
    const lineWidths = Array.from({ length: lines }, (_, i) => {
      if (i === 0) return firstLineWidth
      if (i === lines - 1) return lastLineWidth
      return '100%'
    })

    return (
      <div ref={ref} data-uipkge="" data-slot="skeleton-text" className={cn('space-y-2', className)} {...props}>
        {lineWidths.map((width, i) => (
          <div key={i} className="bg-primary/10 h-4 animate-pulse rounded" style={{ width }} />
        ))}
      </div>
    )
  },
)
SkeletonText.displayName = 'SkeletonText'

/* ------------------------------------------------------------------ */
/* SkeletonLoader                                                      */
/* ------------------------------------------------------------------ */

export interface SkeletonLoaderProps {
  className?: string
  variant?:
    | 'text'
    | 'chip'
    | 'chip-icon'
    | 'article'
    | 'avatar'
    | 'avatar-small'
    | 'avatar-large'
    | 'heading'
    | 'heading-medium'
    | 'heading-small'
    | 'image'
    | 'image-small'
    | 'image-large'
    | 'card'
    | 'card-avatar'
    | 'actions'
    | 'table'
    | 'table-row'
    | 'button'
    | 'button-icon'
    | 'badge'
    | 'tab'
    | 'date-picker'
    | 'list-item'
    | 'list-item-two-line'
    | 'list-item-three-line'
  loading?: boolean
  rows?: number
  boilerplate?: boolean
  children?: React.ReactNode
}

function SkeletonLoader({
  className,
  variant = 'text',
  loading = true,
  rows = 1,
  boilerplate = false,
  children,
}: SkeletonLoaderProps) {
  let body: React.ReactNode

  if (rows === 1) {
    body = loading ? <div className={cn(skeletonLoaderVariants({ variant }), className)} /> : children
  } else if (!loading) {
    body = children
  } else if (variant === 'article') {
    body = (
      <>
        <div className={cn(skeletonLoaderVariants({ variant: 'heading' }), 'mb-4')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'w-3/4')} />
      </>
    )
  } else if (variant === 'card') {
    body = (
      <>
        <div className={cn(skeletonLoaderVariants({ variant: 'image-large' }), 'mb-4')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'heading-small' }), 'mb-2')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'mb-2')} />
        <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'w-1/2')} />
      </>
    )
  } else if (variant === 'card-avatar') {
    body = (
      <div className="mb-4 flex items-center gap-4">
        <div className={cn(skeletonLoaderVariants({ variant: 'avatar-large' }))} />
        <div className="flex-1 space-y-2">
          <div className={cn(skeletonLoaderVariants({ variant: 'heading-small' }))} />
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'w-1/2')} />
        </div>
      </div>
    )
  } else if (variant === 'actions') {
    body = (
      <div className="flex gap-2">
        <div className={cn(skeletonLoaderVariants({ variant: 'button' }))} />
        <div className={cn(skeletonLoaderVariants({ variant: 'button' }))} />
      </div>
    )
  } else if (variant === 'table') {
    body = Array.from({ length: rows }, (_, i) => (
      <div key={i} className={cn(skeletonLoaderVariants({ variant: 'table-row' }), 'mb-2')} />
    ))
  } else if (variant === 'list-item') {
    body = Array.from({ length: rows }, (_, i) => (
      <div key={i} className="mb-2 flex items-center gap-3">
        <div className={cn(skeletonLoaderVariants({ variant: 'avatar-small' }))} />
        <div className="flex-1">
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }))} />
        </div>
      </div>
    ))
  } else if (variant === 'list-item-two-line') {
    body = Array.from({ length: rows }, (_, i) => (
      <div key={i} className="mb-2 flex items-center gap-3">
        <div className={cn(skeletonLoaderVariants({ variant: 'avatar' }))} />
        <div className="flex-1 space-y-2">
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }))} />
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'w-3/4')} />
        </div>
      </div>
    ))
  } else if (variant === 'list-item-three-line') {
    body = Array.from({ length: rows }, (_, i) => (
      <div key={i} className="mb-2 flex items-start gap-3">
        <div className={cn(skeletonLoaderVariants({ variant: 'avatar' }))} />
        <div className="flex-1 space-y-2">
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }))} />
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }))} />
          <div className={cn(skeletonLoaderVariants({ variant: 'text' }), 'w-2/3')} />
        </div>
      </div>
    ))
  } else {
    body = Array.from({ length: rows }, (_, i) => (
      <div key={i} className={cn(skeletonLoaderVariants({ variant }), 'mb-2')} />
    ))
  }

  return (
    <div data-uipkge="" data-slot="skeleton-loader" className="space-y-2">
      {body}
      {boilerplate && !loading ? <div className="bg-muted/50 absolute inset-0" /> : null}
    </div>
  )
}
SkeletonLoader.displayName = 'SkeletonLoader'

export { Skeleton, SkeletonGroup, SkeletonText, SkeletonLoader }

```

### `packages/registry-react/components/skeleton/skeleton.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than inline in the
 * SFC) so `SkeletonLoader.vue` can import them without the cva runtime
 * coupling that breaks SSR when several `<SkeletonLoader>` instances
 * render before the module graph fully resolves. Sibling pattern to
 * `card/card.variants.ts`.
 */
export const skeletonLoaderVariants = cva('bg-muted animate-pulse rounded', {
  variants: {
    variant: {
      text: 'h-4 w-full',
      chip: 'h-8 w-24 rounded-full',
      'chip-icon': 'h-8 w-8 rounded-full',
      article: '',
      avatar: 'size-12 rounded-full',
      'avatar-small': 'size-8 rounded-full',
      'avatar-large': 'size-16 rounded-full',
      heading: 'h-6 w-3/4',
      'heading-medium': 'h-5 w-1/2',
      'heading-small': 'h-4 w-1/3',
      image: 'aspect-video w-full rounded-lg',
      'image-small': 'h-32 w-32 rounded-lg',
      'image-large': 'h-64 w-full rounded-lg',
      card: '',
      'card-avatar': '',
      actions: '',
      table: 'h-4 w-full',
      'table-row': 'h-12 w-full',
      button: 'h-10 w-24 rounded-md',
      'button-icon': 'h-10 w-10 rounded-md',
      badge: 'h-6 w-16 rounded-full',
      tab: 'h-8 w-24 rounded-md',
      'date-picker': 'h-10 w-full',
      'list-item': 'h-16 w-full',
      'list-item-two-line': 'h-20 w-full',
      'list-item-three-line': 'h-24 w-full',
    },
  },
  defaultVariants: {
    variant: 'text',
  },
})

export type SkeletonLoaderVariants = VariantProps<typeof skeletonLoaderVariants>

```

### `packages/registry-react/components/skeleton/index.ts`

```ts
export {
  Skeleton,
  SkeletonGroup,
  SkeletonText,
  SkeletonLoader,
  type SkeletonProps,
  type SkeletonGroupProps,
  type SkeletonTextProps,
  type SkeletonLoaderProps,
} from './skeleton'

// Re-export variant API from the sibling file (kept separate to mirror the
// Vue registry convention and avoid a component <-> index circular import).
export { skeletonLoaderVariants, type SkeletonLoaderVariants } from './skeleton.variants'

```

## slider

- type: `registry:ui`
- description: Single-thumb slider — pick a value within a range. Optional tick marks, step size, and inline value display.
- npm deps: `@radix-ui/react-slider`, `@radix-ui/react-tooltip`

### `packages/registry-react/components/slider/Slider.tsx`

```tsx
'use client'

import * as React from 'react'
import * as SliderPrimitive from '@radix-ui/react-slider'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
import { cn } from '@/lib/utils'

export interface SliderMark {
  label: string
  style?: React.CSSProperties
}

export interface SliderProps
  extends Omit<
    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
    'value' | 'defaultValue' | 'inverted' | 'orientation' | 'onValueChange' | 'onValueCommit'
  > {
  className?: string
  /** Controlled value (Radix uses number[]). */
  value?: number[]
  /** Uncontrolled initial value. */
  defaultValue?: number[]
  onValueChange?: (value: number[]) => void
  onValueCommit?: (value: number[]) => void
  /** Enable dual-thumb range selection (affects default value when uncontrolled). */
  range?: boolean
  /** Vertical orientation */
  vertical?: boolean
  /** Height when vertical (px or css value) */
  height?: string | number
  /** Tick marks with labels */
  marks?: Record<number, string | SliderMark>
  /** Show tooltip on drag/focus. Boolean or formatter function */
  tooltip?: boolean | ((value: number) => string)
  /** Show dots at each step */
  dots?: boolean
  /** Reverse direction (right-to-left or bottom-to-top) */
  reverse?: boolean
  /** Highlight the track between thumbs/min (default true) */
  included?: boolean
  /** Size variant */
  size?: 'small' | 'default'
}

const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
  (
    {
      className,
      value,
      defaultValue,
      onValueChange,
      onValueCommit,
      min = 0,
      max = 100,
      step = 1,
      range = false,
      vertical = false,
      height,
      marks,
      tooltip = true,
      dots = false,
      reverse = false,
      included = true,
      size = 'default',
      ...props
    },
    ref,
  ) => {
    /* ── normalize value to number[] ── */
    const resolvedDefault = React.useMemo<number[]>(() => {
      if (defaultValue != null) return defaultValue
      return range ? [min, max] : [min]
    }, [defaultValue, range, min, max])

    // Track current values so tooltips/marks can read them in both controlled
    // and uncontrolled usage (Radix doesn't surface the value to children).
    const [internalValue, setInternalValue] = React.useState<number[]>(resolvedDefault)
    const isControlled = value !== undefined
    const currentValue = isControlled ? value! : internalValue

    const handleChange = React.useCallback(
      (next: number[]) => {
        if (!isControlled) setInternalValue(next)
        onValueChange?.(next)
      },
      [isControlled, onValueChange],
    )

    /* ── layout helpers ── */
    const orientation = vertical ? 'vertical' : 'horizontal'
    const isHorizontal = orientation === 'horizontal'

    const trackSize =
      size === 'small'
        ? isHorizontal
          ? 'h-1'
          : 'w-1'
        : isHorizontal
          ? 'h-1.5'
          : 'w-1.5'

    const thumbSize = size === 'small' ? 'size-3' : 'size-4'

    /* ── marks ── */
    const markList = React.useMemo(() => {
      if (!marks) return []
      const entries = Object.entries(marks).map(([key, val]) => {
        const num = Number(key)
        const label = typeof val === 'string' ? val : val.label
        const style = typeof val === 'string' ? undefined : val.style
        const pct = ((num - min) / (max - min)) * 100
        return { value: num, label, style, pct }
      })
      entries.sort((a, b) => a.value - b.value)
      return entries
    }, [marks, min, max])

    /* ── step dots ── */
    const dotList = React.useMemo(() => {
      if (!dots) return []
      const list: number[] = []
      const count = Math.floor((max - min) / step)
      for (let i = 0; i <= count; i++) {
        list.push(min + i * step)
      }
      return list
    }, [dots, max, min, step])

    /* ── tooltip ── */
    const showTooltip = tooltip !== false
    const formatTooltip = (v: number) =>
      typeof tooltip === 'function' ? tooltip(v) : String(v)

    const thumbClass = cn(
      'border-primary bg-background ring-ring/50 block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
      thumbSize,
    )

    return (
      <TooltipPrimitive.Provider>
        <div
          className={cn('relative w-full', !isHorizontal && 'flex flex-col items-center')}
          style={
            !isHorizontal && height
              ? { height: typeof height === 'number' ? `${height}px` : height }
              : undefined
          }
        >
          <SliderPrimitive.Root
            ref={ref}
            data-uipkge=""
            data-slot="slider"
            min={min}
            max={max}
            step={step}
            value={isControlled ? value : undefined}
            defaultValue={isControlled ? undefined : resolvedDefault}
            orientation={orientation}
            inverted={reverse}
            onValueChange={handleChange}
            onValueCommit={onValueCommit}
            className={cn(
              'relative flex touch-none select-none data-[disabled]:opacity-50',
              isHorizontal ? 'w-full items-center' : 'h-full min-h-44 flex-col justify-center',
              className,
            )}
            {...props}
          >
            {/* Track */}
            <SliderPrimitive.Track
              data-uipkge=""
              data-slot="slider-track"
              className={cn('bg-muted relative grow overflow-hidden rounded-full', trackSize)}
            >
              {included && (
                <SliderPrimitive.Range
                  data-uipkge=""
                  data-slot="slider-range"
                  className={cn('bg-primary absolute', isHorizontal ? 'h-full' : 'w-full')}
                />
              )}
            </SliderPrimitive.Track>

            {/* Step dots */}
            {dotList.map((dot) => (
              <div
                key={dot}
                className={cn(
                  'border-primary/40 bg-background absolute rounded-full border',
                  isHorizontal
                    ? 'top-1/2 size-1.5 -translate-y-1/2'
                    : 'left-1/2 size-1.5 -translate-x-1/2',
                  size === 'small' && 'size-1',
                )}
                style={
                  isHorizontal
                    ? {
                        left: `${((dot - min) / (max - min)) * 100}%`,
                        transform: 'translateX(-50%) translateY(-50%)',
                      }
                    : {
                        bottom: `${((dot - min) / (max - min)) * 100}%`,
                        transform: 'translateX(-50%) translateY(50%)',
                      }
                }
              />
            ))}

            {/* Marks */}
            {markList.length > 0 && (
              <div
                className={cn(
                  'pointer-events-none absolute',
                  isHorizontal ? 'top-full mt-2.5 h-5 w-full' : 'top-0 left-full ml-3 h-full w-20',
                )}
              >
                {markList.map((mark) => (
                  <span
                    key={mark.value}
                    className="text-muted-foreground absolute text-xs whitespace-nowrap"
                    style={{
                      ...mark.style,
                      ...(isHorizontal
                        ? { left: `${mark.pct}%`, transform: 'translateX(-50%)' }
                        : { bottom: `${mark.pct}%`, transform: 'translateY(50%)' }),
                    }}
                  >
                    {mark.label}
                  </span>
                ))}
              </div>
            )}

            {/* Thumbs (with tooltips) */}
            {currentValue.map((thumbValue, idx) =>
              showTooltip ? (
                <TooltipPrimitive.Root key={idx} delayDuration={0}>
                  <TooltipPrimitive.Trigger asChild>
                    <SliderPrimitive.Thumb
                      data-uipkge=""
                      data-slot="slider-thumb"
                      className={thumbClass}
                    />
                  </TooltipPrimitive.Trigger>
                  <TooltipPrimitive.Portal>
                    <TooltipPrimitive.Content
                      side={isHorizontal ? 'top' : 'right'}
                      sideOffset={4}
                      className="bg-foreground text-background z-50 w-fit rounded-md px-2 py-1 text-xs"
                    >
                      {formatTooltip(thumbValue ?? 0)}
                      <TooltipPrimitive.Arrow className="bg-foreground fill-foreground size-2.5 rotate-45 rounded-[2px]" />
                    </TooltipPrimitive.Content>
                  </TooltipPrimitive.Portal>
                </TooltipPrimitive.Root>
              ) : (
                <SliderPrimitive.Thumb
                  key={idx}
                  data-uipkge=""
                  data-slot="slider-thumb"
                  className={thumbClass}
                />
              ),
            )}
          </SliderPrimitive.Root>
        </div>
      </TooltipPrimitive.Provider>
    )
  },
)
Slider.displayName = 'Slider'

export { Slider }

```

### `packages/registry-react/components/slider/index.ts`

```ts
export { Slider, type SliderProps, type SliderMark } from './Slider'

```

## smooth-funnel

- type: `registry:ui`
- description: React mirror of @uipkge/smooth-funnel.

### `packages/registry-react/components/charts/smooth-funnel/SmoothFunnel.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

// ─────────────────────────────────────────────────────────────────────────
// SmoothFunnel — pure SVG, no ECharts
// ─────────────────────────────────────────────────────────────────────────

interface FunnelStage {
  name: string
  value: number
  /** Optional override; defaults to chart-1..N from the registry palette. */
  color?: string
}

export interface SmoothFunnelProps {
  data: FunnelStage[]
  /** Container height (px when numeric, raw CSS when string). Defaults to 240. */
  height?: number | string
  /** Show the percent pill on each stage. Defaults to true. */
  showLabels?: boolean
  /** Minimum segment height in px so tail stages stay visible at tiny percents. Default 18. */
  minHeight?: number
  /** Optional fallback palette when `color` is omitted on a stage. */
  colors?: string[]
  className?: string
}

// SVG geometry. Width/height are virtual (the SVG fits to container
// via viewBox). The aspect ratio (W:H ≈ 4:1) matches the horizontal
// "flow" layout consumers typically want for a 4-6 stage funnel; if
// you need taller bands, override `height` and the curves stretch
// vertically without distorting horizontally.
const SF_W = 720
const SF_H = 180
const SF_CY = SF_H / 2

export const SmoothFunnel = React.forwardRef<HTMLDivElement, SmoothFunnelProps>(
  (
    {
      data,
      height = 240,
      showLabels = true,
      minHeight = 18,
      colors = ['#3b82f6', '#a855f7', '#34d399', '#facc15', '#fb7185', '#06b6d4'],
      className,
    },
    ref,
  ) => {
    const segments = React.useMemo(() => {
      const stages = data
      const n = stages.length
      if (n === 0) return []
      const segW = SF_W / n
      const max = Math.max(...stages.map((s) => s.value))
      const pctOf = (v: number) => (max > 0 ? (v / max) * 100 : 0)
      const heightFor = (pct: number) => Math.max((pct / 100) * SF_H, minHeight)

      return stages.map((s, i) => {
        const next = stages[i + 1] ?? s
        const startPct = pctOf(s.value)
        const endPct = pctOf(next.value)
        const h0 = heightFor(startPct)
        const h1 = heightFor(endPct)
        const x0 = i * segW
        const x1 = x0 + segW
        const yTop0 = SF_CY - h0 / 2
        const yTop1 = SF_CY - h1 / 2
        const yBot0 = SF_CY + h0 / 2
        const yBot1 = SF_CY + h1 / 2

        // Cubic bezier control points at 38% / 62% of segment width produce
        // a soft S-curve transition between stages rather than the
        // trapezoidal default of an ECharts funnel.
        const cx1 = x0 + segW * 0.38
        const cx2 = x0 + segW * 0.62

        const d = [
          `M ${x0.toFixed(1)} ${yTop0.toFixed(1)}`,
          `C ${cx1.toFixed(1)} ${yTop0.toFixed(1)}, ${cx2.toFixed(1)} ${yTop1.toFixed(1)}, ${x1.toFixed(1)} ${yTop1.toFixed(1)}`,
          `L ${x1.toFixed(1)} ${yBot1.toFixed(1)}`,
          `C ${cx2.toFixed(1)} ${yBot1.toFixed(1)}, ${cx1.toFixed(1)} ${yBot0.toFixed(1)}, ${x0.toFixed(1)} ${yBot0.toFixed(1)}`,
          'Z',
        ].join(' ')

        return {
          d,
          color: s.color ?? colors[i % colors.length],
          percent: startPct,
          name: s.name,
          value: s.value,
          labelX: x0 + segW * 0.42,
          labelY: SF_CY,
        }
      })
    }, [data, minHeight, colors])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="smooth-funnel"
        tabIndex={0}
        style={{ height: heightToStyle(height) }}
        className={cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)}
      >
        <svg viewBox={`0 0 ${SF_W} ${SF_H}`} className="block h-full w-full" preserveAspectRatio="none" role="img">
          {segments.map((seg, i) => (
            <g key={i}>
              <path d={seg.d} fill={seg.color} />
              {showLabels && (
                <foreignObject x={seg.labelX - 28} y={seg.labelY - 12} width={56} height={24}>
                  <div className="bg-background text-foreground inline-flex h-6 items-center rounded-full border px-2 text-[11px] font-semibold shadow-sm">
                    {Math.round(seg.percent * 10) / 10}%
                  </div>
                </foreignObject>
              )}
            </g>
          ))}
        </svg>
      </div>
    )
  },
)
SmoothFunnel.displayName = 'SmoothFunnel'

```

### `packages/registry-react/components/charts/smooth-funnel/index.ts`

```ts
export { SmoothFunnel, type SmoothFunnelProps } from './SmoothFunnel'

```

## sonner

- type: `registry:ui`
- description: Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `sonner` library with the registry’s tokens applied.
- npm deps: `sonner`, `next-themes`

### `packages/registry-react/components/sonner/Sonner.tsx`

```tsx
'use client'

import { useTheme } from 'next-themes'
import { Toaster as Sonner, type ToasterProps } from 'sonner'
import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from 'lucide-react'

// Sonner cadence — UX_MICROINTERACTIONS.md research:
// 4000ms default, bottom-right position so swipe-right dismiss reads
// naturally, max 3 visible (older stack with scale offset), rich colors
// so success/error/info/warning each get distinct variants.
const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = 'system' } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps['theme']}
      data-uipkge=""
      data-slot="sonner"
      className="toaster group"
      position="bottom-right"
      duration={4000}
      visibleToasts={3}
      richColors
      closeButton={false}
      expand={false}
      style={
        {
          '--normal-bg': 'var(--popover)',
          '--normal-text': 'var(--popover-foreground)',
          '--normal-border': 'var(--border)',
          '--border-radius': 'var(--radius)',
        } as React.CSSProperties
      }
      icons={{
        success: <CircleCheckIcon className="size-4" aria-hidden="true" />,
        info: <InfoIcon className="size-4" aria-hidden="true" />,
        warning: <TriangleAlertIcon className="size-4" aria-hidden="true" />,
        error: <OctagonXIcon className="size-4" aria-hidden="true" />,
        loading: <Loader2Icon className="size-4 animate-spin" aria-hidden="true" />,
      }}
      {...props}
    />
  )
}

export { Toaster }

```

### `packages/registry-react/components/sonner/index.ts`

```ts
export { Toaster } from './Sonner'

```

## sparkline

- type: `registry:ui`
- description: React mirror of @uipkge/sparkline — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/sparkline/Sparkline.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// Sparkline
// ─────────────────────────────────────────────────────────────────────────

export interface SparklineProps {
  data: number[]
  color?: string
  height?: number | string
  option?: any
  className?: string
}

export const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(
  ({ data, color: colorProp, height = 40, option, className }, ref) => {
    const theme = useChartTheme()
    const color = colorProp ?? theme.colors[1]

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'line',
          smooth: true,
          // Show a dot only at the last datapoint so the eye can find the
          // current value; intermediate dots clutter at sparkline density.
          showSymbol: false,
          showAllSymbol: false,
          symbol: 'circle',
          symbolSize: 5,
          endLabel: { show: false },
          lineStyle: { width: 1.75, color },
          itemStyle: { color, borderColor: color, borderWidth: 0 },
          data: data.map((v, i) => ({
            value: v,
            symbol: i === data.length - 1 ? 'circle' : 'none',
            symbolSize: i === data.length - 1 ? 5 : 0,
          })),
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: toRgba(color!, 0.18) },
                { offset: 1, color: toRgba(color!, 0) },
              ],
            },
          },
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        grid: { left: 0, right: 0, top: 2, bottom: 2 },
        xAxis: { type: 'category', show: false, data: data.map((_, i) => i) },
        yAxis: { type: 'value', show: false, min: (value: any) => value.min * 0.9 },
        tooltip: { show: false },
        series: mergedSeries,
        ...userRest,
      }
    }, [data, color, option])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
Sparkline.displayName = 'Sparkline'

```

### `packages/registry-react/components/charts/sparkline/index.ts`

```ts
export { Sparkline, type SparklineProps } from './Sparkline'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## speed-dial

- type: `registry:ui`
- description: Expanding floating action button that reveals a list of secondary action buttons. Supports click or hover triggers, four expansion directions (up/down/left/right), staggered entrance animation, a configurable main FAB icon, and close-on-action. Built on the fab and popover primitives.
- npm deps: `lucide-react`, `@radix-ui/react-popover`
- registry deps: `fab`, `popover`

### `packages/registry-react/components/speed-dial/SpeedDial.tsx`

```tsx
'use client'

import * as React from 'react'
import type { LucideIcon } from 'lucide-react'
import { Plus } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Fab } from '@/components/ui/fab'
import { cn } from '@/lib/utils'

export interface SpeedDialAction {
  icon: LucideIcon
  label: string
  handler?: () => void
  disabled?: boolean
  className?: string
}

type Direction = 'up' | 'down' | 'left' | 'right'
type Trigger = 'click' | 'hover'

export interface SpeedDialProps {
  actions: SpeedDialAction[]
  /** Main FAB icon. */
  icon?: LucideIcon
  /** Accessible label for the main FAB. */
  label?: string
  direction?: Direction
  trigger?: Trigger
  /** Close the dial after an action is triggered. */
  closeOnAction?: boolean
  variant?: 'default' | 'secondary' | 'destructive' | 'outline'
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'inline'
  absolute?: boolean
  disabled?: boolean
  className?: string
}

const sideMap: Record<Direction, 'top' | 'bottom' | 'left' | 'right'> = {
  up: 'top',
  down: 'bottom',
  left: 'left',
  right: 'right',
}

const SpeedDial = React.forwardRef<HTMLButtonElement, SpeedDialProps>(
  (
    {
      actions,
      icon: Icon,
      label,
      direction = 'up',
      trigger = 'click',
      closeOnAction = true,
      variant = 'default',
      position = 'bottom-right',
      absolute = false,
      disabled = false,
      className,
    },
    ref,
  ) => {
    const [open, setOpen] = React.useState(false)
    const hoverTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)

    const clearHoverTimer = React.useCallback(() => {
      if (hoverTimerRef.current) {
        clearTimeout(hoverTimerRef.current)
        hoverTimerRef.current = null
      }
    }, [])

    const onTriggerEnter = React.useCallback(() => {
      if (trigger !== 'hover') return
      clearHoverTimer()
      setOpen(true)
    }, [trigger, clearHoverTimer])

    const onTriggerLeave = React.useCallback(() => {
      if (trigger !== 'hover') return
      clearHoverTimer()
      hoverTimerRef.current = setTimeout(() => setOpen(false), 150)
    }, [trigger, clearHoverTimer])

    const onContentEnter = React.useCallback(() => {
      if (trigger !== 'hover') return
      clearHoverTimer()
    }, [trigger, clearHoverTimer])

    const onContentLeave = React.useCallback(() => {
      if (trigger !== 'hover') return
      clearHoverTimer()
      hoverTimerRef.current = setTimeout(() => setOpen(false), 150)
    }, [trigger, clearHoverTimer])

    React.useEffect(() => clearHoverTimer, [clearHoverTimer])

    function runAction(action: SpeedDialAction) {
      if (action.disabled) return
      action.handler?.()
      if (closeOnAction) setOpen(false)
    }

    const side = sideMap[direction]
    const listClass =
      direction === 'up' || direction === 'down'
        ? 'flex flex-col items-center gap-3'
        : 'flex flex-row items-center gap-3'

    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <div
            data-uipkge=""
            data-slot="speed-dial"
            className={cn(className)}
            onMouseEnter={onTriggerEnter}
            onMouseLeave={onTriggerLeave}
          >
            <Fab
              ref={ref}
              variant={variant}
              position={position}
              absolute={absolute}
              disabled={disabled}
              aria-label={label || 'Quick actions'}
              className={cn('transition-transform duration-200', open && 'rotate-45')}
              onClick={trigger === 'hover' ? (e) => e.stopPropagation() : undefined}
            >
              {Icon ? <Icon /> : <Plus />}
            </Fab>
          </div>
        </PopoverTrigger>

        <PopoverContent
          side={side}
          align="center"
          sideOffset={12}
          className={cn('w-auto border-0 bg-transparent p-0 shadow-none', trigger === 'hover' && 'pointer-events-auto')}
          onMouseEnter={onContentEnter}
          onMouseLeave={onContentLeave}
        >
          <div className={listClass}>
            {actions.map((action, i) => {
              const ActionIcon = action.icon
              return (
                <button
                  key={i}
                  type="button"
                  data-slot="speed-dial-action"
                  disabled={action.disabled}
                  aria-label={action.label}
                  style={{ animationDelay: `${i * 40}ms` }}
                  className={cn(
                    "group/speed-dial-item bg-background text-foreground hover:bg-accent hover:text-accent-foreground motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 focus-visible:ring-ring/50 inline-flex size-12 items-center justify-center rounded-full border shadow-md transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
                    action.className,
                  )}
                  onClick={() => runAction(action)}
                >
                  <ActionIcon />
                  <span className="sr-only">{action.label}</span>
                </button>
              )
            })}
          </div>
        </PopoverContent>
      </Popover>
    )
  },
)
SpeedDial.displayName = 'SpeedDial'

export { SpeedDial }

```

### `packages/registry-react/components/speed-dial/index.ts`

```ts
export { SpeedDial, type SpeedDialAction, type SpeedDialProps } from './SpeedDial'

```

## spinner

- type: `registry:ui`
- description: Lightweight loading indicator — circular spinner with three sizes and tone variants. Use inside buttons (replacing the icon when an action is in flight) or as a centered page loader.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/spinner/Spinner.tsx`

```tsx
import * as React from 'react'
import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import { spinnerVariants, type SpinnerVariants } from './spinner.variants'

// Omit Lucide's own `size` (number|string) so the cva variant `size` wins.
export interface SpinnerProps
  extends Omit<React.ComponentPropsWithoutRef<typeof Loader2>, 'ref' | 'size'>,
    SpinnerVariants {}

const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size = 'default', ...props }, ref) => (
  <Loader2
    ref={ref}
    data-uipkge=""
    data-slot="spinner"
    className={cn(spinnerVariants({ size }), className)}
    aria-label="Loading"
    role="status"
    {...props}
  />
))
Spinner.displayName = 'Spinner'

export { Spinner }

```

### `packages/registry-react/components/spinner/spinner.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const spinnerVariants = cva('animate-spin text-muted-foreground', {
  variants: {
    size: {
      default: 'size-6',
      sm: 'size-4',
      lg: 'size-8',
      icon: 'size-4',
    },
  },
  defaultVariants: {
    size: 'default',
  },
})

export type SpinnerVariants = VariantProps<typeof spinnerVariants>

```

### `packages/registry-react/components/spinner/index.ts`

```ts
export { Spinner, type SpinnerProps } from './Spinner'
export { spinnerVariants, type SpinnerVariants } from './spinner.variants'

```

## stepper

- type: `registry:ui`
- description: Multi-step indicator — horizontal or vertical, with completed / current / upcoming states and optional descriptions per step. Use for onboarding wizards and checkout flows.
- npm deps: `class-variance-authority`, `lucide-react`

### `packages/registry-react/components/stepper/stepper.tsx`

```tsx
'use client'

import * as React from 'react'
import { Check, X, type LucideIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { stepperIndicatorVariants } from './stepper.variants'
import {
  StepperContext,
  useStepperContext,
  type StepperOrientation,
  type StepperSize,
  type StepperStatus,
} from './context'
// Aliased: the standalone <StepperStep> component (below) owns the bare name.
import type { StepperStep as StepperStepConfig } from './types'

/* ------------------------------------------------------------------ */
/* Stepper (root)                                                      */
/* ------------------------------------------------------------------ */

export interface StepperProps {
  steps?: StepperStepConfig[]
  value?: number
  onValueChange?: (value: number) => void
  orientation?: StepperOrientation
  size?: StepperSize
  className?: string
  /** Custom header strip. Falls back to the auto-rendered `<ol>` of items. */
  stepsSlot?: React.ReactNode
  /** Content area. Receives the active step + steps for convenience. */
  children?: React.ReactNode | ((args: { activeStep: number; steps: StepperStepConfig[] }) => React.ReactNode)
}

const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
  (
    { steps = [], value = 1, onValueChange, orientation = 'horizontal', size = 'default', className, stepsSlot, children },
    ref,
  ) => {
    const activeStep = value

    const getStatus = React.useCallback(
      (index: number): StepperStatus => {
        const step = steps[index]
        if (step?.error) return 'error'
        if (index + 1 === activeStep) return 'active'
        if (index + 1 < activeStep) return 'completed'
        return 'pending'
      },
      [steps, activeStep],
    )

    const isClickable = React.useCallback((index: number): boolean => index + 1 < activeStep, [activeStep])

    const goToStep = React.useCallback(
      (stepIndex: number) => {
        if (stepIndex < 1 || stepIndex > steps.length) return
        const step = steps[stepIndex - 1]
        if (step?.disabled) return
        onValueChange?.(stepIndex)
      },
      [steps, onValueChange],
    )

    const ctx = React.useMemo(
      () => ({ orientation, size, activeStep, steps, goToStep, isClickable, getStatus }),
      [orientation, size, activeStep, steps, goToStep, isClickable, getStatus],
    )

    return (
      <StepperContext.Provider value={ctx}>
        <div
          ref={ref}
          className={cn('w-full', className)}
          role="tablist"
          aria-orientation={orientation}
          data-orientation={orientation}
        >
          {/* Header strip with steps */}
          {stepsSlot ??
            (steps.length > 0 && (
              <ol
                className={cn(
                  'flex',
                  orientation === 'horizontal' ? 'flex-row items-start' : 'flex-col items-stretch',
                )}
              >
                {steps.map((step, index) => (
                  <StepperItem key={step.id} step={step} index={index} />
                ))}
              </ol>
            ))}

          {/* Content area */}
          {children != null && (
            <div className="mt-6 flex-1">
              {typeof children === 'function' ? children({ activeStep, steps }) : children}
            </div>
          )}
        </div>
      </StepperContext.Provider>
    )
  },
)
Stepper.displayName = 'Stepper'

/* ------------------------------------------------------------------ */
/* StepperIndicator                                                    */
/* ------------------------------------------------------------------ */

export interface StepperIndicatorProps {
  status?: StepperStatus
  size?: StepperSize
  index?: number
  icon?: LucideIcon
  clickable?: boolean
  className?: string
  onClick?: () => void
  children?: React.ReactNode
}

const StepperIndicator = React.forwardRef<HTMLButtonElement, StepperIndicatorProps>(
  ({ status = 'pending', size = 'default', index, icon: Icon, clickable = false, className, onClick, children }, ref) => {
    const FallbackIcon: LucideIcon | null =
      Icon ?? (status === 'completed' ? Check : status === 'error' ? X : null)

    return (
      <button
        ref={ref}
        type="button"
        className={cn(
          stepperIndicatorVariants({ status, size }),
          'ring-background relative z-10 ring-4 transition-colors duration-200 outline-none',
          clickable && 'focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',
          !clickable && 'cursor-default',
          className,
        )}
        disabled={!clickable}
        aria-current={status === 'active' ? 'step' : undefined}
        onClick={onClick}
      >
        {children ??
          (FallbackIcon ? (
            <FallbackIcon className="size-4" aria-hidden="true" />
          ) : index !== undefined ? (
            <span className="font-medium">{index}</span>
          ) : null)}
      </button>
    )
  },
)
StepperIndicator.displayName = 'StepperIndicator'

/* ------------------------------------------------------------------ */
/* StepperItem                                                         */
/* ------------------------------------------------------------------ */

export interface StepperItemProps {
  step: StepperStepConfig
  index: number
  className?: string
}

const StepperItem = React.forwardRef<HTMLLIElement, StepperItemProps>(({ step, index, className }, ref) => {
  const ctx = useStepperContext()

  const status = ctx.getStatus(index)
  const orientation = ctx.orientation
  const isFirst = index === 0
  const isLast = index === ctx.steps.length - 1
  const clickable = ctx.isClickable(index) && !step.disabled

  // A connector "segment" is the line drawn between this indicator and the
  // adjacent one. We split it into left/right halves so each item owns its
  // own piece — they butt up at item boundaries for pixel alignment.
  const leftSegmentCompleted = index < ctx.activeStep
  const rightSegmentCompleted = index < ctx.activeStep - 1

  function handleNavigate() {
    if (clickable) ctx.goToStep(index + 1)
  }

  return (
    <li
      ref={ref}
      className={cn(
        'group/stepper-item relative min-w-0',
        orientation === 'horizontal'
          ? 'flex flex-1 flex-col items-center gap-2'
          : 'flex flex-row items-start gap-3 pb-6 last:pb-0',
        step.disabled && 'opacity-50',
        className,
      )}
      role="tab"
      aria-selected={status === 'active'}
      aria-disabled={step.disabled || undefined}
      data-status={status}
    >
      {/* Indicator row: contains the indicator + connector segments */}
      <div
        className={cn(
          'relative flex shrink-0',
          orientation === 'horizontal'
            ? 'h-9 w-full items-center justify-center'
            : 'w-9 flex-col items-center justify-start self-stretch',
        )}
      >
        {/* Connector segments (absolute, butt up at item boundaries) */}
        {!isFirst && (
          <span
            aria-hidden="true"
            className={cn(
              'pointer-events-none absolute transition-colors duration-200',
              orientation === 'horizontal'
                ? 'top-1/2 right-1/2 left-0 h-px -translate-y-1/2'
                : 'top-0 bottom-1/2 left-1/2 w-px -translate-x-1/2',
              leftSegmentCompleted ? 'bg-primary' : 'bg-border',
            )}
          />
        )}
        {!isLast && (
          <span
            aria-hidden="true"
            className={cn(
              'pointer-events-none absolute transition-colors duration-200',
              orientation === 'horizontal'
                ? 'top-1/2 right-0 left-1/2 h-px -translate-y-1/2'
                : 'top-1/2 bottom-0 left-1/2 w-px -translate-x-1/2',
              rightSegmentCompleted ? 'bg-primary' : 'bg-border',
            )}
          />
        )}

        <StepperIndicator
          status={status}
          index={index + 1}
          icon={step.icon}
          clickable={clickable}
          className="focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
          onClick={handleNavigate}
        />
      </div>

      {/* Title + description */}
      <div className={cn('min-w-0', orientation === 'horizontal' ? 'max-w-[12rem] text-center' : 'flex-1 pt-1.5')}>
        <button
          type="button"
          className={cn(
            'text-foreground text-sm font-medium text-balance transition-colors outline-none',
            clickable &&
              'hover:text-primary focus-visible:text-primary focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none',
            !clickable && 'cursor-default',
            status === 'pending' && 'text-muted-foreground',
            status === 'error' && 'text-destructive',
          )}
          disabled={!clickable}
          onClick={handleNavigate}
        >
          {step.title}
        </button>
        {step.description && (
          <p className="text-muted-foreground mt-0.5 text-xs text-balance">{step.description}</p>
        )}
      </div>
    </li>
  )
})
StepperItem.displayName = 'StepperItem'

/* ------------------------------------------------------------------ */
/* StepperHeader                                                       */
/* ------------------------------------------------------------------ */

const StepperHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn('stepper-header flex items-center gap-0', className)} {...props} />
  ),
)
StepperHeader.displayName = 'StepperHeader'

/* ------------------------------------------------------------------ */
/* StepperContent                                                      */
/* ------------------------------------------------------------------ */

export interface StepperContentProps extends React.HTMLAttributes<HTMLDivElement> {
  step?: number
  activeStep?: number
}

const StepperContent = React.forwardRef<HTMLDivElement, StepperContentProps>(
  ({ step = 1, activeStep = 1, className, children, ...props }, ref) => {
    const isActive = step === activeStep
    return (
      <div
        ref={ref}
        className={cn(
          'stepper-content motion-safe:animate-in motion-safe:fade-in-50 motion-safe:duration-200',
          className,
        )}
        style={!isActive ? { display: 'none' } : undefined}
        role="tabpanel"
        aria-hidden={!isActive}
        {...props}
      >
        {children}
      </div>
    )
  },
)
StepperContent.displayName = 'StepperContent'

/* ------------------------------------------------------------------ */
/* StepperTitle                                                        */
/* ------------------------------------------------------------------ */

const StepperTitle = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
  ({ className, ...props }, ref) => (
    <span ref={ref} className={cn('text-foreground text-sm font-medium', className)} {...props} />
  ),
)
StepperTitle.displayName = 'StepperTitle'

/* ------------------------------------------------------------------ */
/* StepperDescription                                                  */
/* ------------------------------------------------------------------ */

const StepperDescription = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
  ({ className, ...props }, ref) => (
    <span ref={ref} className={cn('text-muted-foreground text-xs', className)} {...props} />
  ),
)
StepperDescription.displayName = 'StepperDescription'

/* ------------------------------------------------------------------ */
/* StepperStep (standalone, slot-driven)                               */
/* ------------------------------------------------------------------ */

export interface StepperStepProps {
  title: string
  description?: string
  icon?: React.ReactNode
  completed?: boolean
  active?: boolean
  error?: boolean
  disabled?: boolean
  status?: 'active' | 'completed' | 'pending' | 'error'
  index?: number
  className?: string
  titleSlot?: React.ReactNode
  descriptionSlot?: React.ReactNode
  iconSlot?: React.ReactNode
}

const StepperStep = React.forwardRef<HTMLDivElement, StepperStepProps>(
  (
    {
      title,
      description,
      completed = false,
      active = false,
      error = false,
      disabled = false,
      status,
      index,
      className,
      titleSlot,
      descriptionSlot,
      iconSlot,
    },
    ref,
  ) => {
    const computedStatus: StepperStatus = status
      ? status
      : error
        ? 'error'
        : active
          ? 'active'
          : completed
            ? 'completed'
            : 'pending'

    return (
      <div
        ref={ref}
        className={cn('stepper-step flex gap-3', className)}
        role="tab"
        aria-selected={active}
        aria-disabled={disabled}
      >
        {/* Indicator */}
        <div className={cn(stepperIndicatorVariants({ status: computedStatus, size: 'default' }))}>
          {iconSlot ??
            (computedStatus === 'completed' ? (
              <Check className="size-4" aria-hidden="true" />
            ) : index ? (
              <span>{index}</span>
            ) : null)}
        </div>

        {/* Content */}
        <div className="flex flex-col gap-0.5 pt-1">
          {titleSlot ?? <span className="text-sm font-medium">{title}</span>}
          {descriptionSlot ??
            (description && <span className="text-muted-foreground text-xs">{description}</span>)}
        </div>
      </div>
    )
  },
)
StepperStep.displayName = 'StepperStep'

export {
  Stepper,
  StepperItem,
  StepperIndicator,
  StepperHeader,
  StepperContent,
  StepperTitle,
  StepperDescription,
  StepperStep,
}

```

### `packages/registry-react/components/stepper/context.ts`

```ts
'use client'

import * as React from 'react'
import type { StepperStep } from './types'

export type StepperOrientation = 'horizontal' | 'vertical'
export type StepperStatus = 'active' | 'completed' | 'pending' | 'error'
export type StepperSize = 'sm' | 'default' | 'lg'

export interface StepperContextValue {
  orientation: StepperOrientation
  size: StepperSize
  activeStep: number
  steps: StepperStep[]
  goToStep: (stepIndex: number) => void
  isClickable: (index: number) => boolean
  getStatus: (index: number) => StepperStatus
}

export const StepperContext = React.createContext<StepperContextValue | null>(null)

export function useStepperContext(): StepperContextValue {
  const ctx = React.useContext(StepperContext)
  if (!ctx) throw new Error('StepperItem must be used inside <Stepper>')
  return ctx
}

```

### `packages/registry-react/components/stepper/stepper.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so `StepperIndicator.vue` / `StepperStep.vue` can import
 * them without creating a circular dependency back through the index.
 * Sibling pattern to `card/card.variants.ts`.
 */
export const stepperIndicatorVariants = cva('flex items-center justify-center rounded-full font-semibold shrink-0', {
  variants: {
    status: {
      pending: 'bg-muted text-muted-foreground',
      active: 'bg-primary text-primary-foreground shadow-sm',
      completed: 'bg-primary text-primary-foreground',
      error: 'bg-destructive text-destructive-foreground',
    },
    size: {
      sm: 'size-7 text-xs [&>svg]:size-3.5',
      default: 'size-9 text-sm [&>svg]:size-4',
      lg: 'size-11 text-base [&>svg]:size-5',
    },
  },
  defaultVariants: {
    status: 'pending',
    size: 'default',
  },
})

export type StepperIndicatorVariants = VariantProps<typeof stepperIndicatorVariants>

```

### `packages/registry-react/components/stepper/types.ts`

```ts
import type { LucideIcon } from 'lucide-react'

export interface StepperStep {
  id: string | number
  title: string
  description?: string
  icon?: LucideIcon
  disabled?: boolean
  error?: boolean
}

```

### `packages/registry-react/components/stepper/index.ts`

```ts
export {
  Stepper,
  StepperHeader,
  StepperItem,
  StepperIndicator,
  StepperContent,
  StepperTitle,
  StepperDescription,
  StepperStep,
  type StepperProps,
  type StepperItemProps,
  type StepperIndicatorProps,
  type StepperContentProps,
  type StepperStepProps,
} from './stepper'
export type { StepperStep as StepperStepConfig } from './types'
export type { StepperOrientation, StepperSize, StepperStatus } from './context'

// Re-export variant API from the sibling file (kept separate to avoid the
// stepper.tsx <-> index.ts circular import that broke dev SSR in the Vue source).
export { stepperIndicatorVariants, type StepperIndicatorVariants } from './stepper.variants'

```

## sunburst-chart

- type: `registry:ui`
- description: React mirror of @uipkge/sunburst-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/sunburst-chart/SunburstChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// SunburstChart
// ─────────────────────────────────────────────────────────────────────────

interface SunNode {
  name: string
  value?: number
  children?: SunNode[]
}

export interface SunburstChartProps {
  /** Hierarchical data — top-level array, each node has `name`, optional `value`, optional `children`. */
  data: SunNode[]
  height?: number | string
  /** Inner / outer radius as percentages of the smaller container side. Default `['12%', '90%']`. */
  radius?: [string, string]
  option?: any
  className?: string
}

export const SunburstChart = React.forwardRef<HTMLDivElement, SunburstChartProps>(
  ({ data, height = 360, radius = ['12%', '90%'], option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'sunburst',
          radius,
          data,
          label: { rotate: 'radial' as const, fontSize: 11 },
          itemStyle: { borderColor: '#fff', borderWidth: 1 },
          emphasis: { focus: 'ancestor' as const },
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [data, radius, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
SunburstChart.displayName = 'SunburstChart'

```

### `packages/registry-react/components/charts/sunburst-chart/index.ts`

```ts
export { SunburstChart, type SunburstChartProps } from './SunburstChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## switch

- type: `registry:ui`
- description: On/off toggle — visual analog of a hardware switch. Use for binary settings where the change takes effect immediately, not for form fields that submit later (use Checkbox there).
- npm deps: `@radix-ui/react-switch`, `lucide-react`

### `packages/registry-react/components/switch/Switch.tsx`

```tsx
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'
import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface SwitchProps
  extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'children'> {
  size?: 'sm' | 'default' | 'lg'
  /** Text shown on the left side when checked. */
  checkedChildren?: React.ReactNode
  /** Text shown on the right side when unchecked. */
  unCheckedChildren?: React.ReactNode
  loading?: boolean
  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | string
  /** Custom content rendered inside the thumb. Receives the checked state. */
  thumb?: (state: { checked: boolean }) => React.ReactNode
}

const colorMap: Record<string, string> = {
  primary: 'var(--primary)',
  secondary: 'var(--secondary)',
  success: 'var(--success)',
  warning: 'var(--warning)',
  error: 'var(--destructive)',
  info: 'var(--info)',
}

const thumbSizes = {
  sm: 'size-3',
  default: 'size-4',
  lg: 'size-5',
}

const thumbTranslate = {
  sm: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
  default: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
  lg: 'data-[state=checked]:translate-x-[calc(100%-5px)]',
}

const textSizes = {
  sm: 'text-[7px]',
  default: 'text-xs',
  lg: 'text-xs',
}

const thumbIconSizes = {
  sm: 'size-2',
  default: 'size-2.5',
  lg: 'size-3',
}

const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
  (
    {
      className,
      style,
      size = 'default',
      checkedChildren,
      unCheckedChildren,
      loading,
      color,
      disabled,
      thumb,
      checked,
      defaultChecked,
      onCheckedChange,
      ...props
    },
    ref,
  ) => {
    // Track checked state so children-visibility / thumb slot can react in both
    // controlled and uncontrolled usage (Radix doesn't surface checked to children).
    const [internalChecked, setInternalChecked] = React.useState<boolean>(defaultChecked ?? false)
    const isControlled = checked !== undefined
    const isChecked = isControlled ? !!checked : internalChecked

    const handleChange = React.useCallback(
      (next: boolean) => {
        if (!isControlled) setInternalChecked(next)
        onCheckedChange?.(next)
      },
      [isControlled, onCheckedChange],
    )

    const hasChildren = Boolean(checkedChildren || unCheckedChildren)

    const height = {
      sm: 'h-4',
      default: 'h-[1.15rem]',
      lg: 'h-6',
    }[size]

    const width = hasChildren
      ? {
          sm: 'min-w-8 w-fit',
          default: 'min-w-10 w-fit',
          lg: 'min-w-[3.25rem] w-fit',
        }[size]
      : {
          sm: 'w-6',
          default: 'w-8',
          lg: 'w-11',
        }[size]

    const sizeClasses = `${height} ${width}`

    const trackStyle = {
      ...style,
      '--switch-checked-bg': color ? colorMap[color] || color : 'var(--primary)',
    } as React.CSSProperties

    return (
      <SwitchPrimitive.Root
        ref={ref}
        data-slot="switch"
        disabled={disabled || loading}
        checked={checked}
        defaultChecked={defaultChecked}
        onCheckedChange={handleChange}
        className={cn(
          'peer focus-visible:ring-ring/50 focus-visible:border-ring data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 relative inline-flex shrink-0 items-center overflow-hidden rounded-full border border-transparent shadow-xs transition-[background-color,border-color,box-shadow] duration-150 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--switch-checked-bg)]',
          sizeClasses,
          className,
        )}
        style={trackStyle}
        {...props}
      >
        {/* Checked children (left side, visible when checked) */}
        {hasChildren && (
          <div
            className={cn(
              'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-1 transition-opacity duration-150',
              isChecked ? 'opacity-100' : 'opacity-0',
              textSizes[size],
            )}
          >
            <span className="text-primary-foreground truncate font-medium">{checkedChildren}</span>
          </div>
        )}

        {/* Unchecked children (right side, visible when unchecked) */}
        {hasChildren && (
          <div
            className={cn(
              'pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1 transition-opacity duration-150',
              !isChecked ? 'opacity-100' : 'opacity-0',
              textSizes[size],
            )}
          >
            <span className="text-muted-foreground truncate font-medium">{unCheckedChildren}</span>
          </div>
        )}

        <SwitchPrimitive.Thumb
          data-uipkge=""
          data-slot="switch-thumb"
          className={cn(
            'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none z-10 block rounded-full ring-0 transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] data-[state=unchecked]:translate-x-0',
            thumbSizes[size],
            thumbTranslate[size],
          )}
        >
          {loading ? (
            <Loader2 className={cn(thumbIconSizes[size], 'text-muted-foreground animate-spin')} />
          ) : (
            thumb?.({ checked: isChecked })
          )}
        </SwitchPrimitive.Thumb>
      </SwitchPrimitive.Root>
    )
  },
)
Switch.displayName = 'Switch'

export { Switch }

```

### `packages/registry-react/components/switch/index.ts`

```ts
export { Switch, type SwitchProps } from './Switch'

```

## table

- type: `registry:ui`
- description: Plain HTML table primitives — `<Table>`, `<TableHeader>`, `<TableRow>`, `<TableCell>` — with the registry’s borders, padding, and tokens already applied. Use this when Data Table is too heavy.
- npm deps: `@tanstack/react-table`

### `packages/registry-react/components/table/table.tsx`

```tsx
import * as React from 'react'
import { cn } from '@/lib/utils'

export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
  // Match DataTable's density enum so consumers can opt into the same
  // runtime feel without wiring DataTable. `cozy` is the canonical default
  // for bare tables (cells: py-2, head: h-10); the other two are escape
  // hatches for high-density admin lists and roomy patient-facing views.
  density?: 'compact' | 'cozy' | 'comfortable'
}

const Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, density, ...props }, ref) => {
  const densityClass =
    density === 'compact'
      ? '[&_td]:py-1.5 [&_td]:text-xs [&_th]:h-8 [&_th]:text-xs'
      : density === 'comfortable'
        ? '[&_td]:py-3 [&_th]:h-12'
        : // cozy is the new TableCell/TableHead baseline (py-2 / h-10) -- no override.
          ''

  return (
    <div data-uipkge="" data-slot="table-container" className="relative w-full overflow-auto">
      <table
        ref={ref}
        data-uipkge=""
        data-slot="table"
        className={cn('w-full caption-bottom text-sm', densityClass, className)}
        {...props}
      />
    </div>
  )
})
Table.displayName = 'Table'

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <thead ref={ref} data-uipkge="" data-slot="table-header" className={cn('bg-muted/50 [&_tr]:border-b', className)} {...props} />
  ),
)
TableHeader.displayName = 'TableHeader'

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} data-uipkge="" data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
  ),
)
TableBody.displayName = 'TableBody'

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot
      ref={ref}
      data-uipkge=""
      data-slot="table-footer"
      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
      {...props}
    />
  ),
)
TableFooter.displayName = 'TableFooter'

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      data-uipkge=""
      data-slot="table-row"
      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150', className)}
      {...props}
    />
  ),
)
TableRow.displayName = 'TableRow'

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      data-uipkge=""
      data-slot="table-head"
      className={cn(
        'text-foreground h-10 px-3 text-left align-middle text-sm font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = 'TableHead'

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td
      ref={ref}
      data-uipkge=""
      data-slot="table-cell"
      className={cn(
        'px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
        className,
      )}
      {...props}
    />
  ),
)
TableCell.displayName = 'TableCell'

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption
      ref={ref}
      data-uipkge=""
      data-slot="table-caption"
      className={cn('text-muted-foreground mt-4 text-sm', className)}
      {...props}
    />
  ),
)
TableCaption.displayName = 'TableCaption'

export interface TableEmptyProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
  colSpan?: number
}

const TableEmpty = React.forwardRef<HTMLTableCellElement, TableEmptyProps>(
  ({ className, colSpan = 1, children, ...props }, ref) => (
    <TableRow>
      <TableCell
        ref={ref}
        colSpan={colSpan}
        className={cn('text-foreground p-4 align-middle text-sm whitespace-nowrap', className)}
        {...props}
      >
        <div className="flex items-center justify-center py-10">{children}</div>
      </TableCell>
    </TableRow>
  ),
)
TableEmpty.displayName = 'TableEmpty'

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  TableEmpty,
}

```

### `packages/registry-react/components/table/utils.ts`

```ts
import type { Updater } from '@tanstack/react-table'
import type { Dispatch, SetStateAction } from 'react'

export function valueUpdater<T>(updaterOrValue: Updater<T>, setValue: Dispatch<SetStateAction<T>>) {
  setValue((old) => (typeof updaterOrValue === 'function' ? (updaterOrValue as (old: T) => T)(old) : updaterOrValue))
}

```

### `packages/registry-react/components/table/index.ts`

```ts
export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
  TableEmpty,
  type TableProps,
  type TableEmptyProps,
} from './table'

```

## tabs

- type: `registry:ui`
- description: Horizontal tab navigation with content panels — pick one panel at a time. Underline or pills variants. Built on Radix UI with full keyboard navigation.
- npm deps: `@radix-ui/react-tabs`, `class-variance-authority`

### `packages/registry-react/components/tabs/tabs.tsx`

```tsx
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { cn } from '@/lib/utils'
import { tabsListVariants, tabsTriggerVariants } from './tabs.variants'

// Make orientation reachable from descendants without each consumer having to
// pass it manually. TabsList / TabsTrigger read this to apply variant CSS.
const TabsOrientationContext = React.createContext<'horizontal' | 'vertical'>('horizontal')

export interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
  orientation?: 'horizontal' | 'vertical'
}

const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsProps>(
  ({ className, orientation = 'horizontal', ...props }, ref) => (
    <TabsOrientationContext.Provider value={orientation}>
      <TabsPrimitive.Root
        ref={ref}
        data-uipkge=""
        data-slot="tabs"
        data-orientation={orientation}
        orientation={orientation}
        className={cn('flex w-full', orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-2', className)}
        {...props}
      />
    </TabsOrientationContext.Provider>
  ),
)
Tabs.displayName = 'Tabs'

export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
  variant?: 'segmented' | 'pill' | 'underline'
  orientation?: 'horizontal' | 'vertical'
}

const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
  ({ className, variant, orientation, ...props }, ref) => {
    const inherited = React.useContext(TabsOrientationContext)
    const effectiveOrientation = orientation ?? inherited
    return (
      <TabsPrimitive.List
        ref={ref}
        data-uipkge=""
        data-slot="tabs-list"
        className={cn(tabsListVariants({ variant, orientation: effectiveOrientation }), className)}
        {...props}
      />
    )
  },
)
TabsList.displayName = 'TabsList'

export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
  size?: 'default' | 'sm' | 'lg'
  variant?: 'segmented' | 'pill' | 'underline'
  orientation?: 'horizontal' | 'vertical'
}

const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
  ({ className, size, variant, orientation, ...props }, ref) => {
    const inherited = React.useContext(TabsOrientationContext)
    const effectiveOrientation = orientation ?? inherited
    return (
      <TabsPrimitive.Trigger
        ref={ref}
        data-uipkge=""
        data-slot="tabs-trigger"
        className={cn(
          tabsTriggerVariants({ size, variant, orientation: effectiveOrientation }),
          className,
        )}
        {...props}
      />
    )
  },
)
TabsTrigger.displayName = 'TabsTrigger'

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    data-uipkge=""
    data-slot="tabs-content"
    className={cn(
      'ring-offset-background focus-visible:border-ring focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:ring-[3px] focus-visible:outline-none',
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = 'TabsContent'

export { Tabs, TabsList, TabsTrigger, TabsContent }

```

### `packages/registry-react/components/tabs/tabs.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const tabsListVariants = cva('inline-flex items-stretch text-muted-foreground', {
  variants: {
    variant: {
      // Solid muted track with rounded inset triggers — the default look.
      segmented: 'gap-1 rounded-md bg-muted p-1',
      // Transparent track with rounded-full pill triggers.
      pill: 'gap-2 bg-transparent p-0',
      // Bottom-border bar (horizontal) or right-border bar (vertical), with
      // an underline on the active trigger.
      underline: 'gap-0 bg-transparent p-0',
    },
    orientation: {
      horizontal: 'flex-row',
      vertical: 'h-auto flex-col items-stretch',
    },
  },
  compoundVariants: [
    {
      variant: 'underline',
      orientation: 'horizontal',
      class: 'w-full justify-start border-b border-border',
    },
    {
      variant: 'underline',
      orientation: 'vertical',
      class: 'border-r border-border',
    },
  ],
  defaultVariants: {
    variant: 'segmented',
    orientation: 'horizontal',
  },
})

export const tabsTriggerVariants = cva(
  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium ring-offset-background transition-[color,background-color,box-shadow,border-color] duration-150 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        segmented:
          'rounded-sm data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
        pill: 'rounded-full border border-border bg-transparent data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-primary',
        underline:
          'rounded-none border-b-2 border-transparent -mb-px data-[state=active]:border-foreground data-[state=active]:text-foreground',
      },
      size: {
        default: 'h-9 px-3 text-sm',
        sm: 'h-8 px-2.5 text-xs',
        lg: 'h-10 px-4 text-sm',
      },
      orientation: {
        horizontal: '',
        vertical: 'w-full justify-start',
      },
    },
    compoundVariants: [
      {
        variant: 'underline',
        orientation: 'vertical',
        class: 'border-b-0 border-r-2 -mr-px',
      },
    ],
    defaultVariants: {
      variant: 'segmented',
      size: 'default',
      orientation: 'horizontal',
    },
  },
)

export type TabsListVariants = VariantProps<typeof tabsListVariants>

export type TabsTriggerVariants = VariantProps<typeof tabsTriggerVariants>

```

### `packages/registry-react/components/tabs/index.ts`

```ts
export {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  type TabsProps,
  type TabsListProps,
  type TabsTriggerProps,
} from './tabs'

// Re-export variant API from the sibling file (kept separate to avoid the
// component <-> index.ts circular import that broke dev SSR for Card).
export {
  tabsListVariants,
  tabsTriggerVariants,
  type TabsListVariants,
  type TabsTriggerVariants,
} from './tabs.variants'

```

## tags-input

- type: `registry:ui`
- description: Multi-tag input — type a value, hit Enter, get a Chip. Backspace removes the last tag. Use for email recipient lists, tag sets, and free-form keyword inputs.
- npm deps: `lucide-react`

### `packages/registry-react/components/tags-input/tags-input.tsx`

```tsx
'use client'

import * as React from 'react'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface TagsInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  /** Controlled list of tags. */
  value?: string[]
  /** Fires with the next list whenever a tag is added or removed. */
  onValueChange?: (value: string[]) => void
  /** Uncontrolled initial list. */
  defaultValue?: string[]
  placeholder?: string
  disabled?: boolean
  /** Characters that commit the typed value into a tag. Defaults to Enter + comma. */
  addOnKeys?: string[]
  /** Split pasted text on whitespace and add each token as a tag. */
  addOnPaste?: boolean
  /** Character that commits the typed value into a tag (alias for addOnKeys). */
  delimiter?: string
  /** Reject duplicate tags (case-sensitive). Defaults to true. */
  unique?: boolean
}

const TagsInput = React.forwardRef<HTMLDivElement, TagsInputProps>(
  (
    {
      className,
      value,
      onValueChange,
      defaultValue,
      placeholder,
      disabled,
      addOnKeys,
      addOnPaste = false,
      delimiter,
      unique = true,
      ...props
    },
    ref,
  ) => {
    const commitKeys = addOnKeys ?? (delimiter ? [delimiter] : ['Enter', ','])
    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<string[]>(defaultValue ?? [])
    const tags = isControlled ? (value as string[]) : internal
    const [draft, setDraft] = React.useState('')
    const inputRef = React.useRef<HTMLInputElement | null>(null)

    function commit(next: string[]) {
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
    }

    function addTag(raw: string) {
      const trimmed = raw.trim()
      if (!trimmed) return
      if (unique && tags.includes(trimmed)) {
        setDraft('')
        return
      }
      commit([...tags, trimmed])
      setDraft('')
    }

    function removeAt(index: number) {
      commit(tags.filter((_, i) => i !== index))
    }

    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
      if (commitKeys.includes(e.key)) {
        e.preventDefault()
        addTag(draft)
      } else if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
        removeAt(tags.length - 1)
      }
    }

    function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
      if (!addOnPaste) return
      const text = e.clipboardData.getData('text')
      if (!text.trim()) return
      e.preventDefault()
      const tokens = text.split(/\s+/).map((t) => t.trim()).filter(Boolean)
      let next = [...tags]
      for (const token of tokens) {
        if (unique && next.includes(token)) continue
        next = [...next, token]
      }
      commit(next)
      setDraft('')
    }

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="tags-input"
        className={cn(
          'border-input bg-background flex flex-wrap items-center gap-2 rounded-md border px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
          'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
          className,
        )}
        onClick={() => inputRef.current?.focus()}
        {...props}
      >
        {tags.map((tag, i) => (
          <span
            key={`${tag}-${i}`}
            data-uipkge=""
            data-slot="tags-input-item"
            className="bg-secondary data-[state=active]:ring-ring ring-offset-background flex h-5 items-center rounded-md data-[state=active]:ring-2 data-[state=active]:ring-offset-2"
          >
            <span data-slot="tags-input-item-text" className="rounded bg-transparent px-2 py-0.5 text-sm">
              {tag}
            </span>
            <button
              type="button"
              aria-label={`Remove ${tag}`}
              disabled={disabled}
              data-slot="tags-input-item-delete"
              className="mr-1 flex rounded bg-transparent"
              onMouseDown={(e) => e.preventDefault()}
              onClick={(e) => {
                e.stopPropagation()
                removeAt(i)
              }}
            >
              <X className="h-4 w-4" aria-hidden="true" />
            </button>
          </span>
        ))}

        <input
          ref={inputRef}
          data-slot="tags-input-input"
          value={draft}
          placeholder={placeholder}
          disabled={disabled}
          className="min-h-5 flex-1 bg-transparent px-1 text-sm focus:outline-none"
          onChange={(e) => setDraft(e.target.value)}
          onKeyDown={handleKeyDown}
          onPaste={handlePaste}
          onBlur={() => addTag(draft)}
        />
      </div>
    )
  },
)
TagsInput.displayName = 'TagsInput'

export { TagsInput }

```

### `packages/registry-react/components/tags-input/index.ts`

```ts
export { TagsInput, type TagsInputProps } from './tags-input'

```

## tailwind

- type: `registry:style`
- description: Tailwind v4 design tokens (light + dark), motion tokens, base layer styling, and shadow utilities. Identical token set to the Vue/Nuxt registry — tokens are framework-neutral. Ships the full canonical tailwind.css as `files` content; the cssVars block stays as a merge safety net for consumers with a pre-existing globals.css.
- npm deps: `tailwindcss`, `tw-animate-css`

### `packages/registry-react/bootstrap/tailwind/tailwind.css`

```css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Anybody:wght@600;700;800&display=swap');
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --font-sans:
    'DM Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-display: 'Anybody', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --radius-sm: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  /* Motion tokens — used across every component. Calibrated against Radix,
     Material 3 and Sonner defaults. Override per component if needed. */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; /* hover, focus ring, color shifts */
  --dur-base: 200ms; /* most state changes */
  --dur-slow: 300ms; /* modal/sheet enter, tab pill slide */
  --dur-page: 250ms; /* page transition */

  /* Sage paper palette — warm OKLCH tokens with forest accent. */
  --radius: 0.3rem;
  --background: oklch(0.98 0.006 130);
  --foreground: oklch(0.2 0.012 150);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.012 150);
  --popover: oklch(0.99 0.004 130);
  --popover-foreground: oklch(0.2 0.012 150);
  --primary: oklch(0.46 0.08 145);
  --primary-foreground: oklch(0.98 0.006 130);
  --secondary: oklch(0.94 0.012 130);
  --secondary-foreground: oklch(0.24 0.014 150);
  --muted: oklch(0.95 0.01 130);
  --muted-foreground: oklch(0.48 0.014 150);
  --accent: oklch(0.92 0.02 80);
  --accent-foreground: oklch(0.24 0.014 150);
  --destructive: oklch(0.55 0.2 28);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.88 0.014 135);
  --input: oklch(0.88 0.014 135);
  --ring: oklch(0.5 0.08 150);
  /* Chart palette held as hex (not OKLCH) so ECharts' canvas renderer
   * can hex-concat opacity (`color + '40'`) for gradient fills. Browsers
   * keep `oklch(...)` strings unchanged through canvas.fillStyle and
   * getComputedStyle, breaking those concat sites. Light mode: warm
   * orange / teal / deep blue / amber / yellow. */
  --chart-1: #e76e50;
  --chart-2: #2a9d90;
  --chart-3: #264653;
  --chart-4: #e9c468;
  --chart-5: #f4a261;

  --sidebar: oklch(0.955 0.012 130);
  --sidebar-foreground: oklch(0.2 0.012 150);
  --sidebar-primary: oklch(0.46 0.08 145);
  --sidebar-primary-foreground: oklch(0.98 0.006 130);
  --sidebar-accent: oklch(0.92 0.02 80);
  --sidebar-accent-foreground: oklch(0.24 0.014 150);
  --sidebar-border: oklch(0.88 0.014 135);
  --sidebar-ring: oklch(0.5 0.08 150);

  /* App extensions (not part of shadcn) */
  --success: oklch(0.55 0.18 145);
  --warning: oklch(0.7 0.16 75);
  --info: oklch(0.55 0.22 260);
}

.dark {
  /* Sage paper palette — dark variant. */
  --background: oklch(0.16 0.01 150);
  --foreground: oklch(0.94 0.008 130);
  --card: oklch(0.2 0.012 150);
  --card-foreground: oklch(0.94 0.008 130);
  --popover: oklch(0.2 0.012 150);
  --popover-foreground: oklch(0.94 0.008 130);
  --primary: oklch(0.72 0.1 145);
  --primary-foreground: oklch(0.16 0.01 150);
  --secondary: oklch(0.27 0.012 150);
  --secondary-foreground: oklch(0.94 0.008 130);
  --muted: oklch(0.26 0.012 150);
  --muted-foreground: oklch(0.72 0.014 140);
  --accent: oklch(0.3 0.018 80);
  --accent-foreground: oklch(0.94 0.008 130);
  --destructive: oklch(0.68 0.18 25);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.6 0.1 145);
  /* Dark mode chart palette — same warm earthy family as light,
     lightened for visibility on dark backgrounds. */
  --chart-1: #e8997a;
  --chart-2: #5cbfb0;
  --chart-3: #4a6b7a;
  --chart-4: #f0d99a;
  --chart-5: #f5b87a;

  --sidebar: oklch(0.19 0.012 150);
  --sidebar-foreground: oklch(0.94 0.008 130);
  --sidebar-primary: oklch(0.72 0.1 145);
  --sidebar-primary-foreground: oklch(0.16 0.01 150);
  --sidebar-accent: oklch(0.3 0.018 80);
  --sidebar-accent-foreground: oklch(0.94 0.008 130);
  --sidebar-border: oklch(1 0 0 / 12%);
  --sidebar-ring: oklch(0.6 0.1 145);

  /* App extensions (not part of shadcn) */
  --success: oklch(0.65 0.16 145);
  --warning: oklch(0.78 0.17 75);
  --info: oklch(0.65 0.18 260);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings:
      'rlig' 1,
      'calt' 1;
  }

  /* Tailwind v4 dropped `cursor: pointer` for buttons. Restore it for all
     interactive elements (native + Reka role-based controls). Disabled
     elements stay default. */
  button:not(:disabled),
  [role='button']:not([aria-disabled='true']),
  [role='checkbox']:not([aria-disabled='true']),
  [role='radio']:not([aria-disabled='true']),
  [role='switch']:not([aria-disabled='true']),
  [role='menuitem']:not([aria-disabled='true']),
  [role='menuitemcheckbox']:not([aria-disabled='true']),
  [role='menuitemradio']:not([aria-disabled='true']),
  [role='option']:not([aria-disabled='true']),
  [role='tab']:not([aria-disabled='true']),
  summary,
  label[for],
  select:not(:disabled),
  input[type='checkbox']:not(:disabled),
  input[type='radio']:not(:disabled),
  input[type='range']:not(:disabled),
  input[type='file']:not(:disabled),
  input[type='submit']:not(:disabled),
  input[type='reset']:not(:disabled),
  input[type='button']:not(:disabled),
  input[type='color']:not(:disabled) {
    cursor: pointer;
  }

  /* Shadow tokens */
  .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  .shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  }
  .shadow-md {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
  .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  .dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  }
  .dark .shadow-xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  }
  .dark .shadow-md {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.3),
      0 2px 4px -2px rgba(0, 0, 0, 0.2);
  }
  .dark .shadow-lg {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.35),
      0 4px 6px -4px rgba(0, 0, 0, 0.25);
  }
  .dark .shadow-xl {
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.4),
      0 8px 10px -6px rgba(0, 0, 0, 0.3);
  }
}

/* Card hover lift */
[data-slot='card']:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.dark [data-slot='card']:hover {
  box-shadow: var(--shadow-md);
}

/* Subtle background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 80%, oklch(0.46 0.08 145 / 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, oklch(0.46 0.08 145 / 0.02) 0%, transparent 50%);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Reusable error-shake animation — apply class `animate-shake` on submit
   attempt only (never on blur, too aggressive). */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.animate-shake {
  animation: shake 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Global reduced-motion safety net — collapses every animation/transition
   to near-instant. Component-specific @media reduce blocks override
   timings further when needed; this is the floor. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-shake {
    animation: none;
  }
}

```

## terminal

- type: `registry:ui`
- description: Terminal/command-line display with a macOS-style title bar, command history, prompt character, dark/light themes, auto-scroll, optional typing animation, and a line slot for custom formatting.

### `packages/registry-react/components/terminal/Terminal.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface TerminalLine {
  /** Prompt prefix shown before the command. Omit for output-only lines. */
  prompt?: string
  /** Command text shown after the prompt. */
  command?: string
  /** Output lines rendered below the command. */
  output?: string
  /** Override the line type: 'command' renders prompt+command, 'output' renders plain text. */
  type?: 'command' | 'output'
}

export interface TerminalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  /** Command history to render. */
  lines: TerminalLine[]
  /** Window title shown in the title bar. Default 'bash'. */
  title?: string
  /** Prompt character. Default '$'. */
  promptChar?: string
  /** Color theme. Default 'dark'. */
  theme?: 'dark' | 'light'
  /** Auto-scroll to bottom when new lines arrive. Default true. */
  autoScroll?: boolean
  /** Animate lines typing in one-by-one. Default false. */
  typing?: boolean
  /** Typing speed in ms per line. Default 120. */
  typingSpeed?: number
  /** Max height before scrolling. Default '400px'. */
  maxHeight?: string
}

const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
  (
    {
      lines,
      title = 'bash',
      promptChar = '$',
      theme = 'dark',
      autoScroll = true,
      typing = false,
      typingSpeed = 120,
      maxHeight = '400px',
      className,
      ...props
    },
    ref,
  ) => {
    const bodyRef = React.useRef<HTMLDivElement | null>(null)
    const [visibleCount, setVisibleCount] = React.useState(typing ? 0 : lines.length)
    const typingTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)

    const resolvedLines = React.useMemo(
      () =>
        lines.map((l) => ({
          ...l,
          type: l.type ?? (l.prompt || l.command ? 'command' : 'output'),
          prompt: l.prompt ?? (l.type === 'output' ? '' : promptChar),
        })),
      [lines, promptChar],
    )

    const shownLines = resolvedLines.slice(0, visibleCount)

    const scrollToBottom = React.useCallback(() => {
      if (!autoScroll || !bodyRef.current) return
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight
    }, [autoScroll])

    // Reset/advance visible count when the lines array changes.
    React.useEffect(() => {
      if (typing) {
        // Reset typing animation when lines change.
        setVisibleCount(0)
        return
      }
      setVisibleCount(lines.length)
      // Scroll on the next paint once the new lines are rendered.
      const raf = requestAnimationFrame(scrollToBottom)
      return () => cancelAnimationFrame(raf)
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [lines.length, typing])

    // Drive the typing animation whenever visibleCount is below the total.
    React.useEffect(() => {
      if (!typing) return
      if (visibleCount >= lines.length) return

      typingTimerRef.current = setTimeout(() => {
        setVisibleCount((c) => c + 1)
        scrollToBottom()
      }, typingSpeed)

      return () => {
        if (typingTimerRef.current) {
          clearTimeout(typingTimerRef.current)
          typingTimerRef.current = null
        }
      }
    }, [typing, visibleCount, lines.length, typingSpeed, scrollToBottom])

    // Initial scroll-to-bottom for the non-typing case.
    React.useEffect(() => {
      if (!typing) scrollToBottom()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
      <div
        ref={ref}
        data-uipkge=""
        data-slot="terminal"
        data-theme={theme}
        className={cn(
          'relative overflow-hidden rounded-lg border font-mono text-sm shadow-sm',
          theme === 'dark' ? 'border-zinc-800 bg-zinc-950 text-zinc-200' : 'border-zinc-200 bg-zinc-50 text-zinc-800',
          className,
        )}
        {...props}
      >
        {/* Title bar */}
        <div
          className={cn(
            'flex items-center gap-2 border-b px-4 py-2.5',
            theme === 'dark' ? 'border-zinc-800 bg-zinc-900' : 'border-zinc-200 bg-zinc-100',
          )}
        >
          <div className="flex gap-1.5">
            <span className="size-3 rounded-full bg-red-500" />
            <span className="size-3 rounded-full bg-yellow-500" />
            <span className="size-3 rounded-full bg-green-500" />
          </div>
          <span className={cn('ml-2 text-xs', theme === 'dark' ? 'text-zinc-400' : 'text-zinc-500')}>{title}</span>
        </div>

        {/* Body */}
        <div ref={bodyRef} className="overflow-auto p-4 leading-relaxed" style={{ maxHeight }}>
          {shownLines.map((line, i) => (
            <div key={i} data-slot="terminal-line" className="break-words whitespace-pre-wrap">
              {line.type === 'command' && (
                <div data-slot="terminal-command" className="flex flex-wrap items-baseline gap-x-1.5">
                  <span
                    className={cn('shrink-0 font-semibold', theme === 'dark' ? 'text-green-400' : 'text-green-600')}
                  >
                    {line.prompt}
                  </span>
                  <span>{line.command}</span>
                </div>
              )}
              {line.output && (
                <div data-slot="terminal-output" className="text-zinc-400">
                  {line.output}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    )
  },
)
Terminal.displayName = 'Terminal'

export { Terminal }

```

### `packages/registry-react/components/terminal/index.ts`

```ts
export { Terminal, type TerminalProps, type TerminalLine } from './Terminal'

```

## testimonials-01

- type: `registry:block`
- description: Centered single-card testimonial carousel. Quote icon, large pull-quote, avatar with initials, name + role + company line. Pip row underneath flips between three testimonials with an animated active pill.
- npm deps: `lucide-react`
- registry deps: `avatar`, `card`

### `packages/registry-react/blocks/testimonials-01/Testimonials01.tsx`

```tsx
'use client'

import * as React from 'react'
import { Quote } from 'lucide-react'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'

const testimonials = [
  {
    quote:
      'We replaced four spreadsheets and two SaaS tools with this. Onboarding time dropped from 6 days to under 4 hours.',
    name: 'Aisha Rahman',
    role: 'Head of People',
    company: 'Northwind Logistics',
    initials: 'AR',
  },
  {
    quote:
      'The audit trail alone is worth it. SOC2 evidence collection went from a quarterly nightmare to a one-click export.',
    name: 'Marco Vidal',
    role: 'Director of Compliance',
    company: 'Helio Health',
    initials: 'MV',
  },
  {
    quote:
      'My favourite part is how fast it is. No spinners, no loading states. Search returns instantly across the entire org.',
    name: 'Tomoko Saito',
    role: 'IT Operations',
    company: 'Pixel & Co',
    initials: 'TS',
  },
]

export function Testimonials01() {
  const [active, setActive] = React.useState(0)

  return (
    <section className="bg-muted/30">
      <div className="mx-auto max-w-4xl px-6 py-24">
        <div className="text-center">
          <p className="text-primary text-sm font-medium tracking-widest uppercase">Testimonials</p>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">Loved by teams everywhere</h2>
        </div>

        <Card className="mt-10">
          <CardContent className="space-y-6 p-8 text-center">
            <Quote className="text-primary mx-auto size-8" />
            <p className="text-foreground text-xl leading-relaxed sm:text-2xl">
              &ldquo;{testimonials[active].quote}&rdquo;
            </p>
            <div className="flex flex-col items-center gap-2">
              <Avatar className="size-12">
                <AvatarFallback>{testimonials[active].initials}</AvatarFallback>
              </Avatar>
              <div>
                <p className="text-sm font-semibold">{testimonials[active].name}</p>
                <p className="text-muted-foreground text-xs">
                  {testimonials[active].role} · {testimonials[active].company}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="mt-6 flex justify-center gap-2">
          {testimonials.map((t, i) => (
            <button
              key={t.name}
              type="button"
              aria-label={`Show testimonial from ${t.name}`}
              aria-current={i === active}
              className={cn(
                'size-2 rounded-full transition-all duration-200',
                i === active ? 'bg-primary w-6' : 'bg-muted-foreground/30 hover:bg-muted-foreground/60',
              )}
              onClick={() => setActive(i)}
            />
          ))}
        </div>
      </div>
    </section>
  )
}

```

## textarea

- type: `registry:ui`
- description: Multi-line text input. Auto-resize variant, character counter, and the same ring/border treatment as the rest of the form primitives.
- npm deps: `lucide-react`
- registry deps: `label`

### `packages/registry-react/components/textarea/Textarea.tsx`

```tsx
'use client'

import * as React from 'react'
import { Loader, Check, AlertCircle, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'

export interface TextareaProps {
  // Core
  value?: string | number
  defaultValue?: string | number
  onValueChange?: (value: string) => void
  label?: string
  placeholder?: string
  hint?: string
  error?: string
  success?: string
  messages?: string[]
  disabled?: boolean
  readOnly?: boolean
  required?: boolean
  autoFocus?: boolean
  name?: string
  id?: string

  // Variants (Vuetify-style)
  variant?: 'outlined' | 'filled' | 'solo' | 'underlined' | 'plain'
  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
  density?: 'compact' | 'comfortable' | 'default'

  // Appearance
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'pill' | 'circle' | 'full'

  // Auto size (Ant Design API)
  autoSize?: boolean | { minRows?: number; maxRows?: number }

  // Legacy auto grow / resize
  autoGrow?: boolean
  noResize?: boolean
  autoResize?: boolean

  // Rows -- accept both number and string ("3" vs rows={3}).
  rows?: number | string
  rowHeight?: number

  // Prefix/Suffix
  prefix?: string
  suffix?: string

  // Counter (legacy)
  counter?: boolean | number

  // Show count (Ant Design API)
  showCount?: boolean | { formatter?: (count: number, maxLength?: number) => string }

  // Max length
  maxLength?: number

  // Allow clear
  allowClear?: boolean

  // Validation
  rules?: Array<(value: any) => true | string>
  errorMessages?: string | string[]
  successMessages?: string | string[]
  validateOn?: 'blur' | 'input' | 'submit' | 'lazy' | 'blurlazy' | 'inputlazy'

  // States
  loading?: boolean
  persistentHint?: boolean
  persistentError?: boolean
  persistentPlaceholder?: boolean
  persistentPrefix?: boolean
  persistentSuffix?: boolean

  // Misc
  className?: string
  inputClassName?: string
  labelClassName?: string
  hintClassName?: string
  bgColor?: string
  flat?: boolean
  bordered?: boolean

  // Browser
  spellCheck?: boolean
  autoComplete?: string

  // Direction
  direction?: 'ltr' | 'rtl'

  // Events
  onClear?: () => void
  onFocus?: () => void
  onBlur?: () => void
  onKeyDown?: () => void
  onKeyUp?: () => void

  children?: React.ReactNode
}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>((props, forwardedRef) => {
  const {
    value,
    defaultValue,
    onValueChange,
    label,
    placeholder,
    hint,
    error,
    success,
    disabled,
    readOnly,
    required,
    autoFocus,
    name,
    id,
    variant = 'outlined',
    density = 'default',
    rounded = 'none',
    autoSize,
    autoGrow = false,
    noResize = false,
    autoResize = false,
    rows = 3,
    rowHeight = 24,
    prefix,
    suffix,
    counter,
    showCount,
    maxLength,
    allowClear,
    rules,
    errorMessages,
    successMessages,
    validateOn,
    loading,
    persistentHint = false,
    persistentPrefix,
    persistentSuffix,
    className,
    inputClassName,
    labelClassName,
    hintClassName,
    bgColor,
    spellCheck,
    autoComplete,
    onClear,
    onFocus,
    onBlur,
    onKeyDown,
    onKeyUp,
    children,
  } = props

  const reactId = React.useId()
  const textareaId = id ?? `textarea-${reactId}`
  const descriptionId = `${textareaId}-description`

  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
  const setRefs = React.useCallback(
    (node: HTMLTextAreaElement | null) => {
      textareaRef.current = node
      if (typeof forwardedRef === 'function') forwardedRef(node)
      else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
    },
    [forwardedRef],
  )

  // Internal state
  const isControlled = value !== undefined
  const [internal, setInternal] = React.useState<string | number>(defaultValue ?? '')
  const internalValue = isControlled ? value! : internal

  const [focused, setFocused] = React.useState(false)
  const [internalErrorMessages, setInternalErrorMessages] = React.useState<string[]>([])
  const [validated] = React.useState(false)

  // Auto size
  const autoSizeEnabled = autoSize !== undefined
  const anyAutoResize = autoSizeEnabled || autoResize || autoGrow

  const autoSizeConfig = React.useMemo<{ minRows?: number; maxRows?: number }>(() => {
    if (typeof autoSize === 'object') return autoSize
    return {}
  }, [autoSize])

  const minHeightPx = React.useRef(0)
  const maxHeightPx = React.useRef(Infinity)

  const autoResizeFn = React.useCallback(() => {
    if (!textareaRef.current) return
    if (!anyAutoResize) return

    const el = textareaRef.current

    el.style.height = 'auto'
    let newHeight = el.scrollHeight

    if (minHeightPx.current && newHeight < minHeightPx.current) {
      newHeight = minHeightPx.current
    }

    if (newHeight > maxHeightPx.current) {
      newHeight = maxHeightPx.current
      el.style.overflowY = 'auto'
    } else {
      el.style.overflowY = 'hidden'
    }

    el.style.height = `${newHeight}px`
  }, [anyAutoResize])

  const measureHeights = React.useCallback(() => {
    if (!textareaRef.current) return
    if (!autoSizeEnabled) return

    const el = textareaRef.current
    const originalValue = el.value
    const originalRows = el.rows
    const originalOverflow = el.style.overflowY

    el.value = ''
    el.style.overflowY = 'hidden'

    const { minRows, maxRows } = autoSizeConfig

    if (minRows) {
      el.rows = minRows
      minHeightPx.current = el.scrollHeight
    } else {
      minHeightPx.current = 0
    }

    if (maxRows) {
      el.rows = maxRows
      maxHeightPx.current = el.scrollHeight
    } else {
      maxHeightPx.current = Infinity
    }

    el.value = originalValue
    el.rows = originalRows
    el.style.overflowY = originalOverflow

    autoResizeFn()
  }, [autoSizeEnabled, autoSizeConfig, autoResizeFn])

  // Auto grow functionality (legacy)
  const rowsNum = Number(rows) || 3

  const computedRows = React.useMemo(() => {
    if (autoSizeEnabled || autoResize) return rowsNum
    if (!autoGrow) return rowsNum
    if (!textareaRef.current) return rowsNum

    const lineHeight = rowHeight
    const computedHeight = textareaRef.current.scrollHeight
    const newRows = Math.ceil((computedHeight - lineHeight) / lineHeight) + 1
    return Math.max(rowsNum, newRows)
  }, [autoSizeEnabled, autoResize, autoGrow, rowsNum, rowHeight, internalValue])

  // Validation
  const validate = React.useCallback(() => {
    if (!rules || rules.length === 0) return true
    const next: string[] = []
    for (const rule of rules) {
      const result = rule(internalValue)
      if (result !== true) {
        next.push(result as string)
      }
    }
    setInternalErrorMessages(next)
    return next.length === 0
  }, [rules, internalValue])

  // Handle input
  const setValue = (next: string) => {
    if (!isControlled) setInternal(next)
    onValueChange?.(next)
  }

  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setValue(e.target.value)
    if (anyAutoResize) {
      autoResizeFn()
    }
  }

  // Handle clear
  const handleClear = () => {
    setValue('')
    onClear?.()
    requestAnimationFrame(() => {
      autoResizeFn()
      textareaRef.current?.focus()
    })
  }

  // Handle focus/blur
  const handleFocus = () => {
    setFocused(true)
    onFocus?.()
  }

  const handleBlur = () => {
    setFocused(false)
    if (validateOn === 'blur' || validateOn === 'blurlazy') {
      validate()
    }
    onBlur?.()
  }

  // Compute error/success messages
  const computedErrorMessages = React.useMemo(() => {
    if (errorMessages) {
      return Array.isArray(errorMessages) ? errorMessages : [errorMessages]
    }
    if (error) {
      return [error]
    }
    return internalErrorMessages
  }, [errorMessages, error, internalErrorMessages])

  const computedSuccessMessages = React.useMemo(() => {
    if (successMessages) {
      return Array.isArray(successMessages) ? successMessages : [successMessages]
    }
    if (success) {
      return [success]
    }
    return []
  }, [successMessages, success])

  const hasError = computedErrorMessages.length > 0
  const hasSuccess = computedSuccessMessages.length > 0 && validated

  // Counter (legacy)
  const computedCounter = React.useMemo(() => {
    if (typeof counter === 'number') return counter
    if (counter) return maxLength ?? 100
    return null
  }, [counter, maxLength])

  const currentLength = String(internalValue ?? '').length

  // Show count (Ant Design API)
  const showCountEnabled = showCount !== undefined && showCount !== false

  const showCountConfig = React.useMemo<{ formatter?: (count: number, maxLength?: number) => string }>(() => {
    if (typeof showCount === 'object') return showCount
    return {}
  }, [showCount])

  const countText = React.useMemo(() => {
    const formatter = showCountConfig.formatter
    if (formatter) {
      return formatter(currentLength, maxLength)
    }
    if (maxLength !== undefined) {
      return `${currentLength} / ${maxLength}`
    }
    return `${currentLength}`
  }, [showCountConfig, currentLength, maxLength])

  // Allow clear
  const showClear = allowClear && !disabled && !readOnly && String(internalValue ?? '').length > 0

  // Variant classes
  const variantClasses = React.useMemo(() => {
    const base = 'w-full transition-colors duration-200'

    switch (variant) {
      case 'outlined':
        return cn(
          base,
          'border-2 rounded-lg',
          focused ? 'border-primary ring-2 ring-primary/20' : 'border-input',
          hasError && 'border-destructive focus:border-destructive focus:ring-destructive/20',
        )
      case 'filled':
        return cn(
          base,
          'border-b-2 bg-muted/50 rounded-t-lg',
          focused ? 'border-primary bg-muted' : 'border-transparent',
          hasError && 'border-destructive',
        )
      case 'solo':
        return cn(
          base,
          'rounded-lg shadow-sm',
          focused ? 'shadow-md' : 'shadow-sm',
          'bg-card border border-transparent',
        )
      case 'underlined':
        return cn(
          base,
          'border-b-2 rounded-none border-x-0 border-t-0 px-0',
          focused ? 'border-primary' : 'border-muted-foreground/30',
          hasError && 'border-destructive',
        )
      case 'plain':
        return cn(base, 'border-0 bg-transparent')
      default:
        return base
    }
  }, [variant, focused, hasError])

  // Density classes
  const densityClasses = React.useMemo(() => {
    switch (density) {
      case 'compact':
        return 'text-sm min-h-[32px]'
      case 'comfortable':
        return 'text-base min-h-[40px]'
      case 'default':
      default:
        return 'text-base min-h-[48px]'
    }
  }, [density])

  // Resize classes
  const resizeClasses = React.useMemo(() => {
    if (noResize) return 'resize-none'
    if (anyAutoResize) return 'resize-none'
    return 'resize-y'
  }, [noResize, anyAutoResize])

  // Watch for programmatic value changes to trigger auto-resize
  React.useEffect(() => {
    if (anyAutoResize) {
      requestAnimationFrame(() => autoResizeFn())
    }
  }, [internalValue, anyAutoResize, autoResizeFn])

  React.useEffect(() => {
    requestAnimationFrame(() => {
      measureHeights()
      if (anyAutoResize) {
        autoResizeFn()
      }
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div className={cn('relative space-y-2', className)}>
      {/* Label */}
      {label && (
        <Label
          htmlFor={textareaId}
          className={cn(
            'text-foreground text-sm font-medium',
            labelClassName,
            focused && 'text-primary',
            hasError && 'text-destructive',
          )}
        >
          {label}
          {required && <span className="text-destructive ml-0.5">*</span>}
        </Label>
      )}

      {/* Control wrapper */}
      <div
        className={cn(
          'relative flex items-center',
          variantClasses,
          densityClasses,
          disabled && 'pointer-events-none opacity-50',
          readOnly && !disabled && 'cursor-default',
          rounded !== 'none' && `rounded-${rounded}`,
        )}
        style={bgColor ? { backgroundColor: bgColor } : undefined}
      >
        {/* Prefix */}
        {prefix && (
          <span
            className={cn(
              'text-muted-foreground pointer-events-none absolute top-3 left-3 text-sm',
              !persistentPrefix && !focused && 'opacity-50',
            )}
          >
            {prefix}
          </span>
        )}

        {/* Textarea */}
        <textarea
          id={textareaId}
          ref={setRefs}
          value={internalValue}
          placeholder={placeholder}
          disabled={disabled}
          readOnly={readOnly}
          required={required}
          name={name}
          autoComplete={autoComplete}
          autoFocus={autoFocus}
          spellCheck={spellCheck}
          maxLength={maxLength}
          rows={computedRows}
          aria-describedby={descriptionId}
          aria-invalid={hasError}
          className={cn(
            'w-full flex-1 resize-y bg-transparent outline-none',
            densityClasses,
            resizeClasses,
            prefix ? 'pl-16' : 'pl-3',
            suffix ? 'pr-16' : showClear ? 'pr-10' : 'pr-3',
            showCountEnabled && 'pb-6',
            'py-2',
            inputClassName,
          )}
          onChange={handleInput}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onKeyDown={() => onKeyDown?.()}
          onKeyUp={() => onKeyUp?.()}
        />

        {/* Suffix */}
        {suffix && (
          <span
            className={cn(
              'text-muted-foreground pointer-events-none absolute top-3 right-3 text-sm',
              !persistentSuffix && !focused && 'opacity-50',
            )}
          >
            {suffix}
          </span>
        )}

        {/* Clear button */}
        {showClear && (
          <button
            type="button"
            tabIndex={-1}
            className={cn(
              'text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-3 flex items-center justify-center rounded-sm transition-colors focus-visible:ring-2 focus-visible:outline-none',
              suffix ? 'right-10' : 'right-3',
            )}
            onClick={handleClear}
          >
            <X className="size-4" aria-hidden="true" />
          </button>
        )}

        {/* Loading spinner */}
        {loading && (
          <div className="absolute top-3 right-3 flex items-center justify-center">
            <Loader className="text-muted-foreground size-4 animate-spin" />
          </div>
        )}

        {/* Success/Error indicators */}
        {hasSuccess && !loading && (
          <div className="absolute top-3 right-3 flex items-center justify-center text-[var(--success)]">
            <Check className="size-4" aria-hidden="true" />
          </div>
        )}
        {hasError && !loading && (
          <div className="text-destructive absolute top-3 right-3 flex items-center justify-center">
            <AlertCircle className="size-4" aria-hidden="true" />
          </div>
        )}

        {/* Show count */}
        {showCountEnabled && (
          <div
            className={cn(
              'text-muted-foreground pointer-events-none absolute right-3 bottom-1.5 text-xs',
              maxLength !== undefined && currentLength > maxLength && 'text-destructive',
            )}
          >
            {countText}
          </div>
        )}
      </div>

      {/* Messages (hint, error, success) */}
      <div className="mt-1.5">
        {/* Hint */}
        {hint && (!hasError || persistentHint) && !focused && (
          <p className={cn('text-muted-foreground text-sm', hintClassName)}>{hint}</p>
        )}

        {/* Error messages */}
        {computedErrorMessages.map((msg, i) => (
          <p key={`error-${i}`} className="text-destructive flex items-center gap-1 text-sm">
            <AlertCircle className="size-3 shrink-0" aria-hidden="true" />
            {msg}
          </p>
        ))}

        {/* Success messages */}
        {computedSuccessMessages.map((msg, i) => (
          <p key={`success-${i}`} className="flex items-center gap-1 text-sm text-[var(--success)]">
            <Check className="size-3 shrink-0" />
            {msg}
          </p>
        ))}

        {/* Counter (legacy) */}
        {computedCounter !== null && (
          <div
            className={cn(
              'text-muted-foreground mt-1 text-right text-xs',
              currentLength > computedCounter && 'text-destructive',
            )}
          >
            {currentLength} / {computedCounter}
          </div>
        )}
      </div>

      {children}
    </div>
  )
})
Textarea.displayName = 'Textarea'

export { Textarea }

```

### `packages/registry-react/components/textarea/index.ts`

```ts
export { Textarea, type TextareaProps } from './Textarea'

```

## theme-customize

- type: `registry:block`
- description: Compact theme customization popover. Light/Dark/System mode (via next-themes), six curated color presets that overwrite `--primary` / `--primary-foreground` / `--ring`, and a radius slider bound to `--radius`. Persists to localStorage and exposes a one-click Copy CSS for the active token set.
- npm deps: `lucide-react`, `next-themes`
- registry deps: `button`, `slider`, `sheet`, `use-theme`

### `packages/registry-react/blocks/theme-customize/ThemeCustomize.tsx`

```tsx
'use client'

import * as React from 'react'
import { useTheme } from 'next-themes'
import { Check, Copy, Download, Monitor, Moon, Palette, Pipette, RotateCcw, Shuffle, Sun, type LucideIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Slider } from '@/components/ui/slider'
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'

type Mode = 'light' | 'dark' | 'system'
type PresetKey =
  | 'neutral'
  | 'zinc'
  | 'slate'
  | 'stone'
  | 'rose'
  | 'red'
  | 'orange'
  | 'amber'
  | 'yellow'
  | 'lime'
  | 'emerald'
  | 'teal'
  | 'cyan'
  | 'sky'
  | 'blue'
  | 'indigo'
  | 'violet'
  | 'purple'
  | 'fuchsia'
  | 'pink'
  | 'custom'
type ThemeKey =
  | 'newyear'
  | 'sunset'
  | 'cyberpunk'
  | 'forest'
  | 'ocean'
  | 'pastel'
  | 'mono'
  | 'brutalist'
  | 'notebook'
  | 'caffeine'
  | 'midnight'
  | 'mocha'
  | 'retro'
  | 'tangerine'
  | 'quartz'
  | 'cosmic'
  | 'sage'
  | 'marble'
  | 'ember'
  | 'amethyst'
  | 'rainfall'
  | 'peach'
  | 'tropical'
  | 'vintage'
type FontKey = 'sans' | 'serif' | 'mono'
type TintKey = 'pure' | 'cool' | 'warm'

interface Preset {
  key: PresetKey
  label: string
  swatch: string
  light: { primary: string; primaryForeground: string; ring: string }
  dark: { primary: string; primaryForeground: string; ring: string }
}

function mkPreset(key: PresetKey, label: string, hue: number, l = 0.6, c = 0.2, fg = 'oklch(0.985 0 0)'): Preset {
  const swatch = `oklch(${l} ${c} ${hue})`
  return {
    key,
    label,
    swatch,
    light: { primary: swatch, primaryForeground: fg, ring: swatch },
    dark: { primary: swatch, primaryForeground: fg, ring: swatch },
  }
}

const PRESETS: Preset[] = [
  // Greyscale family
  {
    key: 'neutral',
    label: 'Neutral',
    swatch: 'oklch(0.205 0 0)',
    light: { primary: 'oklch(0.205 0 0)', primaryForeground: 'oklch(0.985 0 0)', ring: 'oklch(0.708 0 0)' },
    dark: { primary: 'oklch(0.922 0 0)', primaryForeground: 'oklch(0.205 0 0)', ring: 'oklch(0.556 0 0)' },
  },
  {
    key: 'zinc',
    label: 'Zinc',
    swatch: 'oklch(0.21 0.006 285.885)',
    light: {
      primary: 'oklch(0.21 0.006 285.885)',
      primaryForeground: 'oklch(0.985 0 0)',
      ring: 'oklch(0.705 0.015 286.067)',
    },
    dark: {
      primary: 'oklch(0.92 0.004 286.32)',
      primaryForeground: 'oklch(0.21 0.006 285.885)',
      ring: 'oklch(0.552 0.016 285.938)',
    },
  },
  {
    key: 'slate',
    label: 'Slate',
    swatch: 'oklch(0.21 0.034 264.665)',
    light: {
      primary: 'oklch(0.21 0.034 264.665)',
      primaryForeground: 'oklch(0.985 0 0)',
      ring: 'oklch(0.554 0.046 257.417)',
    },
    dark: {
      primary: 'oklch(0.929 0.013 255.508)',
      primaryForeground: 'oklch(0.21 0.034 264.665)',
      ring: 'oklch(0.554 0.046 257.417)',
    },
  },
  {
    key: 'stone',
    label: 'Stone',
    swatch: 'oklch(0.216 0.006 56.043)',
    light: {
      primary: 'oklch(0.216 0.006 56.043)',
      primaryForeground: 'oklch(0.985 0.001 106.423)',
      ring: 'oklch(0.553 0.013 58.071)',
    },
    dark: {
      primary: 'oklch(0.923 0.003 48.717)',
      primaryForeground: 'oklch(0.216 0.006 56.043)',
      ring: 'oklch(0.553 0.013 58.071)',
    },
  },
  // Warm
  mkPreset('rose', 'Rose', 16.439, 0.645, 0.246),
  mkPreset('red', 'Red', 27.325, 0.637, 0.237),
  mkPreset('orange', 'Orange', 47.604, 0.705, 0.213),
  mkPreset('amber', 'Amber', 70.08, 0.769, 0.188),
  mkPreset('yellow', 'Yellow', 95.277, 0.795, 0.184, 'oklch(0.286 0.066 53.813)'),
  // Greens
  mkPreset('lime', 'Lime', 130.85, 0.768, 0.233, 'oklch(0.274 0.072 132.109)'),
  mkPreset('emerald', 'Emerald', 162.48, 0.696, 0.17),
  mkPreset('teal', 'Teal', 184.704, 0.704, 0.14, 'oklch(0.984 0.014 180.72)'),
  // Cool
  mkPreset('cyan', 'Cyan', 221.723, 0.715, 0.143, 'oklch(0.302 0.056 229.695)'),
  mkPreset('sky', 'Sky', 235.711, 0.685, 0.169),
  mkPreset('blue', 'Blue', 264.376, 0.546, 0.245),
  mkPreset('indigo', 'Indigo', 277.117, 0.511, 0.262),
  // Purples
  mkPreset('violet', 'Violet', 293.009, 0.541, 0.281),
  mkPreset('purple', 'Purple', 303.9, 0.558, 0.288),
  mkPreset('fuchsia', 'Fuchsia', 322.16, 0.667, 0.295),
  mkPreset('pink', 'Pink', 354.308, 0.656, 0.241),
]

type CategoryKey = 'featured' | 'editorial' | 'bold' | 'cool' | 'soft'

interface ThemePreset {
  key: ThemeKey
  label: string
  emoji: string
  category: CategoryKey
  mode: Mode
  color: PresetKey
  tint: TintKey
  font: FontKey
  radius: number
}

const CATEGORY_LABELS: Record<CategoryKey, string> = {
  featured: 'Featured',
  editorial: 'Editorial',
  bold: 'Bold',
  cool: 'Cool',
  soft: 'Soft',
}

const THEMES: ThemePreset[] = [
  { key: 'newyear', label: 'New Year', emoji: '✨', category: 'featured', mode: 'dark', color: 'amber', tint: 'warm', font: 'serif', radius: 0.75 },
  { key: 'sunset', label: 'Sunset', emoji: '🌅', category: 'featured', mode: 'light', color: 'orange', tint: 'warm', font: 'sans', radius: 0.625 },
  { key: 'cyberpunk', label: 'Cyberpunk', emoji: '⚡', category: 'featured', mode: 'dark', color: 'fuchsia', tint: 'cool', font: 'mono', radius: 0.125 },
  { key: 'forest', label: 'Forest', emoji: '🌿', category: 'featured', mode: 'light', color: 'emerald', tint: 'warm', font: 'serif', radius: 0.5 },
  { key: 'ocean', label: 'Ocean', emoji: '🌊', category: 'featured', mode: 'dark', color: 'cyan', tint: 'cool', font: 'sans', radius: 0.5 },
  { key: 'pastel', label: 'Pastel', emoji: '🌸', category: 'featured', mode: 'light', color: 'rose', tint: 'pure', font: 'sans', radius: 0.875 },
  { key: 'mono', label: 'Mono', emoji: '◼', category: 'editorial', mode: 'light', color: 'neutral', tint: 'pure', font: 'mono', radius: 0 },
  { key: 'brutalist', label: 'Brutalist', emoji: '▢', category: 'editorial', mode: 'light', color: 'neutral', tint: 'pure', font: 'mono', radius: 0 },
  { key: 'notebook', label: 'Notebook', emoji: '📓', category: 'editorial', mode: 'light', color: 'stone', tint: 'warm', font: 'serif', radius: 0.25 },
  { key: 'vintage', label: 'Vintage', emoji: '📜', category: 'editorial', mode: 'light', color: 'amber', tint: 'warm', font: 'serif', radius: 0.375 },
  { key: 'caffeine', label: 'Caffeine', emoji: '☕', category: 'editorial', mode: 'light', color: 'orange', tint: 'warm', font: 'serif', radius: 0.5 },
  { key: 'marble', label: 'Marble', emoji: '🏛', category: 'editorial', mode: 'light', color: 'stone', tint: 'pure', font: 'serif', radius: 0.25 },
  { key: 'retro', label: 'Retro', emoji: '🎮', category: 'bold', mode: 'dark', color: 'lime', tint: 'cool', font: 'mono', radius: 0 },
  { key: 'tangerine', label: 'Tangerine', emoji: '🍊', category: 'bold', mode: 'light', color: 'orange', tint: 'pure', font: 'sans', radius: 0.75 },
  { key: 'ember', label: 'Ember', emoji: '🔥', category: 'bold', mode: 'dark', color: 'red', tint: 'warm', font: 'sans', radius: 0.375 },
  { key: 'tropical', label: 'Tropical', emoji: '🌴', category: 'bold', mode: 'light', color: 'teal', tint: 'cool', font: 'sans', radius: 0.625 },
  { key: 'midnight', label: 'Midnight', emoji: '🌃', category: 'cool', mode: 'dark', color: 'indigo', tint: 'cool', font: 'sans', radius: 0.5 },
  { key: 'cosmic', label: 'Cosmic', emoji: '🌌', category: 'cool', mode: 'dark', color: 'violet', tint: 'cool', font: 'sans', radius: 0.625 },
  { key: 'rainfall', label: 'Rainfall', emoji: '🌧', category: 'cool', mode: 'dark', color: 'sky', tint: 'cool', font: 'sans', radius: 0.5 },
  { key: 'amethyst', label: 'Amethyst', emoji: '💜', category: 'cool', mode: 'dark', color: 'purple', tint: 'cool', font: 'sans', radius: 0.625 },
  { key: 'sage', label: 'Sage', emoji: '🌱', category: 'soft', mode: 'light', color: 'emerald', tint: 'warm', font: 'serif', radius: 0.75 },
  { key: 'peach', label: 'Peach', emoji: '🍑', category: 'soft', mode: 'light', color: 'amber', tint: 'warm', font: 'sans', radius: 0.875 },
  { key: 'quartz', label: 'Quartz', emoji: '💎', category: 'soft', mode: 'light', color: 'violet', tint: 'cool', font: 'sans', radius: 0.875 },
  { key: 'mocha', label: 'Mocha', emoji: '🌹', category: 'soft', mode: 'light', color: 'rose', tint: 'warm', font: 'serif', radius: 0.5 },
]

const FONTS: { key: FontKey; label: string; stack: string }[] = [
  { key: 'sans', label: 'Sans', stack: '"DM Sans", ui-sans-serif, system-ui, sans-serif' },
  { key: 'serif', label: 'Serif', stack: '"Source Serif Pro", ui-serif, Georgia, serif' },
  { key: 'mono', label: 'Mono', stack: '"JetBrains Mono", ui-monospace, monospace' },
]

const TINTS: { key: TintKey; label: string; light: string; dark: string }[] = [
  { key: 'pure', label: 'Pure', light: 'oklch(1 0 0)', dark: 'oklch(0.145 0 0)' },
  { key: 'cool', label: 'Cool', light: 'oklch(0.99 0.005 240)', dark: 'oklch(0.16 0.008 250)' },
  { key: 'warm', label: 'Warm', light: 'oklch(0.99 0.005 70)', dark: 'oklch(0.16 0.008 60)' },
]

const STORAGE_KEY = 'uipkge-theme-customize'

const modes: { value: Mode; label: string; icon: LucideIcon }[] = [
  { value: 'light', label: 'Light', icon: Sun },
  { value: 'dark', label: 'Dark', icon: Moon },
  { value: 'system', label: 'System', icon: Monitor },
]

function isDarkActive(): boolean {
  if (typeof window === 'undefined') return false
  return document.documentElement.classList.contains('dark')
}

export function ThemeCustomize() {
  const { theme, setTheme } = useTheme()
  const mode = (theme as Mode) ?? 'system'

  const [preset, setPreset] = React.useState<PresetKey>('neutral')
  const [customColor, setCustomColor] = React.useState<string>('#ec4899')
  const [font, setFont] = React.useState<FontKey>('sans')
  const [tint, setTint] = React.useState<TintKey>('pure')
  const [radius, setRadius] = React.useState(0.3)
  const [copied, setCopied] = React.useState(false)
  const [exported, setExported] = React.useState(false)
  const [themeSearch, setThemeSearch] = React.useState('')
  const [sheetOpen, setSheetOpen] = React.useState(false)

  const activeTheme = React.useMemo<ThemePreset | null>(() => {
    // Radius isn't part of the preset signature any more (it stays
    // user-controlled), so the match only checks the four token axes.
    return (
      THEMES.find((t) => t.mode === mode && t.color === preset && t.tint === tint && t.font === font) ?? null
    )
  }, [mode, preset, tint, font])

  const filteredThemes = React.useMemo(() => {
    const q = themeSearch.trim().toLowerCase()
    if (!q) return THEMES
    return THEMES.filter((t) => t.label.toLowerCase().includes(q) || t.key.includes(q))
  }, [themeSearch])

  const themesByCategory = React.useMemo<{ key: CategoryKey; label: string; items: ThemePreset[] }[]>(() => {
    const order: CategoryKey[] = ['featured', 'editorial', 'bold', 'cool', 'soft']
    return order
      .map((c) => ({
        key: c,
        label: CATEGORY_LABELS[c],
        items: filteredThemes.filter((t) => t.category === c),
      }))
      .filter((g) => g.items.length > 0)
  }, [filteredThemes])

  const applyPreset = React.useCallback(
    (key: PresetKey) => {
      if (typeof window === 'undefined') return
      const root = document.documentElement
      if (key === 'custom') {
        root.style.setProperty('--primary', customColor)
        root.style.setProperty('--primary-foreground', isDarkActive() ? 'oklch(0.985 0 0)' : 'oklch(0.985 0 0)')
        root.style.setProperty('--ring', customColor)
        return
      }
      const found = PRESETS.find((p) => p.key === key)
      if (!found) return
      const tokens = isDarkActive() ? found.dark : found.light
      root.style.setProperty('--primary', tokens.primary)
      root.style.setProperty('--primary-foreground', tokens.primaryForeground)
      root.style.setProperty('--ring', tokens.ring)
    },
    [customColor],
  )

  function applyTint(key: TintKey) {
    if (typeof window === 'undefined') return
    const t = TINTS.find((x) => x.key === key)
    if (!t) return
    document.documentElement.style.setProperty('--background', isDarkActive() ? t.dark : t.light)
  }

  function applyFont(key: FontKey) {
    if (typeof window === 'undefined') return
    const f = FONTS.find((x) => x.key === key)
    if (!f) return
    document.documentElement.style.setProperty('--font-sans', f.stack)
  }

  function applyRadius(rem: number) {
    if (typeof window === 'undefined') return
    document.documentElement.style.setProperty('--radius', `${rem}rem`)
  }

  const save = React.useCallback(() => {
    try {
      localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({ preset, customColor, font, tint, radius }),
      )
    } catch {
      // ignore
    }
  }, [preset, customColor, font, tint, radius])

  function applyTheme(t: ThemePreset) {
    // Themes drive mode / color / tint / font. Radius is treated as a
    // user-controlled value (default 0.3) and is not changed by presets.
    setTheme(t.mode)
    setPreset(t.color)
    setTint(t.tint)
    setFont(t.font)
  }

  function applyRandomTheme() {
    const candidates = THEMES.filter((t) => t.key !== activeTheme?.key)
    const pick = candidates[Math.floor(Math.random() * candidates.length)]
    if (pick) applyTheme(pick)
  }

  function reset() {
    setPreset('neutral')
    setCustomColor('#ec4899')
    setFont('sans')
    setTint('pure')
    setRadius(0.3)
    const root = document.documentElement
    ;['--primary', '--primary-foreground', '--ring', '--background', '--font-sans', '--radius'].forEach((p) =>
      root.style.removeProperty(p),
    )
    try {
      localStorage.removeItem(STORAGE_KEY)
    } catch {
      // ignore
    }
  }

  function buildCss(): string {
    const found = PRESETS.find((p) => p.key === preset) ?? PRESETS[0]
    const isCustom = preset === 'custom'
    const tokens = isDarkActive() ? found.dark : found.light
    const t = TINTS.find((x) => x.key === tint) ?? TINTS[0]
    const f = FONTS.find((x) => x.key === font) ?? FONTS[0]
    const primary = isCustom ? customColor : tokens.primary
    const primaryFg = isCustom ? 'oklch(0.985 0 0)' : tokens.primaryForeground
    const ring = isCustom ? customColor : tokens.ring
    return `:root {
  --background: ${isDarkActive() ? t.dark : t.light};
  --primary: ${primary};
  --primary-foreground: ${primaryFg};
  --ring: ${ring};
  --radius: ${radius}rem;
  --font-sans: ${f.stack};
}`
  }

  async function copyCss() {
    try {
      await navigator.clipboard.writeText(buildCss())
      setCopied(true)
      setTimeout(() => setCopied(false), 1600)
    } catch {
      // ignore
    }
  }

  function exportJson() {
    const blob = new Blob(
      [JSON.stringify({ preset, customColor, font, tint, radius, css: buildCss() }, null, 2)],
      { type: 'application/json' },
    )
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'theme.json'
    a.click()
    URL.revokeObjectURL(url)
    setExported(true)
    setTimeout(() => setExported(false), 1600)
  }

  // Smoothly fade color changes on the whole document. Toggled briefly
  // during apply* so users don't see a hard snap between themes.
  function pulseTransition() {
    if (typeof document === 'undefined') return
    const root = document.documentElement
    root.style.transition = 'background-color 240ms ease, color 240ms ease'
    window.setTimeout(() => {
      root.style.transition = ''
    }, 300)
  }

  // Load persisted state + apply on mount; wire the Cmd/Ctrl+J shortcut.
  React.useEffect(() => {
    try {
      const raw = localStorage.getItem(STORAGE_KEY)
      if (raw) {
        const parsed = JSON.parse(raw)
        if (parsed.preset) setPreset(parsed.preset)
        if (parsed.customColor) setCustomColor(parsed.customColor)
        if (parsed.font) setFont(parsed.font)
        if (parsed.tint) setTint(parsed.tint)
        if (typeof parsed.radius === 'number') setRadius(parsed.radius)
      }
    } catch {
      // ignore
    }

    function onKeydown(e: KeyboardEvent) {
      // Cmd/Ctrl + J -> toggle the customizer
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') {
        e.preventDefault()
        setSheetOpen((v) => !v)
      }
    }
    if (typeof window !== 'undefined') window.addEventListener('keydown', onKeydown)
    return () => {
      if (typeof window !== 'undefined') window.removeEventListener('keydown', onKeydown)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  // watch([preset, customColor]) -> applyPreset + save
  React.useEffect(() => {
    applyPreset(preset)
    save()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [preset, customColor])

  // watch(font) -> applyFont + save
  React.useEffect(() => {
    applyFont(font)
    save()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [font])

  // watch(tint) -> applyTint + save
  React.useEffect(() => {
    applyTint(tint)
    save()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tint])

  // watch(radius) -> applyRadius + save
  React.useEffect(() => {
    applyRadius(radius)
    save()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [radius])

  // watch(theme) -> re-apply preset + tint on next tick
  React.useEffect(() => {
    setTimeout(() => {
      applyPreset(preset)
      applyTint(tint)
    }, 0)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [theme])

  // watch([preset, customColor, font, tint, radius, theme]) -> pulseTransition
  React.useEffect(() => {
    pulseTransition()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [preset, customColor, font, tint, radius, theme])

  return (
    <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
      <SheetTrigger asChild>
        <Button variant="outline" size="sm" className="gap-2">
          <Palette className="size-4" />
          <span className="hidden sm:inline">Customize</span>
          <kbd className="bg-muted text-muted-foreground hidden rounded px-1 py-0.5 text-[10px] font-medium sm:inline-block">
            ⌘J
          </kbd>
        </Button>
      </SheetTrigger>
      <SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
        <SheetHeader className="border-b px-6 py-4">
          <div className="flex items-center justify-between gap-3">
            <SheetTitle className="flex items-center gap-2 text-base">
              {' '}
              <Palette className="size-4" /> Customize{' '}
            </SheetTitle>
            {/* Active theme chip */}
            {activeTheme ? (
              <span className="bg-muted text-foreground inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium">
                <span className="text-[13px] leading-none">{activeTheme.emoji}</span>
                {activeTheme.label}
              </span>
            ) : (
              <span className="text-muted-foreground bg-muted/50 rounded-full px-2 py-0.5 text-[11px] font-medium">
                Custom
              </span>
            )}
          </div>
          <SheetDescription className="text-xs">
            Live-edit tokens. Changes write to <code className="font-mono">:root</code> and persist locally.
          </SheetDescription>
          {/* Quick actions */}
          <div className="mt-2 flex gap-2">
            <Button variant="outline" size="xs" className="gap-1.5" onClick={applyRandomTheme}>
              <Shuffle className="size-3" /> Surprise me
            </Button>
          </div>
        </SheetHeader>
        <div className="flex-1 overflow-y-auto px-6 py-5">
          <div className="space-y-6">
            {/* Curated themes */}
            <div>
              <div className="mb-2 flex items-baseline justify-between">
                <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">Themes</span>
                <span className="text-muted-foreground text-[10px]">
                  {filteredThemes.length}
                  {themeSearch && <span> / {THEMES.length}</span>} presets
                </span>
              </div>

              {/* Search */}
              <div className="relative mb-3">
                <input
                  value={themeSearch}
                  onChange={(e) => setThemeSearch(e.target.value)}
                  type="search"
                  placeholder="Search themes..."
                  className="border-input bg-background focus-visible:ring-ring h-8 w-full rounded-md border pr-2 pl-7 text-xs outline-none focus-visible:ring-2"
                />
                <svg
                  viewBox="0 0 24 24"
                  className="text-muted-foreground absolute top-1/2 left-2 size-3.5 -translate-y-1/2"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <circle cx="11" cy="11" r="7" />
                  <path d="m21 21-4.3-4.3" />
                </svg>
              </div>

              {/* Categorized groups */}
              <div className="space-y-4">
                {themesByCategory.map((group) => (
                  <div key={group.key}>
                    <div className="text-muted-foreground/70 mb-1.5 text-[10px] font-medium tracking-wider uppercase">
                      {group.label}
                    </div>
                    <div className="grid grid-cols-3 gap-2">
                      {group.items.map((t) => (
                        <button
                          key={t.key}
                          type="button"
                          title={`${t.mode} · ${t.color} · ${t.font} · r=${t.radius}`}
                          aria-pressed={activeTheme?.key === t.key}
                          className={[
                            'group relative flex flex-col overflow-hidden rounded-lg border text-left transition-all',
                            activeTheme?.key === t.key
                              ? 'ring-ring ring-offset-background border-transparent ring-2 ring-offset-2'
                              : 'hover:scale-[1.03] hover:shadow-md',
                          ].join(' ')}
                          onClick={() => applyTheme(t)}
                        >
                          {/* Mini-preview window */}
                          <div
                            className="relative h-14 px-2 py-1.5"
                            style={{
                              background: (TINTS.find((x) => x.key === t.tint) || ({} as Record<string, string>))[
                                t.mode === 'dark' ? 'dark' : 'light'
                              ],
                              color: t.mode === 'dark' ? 'oklch(0.985 0 0)' : 'oklch(0.205 0 0)',
                            }}
                          >
                            {/* Top row: dot + brand emoji */}
                            <div className="flex items-center justify-between">
                              <div className="flex gap-0.5">
                                <span className="size-1.5 rounded-full opacity-40" style={{ background: 'currentColor' }} />
                                <span className="size-1.5 rounded-full opacity-25" style={{ background: 'currentColor' }} />
                                <span className="size-1.5 rounded-full opacity-15" style={{ background: 'currentColor' }} />
                              </div>
                              <span className="text-[10px] leading-none">{t.emoji}</span>
                            </div>
                            {/* Mini button + chip preview */}
                            <div className="mt-2 flex items-center gap-1">
                              <span
                                className="inline-block h-3 px-1.5 text-[8px] leading-3 font-semibold"
                                style={{
                                  background: PRESETS.find((p) => p.key === t.color)?.swatch,
                                  color: 'oklch(0.985 0 0)',
                                  borderRadius: `${Math.min(t.radius, 0.5)}rem`,
                                  fontFamily: FONTS.find((f) => f.key === t.font)?.stack,
                                }}
                              >
                                Aa
                              </span>
                              <span className="block h-1 flex-1 rounded-full opacity-30" style={{ background: 'currentColor' }} />
                            </div>
                            {/* Lower text bar */}
                            <div className="mt-1.5 flex gap-1">
                              <span className="block h-0.5 w-3 rounded-full opacity-20" style={{ background: 'currentColor' }} />
                              <span className="block h-0.5 w-5 rounded-full opacity-15" style={{ background: 'currentColor' }} />
                            </div>
                          </div>
                          {/* Label strip */}
                          <div className="bg-muted/40 flex items-center justify-between px-2 py-1">
                            <span className="text-[10px] leading-none font-medium">{t.label}</span>
                            {activeTheme?.key === t.key && <Check className="text-primary size-3" />}
                          </div>
                        </button>
                      ))}
                    </div>
                  </div>
                ))}
                {filteredThemes.length === 0 && (
                  <div className="text-muted-foreground py-6 text-center text-xs">
                    No themes match "<span className="font-mono">{themeSearch}</span>"
                  </div>
                )}
              </div>
            </div>

            {/* Mode */}
            <div>
              <div className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Mode</div>
              <div className="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
                {modes.map((m) => {
                  const Icon = m.icon
                  return (
                    <button
                      key={m.value}
                      type="button"
                      aria-pressed={mode === m.value}
                      className={[
                        'flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-medium transition-colors',
                        mode === m.value ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                      ].join(' ')}
                      onClick={() => setTheme(m.value)}
                    >
                      <Icon className="size-3.5" />
                      {m.label}
                    </button>
                  )
                })}
              </div>
            </div>

            {/* Color */}
            <div>
              <div className="mb-2 flex items-baseline justify-between">
                <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">Color</span>
                <span className="text-muted-foreground text-[10px]">{PRESETS.length} options</span>
              </div>
              <div className="grid grid-cols-10 gap-1.5">
                {PRESETS.map((p) => (
                  <button
                    key={p.key}
                    type="button"
                    aria-label={p.label}
                    aria-pressed={preset === p.key}
                    title={p.label}
                    className={[
                      'group ring-offset-background relative aspect-square rounded-md transition-all',
                      preset === p.key ? 'ring-ring ring-2 ring-offset-2' : 'hover:scale-110',
                    ].join(' ')}
                    style={{ background: p.swatch }}
                    onClick={() => setPreset(p.key)}
                  >
                    {preset === p.key && (
                      <Check className="absolute inset-0 m-auto size-3 text-white mix-blend-difference" />
                    )}
                  </button>
                ))}

                {/* Custom color slot */}
                <label
                  className={[
                    'relative flex aspect-square cursor-pointer items-center justify-center rounded-md border transition-all',
                    preset === 'custom'
                      ? 'ring-ring ring-offset-background border-transparent ring-2 ring-offset-2'
                      : 'border-dashed hover:scale-110',
                  ].join(' ')}
                  style={preset === 'custom' ? { background: customColor } : {}}
                  aria-label="Custom color"
                  title="Custom color"
                >
                  <input
                    type="color"
                    value={customColor}
                    className="sr-only"
                    onChange={(e) => {
                      setCustomColor(e.target.value)
                      setPreset('custom')
                    }}
                  />
                  {preset !== 'custom' ? (
                    <Pipette className="text-muted-foreground size-3" />
                  ) : (
                    <Check className="size-3 text-white mix-blend-difference" />
                  )}
                </label>
              </div>
            </div>

            {/* Surface tint */}
            <div>
              <div className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Surface</div>
              <div className="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
                {TINTS.map((t) => (
                  <button
                    key={t.key}
                    type="button"
                    aria-pressed={tint === t.key}
                    className={[
                      'rounded px-2 py-1.5 text-xs font-medium transition-colors',
                      tint === t.key ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                    ].join(' ')}
                    onClick={() => setTint(t.key)}
                  >
                    {t.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Font */}
            <div>
              <div className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Font</div>
              <div className="bg-muted/50 grid grid-cols-3 gap-1 rounded-md p-1">
                {FONTS.map((f) => (
                  <button
                    key={f.key}
                    type="button"
                    aria-pressed={font === f.key}
                    className={[
                      'rounded px-2 py-1.5 text-xs font-medium transition-colors',
                      font === f.key ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground',
                    ].join(' ')}
                    style={{ fontFamily: f.stack }}
                    onClick={() => setFont(f.key)}
                  >
                    {f.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Radius */}
            <div>
              <div className="mb-2 flex items-baseline justify-between">
                <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">Radius</span>
                <span className="text-muted-foreground font-mono text-[10px]">{radius.toFixed(2)}rem</span>
              </div>
              <Slider value={[radius]} min={0} max={1} step={0.05} onValueChange={([v]) => setRadius(v)} />
              <div className="text-muted-foreground mt-1 flex justify-between text-[10px]">
                <span>0</span>
                <span>0.5</span>
                <span>1</span>
              </div>
            </div>

            {/* Live preview */}
            <div>
              <div className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">Preview</div>
              <div className="bg-card space-y-2.5 rounded-lg border p-3">
                <div className="flex items-center gap-2">
                  <Button size="sm" className="text-xs">
                    Primary
                  </Button>
                  <Button size="sm" variant="outline" className="text-xs">
                    Outline
                  </Button>
                  <span className="bg-primary/10 text-primary rounded-md px-2 py-0.5 text-[10px] font-medium">Badge</span>
                </div>
                <div className="ring-ring/40 bg-background border-input flex h-8 items-center rounded-md border px-2 text-xs focus-within:ring-2">
                  Input sample
                </div>
                <p className="text-muted-foreground text-[11px] leading-relaxed">
                  The quick brown fox jumps over the lazy dog.
                </p>
              </div>
            </div>
          </div>
        </div>
        {/* Footer actions (sticky bottom) */}
        <div className="bg-background/95 flex gap-2 border-t px-6 py-3 backdrop-blur">
          <Button variant="ghost" size="sm" className="flex-1 gap-1.5" onClick={reset}>
            <RotateCcw className="size-3.5" /> Reset
          </Button>
          <Button variant="outline" size="sm" className="flex-1 gap-1.5" onClick={exportJson}>
            <Download className="size-3.5" />
            {exported ? 'Saved' : 'Export'}
          </Button>
          <Button variant="default" size="sm" className="flex-1 gap-1.5" onClick={copyCss}>
            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
            {copied ? 'Copied' : 'Copy CSS'}
          </Button>
        </div>
      </SheetContent>
    </Sheet>
  )
}

```

### `packages/registry-react/blocks/theme-customize/page.tsx`

```tsx
// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/theme-customize.json`.
// Visit /theme-customize-demo after install.
import { ThemeCustomize } from '@/components/blocks/ThemeCustomize'

export default function Page() {
  return (
    <div className="bg-background min-h-svh">
      <header className="border-border border-b px-8 py-4">
        <h1 className="text-muted-foreground font-mono text-sm tracking-widest uppercase">theme-customize demo</h1>
      </header>
      <main className="p-8">
        <ThemeCustomize />
      </main>
    </div>
  )
}
```

## theme-river

- type: `registry:ui`
- description: React mirror of @uipkge/theme-river — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/theme-river/ThemeRiver.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// ThemeRiver
// ─────────────────────────────────────────────────────────────────────────

export interface ThemeRiverProps {
  /** `[time, value, series]` tuples. Time can be a date string or number. */
  data: [string | number, number, string][]
  height?: number | string
  option?: any
  className?: string
}

export const ThemeRiver = React.forwardRef<HTMLDivElement, ThemeRiverProps>(
  ({ data, height = 320, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'themeRiver',
          data,
          label: { show: false },
          emphasis: { itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.2)' } },
        },
      ]

      const userOption: any = option ?? {}
      const {
        series: userSeries,
        singleAxis: userSingleAxis,
        tooltip: userTooltip,
        legend: userLegend,
        ...userRest
      } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: mergeOptionBlock(
          {
            trigger: 'axis',
            axisPointer: { type: 'line', lineStyle: { color: theme.axisColor, opacity: 0.8 } },
            backgroundColor: theme.tooltipBg,
            borderColor: theme.tooltipBorder,
            textStyle: { color: theme.tooltipText, fontSize: 12 },
          },
          userTooltip,
        ),
        legend:
          userLegend?.show === false
            ? undefined
            : mergeOptionBlock(
                {
                  bottom: 0,
                  icon: 'circle',
                  itemWidth: 8,
                  itemHeight: 8,
                  textStyle: { fontSize: 11, color: theme.textColor },
                },
                userLegend,
              ),
        singleAxis: mergeOptionBlock(
          {
            top: 12,
            bottom: 40,
            type: 'time',
            axisTick: { show: false },
            axisLabel: { color: theme.textColor, fontSize: 11 },
            axisLine: { lineStyle: { color: theme.axisColor } },
          },
          userSingleAxis,
        ),
        series: mergedSeries,
        ...userRest,
      }
    }, [data, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
ThemeRiver.displayName = 'ThemeRiver'

```

### `packages/registry-react/components/charts/theme-river/index.ts`

```ts
export { ThemeRiver, type ThemeRiverProps } from './ThemeRiver'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## theme-switch

- type: `registry:ui`
- description: Light / dark / system theme toggle — drop in the header. Seven visual variants: `cards`, `icons`, `icon-only`, `dropdown`, `pill`, `pill-4`, and `switch`. Persists choice to `localStorage` and respects `prefers-color-scheme` for `system`.
- npm deps: `next-themes`, `lucide-react`
- registry deps: `section-card`, `dropdown-menu`

### `packages/registry-react/components/theme-switch/theme-switch.tsx`

```tsx
'use client'

import * as React from 'react'
import { useTheme } from 'next-themes'
import { ChevronDown, Monitor, Moon, Palette, Sparkles, Sun, type LucideIcon } from 'lucide-react'
import { SectionCard } from '@/components/ui/section-card'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

type Theme = 'light' | 'dark' | 'system' | 'black'
type Variant = 'cards' | 'icons' | 'icon-only' | 'dropdown' | 'pill' | 'pill-4' | 'switch'

const ICONS: Record<Theme, LucideIcon> = {
  light: Sun,
  dark: Moon,
  system: Monitor,
  black: Sparkles,
}

const LABELS: Record<Theme, string> = {
  light: 'Light',
  dark: 'Dark',
  system: 'System',
  black: 'Black',
}

const VARIANT_OPTIONS: Record<Variant, Theme[]> = {
  cards: ['light', 'dark', 'system'],
  icons: ['light', 'dark', 'system'],
  'icon-only': ['light', 'dark'],
  dropdown: ['light', 'dark', 'system'],
  pill: ['light', 'dark', 'system'],
  'pill-4': ['system', 'light', 'dark', 'black'],
  switch: ['light', 'dark'],
}

export interface ThemeSwitchProps {
  /** Controlled value. When omitted, falls back to next-themes' `theme`. */
  value?: Theme
  onValueChange?: (theme: Theme) => void
  variant?: Variant
  title?: string
  description?: string
  className?: string
}

const ThemeSwitch = React.forwardRef<HTMLDivElement, ThemeSwitchProps>(
  ({ value, onValueChange, variant = 'cards', title, description, className }, ref) => {
    const { theme, setTheme } = useTheme()
    const modelValue = (value ?? (theme as Theme) ?? 'system') as Theme

    const options = VARIANT_OPTIONS[variant]
    const activeIndex = React.useMemo(() => {
      const i = options.indexOf(modelValue)
      return i === -1 ? 0 : i
    }, [options, modelValue])

    const indicatorStyle: React.CSSProperties = {
      width: `calc((100% - 4px) / ${options.length})`,
      transform: `translateX(calc(${activeIndex} * 100%))`,
    }

    function set(t: Theme) {
      if (onValueChange) onValueChange(t)
      else setTheme(t)
    }
    function cycle() {
      const next = options[(activeIndex + 1) % options.length]
      if (next) set(next)
    }

    // Cards: full SectionCard with 3-button grid (default)
    if (variant === 'cards') {
      return (
        <SectionCard
          ref={ref}
          title={title ?? 'Appearance'}
          description={description ?? 'Choose your interface theme.'}
          className={className}
          headerAction={<Palette className="text-muted-foreground size-5" />}
        >
          <div className="grid grid-cols-3 gap-2">
            {options.map((t) => {
              const Icon = ICONS[t]
              return (
                <button
                  type="button"
                  key={t}
                  className={[
                    'focus-visible:ring-ring rounded-md border p-3 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:outline-none',
                    modelValue === t
                      ? 'border-primary ring-primary bg-primary/5 ring-1'
                      : 'border-border hover:bg-muted/50',
                  ].join(' ')}
                  onClick={() => set(t)}
                >
                  <Icon className="text-muted-foreground mb-2 size-4" aria-hidden="true" />
                  <p className="text-xs font-medium">{LABELS[t]}</p>
                </button>
              )
            })}
          </div>
        </SectionCard>
      )
    }

    // Icons: compact 3-icon segmented row, no labels
    if (variant === 'icons') {
      return (
        <div
          ref={ref}
          role="radiogroup"
          aria-label={title ?? 'Theme'}
          className={['border-border bg-card inline-flex items-center gap-0.5 rounded-md border p-0.5', className]
            .filter(Boolean)
            .join(' ')}
        >
          {options.map((t) => {
            const Icon = ICONS[t]
            return (
              <button
                type="button"
                key={t}
                role="radio"
                aria-checked={modelValue === t}
                aria-label={LABELS[t]}
                className={[
                  'focus-visible:ring-ring grid size-7 place-items-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none',
                  modelValue === t
                    ? 'bg-primary text-primary-foreground'
                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
                ].join(' ')}
                onClick={() => set(t)}
              >
                <Icon className="size-4" aria-hidden="true" />
              </button>
            )
          })}
        </div>
      )
    }

    // Icon-only: header-grade icon button.
    if (variant === 'icon-only') {
      const Icon = ICONS[modelValue]
      return (
        <button
          type="button"
          ref={ref as React.Ref<HTMLButtonElement>}
          aria-label={LABELS[modelValue]}
          className={[
            'text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-lg transition-colors focus-visible:ring-2 focus-visible:outline-none',
            className,
          ]
            .filter(Boolean)
            .join(' ')}
          onClick={cycle}
        >
          <Icon className="size-4" aria-hidden="true" />
        </button>
      )
    }

    // Dropdown: trigger button → menu of states
    if (variant === 'dropdown') {
      const TriggerIcon = ICONS[modelValue]
      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button
              type="button"
              className={[
                'border-border bg-card hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm transition focus-visible:ring-2 focus-visible:outline-none',
                className,
              ]
                .filter(Boolean)
                .join(' ')}
            >
              <TriggerIcon className="size-4" aria-hidden="true" />
              <span>{LABELS[modelValue]}</span>
              <ChevronDown className="size-3 opacity-60" aria-hidden="true" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="min-w-[140px]">
            {options.map((t) => {
              const Icon = ICONS[t]
              return (
                <DropdownMenuItem key={t} onClick={() => set(t)}>
                  <Icon className="mr-2 size-4" aria-hidden="true" />
                  <span>{LABELS[t]}</span>
                </DropdownMenuItem>
              )
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      )
    }

    // Pill / Pill-4: equal segments with sliding indicator
    if (variant === 'pill' || variant === 'pill-4') {
      return (
        <div
          ref={ref}
          role="radiogroup"
          aria-label={title ?? 'Theme'}
          className={['border-border bg-card relative inline-flex w-full max-w-md rounded-full border p-0.5', className]
            .filter(Boolean)
            .join(' ')}
        >
          <span
            aria-hidden
            className="bg-primary pointer-events-none absolute top-0.5 bottom-0.5 left-0.5 rounded-full transition-transform duration-300 ease-out"
            style={indicatorStyle}
          />
          {options.map((t) => {
            const Icon = ICONS[t]
            return (
              <button
                type="button"
                key={t}
                role="radio"
                aria-checked={modelValue === t}
                aria-label={LABELS[t]}
                className={[
                  'focus-visible:ring-ring relative z-[1] inline-flex h-7 flex-1 items-center justify-center gap-1.5 rounded-full px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
                  modelValue === t ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground',
                ].join(' ')}
                onClick={() => set(t)}
              >
                <Icon className="size-3.5" aria-hidden="true" />
                <span>{LABELS[t]}</span>
              </button>
            )
          })}
        </div>
      )
    }

    // Switch: iOS-style 2-state toggle with thumb that slides
    return (
      <button
        type="button"
        ref={ref as React.Ref<HTMLButtonElement>}
        role="switch"
        aria-checked={modelValue === 'dark'}
        aria-label={LABELS[modelValue]}
        className={[
          'border-border focus-visible:ring-ring relative inline-flex h-8 w-16 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:outline-none',
          modelValue === 'dark' ? 'bg-zinc-900' : 'bg-amber-100',
          className,
        ]
          .filter(Boolean)
          .join(' ')}
        onClick={() => set(modelValue === 'dark' ? 'light' : 'dark')}
      >
        <Sun
          className={[
            'absolute left-1.5 size-4 text-amber-500 transition-opacity',
            modelValue === 'dark' ? 'opacity-30' : 'opacity-100',
          ].join(' ')}
          aria-hidden="true"
        />
        <Moon
          className={[
            'absolute right-1.5 size-4 text-zinc-300 transition-opacity',
            modelValue === 'light' ? 'opacity-30' : 'opacity-100',
          ].join(' ')}
          aria-hidden="true"
        />
        <span
          aria-hidden
          className="bg-card border-border absolute size-6 rounded-full border shadow transition-transform duration-300 ease-out"
          style={{ transform: `translateX(${modelValue === 'dark' ? '36px' : '4px'})` }}
        />
      </button>
    )
  },
)
ThemeSwitch.displayName = 'ThemeSwitch'

export { ThemeSwitch }

```

### `packages/registry-react/components/theme-switch/index.ts`

```ts
export { ThemeSwitch, type ThemeSwitchProps } from './theme-switch'

```

## time-picker

- type: `registry:ui`
- description: Standalone time input — hours, minutes, optional seconds, and 12h/24h modes. Pairs with Date Picker for full datetime entry.
- npm deps: `lucide-react`
- registry deps: `button`, `popover`, `scroll-area`

### `packages/registry-react/components/time-picker/time-picker.tsx`

```tsx
'use client'

import * as React from 'react'
import { Clock, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'

export type TimeFormat = 'HH:mm' | 'HH:mm:ss' | 'hh:mm A'

export interface TimeParts {
  hour24: number
  minute: number
  second: number
}

export interface TimePreset {
  label: string
  value: string
}

export type TimePickerSize = 'small' | 'middle' | 'large'
export type TimePickerStatus = 'error' | 'warning'

function parse(v: string): TimeParts | null {
  if (!v) return null
  const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(v.trim())
  if (!m) return null
  const h = Number(m[1])
  const min = Number(m[2])
  const s = m[3] ? Number(m[3]) : 0
  if (
    Number.isNaN(h) ||
    Number.isNaN(min) ||
    Number.isNaN(s) ||
    h < 0 ||
    h > 23 ||
    min < 0 ||
    min > 59 ||
    s < 0 ||
    s > 59
  )
    return null
  return { hour24: h, minute: min, second: s }
}

function toMinutes(p: TimeParts) {
  return p.hour24 * 60 + p.minute + p.second / 60
}

// ---- TimeColumns ----

export interface TimeColumnsProps {
  /** Time value. HH:mm or HH:mm:ss depending on format. Empty = no selection. */
  value?: string
  onValueChange?: (value: string) => void
  use24Hour?: boolean
  use12Hours?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  /** 24h HH:mm or HH:mm:ss. */
  minTime?: string
  /** 24h HH:mm or HH:mm:ss. */
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  /** Auto-scroll active rows into view when this becomes true. */
  visible?: boolean
}

function TimeColumns({
  value = '',
  onValueChange,
  use24Hour = false,
  use12Hours = false,
  minuteStep = 5,
  hourStep = 1,
  secondStep = 1,
  minTime,
  maxTime,
  format = 'HH:mm',
  disabledHours,
  disabledMinutes,
  disabledSeconds,
  hideDisabledOptions = false,
  visible = true,
}: TimeColumnsProps) {
  const parts = parse(value)

  function format24(p: TimeParts) {
    if (format === 'HH:mm:ss') {
      return `${String(p.hour24).padStart(2, '0')}:${String(p.minute).padStart(2, '0')}:${String(p.second).padStart(2, '0')}`
    }
    return `${String(p.hour24).padStart(2, '0')}:${String(p.minute).padStart(2, '0')}`
  }

  const showSeconds = format === 'HH:mm:ss'

  const effective12Hour = format === 'hh:mm A' ? true : use12Hours ? true : !use24Hour

  const hour12 = parts ? (parts.hour24 % 12 === 0 ? 12 : parts.hour24 % 12) : null
  const period = parts && parts.hour24 >= 12 ? 'PM' : 'AM'

  const minBound = parse(minTime ?? '') ?? null
  const maxBound = parse(maxTime ?? '') ?? null

  function withinBounds(p: TimeParts) {
    const m = toMinutes(p)
    if (minBound && m < toMinutes(minBound)) return false
    if (maxBound && m > toMinutes(maxBound)) return false
    return true
  }

  const disabledHoursSet = new Set(disabledHours ? disabledHours() : [])
  const disabledMinutesSet = new Set(disabledMinutes ? disabledMinutes(parts?.hour24 ?? 0) : [])
  const disabledSecondsSet = new Set(
    disabledSeconds ? disabledSeconds(parts?.hour24 ?? 0, parts?.minute ?? 0) : [],
  )

  function isHourDisabledItem(h: number) {
    if (disabledHoursSet.has(h)) return true
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    if (effective12Hour) {
      const isPM = period === 'PM'
      return !withinBounds({ hour24: (h % 12) + (isPM ? 12 : 0), minute: cur.minute, second: cur.second })
    }
    return !withinBounds({ hour24: h, minute: cur.minute, second: cur.second })
  }

  function isMinuteDisabledItem(m: number) {
    if (disabledMinutesSet.has(m)) return true
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    return !withinBounds({ hour24: cur.hour24, minute: m, second: cur.second })
  }

  function isSecondDisabledItem(s: number) {
    if (disabledSecondsSet.has(s)) return true
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    return !withinBounds({ hour24: cur.hour24, minute: cur.minute, second: s })
  }

  const hourStepN = Math.max(1, hourStep)
  const hours12List = Array.from({ length: 12 }, (_, i) => i + 1)
    .filter((h) => (h - 1) % hourStepN === 0)
    .filter((h) => !hideDisabledOptions || !isHourDisabledItem(h))

  const hours24List = Array.from({ length: 24 }, (_, i) => i)
    .filter((h) => h % hourStepN === 0)
    .filter((h) => !hideDisabledOptions || !isHourDisabledItem(h))

  const minStepN = Math.max(1, Math.min(60, minuteStep))
  const minutesList = Array.from({ length: Math.ceil(60 / minStepN) }, (_, i) => i * minStepN).filter(
    (m) => !hideDisabledOptions || !isMinuteDisabledItem(m),
  )

  const secStepN = Math.max(1, Math.min(60, secondStep))
  const secondsList = Array.from({ length: Math.ceil(60 / secStepN) }, (_, i) => i * secStepN).filter(
    (s) => !hideDisabledOptions || !isSecondDisabledItem(s),
  )

  function commit(p: TimeParts) {
    if (!withinBounds(p)) return
    onValueChange?.(format24(p))
  }

  function pickHour12(h: number) {
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    const isPM = period === 'PM'
    commit({ hour24: (h % 12) + (isPM ? 12 : 0), minute: cur.minute, second: cur.second })
  }

  function pickHour24(h: number) {
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    commit({ hour24: h, minute: cur.minute, second: cur.second })
  }

  function pickMinute(m: number) {
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    commit({ hour24: cur.hour24, minute: m, second: cur.second })
  }

  function pickSecond(s: number) {
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    commit({ hour24: cur.hour24, minute: cur.minute, second: s })
  }

  function pickPeriod(p: 'AM' | 'PM') {
    const cur = parts ?? { hour24: 0, minute: 0, second: 0 }
    const h12 = cur.hour24 % 12
    commit({ hour24: h12 + (p === 'PM' ? 12 : 0), minute: cur.minute, second: cur.second })
  }

  const hourCol = React.useRef<HTMLDivElement | null>(null)
  const minCol = React.useRef<HTMLDivElement | null>(null)
  const secCol = React.useRef<HTMLDivElement | null>(null)

  React.useEffect(() => {
    if (!visible) return
    const raf = requestAnimationFrame(() => {
      hourCol.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
      minCol.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
      secCol.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: 'center' })
    })
    return () => cancelAnimationFrame(raf)
  }, [visible, value])

  function isHourActive(h: number) {
    if (!parts) return false
    return effective12Hour ? hour12 === h : parts.hour24 === h
  }

  function isHourDisabled(h: number) {
    if (!hideDisabledOptions) return isHourDisabledItem(h)
    return false
  }

  function isMinuteDisabled(m: number) {
    if (!hideDisabledOptions) return isMinuteDisabledItem(m)
    return false
  }

  function isSecondDisabled(s: number) {
    if (!hideDisabledOptions) return isSecondDisabledItem(s)
    return false
  }

  return (
    <div className="flex divide-x" data-uipkge="" data-slot="time-columns">
      <ScrollArea ref={hourCol} className="h-56">
        <div className="flex w-14 flex-col p-1">
          {(effective12Hour ? hours12List : hours24List).map((h) => (
            <button
              key={h}
              type="button"
              data-active={isHourActive(h)}
              disabled={isHourDisabled(h)}
              className={cn(
                'hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                isHourActive(h) ? 'bg-primary text-primary-foreground hover:bg-primary' : '',
              )}
              onClick={() => (effective12Hour ? pickHour12(h) : pickHour24(h))}
            >
              {String(h).padStart(2, '0')}
            </button>
          ))}
        </div>
      </ScrollArea>

      <ScrollArea ref={minCol} className="h-56">
        <div className="flex w-14 flex-col p-1">
          {minutesList.map((m) => (
            <button
              key={m}
              type="button"
              data-active={parts?.minute === m}
              disabled={isMinuteDisabled(m)}
              className={cn(
                'hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                parts?.minute === m ? 'bg-primary text-primary-foreground hover:bg-primary' : '',
              )}
              onClick={() => pickMinute(m)}
            >
              {String(m).padStart(2, '0')}
            </button>
          ))}
        </div>
      </ScrollArea>

      {showSeconds && (
        <ScrollArea ref={secCol} className="h-56">
          <div className="flex w-14 flex-col p-1">
            {secondsList.map((s) => (
              <button
                key={s}
                type="button"
                data-active={parts?.second === s}
                disabled={isSecondDisabled(s)}
                className={cn(
                  'hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-30 disabled:hover:bg-transparent',
                  parts?.second === s ? 'bg-primary text-primary-foreground hover:bg-primary' : '',
                )}
                onClick={() => pickSecond(s)}
              >
                {String(s).padStart(2, '0')}
              </button>
            ))}
          </div>
        </ScrollArea>
      )}

      {effective12Hour && (
        <div className="flex w-12 flex-col p-1">
          {(['AM', 'PM'] as const).map((p) => (
            <button
              key={p}
              type="button"
              className={cn(
                'hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 text-center text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none',
                period === p ? 'bg-primary text-primary-foreground hover:bg-primary' : '',
              )}
              onClick={() => pickPeriod(p)}
            >
              {p}
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

// ---- TimePicker ----

export interface TimePickerProps {
  /** Controlled value as 24h HH:mm or HH:mm:ss. Empty string = no selection. */
  value?: string
  /** Uncontrolled initial value. */
  defaultValue?: string
  onValueChange?: (value: string) => void
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  allowClear?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  /** Backward-compat: when true, render 24-hour selector. */
  use24Hour?: boolean
  /** When true, show AM/PM selector. */
  use12Hours?: boolean
  minTime?: string
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  presets?: TimePreset[]
  size?: TimePickerSize
  status?: TimePickerStatus
  triggerClassName?: string
  className?: string
}

const sizeClasses: Record<TimePickerSize, string> = {
  small: 'h-8 text-xs px-2.5 py-1',
  middle: 'h-9 text-sm px-3 py-1.5',
  large: 'h-11 text-base px-4 py-2',
}

const statusClasses: Record<string, string> = {
  error: 'border-destructive focus-visible:ring-destructive',
  warning: 'border-warning focus-visible:ring-warning',
}

const TimePicker = React.forwardRef<HTMLButtonElement, TimePickerProps>(
  (
    {
      value,
      defaultValue = '',
      onValueChange,
      placeholder = 'Pick a time',
      disabled = false,
      readOnly = false,
      clearable = true,
      allowClear,
      minuteStep = 5,
      hourStep = 1,
      secondStep = 1,
      use24Hour = false,
      use12Hours = false,
      minTime,
      maxTime,
      format = 'HH:mm',
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      hideDisabledOptions = false,
      presets = [],
      size = 'middle',
      status,
      triggerClassName,
      className,
    },
    ref,
  ) => {
    const [open, setOpen] = React.useState(false)

    const isControlled = value !== undefined
    const [internal, setInternal] = React.useState<string>(defaultValue)
    const currentValue = isControlled ? value : internal

    const effectiveAllowClear = allowClear !== undefined ? allowClear : clearable

    const parsed = parse(currentValue)

    function formatDisplay(h: number, m: number, s: number) {
      if (format === 'hh:mm A') {
        const h12 = h % 12 === 0 ? 12 : h % 12
        const p = h >= 12 ? 'PM' : 'AM'
        return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')} ${p}`
      }
      if (format === 'HH:mm:ss') {
        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
      }
      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
    }

    const display = parsed ? formatDisplay(parsed.hour24, parsed.minute, parsed.second) : ''

    function emitTime(v: string) {
      if (!isControlled) setInternal(v)
      onValueChange?.(v)
    }

    function pickNow() {
      if (readOnly) return
      const d = new Date()
      const sStep = Math.max(1, secondStep)
      const rawS = d.getSeconds()
      const snappedS = Math.round(rawS / sStep) * sStep
      const secCarry = Math.floor(snappedS / 60)
      const s = snappedS % 60

      const mStep = Math.max(1, minuteStep)
      const rawM = d.getMinutes() + secCarry
      const snappedM = Math.round(rawM / mStep) * mStep
      const minCarry = Math.floor(snappedM / 60)
      const min = snappedM % 60

      const h = d.getHours() + minCarry
      const hourStr = String(h).padStart(2, '0')
      const minStr = String(min).padStart(2, '0')
      const secStr = String(s).padStart(2, '0')
      emitTime(format === 'HH:mm:ss' ? `${hourStr}:${minStr}:${secStr}` : `${hourStr}:${minStr}`)
    }

    function applyPreset(preset: TimePreset) {
      if (readOnly) return
      emitTime(preset.value)
      setOpen(false)
    }

    function clear(event: React.MouseEvent) {
      event.stopPropagation()
      if (disabled || readOnly) return
      emitTime('')
    }

    const triggerClasses = cn(
      'min-w-[160px] justify-start gap-2 text-left font-normal',
      !parsed && 'text-muted-foreground',
      sizeClasses[size],
      status && statusClasses[status],
      triggerClassName,
      className,
    )

    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            ref={ref}
            type="button"
            variant="outline"
            disabled={disabled}
            className={triggerClasses}
            data-uipkge=""
            data-slot="time-picker"
          >
            <Clock className="size-4 shrink-0" />
            <span className="flex-1 truncate">{display || placeholder}</span>
            {effectiveAllowClear && parsed && !disabled && !readOnly && (
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-5 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                aria-label="Clear time"
                onClick={clear}
              >
                <X className="size-3.5" aria-hidden="true" />
              </button>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          {presets.length > 0 && (
            <div className="flex flex-col gap-0.5 border-b p-2">
              {presets.map((p) => (
                <button
                  key={p.label}
                  type="button"
                  className="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  onClick={() => applyPreset(p)}
                >
                  {p.label}
                </button>
              ))}
            </div>
          )}
          <div className="flex items-center justify-between border-b px-3 py-2">
            <span className="text-muted-foreground text-xs tracking-widest uppercase">Time</span>
            <button
              type="button"
              className="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs focus-visible:ring-2 focus-visible:outline-none"
              onClick={pickNow}
            >
              Now
            </button>
          </div>
          <TimeColumns
            value={currentValue}
            use24Hour={use24Hour}
            use12Hours={use12Hours}
            minuteStep={minuteStep}
            hourStep={hourStep}
            secondStep={secondStep}
            minTime={minTime}
            maxTime={maxTime}
            format={format}
            disabledHours={disabledHours}
            disabledMinutes={disabledMinutes}
            disabledSeconds={disabledSeconds}
            hideDisabledOptions={hideDisabledOptions}
            visible={open}
            onValueChange={emitTime}
          />
        </PopoverContent>
      </Popover>
    )
  },
)
TimePicker.displayName = 'TimePicker'

// ---- TimeRangePicker ----

export interface TimeRangePreset {
  label: string
  value: [string, string]
}

export interface TimeRangePickerProps {
  value?: [string, string] | null
  onValueChange?: (value: [string, string] | null) => void
  placeholder?: string
  disabled?: boolean
  readOnly?: boolean
  clearable?: boolean
  allowClear?: boolean
  minuteStep?: number
  hourStep?: number
  secondStep?: number
  use24Hour?: boolean
  use12Hours?: boolean
  minTime?: string
  maxTime?: string
  format?: TimeFormat
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  hideDisabledOptions?: boolean
  presets?: TimeRangePreset[]
  size?: TimePickerSize
  status?: TimePickerStatus
  triggerClassName?: string
  className?: string
}

const TimeRangePicker = React.forwardRef<HTMLButtonElement, TimeRangePickerProps>(
  (
    {
      value: valueProp,
      onValueChange,
      placeholder = 'Pick a time range',
      disabled = false,
      readOnly = false,
      clearable = true,
      allowClear,
      minuteStep = 5,
      hourStep = 1,
      secondStep = 1,
      use24Hour = false,
      use12Hours = false,
      minTime,
      maxTime,
      format = 'HH:mm',
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      hideDisabledOptions = false,
      presets = [],
      size = 'middle',
      status,
      triggerClassName,
      className,
    },
    ref,
  ) => {
    const [open, setOpen] = React.useState(false)
    const isControlled = valueProp !== undefined
    const [internal, setInternal] = React.useState<[string, string] | null>(null)
    const currentValue = isControlled ? valueProp : internal

    const effectiveAllowClear = allowClear !== undefined ? allowClear : clearable

    const startValue = currentValue?.[0] ?? ''
    const endValue = currentValue?.[1] ?? ''
    const startParsed = parse(startValue)
    const endParsed = parse(endValue)

    function formatDisplay(h: number, m: number, s: number) {
      if (format === 'hh:mm A') {
        const h12 = h % 12 === 0 ? 12 : h % 12
        const p = h >= 12 ? 'PM' : 'AM'
        return `${String(h12).padStart(2, '0')}:${String(m).padStart(2, '0')} ${p}`
      }
      if (format === 'HH:mm:ss') {
        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
      }
      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
    }

    const display = (() => {
      const hasStart = startParsed !== null
      const hasEnd = endParsed !== null
      if (!hasStart && !hasEnd) return ''
      const startStr = hasStart
        ? formatDisplay(startParsed.hour24, startParsed.minute, startParsed.second)
        : ''
      const endStr = hasEnd ? formatDisplay(endParsed.hour24, endParsed.minute, endParsed.second) : ''
      if (hasStart && hasEnd) return `${startStr} ~ ${endStr}`
      return startStr || endStr
    })()

    function emitRange(start: string, end: string) {
      const next: [string, string] = [start, end]
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
    }

    function emitStart(v: string) {
      emitRange(v, endValue || v)
    }

    function emitEnd(v: string) {
      emitRange(startValue || v, v)
    }

    function pickNow(which: 'start' | 'end') {
      if (readOnly) return
      const d = new Date()
      const sStep = Math.max(1, secondStep)
      const rawS = d.getSeconds()
      const snappedS = Math.round(rawS / sStep) * sStep
      const secCarry = Math.floor(snappedS / 60)
      const s = snappedS % 60

      const mStep = Math.max(1, minuteStep)
      const rawM = d.getMinutes() + secCarry
      const snappedM = Math.round(rawM / mStep) * mStep
      const minCarry = Math.floor(snappedM / 60)
      const min = snappedM % 60

      const h = d.getHours() + minCarry
      const hourStr = String(h).padStart(2, '0')
      const minStr = String(min).padStart(2, '0')
      const secStr = String(s).padStart(2, '0')
      const v = format === 'HH:mm:ss' ? `${hourStr}:${minStr}:${secStr}` : `${hourStr}:${minStr}`
      if (which === 'start') emitStart(v)
      else emitEnd(v)
    }

    function applyPreset(preset: TimeRangePreset) {
      if (readOnly) return
      if (!isControlled) setInternal(preset.value)
      onValueChange?.(preset.value)
      setOpen(false)
    }

    function clear(event: React.MouseEvent) {
      event.stopPropagation()
      if (disabled || readOnly) return
      if (!isControlled) setInternal(null)
      onValueChange?.(null)
    }

    const triggerClasses = cn(
      'min-w-[200px] justify-start gap-2 text-left font-normal',
      !display && 'text-muted-foreground',
      sizeClasses[size],
      status && statusClasses[status],
      triggerClassName,
      className,
    )

    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            ref={ref}
            type="button"
            variant="outline"
            disabled={disabled}
            className={triggerClasses}
            data-uipkge=""
            data-slot="time-range-picker"
          >
            <Clock className="size-4 shrink-0" />
            <span className="flex-1 truncate">{display || placeholder}</span>
            {effectiveAllowClear && display && !disabled && !readOnly && (
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring -mr-1 inline-flex size-5 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                aria-label="Clear time range"
                onClick={clear}
              >
                <X className="size-3.5" aria-hidden="true" />
              </button>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          {presets.length > 0 && (
            <div className="flex flex-col gap-0.5 border-b p-2">
              {presets.map((p) => (
                <button
                  key={p.label}
                  type="button"
                  className="hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1.5 text-left text-xs transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  onClick={() => applyPreset(p)}
                >
                  {p.label}
                </button>
              ))}
            </div>
          )}
          <div className="flex items-center justify-between border-b px-3 py-2">
            <span className="text-muted-foreground text-xs tracking-widest uppercase">Time Range</span>
            <div className="flex gap-2">
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground focus-visible:ring-ring text-xs focus-visible:ring-2 focus-visible:outline-none"
                onClick={() => pickNow('start')}
              >
                Now (Start)
              </button>
              <button
                type="button"
                className="text-muted-foreground hover:text-foreground text-xs"
                onClick={() => pickNow('end')}
              >
                Now (End)
              </button>
            </div>
          </div>
          <div className="flex">
            <div className="flex flex-col">
              <div className="text-muted-foreground border-b px-3 py-1.5 text-center text-xs font-medium">Start</div>
              <TimeColumns
                value={startValue}
                use24Hour={use24Hour}
                use12Hours={use12Hours}
                minuteStep={minuteStep}
                hourStep={hourStep}
                secondStep={secondStep}
                minTime={minTime}
                maxTime={maxTime}
                format={format}
                disabledHours={disabledHours}
                disabledMinutes={disabledMinutes}
                disabledSeconds={disabledSeconds}
                hideDisabledOptions={hideDisabledOptions}
                visible={open}
                onValueChange={emitStart}
              />
            </div>
            <div className="bg-border w-px" />
            <div className="flex flex-col">
              <div className="text-muted-foreground border-b px-3 py-1.5 text-center text-xs font-medium">End</div>
              <TimeColumns
                value={endValue}
                use24Hour={use24Hour}
                use12Hours={use12Hours}
                minuteStep={minuteStep}
                hourStep={hourStep}
                secondStep={secondStep}
                minTime={minTime}
                maxTime={maxTime}
                format={format}
                disabledHours={disabledHours}
                disabledMinutes={disabledMinutes}
                disabledSeconds={disabledSeconds}
                hideDisabledOptions={hideDisabledOptions}
                visible={open}
                onValueChange={emitEnd}
              />
            </div>
          </div>
        </PopoverContent>
      </Popover>
    )
  },
)
TimeRangePicker.displayName = 'TimeRangePicker'

export { TimePicker, TimeColumns, TimeRangePicker }

```

### `packages/registry-react/components/time-picker/index.ts`

```ts
export {
  TimePicker,
  TimeColumns,
  TimeRangePicker,
  type TimePickerProps,
  type TimeColumnsProps,
  type TimeRangePickerProps,
  type TimeRangePreset,
  type TimePreset,
  type TimeParts,
  type TimeFormat,
  type TimePickerSize,
  type TimePickerStatus,
} from './time-picker'

```

## timeline

- type: `registry:ui`
- description: Vertical or horizontal sequence of events with connectors and node markers. Statuses (pending, current, completed, failed) tint the connector. Use for activity feeds, audit logs, and progress tracking.
- npm deps: `class-variance-authority`

### `packages/registry-react/components/timeline/timeline.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'
import {
  TimelineContext,
  TimelineItemContext,
  type TimelineAlign,
  type TimelineDensity,
  type TimelineDirection,
  type TimelineItemContextValue,
  type TimelineSide,
  type TimelineStatus,
} from './context'
import { timelineMediaVariants, type TimelineMediaVariant } from './timeline.variants'

// React's own useId -- SSR-safe and avoids a module-level counter that would
// hydrate-mismatch. (React 19's useRef requires an initial arg.)
const useId = () => React.useId()

/* ------------------------------------------------------------------ Timeline */

export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  direction?: TimelineDirection
  align?: TimelineAlign
  side?: TimelineSide
  density?: TimelineDensity
}

function Timeline({
  className,
  direction = 'vertical',
  align = 'start',
  side,
  density = 'default',
  children,
  ...props
}: TimelineProps) {
  const [ids, setIds] = React.useState<string[]>([])

  const register = React.useCallback((id: string) => {
    setIds((prev) => (prev.includes(id) ? prev : [...prev, id]))
  }, [])
  const unregister = React.useCallback((id: string) => {
    setIds((prev) => prev.filter((i) => i !== id))
  }, [])
  const indexOf = React.useCallback((id: string) => ids.indexOf(id), [ids])

  const resolvedSide: TimelineSide = side ?? (direction === 'horizontal' ? 'top' : 'left')

  const ctx = React.useMemo(
    () => ({
      direction,
      align,
      side: resolvedSide,
      density,
      count: ids.length,
      register,
      unregister,
      indexOf,
    }),
    [direction, align, resolvedSide, density, ids.length, register, unregister, indexOf],
  )

  return (
    <TimelineContext.Provider value={ctx}>
      <div
        data-uipkge=""
        data-slot="timeline"
        data-direction={direction}
        data-align={align}
        className={cn('relative', direction === 'vertical' ? 'flex flex-col' : 'flex flex-row', className)}
        {...props}
      >
        {children}
      </div>
    </TimelineContext.Provider>
  )
}

/* -------------------------------------------------------------- TimelineItem */

export interface TimelineItemRenderProps {
  index: number
  isLast: boolean
  side: TimelineSide
  status: TimelineStatus
}

export interface TimelineItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
  side?: TimelineSide
  status?: TimelineStatus
  children?: React.ReactNode | ((props: TimelineItemRenderProps) => React.ReactNode)
}

function TimelineItem({ className, side, status = 'default', children, ...props }: TimelineItemProps) {
  const ctx = React.useContext(TimelineContext)
  const id = useId()

  React.useEffect(() => {
    if (!ctx) return
    ctx.register(id)
    return () => ctx.unregister(id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, ctx?.register, ctx?.unregister])

  const index = ctx ? ctx.indexOf(id) : 0
  const isFirst = index === 0
  const isLast = ctx ? index === ctx.count - 1 : false

  const effectiveSide: TimelineSide = (() => {
    if (side) return side
    if (!ctx) return 'left'
    if (ctx.align === 'center') {
      if (ctx.direction === 'vertical') return index % 2 === 0 ? 'left' : 'right'
      return index % 2 === 0 ? 'top' : 'bottom'
    }
    return ctx.side
  })()

  const direction = ctx?.direction ?? 'vertical'
  const density = ctx?.density ?? 'default'
  const isCenter = ctx?.align === 'center'

  const verticalSpacing = isLast
    ? ''
    : {
        compact: '[&>[data-slot=timeline-content]]:pb-2',
        default: '[&>[data-slot=timeline-content]]:pb-6',
        comfortable: '[&>[data-slot=timeline-content]]:pb-10',
      }[density]

  const horizontalSpacing = isLast
    ? ''
    : {
        compact: '[&>[data-slot=timeline-content]]:pr-3',
        default: '[&>[data-slot=timeline-content]]:pr-6',
        comfortable: '[&>[data-slot=timeline-content]]:pr-10',
      }[density]

  const itemCtx: TimelineItemContextValue = {
    index,
    isFirst,
    isLast,
    side: effectiveSide,
    status,
    direction,
    density,
  }

  const resolvedChildren =
    typeof children === 'function'
      ? children({ index, isLast, side: effectiveSide, status })
      : children

  return (
    <TimelineItemContext.Provider value={itemCtx}>
      <div
        data-uipkge=""
        data-slot="timeline-item"
        data-side={effectiveSide}
        data-last={isLast || undefined}
        className={cn(
          'relative',
          // start mode (default): simple flex
          // No item padding — TimelineMedia's continuous line relies on items
          // butting up edge-to-edge. Use TimelineContent's own padding for
          // breathing room between rows/cards.
          !isCenter &&
            direction === 'vertical' &&
            cn('flex gap-4', effectiveSide === 'right' && 'flex-row-reverse text-right', verticalSpacing),
          !isCenter &&
            direction === 'horizontal' &&
            cn(
              'flex flex-col gap-2',
              effectiveSide === 'bottom' && 'flex-col-reverse',
              horizontalSpacing,
            ),
          // center alternating: 3-col / 3-row grid
          isCenter &&
            direction === 'vertical' &&
            cn(
              'grid grid-cols-[1fr_auto_1fr] items-start gap-x-4',
              '[&>[data-slot=timeline-media]]:col-start-2',
              '[&>[data-slot=timeline-separator]]:col-start-2',
              effectiveSide === 'left' &&
                '[&>[data-slot=timeline-content]]:col-start-1 [&>[data-slot=timeline-content]]:text-right',
              effectiveSide === 'right' && '[&>[data-slot=timeline-content]]:col-start-3',
              verticalSpacing,
            ),
          isCenter &&
            direction === 'horizontal' &&
            cn(
              'grid grid-rows-[1fr_auto_1fr] items-start gap-y-2',
              '[&>[data-slot=timeline-media]]:row-start-2',
              '[&>[data-slot=timeline-separator]]:row-start-2',
              effectiveSide === 'top' &&
                '[&>[data-slot=timeline-content]]:row-start-1 [&>[data-slot=timeline-content]]:self-end',
              effectiveSide === 'bottom' && '[&>[data-slot=timeline-content]]:row-start-3',
              horizontalSpacing,
            ),
          className,
        )}
        {...props}
      >
        {resolvedChildren}
      </div>
    </TimelineItemContext.Provider>
  )
}

/* ------------------------------------------------------------- TimelineMedia */

export interface TimelineMediaProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: TimelineMediaVariant
  status?: TimelineStatus
  /** Manually hide the auto-generated connector line. */
  hideConnector?: boolean
  /**
   * Color the connector line below the marker using the item's status
   * (success → green, muted → gray, etc) instead of the neutral border.
   * Opt-in so existing timelines stay visually unchanged.
   */
  coloredConnector?: boolean
}

function TimelineMedia({
  className,
  variant = 'dot',
  status,
  hideConnector,
  coloredConnector,
  children,
  ...props
}: TimelineMediaProps) {
  const item = React.useContext(TimelineItemContext)

  const direction = item?.direction ?? 'vertical'
  const isFirst = item?.isFirst ?? true
  const isLast = item?.isLast ?? true
  const effectiveStatus: TimelineStatus = status ?? item?.status ?? 'default'
  const showConnector = !hideConnector && !(isFirst && isLast)

  // Marker half-size in rem, used to crop the line so it visually emerges
  // from the marker center on the first item.
  const markerHalfRem = {
    dot: '0.375rem', // size-3 = 12px / 2
    icon: '1rem', // size-8 = 32px / 2
    avatar: '1.125rem', // size-9 = 36px / 2
  }[(variant ?? 'dot') as 'dot' | 'icon' | 'avatar']

  const connectorBgClass = !coloredConnector
    ? 'bg-border'
    : {
        default: 'bg-primary',
        success: 'bg-success',
        warning: 'bg-warning',
        error: 'bg-destructive',
        info: 'bg-info',
        muted: 'bg-muted-foreground/40',
      }[effectiveStatus]

  return (
    <div
      data-uipkge=""
      data-slot="timeline-media"
      className={cn(
        'relative shrink-0 self-stretch',
        direction === 'vertical' ? 'flex w-9 flex-col items-center' : 'flex h-9 flex-row items-center',
        className,
      )}
      style={{ '--timeline-marker-half': markerHalfRem } as React.CSSProperties}
      {...props}
    >
      {/* Single continuous connector line, positioned through the marker.
          The marker's bg + ring-background acts as a "punch-through" so the
          line appears to break at each marker without any per-item math. */}
      {showConnector && (
        <div
          data-uipkge=""
          data-slot="timeline-media-connector"
          aria-hidden="true"
          className={
            direction === 'vertical'
              ? cn('absolute left-1/2 w-px -translate-x-1/2', connectorBgClass)
              : cn('absolute top-1/2 h-px -translate-y-1/2', connectorBgClass)
          }
          style={
            direction === 'vertical'
              ? {
                  top: isFirst ? 'var(--timeline-marker-half)' : '0',
                  bottom: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
                }
              : {
                  left: isFirst ? 'var(--timeline-marker-half)' : '0',
                  right: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
                }
          }
        />
      )}

      {/* Marker — its bg + ring-background hides the line behind it. */}
      <div
        data-uipkge=""
        data-slot="timeline-media-marker"
        className={cn(timelineMediaVariants({ variant, status: effectiveStatus }), 'relative z-10')}
      >
        {children}
      </div>
    </div>
  )
}

/* --------------------------------------------------------- TimelineSeparator */

export interface TimelineSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Manually hide the auto-generated connector line. */
  hideConnector?: boolean
  /** Override the inner dot (React equivalent of the Vue `#dot` slot). */
  dot?: React.ReactNode
}

function TimelineSeparator({ className, hideConnector, dot, ...props }: TimelineSeparatorProps) {
  const item = React.useContext(TimelineItemContext)
  const direction = item?.direction ?? 'vertical'
  const isFirst = item?.isFirst ?? true
  const isLast = item?.isLast ?? true
  const showConnector = !hideConnector && !(isFirst && isLast)

  return (
    // Legacy compact separator: 16px marker, customizable inner dot via `dot`
    // prop. Uses the same single-absolute-line strategy as TimelineMedia so
    // the connector is pixel-aligned across items. --marker-half = 0.5rem
    // (= size-4 / 2).
    <div
      data-uipkge=""
      data-slot="timeline-separator"
      className={cn(
        'relative shrink-0 self-stretch',
        direction === 'vertical' ? 'flex w-4 flex-col items-center' : 'flex h-4 flex-row items-center',
        className,
      )}
      style={{ '--timeline-marker-half': '0.5rem' } as React.CSSProperties}
      {...props}
    >
      {showConnector && (
        <div
          aria-hidden="true"
          className={
            direction === 'vertical'
              ? 'bg-border absolute left-1/2 w-px -translate-x-1/2'
              : 'bg-border absolute top-1/2 h-px -translate-y-1/2'
          }
          style={
            direction === 'vertical'
              ? {
                  top: isFirst ? 'var(--timeline-marker-half)' : '0',
                  bottom: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
                }
              : {
                  left: isFirst ? 'var(--timeline-marker-half)' : '0',
                  right: isLast ? 'calc(100% - var(--timeline-marker-half))' : '0',
                }
          }
        />
      )}
      <div className="bg-primary ring-background relative z-10 flex size-4 items-center justify-center rounded-full ring-4">
        {dot ?? <div className="bg-primary-foreground size-2 rounded-full" />}
      </div>
    </div>
  )
}

/* ----------------------------------------------------------- TimelineContent */

function TimelineContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div data-uipkge="" data-slot="timeline-content" className={cn('flex-1 space-y-1', className)} {...props} />
  )
}

/* ------------------------------------------------------------- TimelineTitle */

export interface TimelineTitleProps extends React.HTMLAttributes<HTMLElement> {
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
}

function TimelineTitle({ as, className, ...props }: TimelineTitleProps) {
  const Comp = (as ?? 'h3') as React.ElementType
  return (
    <Comp
      data-uipkge=""
      data-slot="timeline-title"
      className={cn('text-sm leading-none font-semibold tracking-tight', className)}
      {...props}
    />
  )
}

/* ------------------------------------------------------- TimelineDescription */

function TimelineDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p
      data-uipkge=""
      data-slot="timeline-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

/* -------------------------------------------------------------- TimelineDate */

function TimelineDate({ className, ...props }: React.TimeHTMLAttributes<HTMLTimeElement>) {
  return (
    <time
      data-uipkge=""
      data-slot="timeline-date"
      className={cn('text-muted-foreground text-xs', className)}
      {...props}
    />
  )
}

export {
  Timeline,
  TimelineItem,
  TimelineMedia,
  TimelineSeparator,
  TimelineContent,
  TimelineTitle,
  TimelineDescription,
  TimelineDate,
}

```

### `packages/registry-react/components/timeline/context.ts`

```ts
import * as React from 'react'

export type TimelineDirection = 'vertical' | 'horizontal'
export type TimelineAlign = 'start' | 'center'
export type TimelineSide = 'left' | 'right' | 'top' | 'bottom'
export type TimelineStatus = 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted'
export type TimelineDensity = 'compact' | 'default' | 'comfortable'

export interface TimelineContextValue {
  direction: TimelineDirection
  align: TimelineAlign
  side: TimelineSide
  density: TimelineDensity
  count: number
  register: (id: string) => void
  unregister: (id: string) => void
  indexOf: (id: string) => number
}

export const TimelineContext = React.createContext<TimelineContextValue | null>(null)

export interface TimelineItemContextValue {
  index: number
  isFirst: boolean
  isLast: boolean
  side: TimelineSide
  status: TimelineStatus
  direction: TimelineDirection
  density: TimelineDensity
}

export const TimelineItemContext = React.createContext<TimelineItemContextValue | null>(null)

```

### `packages/registry-react/components/timeline/timeline.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const timelineMediaVariants = cva(
  'relative z-10 flex shrink-0 items-center justify-center rounded-full ring-4 ring-background [&>svg]:shrink-0',
  {
    variants: {
      variant: {
        dot: 'size-3',
        icon: 'size-8 [&>svg]:size-4',
        avatar: 'size-9 ring-2 [&>img]:size-full [&>img]:rounded-full [&>img]:object-cover',
      },
      status: {
        default: 'bg-primary text-primary-foreground',
        success: 'bg-success text-success-foreground',
        warning: 'bg-warning text-warning-foreground',
        error: 'bg-destructive text-destructive-foreground',
        info: 'bg-info text-info-foreground',
        muted: 'bg-muted text-muted-foreground',
      },
    },
    defaultVariants: {
      variant: 'dot',
      status: 'default',
    },
  },
)

export type TimelineMediaVariantsProps = VariantProps<typeof timelineMediaVariants>
export type TimelineMediaVariant = 'dot' | 'icon' | 'avatar'

```

### `packages/registry-react/components/timeline/index.ts`

```ts
export {
  Timeline,
  TimelineItem,
  TimelineMedia,
  TimelineSeparator,
  TimelineContent,
  TimelineTitle,
  TimelineDescription,
  TimelineDate,
  type TimelineProps,
  type TimelineItemProps,
  type TimelineItemRenderProps,
  type TimelineMediaProps,
  type TimelineSeparatorProps,
  type TimelineTitleProps,
} from './timeline'

export type {
  TimelineDirection,
  TimelineAlign,
  TimelineSide,
  TimelineStatus,
  TimelineDensity,
} from './context'

// Re-export variant API from the sibling file (kept separate to avoid the
// component <-> index circular import that broke dev SSR for Card).
export { timelineMediaVariants, type TimelineMediaVariantsProps, type TimelineMediaVariant } from './timeline.variants'

```

## toggle

- type: `registry:ui`
- description: On/off button (different from Switch — this is shaped like a button and lives in toolbars). Three sizes, two variants. Use inside Toggle Group or standalone for "press to enable" buttons like bold / italic.
- npm deps: `class-variance-authority`, `@radix-ui/react-toggle`

### `packages/registry-react/components/toggle/toggle.tsx`

```tsx
'use client'

import * as React from 'react'
import * as TogglePrimitive from '@radix-ui/react-toggle'
import { cn } from '@/lib/utils'
import { toggleVariants, type ToggleVariants } from './toggle.variants'

export interface ToggleProps
  extends Omit<React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, 'asChild'>,
    ToggleVariants {
  /** Render the child element as the toggle (merging props/styles) instead of
   *  emitting a <button> — the React equivalent of reka-ui's as-child. */
  asChild?: boolean
}

const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
  ({ className, variant, size, ...props }, ref) => (
    <TogglePrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size }), className)}
      {...props}
    />
  ),
)
Toggle.displayName = 'Toggle'

export { Toggle }

```

### `packages/registry-react/components/toggle/toggle.variants.ts`

```ts
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'

/**
 * Variant definitions live in their own file (rather than the package
 * `index.ts`) so consuming Vue SFCs can import without creating a circular
 * dependency through the index. See card.variants.ts for the canonical
 * example + the SSR symptom that motivated the split.
 */

export const toggleVariants = cva(
  // Focus ring intentionally subtle: 1px ring on :focus-visible only, no
  // border swap. Keyboard users still get a clear focused state; mouse
  // users don't see a loud 3px halo after click (which lingers because
  // the button retains focus). Matches the segmented-control density.
  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:ring-ring/50 focus-visible:ring-1 outline-none transition-colors duration-200 whitespace-nowrap",
  {
    variants: {
      variant: {
        default: 'bg-transparent',
        outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-9 px-2 min-w-9',
        sm: 'h-8 px-1.5 min-w-8',
        lg: 'h-10 px-2.5 min-w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

export type ToggleVariants = VariantProps<typeof toggleVariants>

```

### `packages/registry-react/components/toggle/index.ts`

```ts
export { Toggle, type ToggleProps } from './toggle'
export { toggleVariants, type ToggleVariants } from './toggle.variants'

```

## toggle-group

- type: `registry:ui`
- description: Group of `Toggle` buttons that act as a single-select or multi-select control. Use for view-mode pickers (grid/list), text-format toolbars, and any "pick one of N" button bar.
- npm deps: `class-variance-authority`, `@radix-ui/react-toggle-group`
- registry deps: `toggle`

### `packages/registry-react/components/toggle-group/toggle-group.tsx`

```tsx
'use client'

import * as React from 'react'
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
import { cn } from '@/lib/utils'
import { toggleVariants, type ToggleVariants } from '../toggle/toggle.variants'

// Make variant/size/spacing reachable from items without each consumer having
// to pass it manually — the React equivalent of the Vue provide('toggleGroup').
type ToggleGroupContextValue = {
  variant?: ToggleVariants['variant']
  size?: ToggleVariants['size']
  spacing?: number
}

const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({})

export type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
  ToggleVariants & {
    spacing?: number
  }

const ToggleGroup = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Root>, ToggleGroupProps>(
  ({ className, variant, size, spacing = 0, children, ...props }, ref) => (
    <ToggleGroupPrimitive.Root
      ref={ref}
      data-uipkge=""
      data-slot="toggle-group"
      data-size={size}
      data-variant={variant}
      data-spacing={spacing}
      style={{ '--gap': spacing } as React.CSSProperties}
      className={cn(
        'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
        className,
      )}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>{children}</ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  ),
)
ToggleGroup.displayName = 'ToggleGroup'

export type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & ToggleVariants

const ToggleGroupItem = React.forwardRef<React.ElementRef<typeof ToggleGroupPrimitive.Item>, ToggleGroupItemProps>(
  ({ className, variant, size, children, ...props }, ref) => {
    const context = React.useContext(ToggleGroupContext)
    return (
      <ToggleGroupPrimitive.Item
        ref={ref}
        data-uipkge=""
        data-slot="toggle-group-item"
        data-variant={context.variant || variant}
        data-size={context.size || size}
        data-spacing={context.spacing}
        className={cn(
          toggleVariants({
            variant: context.variant || variant,
            size: context.size || size,
          }),
          'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
          'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
          className,
        )}
        {...props}
      >
        {children}
      </ToggleGroupPrimitive.Item>
    )
  },
)
ToggleGroupItem.displayName = 'ToggleGroupItem'

export { ToggleGroup, ToggleGroupItem }

```

### `packages/registry-react/components/toggle-group/index.ts`

```ts
export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './toggle-group'

```

## toggle-setting-list

- type: `registry:block`
- description: List of toggle-able settings in a SectionCard. The `value` prop binds a Record<string, boolean> keyed by item.key; `onValueChange` emits the next record.
- npm deps: `lucide-react`
- registry deps: `section-card`

### `packages/registry-react/blocks/toggle-setting-list/ToggleSettingList.tsx`

```tsx
'use client'

import * as React from 'react'
import { SectionCard } from '@/components/ui/section-card'

export interface SettingRow {
  key: string
  label: string
  desc?: string
}

export interface ToggleSettingListProps {
  title?: string
  description?: string
  /** Rendered top-right of the header (e.g. an icon node). */
  headerIcon?: React.ReactNode
  items: SettingRow[]
  value: Record<string, boolean>
  onValueChange?: (value: Record<string, boolean>) => void
  className?: string
}

export function ToggleSettingList({
  title,
  description,
  headerIcon,
  items,
  value,
  onValueChange,
  className,
}: ToggleSettingListProps) {
  function toggle(key: string) {
    onValueChange?.({ ...value, [key]: !value[key] })
  }

  return (
    <SectionCard title={title ?? 'Notifications'} description={description} className={className} headerAction={headerIcon}>
      <ul className="-my-4 divide-y">
        {items.map((row, i) => (
          <li
            key={row.key}
            className={['flex items-center justify-between gap-4 py-4', i === 0 ? 'pt-0' : ''].filter(Boolean).join(' ')}
          >
            <div>
              <p className="text-sm font-medium">{row.label}</p>
              {row.desc && <p className="text-muted-foreground text-xs">{row.desc}</p>}
            </div>
            <button
              type="button"
              role="switch"
              aria-checked={value[row.key]}
              className={[
                'focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2',
                value[row.key] ? 'bg-primary' : 'bg-muted-foreground/30',
              ].join(' ')}
              onClick={() => toggle(row.key)}
            >
              <span
                className={[
                  'bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform',
                  value[row.key] ? 'translate-x-[18px]' : 'translate-x-0.5',
                ].join(' ')}
              />
            </button>
          </li>
        ))}
      </ul>
    </SectionCard>
  )
}

```

## tooltip

- type: `registry:ui`
- description: Small popover triggered by hover/focus, used for short labels — icon-button names, abbreviation expansions, keyboard shortcuts. Auto-positions and respects `prefers-reduced-motion`.
- npm deps: `@radix-ui/react-tooltip`

### `packages/registry-react/components/tooltip/tooltip.tsx`

```tsx
'use client'

import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
import { cn } from '@/lib/utils'

// Defaults follow Radix conventions: 700ms open delay for ambient tooltips,
// 300ms skip-delay so once one tooltip opens, neighbors skip the wait.
function TooltipProvider({
  delayDuration = 700,
  skipDelayDuration = 300,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      delayDuration={delayDuration}
      skipDelayDuration={skipDelayDuration}
      {...props}
    />
  )
}

function Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return <TooltipPrimitive.Root data-uipkge="" data-slot="tooltip" {...props} />
}

const TooltipTrigger = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
>((props, ref) => (
  <TooltipPrimitive.Trigger ref={ref} data-uipkge="" data-slot="tooltip-trigger" {...props} />
))
TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, children, ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      data-uipkge=""
      data-slot="tooltip-content"
      sideOffset={sideOffset}
      className={cn(
        'bg-foreground text-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance',
        className,
      )}
      {...props}
    >
      {children}
      <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
    </TooltipPrimitive.Content>
  </TooltipPrimitive.Portal>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent }

```

### `packages/registry-react/components/tooltip/index.ts`

```ts
export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from './tooltip'

```

## tour

- type: `registry:ui`
- description: Multi-step guided overlay walkthrough. Highlights a target element with a dim mask cutout and shows a card next to it. Steps support targets by selector, ref, or function; centered (no-target) steps work as modal-style intros.
- npm deps: `lucide-react`
- registry deps: `button`

### `packages/registry-react/components/tour/tour.tsx`

```tsx
'use client'

import * as React from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

export type TourTarget = string | (() => HTMLElement | null) | HTMLElement | null

export interface TargetRect {
  x: number
  y: number
  width: number
  height: number
}

export interface TourStep {
  target?: TourTarget
  title: string
  description?: string
  cover?: string
  mask?: boolean
  nextButtonText?: string
  prevButtonText?: string
}

// ── useTourTarget ────────────────────────────────────────────────────────────
// Measures the current step's target element (getBoundingClientRect) and keeps
// the rect in sync on scroll / resize / element resize. `attach` is called
// imperatively when the step or open state changes; `measure` re-reads the rect.
function useTourTarget(target: TourTarget | undefined) {
  const [rect, setRect] = React.useState<TargetRect | null>(null)
  const elementRef = React.useRef<HTMLElement | null>(null)
  const resizeObsRef = React.useRef<ResizeObserver | null>(null)
  const rafRef = React.useRef(0)
  const targetRef = React.useRef(target)
  targetRef.current = target

  const resolve = React.useCallback((): HTMLElement | null => {
    const t = targetRef.current
    if (!t) return null
    if (typeof t === 'string') return document.querySelector(t) as HTMLElement | null
    if (typeof t === 'function') return t()
    return t
  }, [])

  const measure = React.useCallback(() => {
    cancelAnimationFrame(rafRef.current)
    rafRef.current = requestAnimationFrame(() => {
      if (!elementRef.current) {
        setRect(null)
        return
      }
      const r = elementRef.current.getBoundingClientRect()
      setRect({ x: r.left, y: r.top, width: r.width, height: r.height })
    })
  }, [])

  const detach = React.useCallback(() => {
    resizeObsRef.current?.disconnect()
    resizeObsRef.current = null
    window.removeEventListener('scroll', measure, true)
    window.removeEventListener('resize', measure)
    cancelAnimationFrame(rafRef.current)
  }, [measure])

  const attach = React.useCallback(() => {
    detach()
    elementRef.current = resolve()
    if (!elementRef.current) {
      setRect(null)
      return
    }
    measure()
    if (typeof ResizeObserver !== 'undefined') {
      resizeObsRef.current = new ResizeObserver(measure)
      resizeObsRef.current.observe(elementRef.current)
      resizeObsRef.current.observe(document.documentElement)
    }
    window.addEventListener('scroll', measure, { passive: true, capture: true })
    window.addEventListener('resize', measure, { passive: true })
  }, [detach, measure, resolve])

  React.useEffect(() => detach, [detach])

  return { rect, attach, detach, measure }
}

// ── TourMask ─────────────────────────────────────────────────────────────────
interface TourMaskProps {
  rect: TargetRect | null
  zIndex: number
  opacity?: number
  padding?: number
  radius?: number
}

function TourMask({ rect, zIndex, opacity = 0.5, padding = 4, radius = 6 }: TourMaskProps) {
  const cutout = rect
    ? {
        x: rect.x - padding,
        y: rect.y - padding,
        w: rect.width + padding * 2,
        h: rect.height + padding * 2,
      }
    : null

  return (
    <svg className="pointer-events-none fixed inset-0" style={{ zIndex }} width="100%" height="100%" aria-hidden="true">
      <defs>
        <mask id="uipkge-tour-mask">
          <rect width="100%" height="100%" fill="white" />
          {cutout && (
            <rect x={cutout.x} y={cutout.y} width={cutout.w} height={cutout.h} rx={radius} fill="black" />
          )}
        </mask>
      </defs>
      <rect
        width="100%"
        height="100%"
        fill={`rgba(0, 0, 0, ${opacity})`}
        mask="url(#uipkge-tour-mask)"
        className="pointer-events-auto"
        style={{ transition: 'all 200ms ease' }}
      />
    </svg>
  )
}

// ── TourCard ─────────────────────────────────────────────────────────────────
interface TourCardProps {
  title: string
  description?: string
  cover?: string
  rect: TargetRect | null
  total: number
  current: number
  prevText?: string
  nextText?: string
  type?: 'default' | 'primary'
  zIndex: number
  onPrev: () => void
  onNext: () => void
  onFinish: () => void
  onSkip: () => void
}

function TourCard({
  title,
  description,
  cover,
  rect,
  total,
  current,
  prevText = 'Previous',
  nextText = 'Next',
  type = 'default',
  zIndex,
  onPrev,
  onNext,
  onFinish,
  onSkip,
}: TourCardProps) {
  const isLast = current === total - 1
  const isFirst = current === 0

  const cardStyle = React.useMemo<React.CSSProperties>(() => {
    const cardWidth = 320
    const margin = 12
    if (!rect) {
      return {
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: `${cardWidth}px`,
        zIndex: zIndex + 1,
      }
    }
    const { x, y, width, height } = rect
    const viewportH = typeof window !== 'undefined' ? window.innerHeight : 768
    const viewportW = typeof window !== 'undefined' ? window.innerWidth : 1024
    const placeBelow = y + height + margin + 200 < viewportH
    const top = placeBelow ? y + height + margin : Math.max(8, y - margin - 200)
    let left = x
    if (left + cardWidth > viewportW - 8) {
      left = viewportW - cardWidth - 8
    }
    if (left < 8) left = 8
    return {
      position: 'fixed',
      top: `${top}px`,
      left: `${left}px`,
      width: `${cardWidth}px`,
      zIndex: zIndex + 1,
    }
  }, [rect, zIndex])

  return (
    <div
      role="dialog"
      aria-modal="true"
      className={cn(
        'relative space-y-3 rounded-lg border p-4 shadow-lg',
        type === 'primary' ? 'bg-primary text-primary-foreground border-primary' : 'bg-popover text-popover-foreground',
      )}
      style={cardStyle}
    >
      <button
        type="button"
        className="hover:bg-foreground/10 focus-visible:ring-ring absolute top-2 right-2 inline-flex size-6 items-center justify-center rounded focus-visible:ring-2 focus-visible:outline-none"
        aria-label="Close tour"
        onClick={onSkip}
      >
        <X className="size-4" aria-hidden="true" />
      </button>

      {cover && <img src={cover} alt="" className="w-full rounded-md" />}

      <div>
        <div className="pr-6 font-semibold">{title}</div>
        {description && <div className="mt-1 text-sm opacity-90">{description}</div>}
      </div>

      <div className="flex items-center justify-between gap-2 pt-2">
        <div className="text-xs tabular-nums opacity-70" aria-live="polite">
          {current + 1} / {total}
        </div>
        <div className="flex gap-2">
          {!isFirst && (
            <Button size="sm" variant={type === 'primary' ? 'secondary' : 'outline'} onClick={onPrev}>
              {prevText}
            </Button>
          )}
          {!isLast ? (
            <Button size="sm" variant={type === 'primary' ? 'secondary' : 'default'} onClick={onNext}>
              {nextText}
            </Button>
          ) : (
            <Button size="sm" variant={type === 'primary' ? 'secondary' : 'default'} onClick={onFinish}>
              Finish
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}

// ── Tour ─────────────────────────────────────────────────────────────────────
export interface TourProps {
  open?: boolean
  current?: number
  steps: TourStep[]
  mask?: boolean
  type?: 'default' | 'primary'
  zIndex?: number
  /** Controlled open updates — mirrors Vue's `update:open`. */
  onOpenChange?: (open: boolean) => void
  /** Controlled current-step updates — mirrors Vue's `update:current`. */
  onCurrentChange?: (current: number) => void
  /** Fired whenever the active step changes. */
  onChange?: (current: number) => void
  /** Fired when the user presses Finish on the last step. */
  onFinish?: () => void
  /** Fired when the user dismisses the tour (close button / Escape). */
  onClose?: () => void
}

function Tour({
  open = false,
  current = 0,
  steps,
  mask = true,
  type = 'default',
  zIndex = 1000,
  onOpenChange,
  onCurrentChange,
  onChange,
  onFinish,
  onClose,
}: TourProps) {
  const [stepIndex, setStepIndex] = React.useState(current)

  // Mirror the `current` prop into local state (Vue `watch(() => props.current)`).
  React.useEffect(() => {
    setStepIndex(current)
  }, [current])

  const currentStep = steps[stepIndex] ?? null

  const { rect, attach, measure } = useTourTarget(currentStep?.target)

  // Attach + scroll the target into view on open / step change (Vue's watch
  // on [open, stepIndex] with immediate + nextTick). The effect runs after
  // paint, which is React's equivalent of awaiting nextTick.
  React.useEffect(() => {
    if (!open) return
    attach()
    const t = currentStep?.target
    if (t) {
      const el = typeof t === 'string' ? (document.querySelector(t) as HTMLElement | null) : typeof t === 'function' ? t() : t
      el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
      const id = setTimeout(measure, 320)
      return () => clearTimeout(id)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, stepIndex])

  const setStep = React.useCallback(
    (i: number) => {
      setStepIndex(i)
      onCurrentChange?.(i)
      onChange?.(i)
    },
    [onCurrentChange, onChange],
  )

  const next = React.useCallback(() => {
    if (stepIndex < steps.length - 1) setStep(stepIndex + 1)
  }, [stepIndex, steps.length, setStep])

  const prev = React.useCallback(() => {
    if (stepIndex > 0) setStep(stepIndex - 1)
  }, [stepIndex, setStep])

  const finish = React.useCallback(() => {
    onFinish?.()
    onOpenChange?.(false)
  }, [onFinish, onOpenChange])

  const skip = React.useCallback(() => {
    onClose?.()
    onOpenChange?.(false)
  }, [onClose, onOpenChange])

  // Escape closes the tour while open.
  React.useEffect(() => {
    if (typeof document === 'undefined') return
    if (!open) return
    function onKeydown(e: KeyboardEvent) {
      if (e.key === 'Escape') {
        e.preventDefault()
        skip()
      }
    }
    document.addEventListener('keydown', onKeydown)
    return () => document.removeEventListener('keydown', onKeydown)
  }, [open, skip])

  const showMask = currentStep?.mask !== undefined ? currentStep.mask : mask

  if (typeof document === 'undefined') return null
  if (!open || !currentStep) return null

  return createPortal(
    <>
      {showMask && <TourMask rect={rect} zIndex={zIndex} />}
      <TourCard
        title={currentStep.title}
        description={currentStep.description}
        cover={currentStep.cover}
        rect={rect}
        total={steps.length}
        current={stepIndex}
        prevText={currentStep.prevButtonText}
        nextText={currentStep.nextButtonText}
        type={type}
        zIndex={zIndex}
        onPrev={prev}
        onNext={next}
        onFinish={finish}
        onSkip={skip}
      />
    </>,
    document.body,
  )
}

export { Tour }

```

### `packages/registry-react/components/tour/index.ts`

```ts
export { Tour, type TourProps, type TourStep, type TourTarget, type TargetRect } from './tour'

```

## transfer

- type: `registry:ui`
- description: Dual-list move-between control. Two columns plus a center pair of move buttons. Optional search, pagination, and one-way mode.
- npm deps: `lucide-react`
- registry deps: `input`, `checkbox`, `button`, `scroll-area`

### `packages/registry-react/components/transfer/transfer.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronLeft, ChevronRight, GripVertical, Search } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { ScrollArea } from '@/components/ui/scroll-area'

export interface TransferItem {
  key: string
  label: string
  description?: string
  disabled?: boolean
}

export type TransferSide = 'left' | 'right'

interface TransferDragPayload {
  keys: string[]
  fromSide: TransferSide
}

interface TransferContextValue {
  disabled: boolean
  showSearch: boolean
  height: number | string
  pageSize: number | null
  filterFn: (query: string, item: TransferItem) => boolean
  draggable: boolean
  selectable: boolean
  oneWay: boolean
  dragPayload: TransferDragPayload | null
  startDrag: (payload: TransferDragPayload) => void
  endDrag: () => void
  drop: (toSide: TransferSide, beforeKey: string | null) => void
}

const TransferContext = React.createContext<TransferContextValue | null>(null)

function useTransferContext(): TransferContextValue {
  const ctx = React.useContext(TransferContext)
  if (!ctx) throw new Error('TransferList must be used inside <Transfer>.')
  return ctx
}

export interface TransferProps {
  targetKeys?: string[]
  /** Uncontrolled initial target keys. */
  defaultTargetKeys?: string[]
  dataSource: TransferItem[]
  titles?: [string, string]
  showSearch?: boolean
  filterFn?: (query: string, item: TransferItem) => boolean
  height?: number | string
  pagination?: boolean | { pageSize: number }
  oneWay?: boolean
  disabled?: boolean
  draggable?: boolean
  selectable?: boolean
  className?: string
  onTargetKeysChange?: (keys: string[]) => void
  onChange?: (keys: string[], direction: 'left' | 'right', moved: string[]) => void
  onSearch?: (payload: { direction: 'left' | 'right'; query: string }) => void
  onSelectChange?: (payload: { left: string[]; right: string[] }) => void
  /** Footer rendered under the left list. */
  footerLeft?: React.ReactNode
  /** Footer rendered under the right list. */
  footerRight?: React.ReactNode
}

const defaultFilter = (q: string, item: TransferItem) => item.label.toLowerCase().includes(q.toLowerCase())

const Transfer = React.forwardRef<HTMLDivElement, TransferProps>(
  (
    {
      targetKeys,
      defaultTargetKeys,
      dataSource,
      titles = ['Source', 'Target'],
      showSearch = false,
      filterFn,
      height = 320,
      pagination = false,
      oneWay = false,
      disabled = false,
      draggable = false,
      selectable = true,
      className,
      onTargetKeysChange,
      onChange,
      onSearch,
      onSelectChange,
      footerLeft,
      footerRight,
    },
    ref,
  ) => {
    const isControlled = targetKeys !== undefined
    const [internalKeys, setInternalKeys] = React.useState<string[]>(defaultTargetKeys ?? [])
    const resolvedTargetKeys = isControlled ? targetKeys : internalKeys

    const setTargetKeys = React.useCallback(
      (next: string[]) => {
        if (!isControlled) setInternalKeys(next)
        onTargetKeysChange?.(next)
      },
      [isControlled, onTargetKeysChange],
    )

    const [selectedLeft, setSelectedLeft] = React.useState<string[]>([])
    const [selectedRight, setSelectedRight] = React.useState<string[]>([])
    const [dragPayload, setDragPayload] = React.useState<TransferDragPayload | null>(null)

    const dataMap = React.useMemo(() => new Map(dataSource.map((i) => [i.key, i])), [dataSource])

    const sourceItems = React.useMemo(
      () => dataSource.filter((i) => !resolvedTargetKeys.includes(i.key)),
      [dataSource, resolvedTargetKeys],
    )

    // When draggable, target order follows targetKeys exactly so reorder persists.
    // Otherwise keep legacy dataSource ordering for backwards compat.
    const targetItems = React.useMemo<TransferItem[]>(() => {
      if (draggable) {
        const out: TransferItem[] = []
        for (const k of resolvedTargetKeys) {
          const item = dataMap.get(k)
          if (item) out.push(item)
        }
        return out
      }
      return dataSource.filter((i) => resolvedTargetKeys.includes(i.key))
    }, [draggable, resolvedTargetKeys, dataMap, dataSource])

    const pageSize = React.useMemo<number | null>(() => {
      if (pagination === false) return null
      if (pagination === true) return 10
      return pagination.pageSize
    }, [pagination])

    const startDrag = React.useCallback((payload: TransferDragPayload) => {
      setDragPayload(payload)
    }, [])

    const endDrag = React.useCallback(() => {
      setDragPayload(null)
    }, [])

    // Refs so the stable `drop` callback always reads current values.
    const stateRef = React.useRef({ resolvedTargetKeys, dragPayload, selectedLeft, selectedRight, dataMap, disabled, oneWay })
    stateRef.current = { resolvedTargetKeys, dragPayload, selectedLeft, selectedRight, dataMap, disabled, oneWay }

    const drop = React.useCallback(
      (toSide: TransferSide, beforeKey: string | null) => {
        const s = stateRef.current
        const payload = s.dragPayload
        setDragPayload(null)
        if (!payload || s.disabled) return
        const keys = payload.keys.filter((k) => {
          const item = s.dataMap.get(k)
          return item && !item.disabled
        })
        if (keys.length === 0) return

        // left → left: reorder source not supported (parent owns dataSource order). No-op.
        if (payload.fromSide === 'left' && toSide === 'left') return

        // right → left: remove from targetKeys (skip when oneWay).
        if (payload.fromSide === 'right' && toSide === 'left') {
          if (s.oneWay) return
          const removeSet = new Set(keys)
          const next = s.resolvedTargetKeys.filter((k) => !removeSet.has(k))
          const nextRight = s.selectedRight.filter((k) => !removeSet.has(k))
          setSelectedRight(nextRight)
          setTargetKeys(next)
          onChange?.(next, 'left', keys)
          onSelectChange?.({ left: s.selectedLeft, right: nextRight })
          return
        }

        // → right: insert (cross-list move) or reorder (within-target).
        const movingSet = new Set(keys)
        const without = s.resolvedTargetKeys.filter((k) => !movingSet.has(k))
        let insertAt = without.length
        if (beforeKey != null) {
          const idx = without.indexOf(beforeKey)
          if (idx >= 0) insertAt = idx
        }
        const next = [...without.slice(0, insertAt), ...keys, ...without.slice(insertAt)]
        if (payload.fromSide === 'left') {
          const movedSet = new Set(keys)
          const nextLeft = s.selectedLeft.filter((k) => !movedSet.has(k))
          setSelectedLeft(nextLeft)
          setTargetKeys(next)
          onChange?.(next, 'right', keys)
          onSelectChange?.({ left: nextLeft, right: s.selectedRight })
        } else {
          // right → right: pure reorder, no change event (target set unchanged).
          setTargetKeys(next)
        }
      },
      [setTargetKeys, onChange, onSelectChange],
    )

    const contextValue = React.useMemo<TransferContextValue>(
      () => ({
        disabled,
        showSearch,
        height,
        pageSize,
        filterFn: filterFn ?? defaultFilter,
        draggable,
        selectable,
        oneWay,
        dragPayload,
        startDrag,
        endDrag,
        drop,
      }),
      [disabled, showSearch, height, pageSize, filterFn, draggable, selectable, oneWay, dragPayload, startDrag, endDrag, drop],
    )

    function onLeftSelected(keys: string[]) {
      setSelectedLeft(keys)
      onSelectChange?.({ left: keys, right: selectedRight })
    }

    function onRightSelected(keys: string[]) {
      setSelectedRight(keys)
      onSelectChange?.({ left: selectedLeft, right: keys })
    }

    function moveRight() {
      if (selectedLeft.length === 0) return
      const next = [...resolvedTargetKeys, ...selectedLeft]
      const moved = [...selectedLeft]
      setSelectedLeft([])
      setTargetKeys(next)
      onChange?.(next, 'right', moved)
      onSelectChange?.({ left: [], right: selectedRight })
    }

    function moveLeft() {
      if (selectedRight.length === 0) return
      const remove = new Set(selectedRight)
      const next = resolvedTargetKeys.filter((k) => !remove.has(k))
      const moved = [...selectedRight]
      setSelectedRight([])
      setTargetKeys(next)
      onChange?.(next, 'left', moved)
      onSelectChange?.({ left: selectedLeft, right: [] })
    }

    return (
      <TransferContext.Provider value={contextValue}>
        <div ref={ref} className={cn('flex items-stretch gap-3', className)} data-uipkge="" data-slot="transfer">
          <div className="min-w-0 flex-1">
            <TransferList
              side="left"
              title={titles[0]}
              items={sourceItems}
              selected={selectedLeft}
              onSelectedChange={onLeftSelected}
              onSearch={(q) => onSearch?.({ direction: 'left', query: q })}
              footer={footerLeft}
            />
          </div>
          <TransferOperation
            canMoveRight={selectedLeft.length > 0 && !disabled}
            canMoveLeft={selectedRight.length > 0 && !disabled}
            oneWay={oneWay}
            onMoveRight={moveRight}
            onMoveLeft={moveLeft}
          />
          <div className="min-w-0 flex-1">
            <TransferList
              side="right"
              title={titles[1]}
              items={targetItems}
              selected={selectedRight}
              onSelectedChange={onRightSelected}
              onSearch={(q) => onSearch?.({ direction: 'right', query: q })}
              footer={footerRight}
            />
          </div>
        </div>
      </TransferContext.Provider>
    )
  },
)
Transfer.displayName = 'Transfer'

interface TransferOperationProps {
  canMoveRight: boolean
  canMoveLeft: boolean
  oneWay?: boolean
  onMoveRight: () => void
  onMoveLeft: () => void
}

function TransferOperation({ canMoveRight, canMoveLeft, oneWay, onMoveRight, onMoveLeft }: TransferOperationProps) {
  return (
    <div className="flex flex-col items-center justify-center gap-2 px-2">
      <Button
        size="icon-sm"
        variant="outline"
        disabled={!canMoveRight}
        aria-label="Move selected to right"
        onClick={onMoveRight}
      >
        <ChevronRight aria-hidden="true" />
      </Button>
      {!oneWay && (
        <Button
          size="icon-sm"
          variant="outline"
          disabled={!canMoveLeft}
          aria-label="Move selected to left"
          onClick={onMoveLeft}
        >
          <ChevronLeft aria-hidden="true" />
        </Button>
      )}
    </div>
  )
}

interface TransferListProps {
  side: TransferSide
  title: string
  items: TransferItem[]
  selected: string[]
  onSelectedChange: (keys: string[]) => void
  onSearch: (query: string) => void
  footer?: React.ReactNode
}

function TransferList({ side, title, items, selected, onSelectedChange, onSearch, footer }: TransferListProps) {
  const ctx = useTransferContext()

  const [query, setQuery] = React.useState('')
  const [page, setPage] = React.useState(1)

  const filtered = React.useMemo(() => {
    if (!query) return items
    return items.filter((i) => ctx.filterFn(query, i))
  }, [query, items, ctx])

  const effectivePageSize = ctx.pageSize ?? Math.max(1, filtered.length)
  const totalPages = Math.max(1, Math.ceil(filtered.length / effectivePageSize))

  const visible = React.useMemo(() => {
    if (!ctx.pageSize) return filtered
    const start = (page - 1) * effectivePageSize
    return filtered.slice(start, start + effectivePageSize)
  }, [ctx.pageSize, filtered, page, effectivePageSize])

  React.useEffect(() => {
    if (page > totalPages) setPage(totalPages)
  }, [page, totalPages])

  const visibleEnabledKeys = React.useMemo(
    () => visible.filter((i) => !i.disabled).map((i) => i.key),
    [visible],
  )
  const selectedSet = React.useMemo(() => new Set(selected), [selected])

  const visibleSelectedCount = visibleEnabledKeys.filter((k) => selectedSet.has(k)).length

  const masterChecked = visibleEnabledKeys.length > 0 && visibleSelectedCount === visibleEnabledKeys.length
  const masterIndeterminate = visibleSelectedCount > 0 && visibleSelectedCount < visibleEnabledKeys.length

  const [lastAnchor, setLastAnchor] = React.useState<string | null>(null)

  function toggleAll(checked: boolean) {
    let next = [...selected]
    if (checked) {
      for (const k of visibleEnabledKeys) {
        if (!selectedSet.has(k)) next.push(k)
      }
    } else {
      next = next.filter((k) => !visibleEnabledKeys.includes(k))
    }
    onSelectedChange(next)
  }

  function toggleItem(item: TransferItem, checked: boolean) {
    if (item.disabled || ctx.disabled) return
    let next = [...selected]
    if (checked) {
      if (!next.includes(item.key)) next.push(item.key)
    } else {
      next = next.filter((k) => k !== item.key)
    }
    onSelectedChange(next)
    setLastAnchor(item.key)
  }

  function onRowClick(e: React.MouseEvent, item: TransferItem) {
    if (item.disabled || ctx.disabled) return
    // With checkbox visible, click toggles (matches checkbox UX).
    if (ctx.selectable) {
      toggleItem(item, !selectedSet.has(item.key))
      return
    }
    // No checkbox: desktop list pattern — plain=replace, cmd/ctrl=toggle, shift=range.
    const enabledKeys = visible.filter((i) => !i.disabled).map((i) => i.key)
    if (e.shiftKey && lastAnchor && enabledKeys.includes(lastAnchor)) {
      const start = enabledKeys.indexOf(lastAnchor)
      const end = enabledKeys.indexOf(item.key)
      const [lo, hi] = start < end ? [start, end] : [end, start]
      onSelectedChange(enabledKeys.slice(lo, hi + 1))
      return
    }
    if (e.metaKey || e.ctrlKey) {
      let next = [...selected]
      if (selectedSet.has(item.key)) next = next.filter((k) => k !== item.key)
      else next.push(item.key)
      onSelectedChange(next)
      setLastAnchor(item.key)
      return
    }
    onSelectedChange([item.key])
    setLastAnchor(item.key)
  }

  function handleSearch(v: string) {
    setQuery(v)
    setPage(1)
    onSearch(v)
  }

  function prevPage() {
    if (page > 1) setPage((p) => p - 1)
  }

  function nextPage() {
    if (page < totalPages) setPage((p) => p + 1)
  }

  const heightStyle: React.CSSProperties = {
    height: typeof ctx.height === 'number' ? ctx.height + 'px' : ctx.height,
  }

  // ----- DnD -----

  const [dropIndicator, setDropIndicator] = React.useState<{ key: string; position: 'before' | 'after' } | null>(null)
  const [draggingKeys, setDraggingKeys] = React.useState<Set<string>>(new Set())

  const isDropTarget = React.useMemo(() => {
    const p = ctx.dragPayload
    if (!p) return false
    // left list rejects drops when oneWay
    if (side === 'left' && ctx.oneWay && p.fromSide === 'right') return false
    // left → left is a no-op (parent owns dataSource order)
    if (side === 'left' && p.fromSide === 'left') return false
    return true
  }, [ctx.dragPayload, ctx.oneWay, side])

  function onItemDragStart(e: React.DragEvent, item: TransferItem) {
    if (!ctx.draggable || item.disabled || ctx.disabled) {
      e.preventDefault()
      return
    }
    // If the dragged row is part of the current selection, drag the whole selection.
    // Else, drag just this row (and clear selection visually for clarity).
    const keys = selectedSet.has(item.key)
      ? selected.filter((k) => {
          const i = items.find((x) => x.key === k)
          return i && !i.disabled
        })
      : [item.key]
    setDraggingKeys(new Set(keys))
    ctx.startDrag({ keys, fromSide: side })
    if (e.dataTransfer) {
      e.dataTransfer.effectAllowed = 'move'
      // Required by Firefox to actually start the drag.
      try {
        e.dataTransfer.setData('text/plain', keys.join(','))
      } catch {
        /* noop */
      }
    }
  }

  function onItemDragEnd() {
    setDraggingKeys(new Set())
    setDropIndicator(null)
    ctx.endDrag()
  }

  function onItemDragOver(e: React.DragEvent, item: TransferItem) {
    if (!isDropTarget) return
    e.preventDefault()
    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
    if (side !== 'right') {
      // left list: no insertion indicator, drop just removes from target
      return
    }
    const target = e.currentTarget as HTMLElement
    const rect = target.getBoundingClientRect()
    const after = e.clientY > rect.top + rect.height / 2
    setDropIndicator({ key: item.key, position: after ? 'after' : 'before' })
  }

  function onItemDrop(e: React.DragEvent, item: TransferItem) {
    if (!isDropTarget) return
    e.preventDefault()
    e.stopPropagation()
    if (side === 'right') {
      const after = dropIndicator?.position === 'after'
      const idx = items.findIndex((x) => x.key === item.key)
      const beforeKey = after ? (items[idx + 1]?.key ?? null) : item.key
      ctx.drop('right', beforeKey)
    } else {
      ctx.drop('left', null)
    }
    setDropIndicator(null)
  }

  function onListDragOver(e: React.DragEvent) {
    if (!isDropTarget) return
    e.preventDefault()
    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
  }

  function onListDrop(e: React.DragEvent) {
    if (!isDropTarget) return
    e.preventDefault()
    // Empty zone or below all items → append (right) / remove (left).
    ctx.drop(side, null)
    setDropIndicator(null)
  }

  function onListDragLeave(e: React.DragEvent) {
    // Clear indicator only when leaving the list container, not when crossing item rows.
    const related = e.relatedTarget as Node | null
    const current = e.currentTarget as Node
    if (!related || !current.contains(related)) {
      setDropIndicator(null)
    }
  }

  return (
    <div
      className={cn(
        'bg-card flex flex-col overflow-hidden rounded-md border transition-colors',
        ctx.dragPayload && isDropTarget && 'ring-ring/40 ring-1',
      )}
    >
      <div className="bg-muted/40 flex items-center justify-between gap-2 border-b px-3 py-2">
        <div className="flex min-w-0 items-center gap-2">
          {ctx.selectable && (
            <Checkbox
              checked={masterIndeterminate ? 'indeterminate' : masterChecked}
              disabled={ctx.disabled || visibleEnabledKeys.length === 0}
              onCheckedChange={(c) => toggleAll(c === true)}
            />
          )}
          <span className="truncate text-sm font-medium">{title}</span>
        </div>
        <span className="text-muted-foreground text-xs tabular-nums">
          {' '}
          {selected.length}/{items.length}{' '}
        </span>
      </div>

      {ctx.showSearch && (
        <div className="border-b p-2">
          <div className="relative">
            <Search
              className="text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2"
              aria-hidden="true"
            />
            <Input
              value={query}
              placeholder="Search"
              className="h-8 pl-8"
              onChange={(e) => handleSearch(e.target.value)}
            />
          </div>
        </div>
      )}

      <ScrollArea style={heightStyle} className="flex-1" onDragOver={onListDragOver} onDrop={onListDrop} onDragLeave={onListDragLeave}>
        <ul role="listbox" aria-multiselectable="true" className="py-1">
          {visible.map((item) => (
            <li
              key={item.key}
              role="option"
              aria-selected={selectedSet.has(item.key)}
              draggable={ctx.draggable && !item.disabled && !ctx.disabled}
              className={cn(
                'hover:bg-accent focus-visible:ring-ring relative flex min-h-11 cursor-pointer items-start gap-2 px-3 py-3 text-sm select-none focus-visible:ring-2 focus-visible:outline-none',
                item.disabled && 'cursor-not-allowed opacity-50',
                draggingKeys.has(item.key) && 'opacity-40',
                !ctx.selectable && selectedSet.has(item.key) && 'bg-accent',
              )}
              onClick={(e) => onRowClick(e, item)}
              onDragStart={(e) => onItemDragStart(e, item)}
              onDragEnd={onItemDragEnd}
              onDragOver={(e) => onItemDragOver(e, item)}
              onDrop={(e) => onItemDrop(e, item)}
            >
              {dropIndicator && dropIndicator.key === item.key && dropIndicator.position === 'before' && side === 'right' && (
                <span
                  className="bg-primary pointer-events-none absolute -top-px right-2 left-2 h-0.5 rounded-full"
                  aria-hidden="true"
                />
              )}
              {dropIndicator && dropIndicator.key === item.key && dropIndicator.position === 'after' && side === 'right' && (
                <span
                  className="bg-primary pointer-events-none absolute right-2 -bottom-px left-2 h-0.5 rounded-full"
                  aria-hidden="true"
                />
              )}
              {ctx.selectable && (
                <Checkbox
                  checked={selectedSet.has(item.key)}
                  disabled={item.disabled || ctx.disabled}
                  onCheckedChange={(c) => toggleItem(item, c === true)}
                  onClick={(e) => e.stopPropagation()}
                />
              )}
              <div className="min-w-0 flex-1">
                <div className="truncate">{item.label}</div>
                {item.description && <div className="text-muted-foreground truncate text-xs">{item.description}</div>}
              </div>
              {ctx.draggable && !item.disabled && (
                <GripVertical className="text-muted-foreground/60 mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
              )}
            </li>
          ))}
          {visible.length === 0 && <li className="text-muted-foreground px-3 py-6 text-center text-sm">No items</li>}
        </ul>
      </ScrollArea>

      {ctx.pageSize && totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 border-t p-2 text-xs">
          <button
            type="button"
            className="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
            disabled={page <= 1}
            onClick={prevPage}
          >
            Prev
          </button>
          <span className="tabular-nums">
            {page} / {totalPages}
          </span>
          <button
            type="button"
            className="hover:bg-accent focus-visible:ring-ring rounded px-2 py-1 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
            disabled={page >= totalPages}
            onClick={nextPage}
          >
            Next
          </button>
        </div>
      )}

      {footer && <div className="border-t p-2">{footer}</div>}
    </div>
  )
}

export { Transfer, TransferList, TransferOperation }

```

### `packages/registry-react/components/transfer/index.ts`

```ts
export {
  Transfer,
  TransferList,
  TransferOperation,
  type TransferProps,
  type TransferItem,
  type TransferSide,
} from './transfer'

```

## tree-chart

- type: `registry:ui`
- description: React mirror of @uipkge/tree-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/tree-chart/TreeChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// TreeChart
// ─────────────────────────────────────────────────────────────────────────

interface TreeNode {
  name: string
  value?: number
  children?: TreeNode[]
  /** Collapse this branch on initial render. */
  collapsed?: boolean
}

export interface TreeChartProps {
  data: TreeNode
  /** `LR` (left-to-right, default), `TB` (top-down), `RL`, `BT`, or `radial`. */
  orient?: 'LR' | 'TB' | 'RL' | 'BT' | 'radial'
  /** Allow click-and-drag pan. Default false. */
  roam?: boolean
  height?: number | string
  option?: any
  className?: string
}

export const TreeChart = React.forwardRef<HTMLDivElement, TreeChartProps>(
  ({ data, orient = 'LR', roam = false, height = 380, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const layout = orient === 'radial' ? ('radial' as const) : ('orthogonal' as const)
      const series = [
        {
          type: 'tree',
          data: [data],
          layout,
          orient: layout === 'orthogonal' ? orient : undefined,
          roam,
          symbol: 'circle',
          symbolSize: 10,
          initialTreeDepth: -1,
          top: 16,
          bottom: 16,
          left: layout === 'radial' ? '5%' : 16,
          right: layout === 'radial' ? '5%' : 60,
          label: {
            fontSize: 11,
            color: theme.textColor,
            position: layout === 'radial' ? ('inside' as const) : ('right' as const),
            verticalAlign: 'middle' as const,
            align: layout === 'radial' ? ('center' as const) : ('left' as const),
            distance: 6,
          },
          leaves: {
            label: { position: layout === 'radial' ? ('inside' as const) : ('right' as const) },
          },
          lineStyle: { color: theme.axisColor, width: 1.5, curveness: 0.5 },
          emphasis: { focus: 'descendant' as const },
          itemStyle: { color: theme.colors[0], borderColor: theme.colors[0] },
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          trigger: 'item',
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [data, orient, roam, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className} focusable={false}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
TreeChart.displayName = 'TreeChart'

```

### `packages/registry-react/components/charts/tree-chart/index.ts`

```ts
export { TreeChart, type TreeChartProps } from './TreeChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## tree-select

- type: `registry:ui`
- description: Select from tree-structured data with expand/collapse nodes, single or multi-select with checkboxes, and search filtering. Dropdown shows a nested tree; parent selection cascades to leaf descendants.
- npm deps: `lucide-react`, `@radix-ui/react-popover`, `@radix-ui/react-slot`, `class-variance-authority`
- registry deps: `popover`

### `packages/registry-react/components/tree-select/TreeSelect.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronDown, Loader2, Search, X } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { cn } from '@/lib/utils'
import { treeSelectTriggerVariants } from './tree-select.variants'
import { TreeSelectNode } from './TreeSelectNode'
import type { TreeSelectNode as TreeNode } from './types'

export interface TreeSelectProps {
  value?: string | string[] | null
  defaultValue?: string | string[] | null
  data: TreeNode[]
  multiple?: boolean
  placeholder?: string
  searchable?: boolean
  disabled?: boolean
  loading?: boolean
  clearable?: boolean
  defaultExpandAll?: boolean
  size?: 'sm' | 'default' | 'lg'
  emptyText?: string
  searchPlaceholder?: string
  className?: string
  onValueChange?: (value: string | string[] | null) => void
  onChange?: (value: string | string[] | null) => void
  onSelect?: (node: TreeNode) => void
  onClear?: () => void
}

function collectAllExpandable(nodes: TreeNode[]): string[] {
  const ids: string[] = []
  const walk = (list: TreeNode[]) => {
    for (const n of list) {
      if (n.children?.length) {
        ids.push(n.value)
        walk(n.children)
      }
    }
  }
  walk(nodes)
  return ids
}

function findNode(nodes: TreeNode[], value: string): TreeNode | undefined {
  for (const n of nodes) {
    if (n.value === value) return n
    if (n.children) {
      const found = findNode(n.children, value)
      if (found) return found
    }
  }
  return undefined
}

function findLabels(nodes: TreeNode[], values: string[]): string[] {
  return values.map((v) => findNode(nodes, v)?.label ?? v)
}

function collectLeafValues(node: TreeNode): string[] {
  if (!node.children?.length) return [node.value]
  const vals: string[] = []
  for (const c of node.children) vals.push(...collectLeafValues(c))
  return vals
}

const TreeSelect = React.forwardRef<HTMLButtonElement, TreeSelectProps>(
  (
    {
      value,
      defaultValue,
      data,
      multiple = false,
      placeholder = 'Select...',
      searchable = true,
      disabled = false,
      loading = false,
      clearable = true,
      defaultExpandAll = false,
      size = 'default',
      emptyText = 'No results found.',
      searchPlaceholder = 'Search...',
      className,
      onValueChange,
      onChange,
      onSelect,
      onClear,
    },
    ref,
  ) => {
    const isControlled = value !== undefined
    const [internalValue, setInternalValue] = React.useState<string | string[] | null>(
      defaultValue ?? null,
    )
    const currentValue = isControlled ? value : internalValue

    const [isOpen, setIsOpen] = React.useState(false)
    const [search, setSearch] = React.useState('')
    const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
      if (defaultExpandAll) return new Set(collectAllExpandable(data))
      return new Set()
    })

    // Re-collect expandable when defaultExpandAll toggles or data changes.
    React.useEffect(() => {
      if (defaultExpandAll) setExpandedIds(new Set(collectAllExpandable(data)))
    }, [defaultExpandAll, data])

    // Clear search when popover closes.
    React.useEffect(() => {
      if (!isOpen) setSearch('')
    }, [isOpen])

    const selectedValues = React.useMemo<Set<string>>(() => {
      if (currentValue == null) return new Set()
      if (Array.isArray(currentValue)) return new Set(currentValue)
      return new Set([currentValue])
    }, [currentValue])

    const displayLabel = React.useMemo(() => {
      if (multiple) {
        const vals = Array.isArray(currentValue) ? currentValue : []
        if (vals.length === 0) return placeholder
        const labels = findLabels(data, vals)
        if (labels.length <= 3) return labels.join(', ')
        return `${labels.slice(0, 3).join(', ')} +${labels.length - 3}`
      }
      if (currentValue == null) return placeholder
      const node = findNode(data, currentValue as string)
      return node?.label ?? String(currentValue)
    }, [multiple, currentValue, placeholder, data])

    const hasValue = React.useMemo(() => {
      if (multiple) return Array.isArray(currentValue) && currentValue.length > 0
      return currentValue != null
    }, [multiple, currentValue])

    // Search filtering: a node is visible if it or any descendant matches.
    const filteredIds = React.useMemo<Set<string> | null>(() => {
      const q = search.trim().toLowerCase()
      if (!q) return null
      const visible = new Set<string>()
      const walk = (nodes: TreeNode[]): boolean => {
        let anyMatch = false
        for (const n of nodes) {
          const selfMatch = n.label.toLowerCase().includes(q)
          let childMatch = false
          if (n.children?.length) {
            childMatch = walk(n.children)
          }
          if (selfMatch || childMatch) {
            visible.add(n.value)
            anyMatch = true
            // Auto-expand parents of matches
            if (childMatch) {
              setExpandedIds((prev) => {
                if (prev.has(n.value)) return prev
                const next = new Set(prev)
                next.add(n.value)
                return next
              })
            }
          }
        }
        return anyMatch
      }
      walk(data)
      return visible
    }, [search, data])

    function commit(next: string | string[] | null) {
      if (!isControlled) setInternalValue(next)
      onValueChange?.(next)
      onChange?.(next)
    }

    function toggleNode(node: TreeNode) {
      if (node.disabled) return
      setExpandedIds((prev) => {
        const next = new Set(prev)
        if (next.has(node.value)) next.delete(node.value)
        else next.add(node.value)
        return next
      })
    }

    function selectNode(node: TreeNode) {
      if (node.disabled) return
      if (!multiple) {
        commit(node.value)
        onSelect?.(node)
        setIsOpen(false)
        return
      }
      // Multi-select: toggle. For parent nodes, toggle all leaf descendants.
      const current = Array.isArray(currentValue) ? [...currentValue] : []
      const leaves = collectLeafValues(node)
      const allSelected = leaves.every((v) => current.includes(v))
      let next: string[]
      if (allSelected) {
        next = current.filter((v) => !leaves.includes(v))
      } else {
        next = [...current, ...leaves.filter((v) => !current.includes(v))]
      }
      commit(next)
      onSelect?.(node)
    }

    function clearAll(event?: React.MouseEvent | React.KeyboardEvent) {
      event?.stopPropagation()
      if (disabled) return
      onClear?.()
      if (multiple) {
        commit([])
      } else {
        commit(null)
      }
    }

    const triggerClasses = cn(treeSelectTriggerVariants({ size }), className)

    return (
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <PopoverTrigger asChild>
          <button
            ref={ref}
            type="button"
            role="combobox"
            aria-expanded={isOpen}
            disabled={disabled || loading}
            data-uipkge=""
            data-slot="tree-select"
            className={triggerClasses}
          >
            <span
              className={cn('flex-1 truncate text-left', hasValue ? 'text-foreground' : 'text-muted-foreground')}
            >
              {displayLabel}
            </span>
            <span className="flex shrink-0 items-center gap-1">
              {loading ? (
                <Loader2 className="text-muted-foreground size-4 animate-spin" />
              ) : clearable && hasValue && !disabled ? (
                <span
                  role="button"
                  tabIndex={0}
                  aria-label="Clear"
                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 flex size-4 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none"
                  onClick={(e) => clearAll(e)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault()
                      clearAll(e)
                    }
                  }}
                >
                  <X className="size-4" />
                </span>
              ) : (
                <ChevronDown
                  className={cn(
                    'text-muted-foreground size-4 shrink-0 transition-transform duration-200',
                    isOpen && 'rotate-180',
                  )}
                />
              )}
            </span>
          </button>
        </PopoverTrigger>

        <PopoverContent
          className="p-0"
          align="start"
          sideOffset={4}
          style={{ width: 'var(--radix-popover-trigger-width)' }}
        >
          <div className="flex max-h-80 flex-col">
            {searchable && (
              <div className="border-b p-2">
                <div className="relative">
                  <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-4 -translate-y-1/2" />
                  <input
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    placeholder={searchPlaceholder}
                    aria-label="Search tree"
                    className="border-input focus-visible:ring-ring/50 h-9 w-full rounded-md border bg-transparent pl-8 text-sm shadow-xs outline-none focus-visible:ring-[3px]"
                  />
                </div>
              </div>
            )}

            {loading ? (
              <div className="text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm">
                <Loader2 className="size-4 animate-spin" />
                Loading...
              </div>
            ) : filteredIds && filteredIds.size === 0 ? (
              <div className="text-muted-foreground py-6 text-center text-sm">{emptyText}</div>
            ) : (
              <div className="flex-1 overflow-y-auto p-1" role="tree">
                {data.map((node) => (
                  <TreeSelectNode
                    key={node.value}
                    node={node}
                    depth={0}
                    multiple={multiple}
                    expandedIds={expandedIds}
                    selectedValues={selectedValues}
                    filteredIds={filteredIds}
                    onToggle={toggleNode}
                    onSelect={selectNode}
                  />
                ))}
              </div>
            )}

            {multiple && Array.isArray(currentValue) && currentValue.length > 0 && (
              <div className="flex items-center justify-between border-t px-2 py-1.5 text-xs">
                <span className="text-muted-foreground">{currentValue.length} selected</span>
                <button
                  type="button"
                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 rounded focus-visible:ring-2 focus-visible:outline-none"
                  onClick={() => clearAll()}
                >
                  Clear all
                </button>
              </div>
            )}
          </div>
        </PopoverContent>
      </Popover>
    )
  },
)
TreeSelect.displayName = 'TreeSelect'

export { TreeSelect }

```

### `packages/registry-react/components/tree-select/TreeSelectNode.tsx`

```tsx
import * as React from 'react'
import { ChevronRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { TreeSelectNode } from './types'

export interface TreeSelectNodeProps {
  node: TreeSelectNode
  depth: number
  multiple: boolean
  expandedIds: Set<string>
  selectedValues: Set<string>
  filteredIds: Set<string> | null
  onToggle: (node: TreeSelectNode) => void
  onSelect: (node: TreeSelectNode) => void
}

function collectValues(node: TreeSelectNode): string[] {
  const vals: string[] = []
  const walk = (n: TreeSelectNode) => {
    if (n.children?.length) {
      for (const c of n.children) walk(c)
    } else {
      vals.push(n.value)
    }
  }
  walk(node)
  return vals
}

export const TreeSelectNode = React.memo(
  React.forwardRef<HTMLDivElement, TreeSelectNodeProps>(
    ({ node, depth, multiple, expandedIds, selectedValues, filteredIds, onToggle, onSelect }, ref) => {
      const hasChildren = !!(node.children && node.children.length)
      const isExpanded = expandedIds.has(node.value)
      const isChecked = React.useMemo(() => {
        if (!multiple) return selectedValues.has(node.value)
        if (selectedValues.has(node.value)) return true
        if (!hasChildren) return false
        const descendants = collectValues(node)
        const selected = descendants.filter((v) => selectedValues.has(v))
        return selected.length > 0 && selected.length < descendants.length
      }, [multiple, selectedValues, node, hasChildren])
      const isFullyChecked = React.useMemo(() => {
        if (!multiple) return false
        if (selectedValues.has(node.value)) return true
        if (!hasChildren) return false
        const descendants = collectValues(node)
        return descendants.length > 0 && descendants.every((v) => selectedValues.has(v))
      }, [multiple, selectedValues, node, hasChildren])
      const isVisible = !filteredIds || filteredIds.has(node.value)

      const indent = `${depth * 20 + 8}px`

      function handleToggle(e: React.MouseEvent) {
        e.stopPropagation()
        onToggle(node)
      }

      function handleSelect() {
        if (node.disabled) return
        onSelect(node)
      }

      function handleCheckboxChange(e: React.ChangeEvent<HTMLInputElement>) {
        e.stopPropagation()
        if (node.disabled) return
        onSelect(node)
      }

      if (!isVisible) return null

      return (
        <div ref={ref} role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined}>
          <div
            className={cn(
              'group relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md pr-2 text-sm transition-colors',
              'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
              node.disabled && 'cursor-not-allowed opacity-50',
              !multiple && selectedValues.has(node.value) && 'bg-accent text-accent-foreground font-medium',
            )}
            style={{ paddingLeft: indent }}
            tabIndex={node.disabled ? -1 : 0}
            role="button"
            onClick={handleSelect}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault()
                handleSelect()
              }
            }}
          >
            {hasChildren ? (
              <button
                type="button"
                className={cn(
                  'focus-visible:ring-ring flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-150 focus-visible:ring-2 focus-visible:outline-none',
                  'hover:bg-foreground/10',
                  isExpanded && 'rotate-90',
                )}
                aria-label={isExpanded ? 'Collapse' : 'Expand'}
                onClick={handleToggle}
              >
                <ChevronRight className="text-muted-foreground size-3.5" aria-hidden="true" />
              </button>
            ) : (
              <span className="size-4 shrink-0" />
            )}

            {multiple && (
              <input
                type="checkbox"
                checked={isFullyChecked || isChecked}
                ref={(el) => {
                  if (el) el.indeterminate = isChecked && !isFullyChecked
                }}
                disabled={node.disabled}
                className="border-input text-primary focus:ring-ring size-3.5 shrink-0 rounded focus:ring-1"
                onChange={handleCheckboxChange}
                onClick={(e) => e.stopPropagation()}
              />
            )}

            <span className="flex-1 truncate">{node.label}</span>
          </div>

          {hasChildren && isExpanded && (
            <div role="group">
              {node.children!.map((child) => (
                <TreeSelectNode
                  key={child.value}
                  node={child}
                  depth={depth + 1}
                  multiple={multiple}
                  expandedIds={expandedIds}
                  selectedValues={selectedValues}
                  filteredIds={filteredIds}
                  onToggle={onToggle}
                  onSelect={onSelect}
                />
              ))}
            </div>
          )}
        </div>
      )
    },
  ),
)
TreeSelectNode.displayName = 'TreeSelectNode'

```

### `packages/registry-react/components/tree-select/tree-select.variants.ts`

```ts
import { cva } from 'class-variance-authority'

export const treeSelectTriggerVariants = cva(
  'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent text-sm shadow-xs transition-[color,box-shadow] outline-none hover:border-ring/50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
  {
    variants: {
      size: {
        sm: 'h-8 text-xs px-2.5',
        default: 'h-9 text-sm px-3',
        lg: 'h-11 text-base px-4',
      },
    },
    defaultVariants: {
      size: 'default',
    },
  },
)

export type TreeSelectVariants = ReturnType<typeof treeSelectTriggerVariants>

```

### `packages/registry-react/components/tree-select/types.ts`

```ts
export interface TreeSelectNode {
  value: string
  label: string
  disabled?: boolean
  children?: TreeSelectNode[]
  [key: string]: unknown
}

```

### `packages/registry-react/components/tree-select/index.ts`

```ts
export { TreeSelect, type TreeSelectProps } from './TreeSelect'
export { TreeSelectNode, type TreeSelectNodeProps } from './TreeSelectNode'
export { treeSelectTriggerVariants, type TreeSelectVariants } from './tree-select.variants'
export type { TreeSelectNode } from './types'

```

## tree-table

- type: `registry:ui`
- description: Hierarchical data table with expandable parent/child rows. Supports tree-structured data, column configuration, expand/collapse with per-level indent, row selection checkboxes, a loading overlay, and an empty state. Built on the existing table primitives.
- npm deps: `lucide-react`
- registry deps: `table`, `checkbox`, `spinner`

### `packages/registry-react/components/tree-table/TreeTable.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronRight, FileBox } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Checkbox } from '@/components/ui/checkbox'
import { Spinner } from '@/components/ui/spinner'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import type { TreeTableColumn, TreeTableRow } from './types'

export interface TreeTableProps {
  /** Tree-structured row data. */
  data: TreeTableRow[]
  /** Column configuration. */
  columns: TreeTableColumn[]
  /** Indent per nesting level in pixels. Default 24. */
  indent?: number
  /** Expand all rows on mount. Default false. */
  defaultExpanded?: boolean
  /** Show row selection checkboxes. Default false. */
  selectable?: boolean
  /** Loading state — shows a spinner overlay. Default false. */
  loading?: boolean
  /** Empty state message. Default 'No data.'. */
  emptyText?: string
  /** Controlled selected row ids (v-model:selected parity). */
  selected?: string[]
  /** Called when the selected set changes. */
  onSelectedChange?: (ids: string[]) => void
  /** Called when the selected set changes (alias of onSelectedChange). */
  onSelect?: (ids: string[]) => void
  /** Called when a row is expanded or collapsed. */
  onExpand?: (id: string, expanded: boolean) => void
  /** Replace the default expand/collapse chevron. */
  expandIcon?: (expanded: boolean) => React.ReactNode
  /** Per-cell renderer keyed by column — mirrors the Vue `cell-<key>` slot. */
  renderCell?: (col: TreeTableColumn, row: TreeTableRow, depth: number) => React.ReactNode
  className?: string
}

interface FlatRow {
  row: TreeTableRow
  depth: number
  hasChildren: boolean
}

const TreeTable = React.forwardRef<HTMLDivElement, TreeTableProps>(
  (
    {
      data,
      columns,
      indent = 24,
      defaultExpanded = false,
      selectable = false,
      loading = false,
      emptyText = 'No data.',
      selected,
      onSelectedChange,
      onSelect,
      onExpand,
      expandIcon,
      renderCell,
      className,
    },
    ref,
  ) => {
    const [expandedSet, setExpandedSet] = React.useState<Set<string>>(new Set())
    const [internalSelected, setInternalSelected] = React.useState<Set<string>>(new Set())

    // Controlled `selected` wins when provided; otherwise fall back to internal state.
    const selectedSet = React.useMemo(
      () => (selected ? new Set(selected) : internalSelected),
      [selected, internalSelected],
    )

    const expandAll = React.useCallback(() => {
      const next = new Set<string>()
      const walk = (rows: TreeTableRow[]) => {
        for (const row of rows) {
          if (row.children?.length) {
            next.add(row.id)
            walk(row.children)
          }
        }
      }
      walk(data)
      setExpandedSet(next)
    }, [data])

    // Expand all on mount (and when data identity changes) if requested.
    React.useEffect(() => {
      if (defaultExpanded) expandAll()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [defaultExpanded])

    React.useEffect(() => {
      if (defaultExpanded) expandAll()
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [data])

    const flatRows = React.useMemo<FlatRow[]>(() => {
      const out: FlatRow[] = []
      const walk = (rows: TreeTableRow[], depth: number) => {
        for (const row of rows) {
          const hasChildren = !!row.children?.length
          out.push({ row, depth, hasChildren })
          if (hasChildren && expandedSet.has(row.id)) {
            walk(row.children, depth + 1)
          }
        }
      }
      walk(data, 0)
      return out
    }, [data, expandedSet])

    const isExpanded = (id: string) => expandedSet.has(id)
    const isSelected = (id: string) => selectedSet.has(id)

    const toggleExpand = (row: TreeTableRow) => {
      setExpandedSet((prev) => {
        const next = new Set(prev)
        if (next.has(row.id)) next.delete(row.id)
        else next.add(row.id)
        onExpand?.(row.id, next.has(row.id))
        return next
      })
    }

    const toggleSelect = (row: TreeTableRow) => {
      const next = new Set(selectedSet)
      if (next.has(row.id)) next.delete(row.id)
      else next.add(row.id)
      const ids = [...next]
      if (selected === undefined) setInternalSelected(next)
      onSelectedChange?.(ids)
      onSelect?.(ids)
    }

    const isEmpty = flatRows.length === 0

    return (
      <div ref={ref} data-uipkge data-slot="tree-table" className={cn('relative w-full', className)}>
        <Table>
          <TableHeader>
            <TableRow>
              {selectable && (
                <TableHead className="w-10">
                  <span className="sr-only">Select</span>
                </TableHead>
              )}
              {columns.map((col) => (
                <TableHead key={col.key} className={cn(col.headerClass)}>
                  {col.label}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {flatRows.map((fr) => (
              <TableRow
                key={fr.row.id}
                data-depth={fr.depth}
                data-expanded={fr.hasChildren ? isExpanded(fr.row.id) : undefined}
                data-selected={isSelected(fr.row.id) ? '' : undefined}
              >
                {selectable && (
                  <TableCell className="w-10">
                    <Checkbox checked={isSelected(fr.row.id)} onCheckedChange={() => toggleSelect(fr.row)} />
                  </TableCell>
                )}

                {columns.map((col, ci) => (
                  <TableCell key={col.key} className={cn(ci === 0 && 'font-medium', col.cellClass)}>
                    <div
                      className="flex items-center"
                      style={ci === 0 ? { paddingLeft: `${fr.depth * indent}px` } : undefined}
                    >
                      {ci === 0 && fr.hasChildren && (
                        <button
                          type="button"
                          className="text-muted-foreground hover:bg-muted hover:text-foreground mr-1.5 flex size-5 shrink-0 items-center justify-center rounded"
                          aria-label={isExpanded(fr.row.id) ? 'Collapse' : 'Expand'}
                          aria-expanded={isExpanded(fr.row.id)}
                          onClick={() => toggleExpand(fr.row)}
                        >
                          {expandIcon ? (
                            expandIcon(isExpanded(fr.row.id))
                          ) : (
                            <ChevronRight
                              className={cn(
                                'size-4 transition-transform duration-150',
                                isExpanded(fr.row.id) && 'rotate-90',
                              )}
                            />
                          )}
                        </button>
                      )}
                      {ci === 0 && !fr.hasChildren && <span className="mr-1.5 w-5 shrink-0" />}

                      {renderCell
                        ? (renderCell(col, fr.row, fr.depth) ??
                          (col.render ? col.render(fr.row) : fr.row[col.key]))
                        : col.render
                          ? col.render(fr.row)
                          : fr.row[col.key]}
                    </div>
                  </TableCell>
                ))}
              </TableRow>
            ))}

            {isEmpty && !loading && (
              <TableRow>
                <TableCell colSpan={columns.length + (selectable ? 1 : 0)} className="h-24 text-center">
                  <div className="text-muted-foreground flex flex-col items-center gap-2">
                    <FileBox className="size-8" />
                    <span className="text-sm">{emptyText}</span>
                  </div>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>

        {loading && (
          <div className="bg-background/60 absolute inset-0 flex items-center justify-center backdrop-blur-sm">
            <Spinner size="lg" />
          </div>
        )}
      </div>
    )
  },
)
TreeTable.displayName = 'TreeTable'

export { TreeTable }
export type { TreeTableColumn, TreeTableRow } from './types'

```

### `packages/registry-react/components/tree-table/types.ts`

```ts
import type { ReactNode } from 'react'

export interface TreeTableColumn<T = any> {
  /** Unique key matching a field on the row data. */
  key: string
  /** Header label. */
  label: string
  /** Optional class for the header cell. */
  headerClass?: string
  /** Optional class for body cells in this column. */
  cellClass?: string
  /** Custom cell renderer: receives the row and returns a React node. */
  render?: (row: T) => ReactNode
}

export interface TreeTableRow<T = any> {
  /** Unique id for the row. */
  id: string
  /** Row data fields keyed by column key. */
  [key: string]: any
  /** Child rows. */
  children?: TreeTableRow<T>[]
}

```

### `packages/registry-react/components/tree-table/index.ts`

```ts
export { TreeTable, type TreeTableProps } from './TreeTable'
export type { TreeTableColumn, TreeTableRow } from './types'

```

## tree-view

- type: `registry:ui`
- description: Indented tree of expandable nodes — file browsers, taxonomy editors, nested settings. Discord-style elbow connectors, lazy-load branches, and full keyboard navigation.
- npm deps: `lucide-react`

### `packages/registry-react/components/tree-view/tree-view.tsx`

```tsx
'use client'

import * as React from 'react'
import { ChevronRight, File, Folder, FolderOpen } from 'lucide-react'
import { cn } from '@/lib/utils'
import { TreeViewContext, type TreeViewContextValue } from './context'
import type { TreeViewItem } from './types'

export interface TreeViewProps {
  items: TreeViewItem[]
  className?: string
  showIcons?: boolean
  showCheckboxes?: boolean
  defaultExpanded?: boolean
  selectedId?: string | null
  onSelect?: (item: TreeViewItem) => void
  onToggle?: (item: TreeViewItem) => void
  onSelectedIdChange?: (id: string | null) => void
}

function collectExpandable(items: TreeViewItem[], acc: Set<string>) {
  for (const it of items) {
    if (it.children?.length) {
      acc.add(it.id)
      collectExpandable(it.children, acc)
    }
  }
}

const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
  (
    {
      items,
      className,
      showIcons = true,
      showCheckboxes = false,
      defaultExpanded = false,
      selectedId: selectedIdProp = null,
      onSelect,
      onToggle,
      onSelectedIdChange,
    },
    ref,
  ) => {
    const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
      if (!defaultExpanded) return new Set()
      const next = new Set<string>()
      collectExpandable(items, next)
      return next
    })
    const [selectedId, setSelectedId] = React.useState<string | null>(selectedIdProp)

    // Mirror the Vue `watch(() => props.selectedId)` — keep internal state in
    // sync when the controlled prop changes.
    React.useEffect(() => {
      setSelectedId(selectedIdProp)
    }, [selectedIdProp])

    const toggle = React.useCallback(
      (item: TreeViewItem) => {
        if (item.disabled) return
        setExpandedIds((prev) => {
          const next = new Set(prev)
          if (next.has(item.id)) next.delete(item.id)
          else next.add(item.id)
          return next
        })
        onToggle?.(item)
      },
      [onToggle],
    )

    const select = React.useCallback(
      (item: TreeViewItem) => {
        if (item.disabled) return
        setSelectedId(item.id)
        onSelect?.(item)
        onSelectedIdChange?.(item.id)
      },
      [onSelect, onSelectedIdChange],
    )

    const ctx = React.useMemo<TreeViewContextValue>(
      () => ({ expandedIds, selectedId, showIcons, showCheckboxes, toggle, select }),
      [expandedIds, selectedId, showIcons, showCheckboxes, toggle, select],
    )

    return (
      <TreeViewContext.Provider value={ctx}>
        <div ref={ref} className={cn('text-sm', className)} role="tree">
          {items.map((item, i) => (
            <TreeViewNode key={item.id} item={item} depth={0} isLast={i === items.length - 1} />
          ))}
        </div>
      </TreeViewContext.Provider>
    )
  },
)
TreeView.displayName = 'TreeView'

export interface TreeViewNodeProps {
  item: TreeViewItem
  depth: number
  isLast?: boolean
}

// 20px per level. Connector lives in parent's gutter (depth - 1).
const INDENT = 20

function TreeViewNode({ item, depth, isLast = false }: TreeViewNodeProps) {
  const ctx = React.useContext(TreeViewContext)
  if (!ctx) throw new Error('TreeViewNode must be used inside <TreeView>')

  const isExpanded = ctx.expandedIds.has(item.id)
  const isSelected = ctx.selectedId === item.id
  const hasChildren = !!(item.children && item.children.length)

  let Icon: typeof File | null = null
  if (ctx.showIcons) {
    if (item.icon) Icon = item.icon
    else if (!hasChildren) Icon = File
    else Icon = isExpanded ? FolderOpen : Folder
  }

  const rowPadLeft = `${depth * INDENT + 4}px`
  const connectorLeft = `${(depth - 1) * INDENT + 10}px`

  const handleToggle = (e: React.MouseEvent) => {
    e.stopPropagation()
    ctx.toggle(item)
  }

  const handleSelect = () => {
    if (item.disabled) return
    ctx.select(item)
  }

  return (
    <div role="treeitem" aria-expanded={hasChildren ? isExpanded : undefined} className="relative">
      {/* Discord-style elbow + trunk for non-root nodes. The elbow points
          from the parent's chevron column down to this row's center; the
          trunk continues to the next sibling at this depth (omitted on the
          last sibling). */}
      {depth > 0 && (
        <span
          aria-hidden="true"
          className="border-border pointer-events-none absolute top-0 h-4 w-3 rounded-bl-md border-b border-l"
          style={{ left: connectorLeft }}
        />
      )}
      {depth > 0 && !isLast && (
        <span
          aria-hidden="true"
          className="bg-border pointer-events-none absolute top-4 bottom-0 w-px"
          style={{ left: connectorLeft }}
        />
      )}

      {/* Row */}
      <div
        className={cn(
          'group relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md pr-2 text-sm transition-colors',
          'hover:bg-accent hover:text-accent-foreground',
          'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
          item.disabled && 'cursor-not-allowed opacity-50',
          isSelected && 'bg-accent text-accent-foreground font-medium',
        )}
        style={{ paddingLeft: rowPadLeft }}
        tabIndex={item.disabled ? -1 : 0}
        role="button"
        onClick={handleSelect}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault()
            handleSelect()
          }
        }}
      >
        {/* Chevron (or 16px spacer for leaves so labels align) */}
        {hasChildren ? (
          <button
            type="button"
            className={cn(
              'focus-visible:ring-ring flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-150 focus-visible:ring-2 focus-visible:outline-none',
              'hover:bg-foreground/10',
              isExpanded && 'rotate-90',
            )}
            aria-label={isExpanded ? 'Collapse' : 'Expand'}
            onClick={handleToggle}
          >
            <ChevronRight className="text-muted-foreground size-3.5" aria-hidden="true" />
          </button>
        ) : (
          <span className="size-4 shrink-0" />
        )}

        {/* Checkbox */}
        {ctx.showCheckboxes && (
          <input
            type="checkbox"
            checked={!!item.selected}
            disabled={item.disabled}
            className="border-input bg-background text-primary focus:ring-ring focus-visible:ring-ring size-3.5 shrink-0 rounded focus:ring-1 focus-visible:ring-2 focus-visible:outline-none"
            onChange={handleSelect}
            onClick={(e) => e.stopPropagation()}
          />
        )}

        {/* Icon */}
        {Icon && (
          <Icon className={cn('size-4 shrink-0', hasChildren ? 'text-primary' : 'text-muted-foreground')} />
        )}

        {/* Label */}
        <span className="flex-1 truncate">{item.label}</span>
      </div>

      {/* Children */}
      {hasChildren && isExpanded && (
        <div role="group">
          {item.children!.map((child, j) => (
            <TreeViewNode
              key={child.id}
              item={child}
              depth={depth + 1}
              isLast={j === (item.children?.length ?? 0) - 1}
            />
          ))}
        </div>
      )}
    </div>
  )
}
TreeViewNode.displayName = 'TreeViewNode'

export { TreeView, TreeViewNode }

```

### `packages/registry-react/components/tree-view/context.ts`

```ts
import * as React from 'react'
import type { TreeViewItem } from './types'

export interface TreeViewContextValue {
  expandedIds: Set<string>
  selectedId: string | null
  showIcons: boolean
  showCheckboxes: boolean
  toggle: (item: TreeViewItem) => void
  select: (item: TreeViewItem) => void
}

// The Vue source threads the tree state from <TreeView> down to each
// <TreeViewNode> via provide/inject. React's equivalent is context — the Root
// sets it, every recursing node reads it. `null` default lets a node throw if
// rendered outside a <TreeView>.
export const TreeViewContext = React.createContext<TreeViewContextValue | null>(null)

```

### `packages/registry-react/components/tree-view/types.ts`

```ts
import type { LucideIcon } from 'lucide-react'

export interface TreeViewItem {
  id: string
  label: string
  icon?: LucideIcon
  children?: TreeViewItem[]
  disabled?: boolean
  selected?: boolean
  expanded?: boolean
  [key: string]: unknown
}

```

### `packages/registry-react/components/tree-view/index.ts`

```ts
export { TreeView, TreeViewNode, type TreeViewProps, type TreeViewNodeProps } from './tree-view'
export { type TreeViewItem } from './types'

```

## treemap-chart

- type: `registry:ui`
- description: React mirror of @uipkge/treemap-chart — see the Vue registry item for the canonical description.
- npm deps: `echarts`, `echarts-for-react`

### `packages/registry-react/components/charts/treemap-chart/TreemapChart.tsx`

```tsx
'use client'

import * as React from 'react'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'
import { ChartFrame, EChart, echartsCoreModule, heightToStyle } from '../shared'
import { useChartTheme, mergeOptionBlock, toRgba, gaugeThresholds } from '../useChartTheme'

// TreemapChart
// ─────────────────────────────────────────────────────────────────────────

interface TreemapNode {
  name: string
  value?: number
  children?: TreemapNode[]
}

export interface TreemapChartProps {
  data: TreemapNode[]
  height?: number | string
  /** Show breadcrumb at top when drilling into a sub-tree. Default false. */
  showBreadcrumb?: boolean
  option?: any
  className?: string
}

export const TreemapChart = React.forwardRef<HTMLDivElement, TreemapChartProps>(
  ({ data, height = 320, showBreadcrumb = false, option, className }, ref) => {
    const theme = useChartTheme()

    const mergedOption = React.useMemo(() => {
      const series = [
        {
          type: 'treemap',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          width: 'auto',
          height: 'auto',
          roam: false,
          nodeClick: false,
          breadcrumb: { show: showBreadcrumb, height: 0 },
          label: {
            show: true,
            formatter: ({ name, value }: any) => (value ? `{b|${name}}\n{v|${value}}` : name),
            rich: {
              b: { color: '#fff', fontSize: 11, fontWeight: 600, lineHeight: 14 },
              v: { color: 'rgba(255,255,255,0.85)', fontSize: 10, fontWeight: 500, lineHeight: 12 },
            },
            overflow: 'truncate',
            ellipsis: '…',
          },
          labelLayout: { hideOverlap: false },
          upperLabel: { show: false },
          itemStyle: { borderWidth: 0, gapWidth: 2 },
          colorSaturation: [0.45, 0.7],
          data,
        },
      ]

      const userOption: any = option ?? {}
      const { series: userSeries, ...userRest } = userOption
      const mergedSeries = Array.isArray(userSeries) ? series.map((s, i) => ({ ...s, ...(userSeries[i] ?? {}) })) : series

      return {
        color: theme.colors,
        tooltip: {
          formatter: (info: any) => {
            const parts = info.treePathInfo.map((n: any) => n.name).filter(Boolean)
            return `<strong>${parts.join(' / ')}</strong><br>${info.value?.toLocaleString?.() ?? info.value}`
          },
          backgroundColor: theme.tooltipBg,
          borderColor: theme.tooltipBorder,
          textStyle: { color: theme.tooltipText, fontSize: 12 },
        },
        series: mergedSeries,
        ...userRest,
      }
    }, [data, showBreadcrumb, option, theme])

    return (
      <ChartFrame ref={ref} height={height} className={className}>
        <EChart option={mergedOption} />
      </ChartFrame>
    )
  },
)
TreemapChart.displayName = 'TreemapChart'

```

### `packages/registry-react/components/charts/treemap-chart/index.ts`

```ts
export { TreemapChart, type TreemapChartProps } from './TreemapChart'

```

### `packages/registry-react/components/charts/useChartTheme.ts`

```ts
'use client'

import { useEffect, useState } from 'react'

// Chart palette is driven by Tailwind v4 CSS variables (`--chart-1`..`--chart-5`,
// `--muted-foreground`, `--border`, `--popover`, etc.) so dark/light flips
// happen automatically when the consumer toggles their theme class. The
// values resolve at runtime via `getComputedStyle`, so they pick up whatever
// the consumer set in their own `tailwind.css` -- no fork required.
//
// We bump a module-level `themeKey` whenever `<html>` class/style changes (the
// typical shadcn dark-mode pivot) and notify subscribed `useChartTheme()`
// consumers so every chart re-resolves its colors and ECharts re-paints.

let themeKey = 0
const listeners = new Set<() => void>()

function bump() {
  themeKey++
  listeners.forEach((l) => l())
}

if (typeof window !== 'undefined') {
  // Bump once on the first paint so post-hydration getComputedStyle reads
  // the *resolved* CSS values (during SSR-built bundles the very first
  // read returns the fallbacks below).
  requestAnimationFrame(bump)
  new MutationObserver(bump).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class', 'style', 'data-theme'],
  })
}

// Lazy canvas context used to normalize any CSS color string (including
// `oklch(...)`, `oklab(...)`, `color(display-p3 ...)`) into a hex / rgba
// string ECharts' canvas renderer can consume. Without this, code that
// does `color + '40'` (8-digit hex alpha trick) produces invalid color
// strings like `oklch(...)40` and the canvas API throws.
let _hexCanvas: CanvasRenderingContext2D | null = null
function toHex(cssColor: string): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  // Reset, then assign; the browser normalizes whatever it accepted into
  // the canonical hex/rgba form when read back.
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  return _hexCanvas.fillStyle as string
}

// Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a
// canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha)
// only works when `colorString` is `#rrggbb`; once tokens resolve to
// oklch() post-hydration the gradient stops break and the canvas paint
// throws every frame. Stay defensive and always return rgba.
export function toRgba(cssColor: string, alpha: number): string {
  if (typeof document === 'undefined') return cssColor
  if (!_hexCanvas) {
    _hexCanvas = document.createElement('canvas').getContext('2d')
  }
  if (!_hexCanvas) return cssColor
  _hexCanvas.fillStyle = '#000'
  _hexCanvas.fillStyle = cssColor
  const normalized = _hexCanvas.fillStyle as string
  if (normalized.startsWith('#') && normalized.length === 7) {
    const r = parseInt(normalized.slice(1, 3), 16)
    const g = parseInt(normalized.slice(3, 5), 16)
    const b = parseInt(normalized.slice(5, 7), 16)
    return `rgba(${r},${g},${b},${alpha})`
  }
  if (normalized.startsWith('rgba(')) {
    return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`)
  }
  if (normalized.startsWith('rgb(')) {
    return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`)
  }
  // Canvas refused to parse this color -- ship the original string and
  // let ECharts complain (better than crashing the paint loop).
  return cssColor
}

function resolveVar(name: string, fallback: string): string {
  if (typeof window === 'undefined') return fallback
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
  if (!v) return fallback
  return toHex(v)
}

// SSR / pre-hydration fallback palette. Hex values picked to roughly
// match the shadcn Neutral defaults in `tailwind.css` so the first paint
// doesn't flicker.
const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308']

/** The resolved chart theme tokens. All values are canvas-safe hex/rgba. */
export interface ChartTheme {
  colors: string[]
  textColor: string
  axisColor: string
  splitLineColor: string
  tooltipBg: string
  tooltipBorder: string
  tooltipText: string
}

function resolveTheme(): ChartTheme {
  return {
    colors: Array.from({ length: 5 }, (_, i) => resolveVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)),
    textColor: resolveVar('--muted-foreground', '#888888'),
    axisColor: resolveVar('--border', '#e5e5e5'),
    splitLineColor: resolveVar('--border', '#f0f0f0'),
    tooltipBg: resolveVar('--popover', 'rgba(255,255,255,0.96)'),
    tooltipBorder: resolveVar('--border', '#e5e5e5'),
    tooltipText: resolveVar('--popover-foreground', '#333333'),
  }
}

/**
 * Subscribe to the theme-token palette. Re-resolves (and re-renders the
 * consuming chart) whenever the consumer flips their dark-mode class on
 * `<html>`. The first client render resolves the real CSS values; SSR /
 * pre-hydration returns the fallback palette above.
 */
export function useChartTheme(): ChartTheme {
  const [, setTick] = useState(themeKey)
  const [theme, setTheme] = useState<ChartTheme>(() => resolveTheme())

  useEffect(() => {
    const update = () => {
      setTick(themeKey)
      setTheme(resolveTheme())
    }
    listeners.add(update)
    // Resolve once on mount so the first client paint reads the real CSS
    // values instead of the SSR fallbacks.
    update()
    return () => {
      listeners.delete(update)
    }
  }, [])

  return theme
}

// Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid,
// tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge
// shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.)
// merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }`
// doesn't blow away the wrapper's `color` + base font defaults on the same
// axisLabel block. Arrays + primitives replace outright.
//
// This is the merge strategy the chart wrappers use to fold `option`
// onto their computed base option without forcing consumers to spell out
// every default they want to preserve.
export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T {
  if (!user) return base
  const out: any = { ...base }
  for (const k of Object.keys(user)) {
    const bv = (base as any)[k]
    const uv = (user as any)[k]
    if (
      bv != null &&
      uv != null &&
      typeof bv === 'object' &&
      typeof uv === 'object' &&
      !Array.isArray(bv) &&
      !Array.isArray(uv)
    ) {
      out[k] = { ...bv, ...uv }
    } else {
      out[k] = uv
    }
  }
  return out
}

// Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger).
// Pulled off saturated green and onto teal so the gauge ties back to the
// dashboard palette; red is kept as the universal "limit reached" cue.
// GaugeChart consumes this via its `thresholds` prop default; consumers
// pass their own array to override. Static because gauges have semantic
// meaning (green safe / red danger) that we deliberately don't theme-flip.
export const gaugeThresholds: [number, string][] = [
  [0.6, '#14b8a6'],
  [0.85, '#f59e0b'],
  [1, '#dc2626'],
]

```

### `packages/registry-react/components/charts/shared.tsx`

```tsx
'use client'

import * as React from 'react'
import * as echartsCore from 'echarts/core'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import {
  LineChart as EChartsLineChart,
  BarChart as EChartsBarChart,
  PieChart as EChartsPieChart,
  ScatterChart as EChartsScatterChart,
  RadarChart as EChartsRadarChart,
  GaugeChart as EChartsGaugeChart,
  HeatmapChart as EChartsHeatmap,
  TreemapChart as EChartsTreemapChart,
  FunnelChart as EChartsFunnelChart,
  BoxplotChart as EChartsBoxplotChart,
  CandlestickChart as EChartsCandlestickChart,
  GraphChart as EChartsGraphChart,
  ParallelChart as EChartsParallelChart,
  SankeyChart as EChartsSankeyChart,
  SunburstChart as EChartsSunburstChart,
  ThemeRiverChart,
  TreeChart as EChartsTreeChart,
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
} from 'echarts/components'
import ReactECharts from 'echarts-for-react/lib/core'
import { cn } from '@/lib/utils'

export function heightToStyle(height: number | string): string {
  return /^\d+$/.test(String(height)) ? `${height}px` : String(height)
}

interface ChartFrameProps {
  height: number | string
  className?: string
  /** Apply the accessible role/tabindex/focus-ring chrome. Some chart
   *  wrappers ship a bare `w-full` frame -- pass `false` for those. */
  focusable?: boolean
}

/** Shared `<div>` wrapper around the ECharts canvas. */
export const ChartFrame = React.forwardRef<HTMLDivElement, ChartFrameProps & { children: React.ReactNode }>(
  ({ height, className, focusable = true, children }, ref) => (
    <div
      ref={ref}
      role={focusable ? 'img' : undefined}
      tabIndex={focusable ? 0 : undefined}
      style={{ height: heightToStyle(height) }}
      className={
        focusable
          ? cn('focus-visible:ring-ring w-full focus-visible:ring-2 focus-visible:outline-none', className)
          : cn('w-full', className)
      }
    >
      {children}
    </div>
  ),
)
ChartFrame.displayName = 'ChartFrame'

/** ECharts canvas filling its parent frame. */
export function EChart({ option }: { option: any }) {
  return (
    <ReactECharts
      echarts={echartsCore as any}
      option={option}
      notMerge
      lazyUpdate
      style={{ width: '100%', height: '100%' }}
    />
  )
}

export const echartsCoreModule = echartsCore

// Register every chart type the wrappers need once at module load.
use([
  CanvasRenderer,
  EChartsLineChart,
  EChartsBarChart,
  EChartsPieChart,
  EChartsScatterChart,
  EChartsRadarChart,
  EChartsGaugeChart,
  EChartsHeatmap,
  EChartsTreemapChart,
  EChartsFunnelChart,
  EChartsBoxplotChart,
  EChartsCandlestickChart,
  EChartsGraphChart,
  EChartsParallelChart,
  EChartsSankeyChart,
  EChartsSunburstChart,
  ThemeRiverChart,
  EChartsTreeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  VisualMapComponent,
  CalendarComponent,
  DataZoomComponent,
  ParallelComponent,
  SingleAxisComponent,
])
```

## use-board

- type: `registry:hook`
- description: State + handlers for the `@uipkge/board` compositional primitive. Returns a `state` (draggingId / dragOverLaneId / justMovedId), `handlers` to bind on lanes and cards (onDragStart / onLaneDragOver / onLaneDragLeave / onLaneDrop / onDragEnd), and an imperative `moveItem(itemId, toLaneId, toIndex?)` — used by keyboard navigation, undo, or server-pushed updates. Drop math computes the insertion index from pointer Y vs each card's bounding-box midpoint. An `accepts` predicate gives consumers a per-lane veto. The hook doesn't mutate your lanes data directly — it calls `onLanesChange(next)` and emits `onChange({ itemId, from, to, index })` so you stay in control of the canonical store (useState, Zustand, server). Imports the Board's shared types from `@/components/ui/board/context` so `shadcn add @uipkge/board` and `shadcn add @uipkge/use-board` produce a typed, drop-in pairing.
- registry deps: `board`

### `packages/registry-react/bootstrap/use-board/useBoard.ts`

```ts
'use client'

import * as React from 'react'
import type { BoardAcceptsFn, BoardDropEvent } from '@/components/ui/board/context'

export interface UseBoardOptions<TItem extends { id: string }> {
  /** Source of truth: lane id → items in that lane. */
  lanes: Record<string, TItem[]>
  /** Called with the next lanes map on every successful move. The hook
   *  does NOT mutate your store directly — you stay in control (useState,
   *  Zustand, server, …). */
  onLanesChange: (next: Record<string, TItem[]>) => void
  /** Optional accept predicate (runs in addition to per-card allowedLanes
   *  and per-lane disabled flags). Returning false rejects the drop. */
  accepts?: BoardAcceptsFn
  /** Fires on every successful move (DnD or imperative). */
  onChange?: (event: BoardDropEvent) => void
  /** ms before `state.justMovedId` clears. Default 600. */
  highlightMs?: number
}

export interface UseBoardState {
  draggingId: string | null
  draggingIds: readonly string[]
  dragOverLaneId: string | null
  justMovedId: string | null
  selectedIds: ReadonlySet<string>
}

export interface UseBoardReturn {
  state: UseBoardState
  handlers: {
    onDragStart: (e: React.DragEvent, itemId: string, laneId: string) => void
    onLaneDragOver: (e: React.DragEvent, laneId: string) => void
    onLaneDragLeave: (laneId: string) => void
    onLaneDrop: (e: React.DragEvent, laneId: string) => void
    onDragEnd: () => void
  }
  /** Imperative — used by keyboard handlers, undo, server-pushed updates.
   *  Pass a single id OR an array of ids; arrays move as a group while
   *  preserving their relative order. */
  moveItem: (itemId: string | string[], toLaneId: string, toIndex?: number) => void
  /** Toggle one item in the selection set. When `additive=false` (the
   *  default for plain clicks), the call replaces the selection with
   *  just this item; when `true` (cmd/shift+click), the call adds or
   *  removes the item from the existing set. */
  toggleSelection: (itemId: string, additive?: boolean) => void
  clearSelection: () => void
  /** Per-card allowed-lanes registry — Board's `<BoardCard>` writes here
   *  on mount; lanes call `isLaneAcceptingFor` (exposed through context)
   *  to query. Exported for advanced consumers that want to drive it
   *  externally. */
  registerAllowedLanes: (cardId: string, lanes: readonly string[] | undefined) => void
  unregisterAllowedLanes: (cardId: string) => void
  registerLaneDisabled: (laneId: string, disabled: boolean) => void
  unregisterLaneDisabled: (laneId: string) => void
  isLaneAcceptingFor: (laneId: string) => boolean
  accepts: BoardAcceptsFn
}

const ALWAYS: BoardAcceptsFn = () => true

/**
 * Board state + DnD orchestration. Designed to back the `@uipkge/board`
 * compositional primitive but usable with any rendering layer — the lane
 * components only need to bind handlers and read the returned state.
 *
 * Capabilities:
 *   - Insertion-index drop: pointer Y vs each card's bounding-box midpoint
 *   - Multi-item drag: grabbing a selected card drags the whole selection
 *   - Per-card `allowedLanes` allow-list (BoardCard registers on mount)
 *   - Per-lane `disabled` flag (BoardLane registers on mount)
 *   - `accepts` predicate runs in addition to the two above
 */
export function useBoard<TItem extends { id: string }>(opts: UseBoardOptions<TItem>): UseBoardReturn {
  const accepts: BoardAcceptsFn = opts.accepts ?? ALWAYS
  const highlightMs = opts.highlightMs ?? 600

  const [draggingId, setDraggingId] = React.useState<string | null>(null)
  const [draggingIds, setDraggingIds] = React.useState<readonly string[]>([])
  const [dragOverLaneId, setDragOverLaneId] = React.useState<string | null>(null)
  const [justMovedId, setJustMovedId] = React.useState<string | null>(null)
  const [selectedIds, setSelectedIds] = React.useState<ReadonlySet<string>>(new Set<string>())

  // Mirror render state into refs so event handlers always read the latest
  // value without being re-created (and without re-binding on every render).
  const draggingIdRef = React.useRef<string | null>(null)
  draggingIdRef.current = draggingId
  const draggingIdsRef = React.useRef<readonly string[]>([])
  draggingIdsRef.current = draggingIds
  const dragOverLaneIdRef = React.useRef<string | null>(null)
  dragOverLaneIdRef.current = dragOverLaneId
  const justMovedIdRef = React.useRef<string | null>(null)
  justMovedIdRef.current = justMovedId
  const selectedIdsRef = React.useRef<ReadonlySet<string>>(selectedIds)
  selectedIdsRef.current = selectedIds

  // Latest props (lanes + callbacks) without re-binding handlers.
  const lanesRef = React.useRef(opts.lanes)
  lanesRef.current = opts.lanes
  const onLanesChangeRef = React.useRef(opts.onLanesChange)
  onLanesChangeRef.current = opts.onLanesChange
  const onChangeRef = React.useRef(opts.onChange)
  onChangeRef.current = opts.onChange
  const acceptsRef = React.useRef(accepts)
  acceptsRef.current = accepts

  const sourceLaneByDragId = React.useRef<string | null>(null)
  const highlightTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)

  // Per-card allowed-lanes + per-lane disabled registries. Both are plain
  // refs because we only read them on event dispatch (not in render).
  const allowedLanesByCard = React.useRef(new Map<string, readonly string[]>())
  const disabledLanes = React.useRef(new Set<string>())

  React.useEffect(() => {
    return () => {
      if (highlightTimer.current) clearTimeout(highlightTimer.current)
    }
  }, [])

  function findItem(itemId: string): { item: TItem; laneId: string; index: number } | null {
    const lanes = lanesRef.current
    for (const laneId of Object.keys(lanes)) {
      const idx = lanes[laneId]!.findIndex((it) => it.id === itemId)
      if (idx !== -1) return { item: lanes[laneId]![idx]!, laneId, index: idx }
    }
    return null
  }

  function isAllowed(itemId: string, fromLaneId: string, toLaneId: string): boolean {
    if (disabledLanes.current.has(toLaneId)) return false
    const allow = allowedLanesByCard.current.get(itemId)
    if (allow && !allow.includes(toLaneId)) return false
    return acceptsRef.current(itemId, fromLaneId, toLaneId)
  }

  function flashMoved(itemId: string) {
    setJustMovedId(itemId)
    if (highlightTimer.current) clearTimeout(highlightTimer.current)
    highlightTimer.current = setTimeout(() => {
      setJustMovedId((cur) => (cur === itemId ? null : cur))
    }, highlightMs)
  }

  const moveItem = React.useCallback((itemId: string | string[], toLaneId: string, toIndex?: number) => {
    const ids = Array.isArray(itemId) ? itemId : [itemId]
    if (ids.length === 0) return

    // Resolve each, in DOM order across lanes (snapshot before mutation).
    const resolved = ids
      .map((id) => findItem(id))
      .filter((x): x is { item: TItem; laneId: string; index: number } => !!x)
    if (resolved.length === 0) return

    // All-or-nothing: if ANY item is rejected by the destination
    // (per-card allowedLanes / lane disabled / accepts predicate), the
    // whole move aborts. Matches the dragover visual which already
    // refuses to highlight as accepting when one item in the selection
    // isn't allowed — keeps single + multi-select drops feeling the same.
    const allAllowed = resolved.every((r) => isAllowed(r.item.id, r.laneId, toLaneId))
    if (!allAllowed) return
    const movable = resolved

    const lanes = { ...lanesRef.current }
    // 1. Remove every movable item from its current lane (in reverse-index
    //    order per-lane so indices stay valid during splice).
    const byLane = new Map<string, number[]>()
    for (const r of movable) {
      if (!byLane.has(r.laneId)) byLane.set(r.laneId, [])
      byLane.get(r.laneId)!.push(r.index)
    }
    for (const [laneId, indices] of byLane.entries()) {
      const next = [...lanes[laneId]!]
      indices.sort((a, b) => b - a).forEach((idx) => next.splice(idx, 1))
      lanes[laneId] = next
    }

    // 2. Insert all movable items into the destination at toIndex, in their
    //    original cross-lane order.
    const inserts = movable.map((r) => r.item)
    const dest = [...(lanes[toLaneId] ?? [])]
    // If the target previously held some of the moved items, the index the
    // consumer asked for (toIndex) was computed against the pre-splice
    // layout. Clamp post-splice.
    const insertAt = Math.max(0, Math.min(dest.length, toIndex ?? dest.length))
    dest.splice(insertAt, 0, ...inserts)
    lanes[toLaneId] = dest
    onLanesChangeRef.current(lanes)

    flashMoved(movable[0]!.item.id)
    onChangeRef.current?.({
      itemId: movable[0]!.item.id,
      itemIds: movable.map((r) => r.item.id),
      from: movable[0]!.laneId,
      to: toLaneId,
      index: insertAt,
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  function computeInsertIndex(e: React.DragEvent, laneId: string): number {
    const laneEl = (e.currentTarget as HTMLElement | null) ?? null
    if (!laneEl) return lanesRef.current[laneId]?.length ?? 0
    const cards = Array.from(laneEl.querySelectorAll<HTMLElement>('[data-board-card]'))
    // Exclude every card currently being dragged from the insertion math —
    // those rows will close once we splice, and we want the pointer-relative
    // position among the remaining cards.
    const dragging = new Set(draggingIdsRef.current)
    const otherCards = cards.filter((c) => {
      const id = c.getAttribute('data-board-card-id')
      return id ? !dragging.has(id) : true
    })
    for (let i = 0; i < otherCards.length; i++) {
      const rect = otherCards[i]!.getBoundingClientRect()
      const midpoint = rect.top + rect.height / 2
      if (e.clientY < midpoint) return i
    }
    return otherCards.length
  }

  const toggleSelection = React.useCallback((itemId: string, additive = false) => {
    setSelectedIds((prev) => {
      const next = new Set(prev)
      if (additive) {
        if (next.has(itemId)) next.delete(itemId)
        else next.add(itemId)
      } else {
        next.clear()
        next.add(itemId)
      }
      return next
    })
  }, [])

  const clearSelection = React.useCallback(() => {
    setSelectedIds((prev) => (prev.size === 0 ? prev : new Set<string>()))
  }, [])

  const handlers = React.useMemo<UseBoardReturn['handlers']>(
    () => ({
      onDragStart(e, itemId, laneId) {
        // If the grabbed card is part of the current selection, drag the
        // whole set; otherwise drag this one alone (and clear selection so
        // the next single click doesn't surprise the user).
        const selected = selectedIdsRef.current
        const inSelection = selected.has(itemId)
        const ids = inSelection && selected.size > 1 ? Array.from(selected) : [itemId]
        if (!inSelection) clearSelection()
        setDraggingId(itemId)
        setDraggingIds(ids)
        sourceLaneByDragId.current = laneId
        if (e.dataTransfer) {
          e.dataTransfer.setData('text/plain', itemId)
          e.dataTransfer.effectAllowed = 'move'
        }
      },
      onLaneDragOver(e, laneId) {
        if (!draggingIdRef.current) return
        const fromLane = sourceLaneByDragId.current ?? laneId
        // All dragging items must be allowed at the target — reject the
        // whole drop if any one is blocked.
        const allOk = draggingIdsRef.current.every((id) => isAllowed(id, fromLane, laneId))
        // dragOverLaneId is set in BOTH branches so the lane can show its
        // rejecting visual (red ring) on hover, not just its accepting
        // visual. preventDefault only fires on accept — without it the
        // browser refuses the drop, exactly what we want for rejected hits.
        setDragOverLaneId(laneId)
        if (!allOk) {
          if (e.dataTransfer) e.dataTransfer.dropEffect = 'none'
          return
        }
        e.preventDefault()
        if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
      },
      onLaneDragLeave(laneId) {
        setDragOverLaneId((cur) => (cur === laneId ? null : cur))
      },
      onLaneDrop(e, laneId) {
        e.preventDefault()
        const fallbackId = e.dataTransfer?.getData('text/plain') || draggingIdRef.current
        const ids = draggingIdsRef.current.length > 0 ? draggingIdsRef.current : fallbackId ? [fallbackId] : []
        if (ids.length === 0) return
        const insertAt = computeInsertIndex(e, laneId)
        moveItem([...ids], laneId, insertAt)
        setDraggingId(null)
        setDraggingIds([])
        setDragOverLaneId(null)
        sourceLaneByDragId.current = null
      },
      onDragEnd() {
        setDraggingId(null)
        setDraggingIds([])
        setDragOverLaneId(null)
        sourceLaneByDragId.current = null
      },
    }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [clearSelection, moveItem],
  )

  const registerAllowedLanes = React.useCallback((cardId: string, lanes: readonly string[] | undefined) => {
    if (lanes && lanes.length > 0) allowedLanesByCard.current.set(cardId, lanes)
    else allowedLanesByCard.current.delete(cardId)
  }, [])
  const unregisterAllowedLanes = React.useCallback((cardId: string) => {
    allowedLanesByCard.current.delete(cardId)
  }, [])
  const registerLaneDisabled = React.useCallback((laneId: string, disabled: boolean) => {
    if (disabled) disabledLanes.current.add(laneId)
    else disabledLanes.current.delete(laneId)
  }, [])
  const unregisterLaneDisabled = React.useCallback((laneId: string) => {
    disabledLanes.current.delete(laneId)
  }, [])
  const isLaneAcceptingFor = React.useCallback((laneId: string) => {
    if (!draggingIdRef.current) return false
    const fromLane = sourceLaneByDragId.current ?? laneId
    return draggingIdsRef.current.every((id) => isAllowed(id, fromLane, laneId))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const state: UseBoardState = {
    draggingId,
    draggingIds,
    dragOverLaneId,
    justMovedId,
    selectedIds,
  }

  return {
    state,
    handlers,
    moveItem,
    toggleSelection,
    clearSelection,
    accepts,
    registerAllowedLanes,
    unregisterAllowedLanes,
    registerLaneDisabled,
    unregisterLaneDisabled,
    isLaneAcceptingFor,
  }
}

/** Type-only helper for consumers that want to type the lanes locally. */
export type BoardLanes<TItem extends { id: string }> = Record<string, TItem[]>

```

## use-kanban

- type: `registry:hook`
- description: Types (KanbanTask, KanbanColumn, CommentItem, FileItem), configs (priorityConfig with icons, assignee colour palette, tagPresets, fileIconMap), and helpers (getInitials, getDueStatus, formatDueDate, findTaskById, getTaskColumn). Shipped as a sibling to the kanban-board block so all the kanban files import the same types and assignee/tag presets.
- npm deps: `lucide-react`

### `packages/registry-react/bootstrap/use-kanban/useKanban.ts`

```ts
import {
  CircleAlert,
  ArrowUp,
  ArrowDown,
  Minus,
  FileText,
  FileSpreadsheet,
  FileImage,
  File,
  type LucideIcon,
} from 'lucide-react'

export interface CommentItem {
  id: string
  author: string
  authorColor: string
  text: string
  time: string
}

export interface FileItem {
  id: string
  name: string
  size: string
  type: 'pdf' | 'spreadsheet' | 'image' | 'other'
}

export interface KanbanTask {
  id: string
  title: string
  description?: string
  priority: 'low' | 'medium' | 'high' | 'urgent'
  assignee: { name: string; color: string }
  tags: { label: string; color: string }[]
  dueDate?: string
  parentId?: string
  subtaskIds: string[]
  commentItems: CommentItem[]
  fileItems: FileItem[]
}

export interface KanbanColumn {
  id: string
  title: string
  color: string
  dotColor: string
  tasks: KanbanTask[]
}

export const priorityConfig: Record<string, { icon: LucideIcon; class: string; label: string; bg: string }> = {
  urgent: { icon: CircleAlert, class: 'text-red-500', label: 'Urgent', bg: 'bg-red-500' },
  high: { icon: ArrowUp, class: 'text-orange-500', label: 'High', bg: 'bg-orange-500' },
  medium: { icon: Minus, class: 'text-yellow-500 dark:text-yellow-400', label: 'Medium', bg: 'bg-yellow-500' },
  low: { icon: ArrowDown, class: 'text-blue-400', label: 'Low', bg: 'bg-blue-400' },
}

export const assignees = {
  alice: { name: 'Alice Chen', color: 'bg-orange-500/15 text-orange-600 dark:text-orange-400' },
  bob: { name: 'Bob Martinez', color: 'bg-blue-500/15 text-blue-600 dark:text-blue-400' },
  carol: { name: 'Carol White', color: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400' },
  david: { name: 'David Kim', color: 'bg-violet-500/15 text-violet-600 dark:text-violet-400' },
  eva: { name: 'Eva Johnson', color: 'bg-rose-500/15 text-rose-600 dark:text-rose-400' },
  frank: { name: 'Frank Lee', color: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400' },
}

export const tagPresets = {
  onboarding: { label: 'Onboarding', color: 'bg-sky-500/10 text-sky-600 dark:text-sky-400 ring-sky-500/20' },
  compliance: { label: 'Compliance', color: 'bg-amber-500/10 text-amber-600 dark:text-amber-400 ring-amber-500/20' },
  recruitment: {
    label: 'Recruitment',
    color: 'bg-violet-500/10 text-violet-600 dark:text-violet-400 ring-violet-500/20',
  },
  payroll: { label: 'Payroll', color: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 ring-emerald-500/20' },
  training: { label: 'Training', color: 'bg-rose-500/10 text-rose-600 dark:text-rose-400 ring-rose-500/20' },
  benefits: { label: 'Benefits', color: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 ring-orange-500/20' },
  policy: { label: 'Policy', color: 'bg-slate-500/10 text-slate-600 dark:text-slate-400 ring-slate-500/20' },
}

export const fileIconMap: Record<string, LucideIcon> = {
  pdf: FileText,
  spreadsheet: FileSpreadsheet,
  image: FileImage,
  other: File,
}

export function getInitials(name: string) {
  return name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()
}

export function getDueStatus(dueDate?: string): 'overdue' | 'soon' | 'normal' | null {
  if (!dueDate) return null
  const now = new Date()
  const due = new Date(dueDate + 'T00:00:00')
  const diffDays = Math.ceil((due.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  if (diffDays < 0) return 'overdue'
  if (diffDays <= 3) return 'soon'
  return 'normal'
}

export function formatDueDate(dueDate: string): string {
  const date = new Date(dueDate + 'T00:00:00')
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}

export function getAssigneeKey(name: string): keyof typeof assignees {
  for (const [key, val] of Object.entries(assignees)) {
    if (val.name === name) return key as keyof typeof assignees
  }
  return 'alice'
}

export function findTaskById(columns: KanbanColumn[], taskId: string): KanbanTask | undefined {
  for (const col of columns) {
    const task = col.tasks.find((t) => t.id === taskId)
    if (task) return task
  }
  return undefined
}

export function getTaskColumn(columns: KanbanColumn[], taskId: string): KanbanColumn | undefined {
  return columns.find((col) => col.tasks.some((t) => t.id === taskId))
}

```

## use-month-grid

- type: `registry:hook`
- description: Headless month-grid + drag/shift range-select hook. Returns the 42-cell grid, today/cursor state, range state, and mouse handlers. Domain-agnostic -- pair with EventCalendar or any month-shaped UI by reading the returned values. Also exports isoDate / dateFromKey / dayDiff helpers.

### `packages/registry-react/bootstrap/use-month-grid/useMonthGrid.ts`

```ts
'use client'

// Headless month-grid + drag/shift range-select primitives.
// Domain-agnostic: knows nothing about events -- just dates, the 42-cell grid,
// and a normalized [start, end] range driven by mouse / shift-click. Pair with
// EventCalendar (or any month-shaped UI) by reading the returned values.

import * as React from 'react'

export type DateKey = string // YYYY-MM-DD

export interface UseMonthGridOptions {
  initialDate?: Date | DateKey
  weekStartsOn?: 0 | 1 // 0 = Sunday (default), 1 = Monday
}

export function isoDate(d: Date): DateKey {
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

export function dateFromKey(k: DateKey): Date {
  return new Date(k + 'T00:00:00')
}

export function dayDiff(a: DateKey, b: DateKey): number {
  return Math.round((dateFromKey(b).getTime() - dateFromKey(a).getTime()) / 86400000)
}

export function useMonthGrid(options: UseMonthGridOptions = {}) {
  const weekStartsOn = options.weekStartsOn ?? 0

  // "today" is frozen to the moment the hook is first created -- predictable
  // for tests / SSR. Same for the initial cursor month.
  const { today, todayKey, initialCursor } = React.useMemo(() => {
    const init = options.initialDate
      ? typeof options.initialDate === 'string'
        ? dateFromKey(options.initialDate)
        : options.initialDate
      : new Date()
    const t = new Date(init.getFullYear(), init.getMonth(), init.getDate())
    return {
      today: t,
      todayKey: isoDate(t),
      initialCursor: new Date(init.getFullYear(), init.getMonth(), 1),
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const [cursor, setCursor] = React.useState<Date>(initialCursor)

  const [rangeAnchor, setRangeAnchor] = React.useState<DateKey>(todayKey)
  const [rangeStart, setRangeStart] = React.useState<DateKey>(todayKey)
  const [rangeEnd, setRangeEnd] = React.useState<DateKey>(todayKey)
  const [isDragging, setIsDragging] = React.useState(false)

  // Mirror into refs so the window mouseup/mouseleave listeners and the
  // anchor read inside onCellMouseEnter always see the latest values.
  const isDraggingRef = React.useRef(false)
  isDraggingRef.current = isDragging
  const rangeAnchorRef = React.useRef(rangeAnchor)
  rangeAnchorRef.current = rangeAnchor

  const monthLabel = React.useMemo(
    () => cursor.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
    [cursor],
  )

  const gridDays = React.useMemo(() => {
    const first = new Date(cursor.getFullYear(), cursor.getMonth(), 1)
    const offset = (first.getDay() - weekStartsOn + 7) % 7
    const start = new Date(first)
    start.setDate(first.getDate() - offset)
    const days: { date: Date; key: DateKey; inMonth: boolean }[] = []
    for (let i = 0; i < 42; i++) {
      const d = new Date(start)
      d.setDate(start.getDate() + i)
      days.push({
        date: d,
        key: isoDate(d),
        inMonth: d.getMonth() === cursor.getMonth(),
      })
    }
    return days
  }, [cursor, weekStartsOn])

  const weekdays = React.useMemo(() => {
    const base = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    return [...base.slice(weekStartsOn), ...base.slice(0, weekStartsOn)]
  }, [weekStartsOn])

  const rangeBounds = React.useMemo(() => {
    const a = rangeStart
    const b = rangeEnd
    return a <= b ? { lo: a, hi: b } : { lo: b, hi: a }
  }, [rangeStart, rangeEnd])

  const rangeDayCount = React.useMemo(() => dayDiff(rangeBounds.lo, rangeBounds.hi) + 1, [rangeBounds])
  const isRange = React.useMemo(() => rangeBounds.lo !== rangeBounds.hi, [rangeBounds])

  const inRange = React.useCallback(
    (key: DateKey) => {
      const { lo, hi } = rangeBounds
      return key >= lo && key <= hi
    },
    [rangeBounds],
  )

  const prevMonth = React.useCallback(() => {
    setCursor((c) => new Date(c.getFullYear(), c.getMonth() - 1, 1))
  }, [])
  const nextMonth = React.useCallback(() => {
    setCursor((c) => new Date(c.getFullYear(), c.getMonth() + 1, 1))
  }, [])
  const goToToday = React.useCallback(() => {
    setCursor(new Date(today.getFullYear(), today.getMonth(), 1))
    setRangeAnchor(todayKey)
    setRangeStart(todayKey)
    setRangeEnd(todayKey)
  }, [today, todayKey])
  const selectDay = React.useCallback((key: DateKey) => {
    setRangeAnchor(key)
    setRangeStart(key)
    setRangeEnd(key)
  }, [])
  const selectWeekOf = React.useCallback(
    (key: DateKey) => {
      const d = dateFromKey(key)
      const dow = (d.getDay() - weekStartsOn + 7) % 7
      const wkStart = new Date(d)
      wkStart.setDate(d.getDate() - dow)
      const wkEnd = new Date(wkStart)
      wkEnd.setDate(wkStart.getDate() + 6)
      setRangeAnchor(isoDate(wkStart))
      setRangeStart(isoDate(wkStart))
      setRangeEnd(isoDate(wkEnd))
    },
    [weekStartsOn],
  )
  const clearRange = React.useCallback(() => {
    setRangeAnchor(todayKey)
    setRangeStart(todayKey)
    setRangeEnd(todayKey)
  }, [todayKey])

  const onCellMouseDown = React.useCallback((key: DateKey, ev: React.MouseEvent) => {
    if (ev.button !== 0) return // ignore right-click -- context menus handle it
    if (ev.shiftKey) {
      setRangeEnd(key)
      return
    }
    setRangeAnchor(key)
    setRangeStart(key)
    setRangeEnd(key)
    setIsDragging(true)
  }, [])
  const onCellMouseEnter = React.useCallback((key: DateKey) => {
    if (!isDraggingRef.current) return
    setRangeEnd(key)
    setRangeStart(rangeAnchorRef.current)
  }, [])
  const endDrag = React.useCallback(() => {
    setIsDragging((cur) => (cur ? false : cur))
  }, [])

  // Window listeners are needed because mouseup can fire outside any cell.
  // useEffect only runs on the client, so this is SSR-safe.
  React.useEffect(() => {
    window.addEventListener('mouseup', endDrag)
    window.addEventListener('mouseleave', endDrag)
    return () => {
      window.removeEventListener('mouseup', endDrag)
      window.removeEventListener('mouseleave', endDrag)
    }
  }, [endDrag])

  return {
    today,
    todayKey,
    cursor,
    monthLabel,
    gridDays,
    weekdays,
    rangeAnchor,
    rangeStart,
    rangeEnd,
    rangeBounds,
    rangeDayCount,
    isRange,
    isDragging,
    inRange,
    prevMonth,
    nextMonth,
    goToToday,
    selectDay,
    selectWeekOf,
    clearRange,
    onCellMouseDown,
    onCellMouseEnter,
    endDrag,
  }
}

```

## use-theme

- type: `registry:hook`
- description: Theme provider + useTheme hook (next-themes). ThemeProvider injects a blocking script that sets the dark class before first paint (no flash on reload); useTheme reads/sets the active theme. The React/Next equivalent of the Vue useTheme composable.
- npm deps: `next-themes`

### `packages/registry-react/bootstrap/use-theme/theme-provider.tsx`

```tsx
'use client'

import * as React from 'react'
import { ThemeProvider as NextThemesProvider } from 'next-themes'

/**
 * Wrap your root layout's <body> with this. next-themes injects a
 * blocking <script> that sets the `dark` class on <html> before first
 * paint, so the initial render matches the saved theme with no white
 * flash on reload — the React/Next equivalent of the Nuxt server plugin
 * in the Vue registry.
 *
 * Use `attribute="class"` + `defaultTheme="system"` to match the
 * `.dark` selector and the `@custom-variant dark` in tailwind.css.
 *
 *   <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
 *     {children}
 *   </ThemeProvider>
 */
export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

```

### `packages/registry-react/bootstrap/use-theme/use-theme.ts`

```ts
// Re-export next-themes' useTheme so consumers have a stable `~/lib/use-theme`
// import path that mirrors the Vue registry's useTheme composable.
// Returns { theme, setTheme, resolvedTheme, systemTheme }.
export { useTheme } from 'next-themes'

```

## utils

- type: `registry:lib`
- description: Tailwind class merge helper: cn(). Combines clsx and tailwind-merge.
- npm deps: `clsx`, `tailwind-merge`

### `packages/registry-react/bootstrap/utils/utils.ts`

```ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

```

## vertical-tabs

- type: `registry:ui`
- description: Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.
- npm deps: `@radix-ui/react-tabs`

### `packages/registry-react/components/vertical-tabs/vertical-tabs.tsx`

```tsx
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { cn } from '@/lib/utils'

const VerticalTabs = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs"
    orientation="vertical"
    className={cn('flex w-full gap-6', className)}
    {...props}
  />
))
VerticalTabs.displayName = 'VerticalTabs'

const VerticalTabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-list"
    className={cn('border-border flex w-56 shrink-0 flex-col gap-0.5 border-r pr-3', className)}
    {...props}
  />
))
VerticalTabsList.displayName = 'VerticalTabsList'

export interface VerticalTabsSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
}

const VerticalTabsSection = React.forwardRef<HTMLDivElement, VerticalTabsSectionProps>(
  ({ className, label, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="vertical-tabs-section"
      className={cn(
        'text-muted-foreground mt-3 mb-1 px-2 text-xs font-medium tracking-wider uppercase first:mt-0',
        className,
      )}
      {...props}
    >
      {label}
    </div>
  ),
)
VerticalTabsSection.displayName = 'VerticalTabsSection'

const VerticalTabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-trigger"
    className={cn(
      'group/trigger text-muted-foreground relative flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition-[color,background-color] duration-150',
      'hover:bg-muted/60 hover:text-foreground',
      'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
      'disabled:pointer-events-none disabled:opacity-50',
      'data-[state=active]:bg-muted data-[state=active]:text-foreground',
      '[&>svg]:size-4 [&>svg]:shrink-0',
      className,
    )}
    {...props}
  >
    <span
      aria-hidden
      className="bg-primary absolute inset-y-1 left-0 w-0.5 rounded-full opacity-0 transition-opacity duration-150 group-data-[state=active]/trigger:opacity-100"
    />
    {children}
  </TabsPrimitive.Trigger>
))
VerticalTabsTrigger.displayName = 'VerticalTabsTrigger'

const VerticalTabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-content"
    className={cn(
      'ring-offset-background focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:outline-none',
      className,
    )}
    {...props}
  />
))
VerticalTabsContent.displayName = 'VerticalTabsContent'

export {
  VerticalTabs,
  VerticalTabsList,
  VerticalTabsSection,
  VerticalTabsTrigger,
  VerticalTabsContent,
}

```

### `packages/registry-react/components/vertical-tabs/index.ts`

```ts
export {
  VerticalTabs,
  VerticalTabsList,
  VerticalTabsSection,
  VerticalTabsTrigger,
  VerticalTabsContent,
  type VerticalTabsSectionProps,
} from './vertical-tabs'

```

## video

- type: `registry:ui`
- description: Video player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, a progress bar, play/pause, skip, and volume control.
- npm deps: `lucide-react`

### `packages/registry-react/components/video/Video.tsx`

```tsx
import * as React from 'react'
import { Maximize, Minimize, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface VideoProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Video source URL. */
  src: string
  /** Poster image shown before playback. */
  poster?: string
  /** Autoplay on mount. Note: browsers may block autoplay with sound. */
  autoplay?: boolean
  /** Loop playback. */
  loop?: boolean
  /** Muted audio. */
  muted?: boolean
  /** Use native browser controls instead of the custom overlay. Default false. */
  nativeControls?: boolean
  /** Initial playback rate. Default 1. */
  playbackRate?: number
  /** Aspect ratio class or inline style value. Default '16/9'. */
  aspectRatio?: string
}

const Video = React.forwardRef<HTMLDivElement, VideoProps>(
  (
    {
      src,
      poster,
      autoplay = false,
      loop = false,
      muted = false,
      nativeControls = false,
      playbackRate = 1,
      aspectRatio = '16/9',
      className,
      ...props
    },
    ref,
  ) => {
    const videoRef = React.useRef<HTMLVideoElement | null>(null)
    const containerRef = React.useRef<HTMLDivElement | null>(null)

    const [playing, setPlaying] = React.useState(false)
    const [current, setCurrent] = React.useState(0)
    const [duration, setDuration] = React.useState(0)
    const [volume, setVolume] = React.useState(muted ? 0 : 1)
    const [isMuted, setIsMuted] = React.useState(muted)
    const [isFullscreen, setIsFullscreen] = React.useState(false)
    const [showControls, setShowControls] = React.useState(true)
    const hideTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)

    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)

    const togglePlay = React.useCallback(() => {
      const v = videoRef.current
      if (!v) return
      if (v.paused) v.play()
      else v.pause()
    }, [])

    const onPlay = React.useCallback(() => setPlaying(true), [])
    const onPause = React.useCallback(() => setPlaying(false), [])
    const onTimeUpdate = React.useCallback(() => {
      const v = videoRef.current
      if (!v) return
      setCurrent(v.currentTime)
    }, [])
    const onLoadedMetadata = React.useCallback(() => {
      const v = videoRef.current
      if (!v) return
      setDuration(v.duration || 0)
      v.playbackRate = playbackRate
      v.volume = volume
    }, [playbackRate, volume])
    const onVolumeChange = React.useCallback(() => {
      const v = videoRef.current
      if (!v) return
      setVolume(v.volume)
      setIsMuted(v.muted)
    }, [])

    const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
      const v = videoRef.current
      if (!v) return
      v.currentTime = Number(e.target.value)
    }

    const setVolumeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
      const v = videoRef.current
      if (!v) return
      v.volume = Number(e.target.value)
      v.muted = Number(e.target.value) === 0
    }

    const toggleMute = () => {
      const v = videoRef.current
      if (!v) return
      v.muted = !v.muted
    }

    const skip = (seconds: number) => {
      const v = videoRef.current
      if (!v) return
      v.currentTime = Math.min(Math.max(v.currentTime + seconds, 0), v.duration || 0)
    }

    const toggleFullscreen = () => {
      const el = containerRef.current
      if (!el) return
      if (document.fullscreenElement) {
        document.exitFullscreen()
      } else {
        el.requestFullscreen()
      }
    }

    const onFullscreenChange = React.useCallback(() => {
      setIsFullscreen(!!document.fullscreenElement)
    }, [])

    const onMouseMove = () => {
      setShowControls(true)
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
      hideTimerRef.current = setTimeout(() => {
        setPlaying((p) => {
          if (p) setShowControls(false)
          return p
        })
      }, 2500)
    }

    const onMouseLeave = () => {
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
      if (videoRef.current && !videoRef.current.paused) setShowControls(false)
    }

    const formatTime = (s: number): string => {
      if (!s || !isFinite(s)) return '0:00'
      const m = Math.floor(s / 60)
      const sec = Math.floor(s % 60)
      return `${m}:${sec.toString().padStart(2, '0')}`
    }

    const progress = duration > 0 ? (current / duration) * 100 : 0

    React.useEffect(() => {
      document.addEventListener('fullscreenchange', onFullscreenChange)
      return () => {
        document.removeEventListener('fullscreenchange', onFullscreenChange)
        if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
      }
    }, [onFullscreenChange])

    React.useEffect(() => {
      const v = videoRef.current
      if (v) v.playbackRate = playbackRate
    }, [playbackRate])

    React.useEffect(() => {
      const v = videoRef.current
      if (v) v.muted = muted
    }, [muted])

    return (
      <div
        ref={containerRef}
        data-uipkge=""
        data-slot="video"
        className={cn('group relative overflow-hidden rounded-lg bg-black', className)}
        style={{ aspectRatio }}
        onMouseMove={onMouseMove}
        onMouseLeave={onMouseLeave}
        {...props}
      >
        <video
          ref={videoRef}
          data-slot="video-element"
          className="size-full object-contain"
          src={src}
          poster={poster}
          autoPlay={autoplay}
          loop={loop}
          muted={muted}
          controls={nativeControls}
          playsInline
          onPlay={onPlay}
          onPause={onPause}
          onTimeUpdate={onTimeUpdate}
          onLoadedMetadata={onLoadedMetadata}
          onVolumeChange={onVolumeChange}
          onClick={togglePlay}
        />

        {!nativeControls && (
          <div
            data-slot="video-controls"
            className={cn(
              'absolute inset-0 flex flex-col justify-between transition-opacity duration-200',
              showControls || !playing ? 'opacity-100' : 'opacity-0',
            )}
          >
            {/* Top spacer / click target */}
            <div className="flex-1" onClick={togglePlay} />

            {/* Bottom controls bar */}
            <div className="bg-gradient-to-t from-black/80 to-transparent px-3 pt-6 pb-2">
              {/* Progress bar */}
              <div className="mb-2 flex items-center gap-2">
                <span className="text-xs text-white/80 tabular-nums">{formatTime(current)}</span>
                <input
                  type="range"
                  min="0"
                  max={duration || 0}
                  step="0.1"
                  value={current}
                  className="accent-primary h-1 flex-1 cursor-pointer appearance-none rounded-full bg-white/30 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
                  onChange={seek}
                />
                <span className="text-xs text-white/80 tabular-nums">{formatTime(duration)}</span>
              </div>

              {/* Buttons row */}
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  className="text-white/90 transition-colors hover:text-white"
                  aria-label={playing ? 'Pause' : 'Play'}
                  onClick={togglePlay}
                >
                  {playing ? <Pause className="size-5" /> : <Play className="size-5" />}
                </button>
                <button
                  type="button"
                  className="text-white/90 transition-colors hover:text-white"
                  aria-label="Rewind 10s"
                  onClick={() => skip(-10)}
                >
                  <RotateCcw className="size-4" />
                </button>
                <button
                  type="button"
                  className="text-white/90 transition-colors hover:text-white"
                  aria-label="Forward 10s"
                  onClick={() => skip(10)}
                >
                  <RotateCw className="size-4" />
                </button>

                {/* Volume */}
                <div className="group/volume flex items-center gap-1.5">
                  <button
                    type="button"
                    className="text-white/90 transition-colors hover:text-white"
                    aria-label={isMuted ? 'Unmute' : 'Mute'}
                    onClick={toggleMute}
                  >
                    {isMuted || volume === 0 ? <VolumeX className="size-4" /> : <Volume2 className="size-4" />}
                  </button>
                  <input
                    type="range"
                    min="0"
                    max="1"
                    step="0.05"
                    value={isMuted ? 0 : volume}
                    className="accent-primary h-1 w-0 cursor-pointer appearance-none rounded-full bg-white/30 transition-all duration-200 group-hover/volume:w-16 [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
                    onChange={setVolumeInput}
                  />
                </div>

                <div className="flex-1" />

                <button
                  type="button"
                  className="text-white/90 transition-colors hover:text-white"
                  aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
                  onClick={toggleFullscreen}
                >
                  {isFullscreen ? <Minimize className="size-4" /> : <Maximize className="size-4" />}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    )
  },
)
Video.displayName = 'Video'

export { Video }

```

### `packages/registry-react/components/video/index.ts`

```ts
export { Video, type VideoProps } from './Video'

```

## virtual-list

- type: `registry:ui`
- description: Generic windowed scroller. Renders only visible items plus a small overscan, with fixed or dynamic item sizes. Use for long lists where most rows are off-screen.
- npm deps: `@tanstack/react-virtual`

### `packages/registry-react/components/virtual-list/virtual-list.tsx`

```tsx
'use client'

import * as React from 'react'
import { useVirtualizer } from '@tanstack/react-virtual'
import { cn } from '@/lib/utils'

export interface VirtualListHandle {
  scrollToOffset: (px: number) => void
  scrollToIndex: (index: number, options?: { align?: 'start' | 'center' | 'end' }) => void
  getVisibleRange: () => [number, number]
}

export interface VirtualListProps<T> {
  items: T[]
  /** Fixed pixel size, or a measurer called per item/index. */
  itemSize: number | ((item: T, index: number) => number)
  height: number | string
  overscan?: number
  keyField?: keyof T | string
  direction?: 'vertical' | 'horizontal'
  className?: string
  /** Render-prop for each row. */
  children: (item: T, index: number) => React.ReactNode
  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void
  onRangeChange?: (range: [number, number]) => void
}

function VirtualListInner<T extends Record<string, any>>(
  {
    items,
    itemSize,
    height,
    overscan = 3,
    keyField = 'id',
    direction = 'vertical',
    className,
    children,
    onScroll,
    onRangeChange,
  }: VirtualListProps<T>,
  ref: React.Ref<VirtualListHandle>,
) {
  const scrollRef = React.useRef<HTMLDivElement | null>(null)
  const isVertical = direction === 'vertical'

  const virtualizer = useVirtualizer({
    count: items.length,
    horizontal: !isVertical,
    getScrollElement: () => scrollRef.current,
    estimateSize: (index) =>
      typeof itemSize === 'function' ? itemSize(items[index]!, index) : itemSize,
    overscan,
    getItemKey: (index) => {
      const item = items[index]
      const k = item?.[keyField as keyof T]
      return (k ?? index) as string | number
    },
  })

  const virtualItems = virtualizer.getVirtualItems()
  const totalSize = virtualizer.getTotalSize()

  React.useEffect(() => {
    if (!onRangeChange || virtualItems.length === 0) return
    onRangeChange([virtualItems[0]!.index, virtualItems[virtualItems.length - 1]!.index + 1])
  }, [virtualItems, onRangeChange])

  React.useImperativeHandle(
    ref,
    () => ({
      scrollToOffset: (px) => virtualizer.scrollToOffset(px),
      scrollToIndex: (index, options) =>
        virtualizer.scrollToIndex(index, { align: options?.align ?? 'start' }),
      getVisibleRange: () => {
        const v = virtualizer.getVirtualItems()
        if (v.length === 0) return [0, 0]
        return [v[0]!.index, v[v.length - 1]!.index + 1]
      },
    }),
    [virtualizer],
  )

  const h = typeof height === 'number' ? `${height}px` : height
  const containerStyle: React.CSSProperties = isVertical
    ? { height: h, overflowY: 'auto' }
    : { width: h, overflowX: 'auto' }

  const innerStyle: React.CSSProperties = isVertical
    ? { height: `${totalSize}px`, position: 'relative', width: '100%' }
    : { width: `${totalSize}px`, position: 'relative', height: '100%' }

  return (
    <div
      ref={scrollRef}
      data-uipkge=""
      data-slot="virtual-list"
      className={cn('w-full', className)}
      style={containerStyle}
      onScroll={onScroll}
    >
      <div style={innerStyle}>
        {virtualItems.map((virtualItem) => {
          const item = items[virtualItem.index]!
          const rowStyle: React.CSSProperties = isVertical
            ? {
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }
            : {
                position: 'absolute',
                top: 0,
                left: 0,
                height: '100%',
                width: `${virtualItem.size}px`,
                transform: `translateX(${virtualItem.start}px)`,
              }
          return (
            <div key={virtualItem.key} style={rowStyle}>
              {children(item, virtualItem.index)}
            </div>
          )
        })}
      </div>
    </div>
  )
}

const VirtualList = React.forwardRef(VirtualListInner) as <T extends Record<string, any>>(
  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },
) => React.ReactElement

export { VirtualList }

```

### `packages/registry-react/components/virtual-list/index.ts`

```ts
export { VirtualList, type VirtualListProps, type VirtualListHandle } from './virtual-list'

```

## watermark

- type: `registry:ui`
- description: Overlay watermark that repeats text or an image across the content area at a configurable angle. Supports rotate angle, gap between repeats, opacity, font size/color/weight, z-index, and pointer-event control. Wrap any content via children.

### `packages/registry-react/components/watermark/Watermark.tsx`

```tsx
'use client'

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface WatermarkProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Text content for the watermark. Ignored when `image` is set. */
  content?: string
  /** Image URL. When set, repeats the image instead of text. */
  image?: string
  /** Rotation angle in degrees. */
  rotate?: number
  /** Gap between repeats in pixels (both x and y). */
  gap?: number
  /** Opacity 0-1. */
  opacity?: number
  /** Font size in pixels (text only). */
  fontSize?: number
  /** Font color (text only). */
  color?: string
  /** Font family (text only). */
  fontFamily?: string
  /** Font weight (text only). */
  fontWeight?: number | string
  /** z-index of the overlay. */
  zIndex?: number
  /** When true, the overlay captures pointer events (blocks interaction). Default false (pointer-events-none). */
  interactive?: boolean
}

const Watermark = React.forwardRef<HTMLDivElement, WatermarkProps>(
  (
    {
      className,
      children,
      content = '',
      image,
      rotate = -22,
      gap = 100,
      opacity = 0.08,
      fontSize = 16,
      color = 'currentColor',
      fontFamily = 'sans-serif',
      fontWeight = 'normal',
      zIndex = 9,
      interactive = false,
      ...props
    },
    ref,
  ) => {
    const containerRef = React.useRef<HTMLDivElement | null>(null)
    const [size, setSize] = React.useState({ width: 0, height: 0 })

    React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)

    React.useEffect(() => {
      const el = containerRef.current
      if (!el) return
      const measure = () => {
        const rect = el.getBoundingClientRect()
        setSize({ width: rect.width, height: rect.height })
      }
      measure()
      let ro: ResizeObserver | null = null
      if (typeof ResizeObserver !== 'undefined') {
        ro = new ResizeObserver(() => measure())
        ro.observe(el)
      }
      return () => {
        ro?.disconnect()
      }
    }, [])

    // Build a tiled SVG data URL that repeats the text/image across a tile of
    // size (gap + contentSize). The SVG is then used as a background-image on
    // the overlay div, rotated to the requested angle.
    const watermarkUrl = React.useMemo(() => {
      if (!size.width || !size.height) return ''
      const text = content || ''

      if (image) {
        // For images we tile the image at its natural size within the gap.
        const tile = gap + 100
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tile}" height="${tile}" viewBox="0 0 ${tile} ${tile}">
  <image href="${image}" x="${gap / 2}" y="${gap / 2}" width="100" height="100" opacity="${opacity}" transform="rotate(${rotate} ${tile / 2} ${tile / 2})"/>
</svg>`
        return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
      }

      if (!text) return ''

      // Estimate text width — rough heuristic, good enough for tiling.
      const textWidth = text.length * fontSize * 0.6
      const tileW = gap + textWidth
      const tileH = gap + fontSize * 1.5

      const escapedText = text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')

      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tileW}" height="${tileH}" viewBox="0 0 ${tileW} ${tileH}">
  <text x="${gap / 2}" y="${gap / 2 + fontSize}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${color}" opacity="${opacity}" transform="rotate(${rotate} ${gap / 2} ${gap / 2 + fontSize / 2})">${escapedText}</text>
</svg>`
      return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svg)))}`
    }, [size.width, size.height, image, content, gap, fontSize, rotate, opacity, color, fontFamily, fontWeight])

    const overlayStyle: React.CSSProperties = {
      backgroundImage: watermarkUrl ? `url("${watermarkUrl}")` : undefined,
      backgroundRepeat: 'repeat',
      zIndex,
      pointerEvents: interactive ? 'auto' : 'none',
    }

    return (
      <div ref={containerRef} data-uipkge="" data-slot="watermark" className={cn('relative', className)} {...props}>
        {children}
        <div
          data-uipkge=""
          data-slot="watermark-overlay"
          className="absolute inset-0 overflow-hidden"
          style={overlayStyle}
          aria-hidden="true"
        />
      </div>
    )
  },
)
Watermark.displayName = 'Watermark'

export { Watermark }

```

### `packages/registry-react/components/watermark/index.ts`

```ts
export { Watermark, type WatermarkProps } from './Watermark'

```