@machinemetrics/mm-react-components 1.4.1 → 1.5.0-0

package/CHANGELOG.md

@@ -96,6 +96,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Preview app: `CodePreview` route remains hash-only for tests; sidebar exclusions updated. Preview build trims `esbuild.keepNames` where snippet naming no longer requires it.
 
+## [Unreleased]
+
+### Changed
+
+- **TicketDetails:** Two-column **narrative + metadata** layout: header includes ticket id, title, and **status / priority / due** (keys `status`, `priority`, `dueDate`, `due`); main column is **description** then **Activity** with **All / Comments / Updates** tabs; right rail is **Details** (people), **Dates**, and **Custom fields** with optional **Show more** and sticky positioning on large viewports. Optional `onBack` and `onAddCustomField`. `data-slot` hooks for Carbide theming.
+- **`partitionDetailFields`:** Now returns `headerFields`, `mainColumnFields`, `sidebarPeopleFields`, `sidebarDateFields`, `sidebarCustomFields`, and composed `sidebarFields` (people → dates → custom). `assignee` key maps to the people rail. **Breaking for consumers** that assumed `status` / `priority` / `dueDate` lived only in `sidebarFields` or that `otherMainFields` rendered in the main column — those fields are repositioned in the default `TicketDetails` shell (see `PartitionDetailFieldsResult`).
+
+### Added
+
+- **`TicketSystemEvent`** and optional `TicketDetails` prop **`systemEvents`** for the Updates timeline and All-tab merge.
+- **`TicketFieldControl`:** optional **`layout="inline"`** for compact header controls; **`date`** fields use the Carbide **`DatePicker`** (not native `<input type="date">`).
+- **`DatePicker`:** optional **`triggerClassName`** for trigger button styling; optional **`aria-invalid`** / **`aria-describedby`** on the trigger; **controlled `month`** resets when the popover opens so the calendar shows the **selected date’s month** (or `defaultMonth` / today when empty).
+- **`TicketForm`:** **`date`** fields use **`DatePicker`** (not native `<input type="date">`).
+- **`parseTicketDateString`** / **`formatTicketDateString`** exported from the tickets module for host apps.
+- **`TicketFieldType` `updatedDate`:** Read-only timestamp for “last updated” (and similar). Renders as styled text in **`TicketForm`** and **`TicketDetails`** — never an `<input>`. Use **`formatTicketTimestampDisplay`** for custom UIs; value is typically ISO or `YYYY-MM-DD` on the ticket payload.
+- **`TicketDetailsLabels`:** strings for activity tabs, sidebar section titles, back button, show more/less, add field, and comment body label.
+
+## [1.3.0] - 2026-03-19
+
+### Changed
+
+- **TicketDetails** (formerly `TicketDetailSheet`): Renders **detail content only** (no outer `Sheet`), same presentation-only model as `TicketForm`. No `open` / `onClose` / `onOpen`; the host controls visibility and chrome (e.g. `Sheet` + `SheetContent` with its own close). Renamed exports: `TicketDetails`, `TicketDetailsProps`, `TicketDetailsLabels`, `defaultTicketDetailsLabels`, `mergeTicketDetailsLabels`. Removed `closeAriaLabel` from detail labels (library no longer renders a close control).
+- **Tickets module file names:** Renamed to PascalCase under `src/components/ui/tickets/` (`TicketTypes.ts`, `TicketLabels.ts`, `UserFieldValue.ts`, `TicketUserSelect.tsx`, `TicketDates.ts`, `TicketDetailLayout.ts`) for consistency with other feature folders.
+
+### Added
+
+- **Ticket pattern components:** `TicketForm`, `TicketDetails`, `TicketFieldControl`, and `UserDisplay` for schema-driven ticket create/edit and detail UI. Host apps inject `userSelectComponent` and own persistence (`onSubmit`, `onCancel`, `onValuesChange`, `onPostComment`). Optional `labels` props override default copy.
+- **Ticket utilities and types:** Exported `Ticket`, `TicketFieldDefinition`, `Comment`, and helpers (`fieldKeyToHeader`, `getMergedDetailFields`, `partitionDetailFields`, `formatCreationDate`, `formatRelativeTime`, user-field JSON helpers).
+- **Docs:** `src/components/ui/tickets/README.md`, `agent-docs/tickets-pattern.md`, and agent-documentation-reference table entry.
+- **Kanban:** Compound `KanbanBoard`, `KanbanColumn`, `KanbanCard`, and `KanbanCardOverlay` with `@dnd-kit` drag-and-drop. Helpers `dataToKanbanItems`, `normalizeToKanbanColumn`, and `computeMoveFromDragEnd` map table-shaped data to board items and derive moves from drag-end events. Column chrome uses `SheetBanner`; README, preview, Playwright visual tests, and agent-documentation-reference updates.
+
 ---
 
 ## [1.2.3] - 2026-03-23

package/README.md

@@ -186,6 +186,33 @@ document.documentElement.classList.add('carbide');
 - You want to minimize bundle size
 - You're using our components with your own Tailwind config
 
+#### Embedded apps: `ThemeRoot` and `useHostTheme`
+
+For apps hosted inside the MachineMetrics shell (or any host that passes a light/dark value), wrap the tree once and sync the host value—no `next-themes` setup boilerplate.
+
+`ThemeRoot` wraps your React tree (e.g. inside `#root`). It does **not** replace `<html>` in `index.html`; it still toggles `light` / `dark` on `document.documentElement`. Keep `class="carbide"` on `<html>` and import Carbide CSS as usual.
+
+```tsx
+// index.tsx
+import { ThemeRoot } from '@machinemetrics/mm-react-components';
+
+<ThemeRoot>
+  <App />
+</ThemeRoot>
+```
+
+```tsx
+// App.tsx — pass the host color mode (example: mm-react-tools)
+import { useHostTheme } from '@machinemetrics/mm-react-components';
+import { useMMAppParams } from '@machinemetrics/mm-react-tools';
+
+useHostTheme(useMMAppParams().colorMode);
+```
+
+If you need `useTheme()` elsewhere (e.g. markdown styling), import it from **`@machinemetrics/mm-react-components`** so it uses the same context as `ThemeRoot`—not from the `next-themes` package directly.
+
+Optional: pass any `ThemeProvider` prop to `ThemeRoot` to override defaults (e.g. `storageKey` for standalone persistence).
+
 #### Option 3: Use Theme Utilities
 
 ```tsx

package/agent-docs/agent-documentation-reference.md

@@ -54,14 +54,16 @@ This directory contains comprehensive documentation and tools for AI agents work
 
 ### Layout & Navigation
 
-| Component      | Exports                                                                                                                           | Description                                                                                                                                   |
-| -------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Card**       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`                                                 | Content container with sections (no built-in scroll)                                                                                          |
-| **ScrollArea** | `ScrollArea`, `ScrollBar`                                                                                                         | Scrollable region; **must have constrained height** (e.g. `h-[300px]`, `max-h-[50vh]`, or `flex-1 min-h-0` in flex layout) or it won’t scroll |
-| **Separator**  | `Separator`                                                                                                                       | Visual divider                                                                                                                                |
-| **Tabs**       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`                                                                                  | Tabbed interface                                                                                                                              |
-| **Breadcrumb** | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Navigation breadcrumbs                                                                                                                        |
-| **PageHeader** | `PageHeader` (+ types)                                                                                                            | Application page header with actions/tabs                                                                                                     |
+| Component               | Exports                                                                                                                                                                                                                       | Description                                                                 |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| **ResizablePanelGroup** | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle`                                                                                                                                                                    | Split layouts with drag-to-resize; use for workspaces, dashboards, IDE-like UIs |
+| **Sidebar**             | `Sidebar`, `SidebarProvider`, `SidebarInset`, `SidebarHeader`, `SidebarContent`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarTrigger`, etc.                                                                   | Navigation panel; collapsible to icons; use for app nav, not generic content |
+| **Card**                | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`                                                                                                                                            | Discrete content blocks (summary, form section, metric); **not** for structural layout or panels (no built-in scroll) |
+| **ScrollArea**          | `ScrollArea`, `ScrollBar`                                                                                                                                                                                                      | Scrollable region; **must have constrained height** (e.g. `h-[300px]`, `max-h-[50vh]`, or `flex-1 min-h-0` in flex layout) or it won’t scroll |
+| **Separator**           | `Separator`                                                                                                                                                                                                                    | Visual divider                                                             |
+| **Tabs**                | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`                                                                                                                                                                               | Tabbed interface                                                           |
+| **Breadcrumb**          | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`                                                                                               | Navigation breadcrumbs                                                     |
+| **PageHeader**          | `PageHeader` (+ types)                                                                                                                                                                                                        | Application page header with actions/tabs                                  |
 
 ### Overlays & Modals
 
@@ -96,18 +98,20 @@ This directory contains comprehensive documentation and tools for AI agents work
 
 ### Advanced Components
 
-| Component           | Exports                                                                                                                                                                                                                                | Description                                                                              |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| Component           | Exports                                                                                                                                                                                                                                | Description                                                                                                                                                          |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | **DataTable**       | `DataTable`, `DataTablePagination`, `ResponsiveTable`, `TABLE_TOKENS`, column creators, `useTableController`, `UseTableControllerReturn`, toolbar, CSV export (+ types); optional **`controller`** prop to share state with `FileGrid` | Full-featured data table with sorting, filtering, pagination (client-side & server-side) |
 | **Thumbnail**       | `Thumbnail` (+ types)                                                                                                                                                                                                                  | Bordered thumbnail shell with optional footer (`data-slot` for Carbide)                  |
-| **FileIcon**        | `FileIcon`, `FileIconGlyph`, `inferFileIconKind`, `getExtensionFromFileName`, `formatFileIconExtensionLabel` (+ types)                                                                                                                 | File glyph + label from extension inference or overrides                                 |
+| **FileIcon**        | `FileIcon`, `FileIconGlyph`, `inferFileIconKind`, `getExtensionFromFileName`, `formatFileIconExtensionLabel` (+ types)                                                                                                                | File glyph + label from extension inference or overrides                                 |
 | **FileThumbnail**   | `FileThumbnail` (+ types); `FileThumbnailBadgeConfig`                                                                                                                                                                                  | Button wrapping `Thumbnail` + `FileIcon` and optional badge                              |
 | **FileGrid**        | `FileGrid` (+ types)                                                                                                                                                                                                                   | Icon grid bound to a TanStack `Table` (same `controller` as `DataTable`)                 |
 | **HeroMetricCard**  | `HeroMetricCard`, `HeroMetricCardItem` (+ types)                                                                                                                                                                                       | Metrics dashboard card with trends                                                       |
 | **Calendar**        | `Calendar`                                                                                                                                                                                                                             | Date picker calendar                                                                     |
 | **DatePicker**      | `DatePicker`                                                                                                                                                                                                                           | Single date selection with label and placeholder                                         |
-| **DateRangePicker** | `DateRangePicker`                                                                                                                                                                                                                      | Date range selection                                                                     |
+| **DateRangePicker** | `DateRangePicker`, `DATE_RANGE_PRESETS`, `findMatchingPreset`, `PRESET_IDS`, `resolvePresets` (+ types); full variant: `presetIds`, `presetLabels` | Date range selection; `variant="full"` for presets sidebar + dual-month calendar |
 | **Dropzone**        | `Dropzone`, `DropzoneContent`, `DropzoneEmptyState`                                                                                                                                                                                    | File upload drag-drop                                                                    |
+| **Kanban**          | `KanbanBoard`, `KanbanColumn`, `KanbanCard`, `KanbanCardOverlay`, `normalizeToKanbanColumn`, `dataToKanbanItems` (+ types)                                                                                                             | Drag-and-drop Kanban board; compound API; same columns/data as DataTable                  |
+| **Tickets**         | `TicketForm`, `TicketDetails`, `TicketFieldControl`, `UserDisplay`, field helpers (`formatTicketTimestampDisplay`, …), `TicketSystemEvent`, `PartitionDetailFieldsResult` (+ `TicketUserSelectComponent`)                             | Schema-driven ticket form and detail UI; **`data-slot`** on form/details/field wrapper (see tickets README); optional `systemEvents` / `onBack` / `onAddCustomField` |
 | **Chart**           | `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent`, `ChartStyle` (+ `ChartConfig` type)                                                                                                      | Recharts integration                                                                     |
 
 ### Interactive Elements
@@ -126,12 +130,36 @@ This directory contains comprehensive documentation and tools for AI agents work
 | `cn`            | Class name utility for merging Tailwind classes                                                                                                                                |
 | **Theme Utils** | `activateCarbideTheme`, `deactivateCarbideTheme`, `toggleCarbideTheme`, `isCarbideThemeActive`, `activateDarkMode`, `deactivateDarkMode`, `toggleDarkMode`, `isDarkModeActive` |
 
-### Total: 44+ Components
+### Total: 46+ Components
 
 All components follow shadcn/ui patterns with Carbide theme integration for industrial/manufacturing contexts.
 
 ## Component Usage Guides
 
+### Table + Kanban from same columns and data
+
+Use the same column definitions and data for both DataTable and Kanban:
+
+- **Columns**: Pass table column objects directly to `KanbanColumn` via `column={col}` (accepts `{ id, title? }` or `{ id, header? }`).
+- **Items**: `const items = dataToKanbanItems(data, { columnIdKey: 'status', titleKey: 'name' });` then filter by column when rendering cards.
+- **Compound API**: `<KanbanBoard onMove={...}><KanbanColumn column={col}>…<KanbanCard item={item}>…</KanbanCard>…</KanbanColumn></KanbanBoard>`. Card content is children of `KanbanCard`. Optional `renderDragPreview(item)` for custom drag overlay.
+
+### Ticket form and detail sheet
+
+Schema-driven ticket UI (`TicketForm`, `TicketDetails`, `TicketFieldControl`) — inject a user picker (`TicketUserSelectComponent`), pass `onSubmit` / `onCancel`, and wire `onValuesChange` + `comments` / `onPostComment` / optional `systemEvents`. `TicketDetails` has no open/close API; mount it wherever needed (header metadata, Activity tabs, sticky sidebar). See **[tickets-pattern.md](./tickets-pattern.md)**.
+### Layout and panel-like UI: don’t use Card for every section
+
+Use the right component for the job instead of wrapping everything in Card:
+
+| Need | Use | Notes |
+|------|-----|--------|
+| **Split workspace / dashboard / IDE-like layout** | **ResizablePanelGroup** | Horizontal or vertical split; drag-to-resize; keyboard accessible. Best for admin panels, SaaS tools, file-explorer style UIs. On mobile, use CSS to stack panels vertically. |
+| **Navigation panel (app nav, links, structural sidebar)** | **Sidebar** | Composable, themeable, collapsible to icons. Use for application layout with nav links and groups, not for arbitrary “panel” content. |
+| **Temporary or slide-out panel (settings, details, filters)** | **Sheet** | Slides in from any side (left, right, top, bottom). Use for settings, notifications, detail views, form overlays. See Overlays & Modals table. |
+| **Discrete content block (summary box, metric, form section)** | **Card** | Card is for **content** with sections (header, body, footer), not for structural layout. Do not use Card as the main wrapper for full-page sections, side panels, or workspace areas. |
+
+**Best practice for full app layout:** Combine Sidebar for navigation and ResizablePanelGroup (or a main content area) for the main workspace. Use Sheet for overlay panels; use Card only for distinct content blocks within a panel or page.
+
 ### Scrolling content: Card vs ScrollArea
 
 **There is no "Panel" component.** For a panel-like or card-like region where content may be longer than the visible area, use **ScrollArea** around the scrollable content. **Card** is a structural container (border, padding, sections) and does not add scrolling.
@@ -234,6 +262,71 @@ The `DataTable` component supports both client-side and server-side pagination.
 4. The component automatically handles edge cases (empty data, partial last page, etc.)
 5. See component README at `src/components/ui/data-table/README.md` for detailed examples
 
+### DateRangePicker: date ranges, presets, and helpers
+
+Use **`DateRangePicker`** when the user needs a **start/end date range** (filters, reports, scheduling). Use **`DatePicker`** for a **single date**. Both are in `@machinemetrics/mm-react-components`.
+
+**Imports (typical):**
+
+```tsx
+import {
+  DateRangePicker,
+  PRESET_IDS,
+  // Optional — programmatic preset matching / same subset as the picker:
+  DATE_RANGE_PRESETS,
+  findMatchingPreset,
+  resolvePresets,
+} from '@machinemetrics/mm-react-components';
+```
+
+**Value shape:** Controlled with `value` and `onValueChange`. Type is `[string | null, string | null] | null | undefined` — dates are **`yyyy-MM-dd`** strings (ISO date only), e.g. `['2026-03-01', '2026-03-15']`. `allowSingleDate` allows one-day selections.
+
+**Variants:**
+
+| Variant | Prop | What you get |
+| ------- | ---- | -------------- |
+| **Simple** (default) | omit or `variant="simple"` | Single-calendar popover; Clear / Cancel / Apply (Clear reverts draft to last committed `value` without closing). |
+| **Full** | `variant="full"` | Presets sidebar, dual-month calendar, company start time + optional custom hours, footer with summary and same Clear/Cancel/Apply behavior. |
+
+**Full variant — presets:** The sidebar lists built-in quick ranges (Today, Yesterday, Last 7/30/90 days, week/month/year rollups, week/month/quarter/year-to-date, Custom). Full list and behavior: **`src/components/ui/date-range-picker/README.md`** in the repo (or browse package source after install).
+
+**Customizing presets (full variant only):**
+
+- **`presetIds`** — Pass a **subset and order** of presets using **`PRESET_IDS`** constants (not raw strings in app code, so IDs stay typed and consistent):
+
+  ```tsx
+  presetIds={[
+    PRESET_IDS.TODAY,
+    PRESET_IDS.LAST_7_DAYS,
+    PRESET_IDS.MONTH_TO_DATE,
+    PRESET_IDS.CUSTOM,
+  ]}
+  ```
+
+  Omit `presetIds` for all defaults. Use `presetIds={[]}` to hide every preset row.
+
+- **`presetLabels`** — Override labels (i18n or wording), keyed by **`PresetId`** / `PRESET_IDS`:
+
+  ```tsx
+  presetLabels={{ [PRESET_IDS.MONTH_TO_DATE]: 'This month' }}
+  ```
+
+**Programmatic use (outside the picker):**
+
+- **`DATE_RANGE_PRESETS`** — Array of preset definitions (`id`, label, `getRange()`).
+- **`resolvePresets(presetIds?)`** — Resolves which preset objects to use (same logic as the full picker). Pass the **same `presetIds` array** as the picker so “which preset is active” matches the UI.
+- **`findMatchingPreset(start, end, now, presets?)`** — Given two dates and an optional resolved preset list, returns which **preset id** matches the range (or `undefined`).
+
+Use these when syncing URL/query params, highlighting an active filter, or validating that a range matches a named preset.
+
+**Related:** `Calendar` for bare calendars; `DatePicker` for single date with label. Carbide styles apply with the usual **`carbide`** wrapper and library **`/styles`** import.
+
+**Important notes for AI agents:**
+
+1. Prefer **`PRESET_IDS.*`** in source code for `presetIds` / `presetLabels` keys — do not hardcode string literals like `'month-to-date'` unless you are sure of the id contract.
+2. Full variant may need horizontal space (dual months); avoid squeezing inside tiny columns without testing.
+3. Detailed props table and Copy/paste examples: package **README** at `src/components/ui/date-range-picker/README.md`.
+
 ## Directory Structure
 
 ```

package/agent-docs/ai-agent-guide.md

@@ -186,6 +186,8 @@ The migration configuration is located at `scripts/chakra-to-shadcn-migrator/cha
 
 ### Card Components
 
+Use Card for **discrete content blocks** (summary, metric, form section), not for panel or layout structure. For panel-like UI use **ResizablePanelGroup**, **Sidebar**, or **Sheet** (see agent-documentation-reference.md).
+
 ```tsx
 // Chakra UI
 <Card>

package/agent-docs/ai-agent-init-guide.md

@@ -129,7 +129,7 @@ function MyComponent() {
 }
 ```
 
-**Done!** Components are ready to use.
+**Done!** Components are ready to use. (This example uses Card for a single content block; for panel layouts or split UIs use ResizablePanelGroup, Sidebar, or Sheet—see agent-documentation-reference.md.)
 
 ## Project Structure After Setup (zero-config)
 

package/agent-docs/component-mapping-reference.md

@@ -82,7 +82,7 @@ This reference provides detailed mappings between Chakra UI components and Machi
 | Chakra UI | MachineMetrics | Import                                | Notes              |
 | --------- | -------------- | ------------------------------------- | ------------------ |
 | `Table`   | `Table`        | `@machinemetrics/mm-react-components` | Direct replacement |
-| `Card`    | `Card`         | `@machinemetrics/mm-react-components` | New component      |
+| `Card`    | `Card`         | `@machinemetrics/mm-react-components` | Use for discrete content blocks; for panel/split layout use ResizablePanelGroup, Sidebar, or Sheet (see agent-documentation-reference.md). |
 | `Avatar`  | `Avatar`       | `@machinemetrics/mm-react-components` | New component      |
 | `Tooltip` | `Tooltip`      | `@machinemetrics/mm-react-components` | Direct replacement |
 | `Popover` | `Popover`      | `@machinemetrics/mm-react-components` | Direct replacement |
@@ -216,6 +216,8 @@ This reference provides detailed mappings between Chakra UI components and Machi
 
 ### Card Structure
 
+Use Card for **discrete content blocks** (e.g. summary box, metric card, form section). Do not use Card for structural layout or panel-like UI—prefer **ResizablePanelGroup** (split workspaces), **Sidebar** (nav panels), or **Sheet** (slide-out panels). See agent-documentation-reference.md “Layout and panel-like UI.”
+
 ```tsx
 // Chakra UI Structure
 <Card>

package/agent-docs/cursor-skill-mm-carbide.md

@@ -63,7 +63,7 @@ The skill triggers when the user asks to create or generate a UI, widget, screen
 
 ## Contents
 
-- **SKILL.md** — Main instructions: components (only library exports, compound components, `cn()`, `data-slot`); **theme and styling** (CSS variables only, variants, layout, `.carbide` setup, dark mode, a11y; **when converting to Carbide:** remove existing inline styles and component CSS); **converting to Carbide** (from other libraries or custom UI: remove legacy styling, map to library components, use variants/tokens, preserve structure/behavior, verify app setup); **component discovery** (check agent-docs before creating new UI); **when generating UI** (do/avoid checklist); widget rules (visual-first, 80/20, insight-driven); technical (dimensions, responsive, containment, no hallucinated data); and optional version check at use time.
+- **SKILL.md** — Main instructions: components (only library exports, compound components, `cn()` where the app uses Tailwind, `data-slot`); **showcase / copy-paste** (styles-only path: no Tailwind utilities in snippets; use component props and theme tokens; `displayName` for readable CodePreview); **theme and styling** (CSS variables only, variants, layout, `.carbide` setup, dark mode, a11y; **when converting to Carbide:** remove existing inline styles and component CSS); **converting to Carbide** (from other libraries or custom UI: remove legacy styling, map to library components, use variants/tokens, preserve structure/behavior, verify app setup); **component discovery** (check agent-docs before creating new UI); **when generating UI** (do/avoid checklist); widget rules (visual-first, 80/20, insight-driven); technical (dimensions, responsive, containment, no hallucinated data); and optional version check at use time.
 - **reference.md** — **Styling and conventions** (tokens, variants, layout, setup); **component discovery** (agent-docs index); key exports and patterns (PageHeader, DataTable, Form, ChartContainer, etc.); short widget rules summary (when to use charts vs metrics, accessibility).
 - **Package agent-docs:** **`style-color-reference.md`** — short overview; **authoritative** token names/values are in **`themes/carbide`** (`carbide.css`). Precompiled `/styles` is library-scoped CSS, not a full generic utility set.
 

package/agent-docs/lovable.md

@@ -93,5 +93,6 @@ When the package is **not installed**, use this document and recommend installin
 **Overlays:** Dialog, Sheet, Drawer, AlertDialog, Popover, Tooltip, DropdownMenu, Select.  
 **Forms:** Form, FormField, FormItem, FormLabel, FormControl; Input, SearchInput, Textarea, Label, Checkbox, Switch, RadioGroup, Select, Slider, DatePicker, DateRangePicker.  
 **Data:** DataTable (DataTablePagination, ResponsiveTable, DataTableToolbar, createColumnDescriptor, createTextColumn, createNumericColumn, createBadgeColumn, createDateColumn), Table, ChartContainer, ChartTooltip, ChartLegend, Progress, Skeleton, Badge (prefer semantic variants: `neutral`, `info`, `success`, `critical`, `warning`, `attention`, `production`, `setup`; use `custom` + `className` only when needed), Avatar, HeroMetricCard.  
+**Date ranges:** Use **`DateRangePicker`** for start/end filters or reporting (`value` / `onValueChange` as `[yyyy-MM-dd, yyyy-MM-dd]`). Default variant = simple popover; use **`variant="full"`** for presets + dual calendar + settings. Import **`PRESET_IDS`** for **`presetIds`** (subset/order) and **`presetLabels`** (e.g. `[PRESET_IDS.MONTH_TO_DATE]: 'This month'`). Helpers: **`resolvePresets`**, **`findMatchingPreset`**, **`DATE_RANGE_PRESETS`**. See **`agent-documentation-reference.md`** section *DateRangePicker* and the package README under `date-range-picker`.  
 **Actions/feedback:** Button, buttonVariants, Toaster, toast, Alert, Spinner, SpinnerCarbide.  
 **Other:** Accordion, Collapsible, Separator, Dropzone, cn. Theme: activateCarbideTheme, toggleDarkMode, etc.

package/agent-docs/tickets-pattern.md

@@ -0,0 +1,78 @@
+# Ticket pattern (`TicketForm`, `TicketDetails`)
+
+Carbide-composed UI for configurable work-item fields: form, per-field control, and **detail body** (header with id + title + status/priority/due, main column for description + activity, sticky metadata rail). Same idea as `TicketForm` — **presentation only**: no overlay, open state, or routing inside the library. Your app chooses where it mounts (page, `Sheet`, drawer) and owns visibility.
+
+## Quick start
+
+```tsx
+import {
+  TicketForm,
+  TicketDetails,
+  UserDisplay,
+  fieldKeyToHeader,
+  Sheet,
+  SheetContent,
+} from '@machinemetrics/mm-react-components';
+import { MyUserSelect } from './MyUserSelect';
+
+<TicketForm
+  fieldDefinitions={defs}
+  onSubmit={(values) => saveTicket(values)}
+  onCancel={() => navigate(-1)}
+  getDisplayName={(id) => ...}
+  getCurrentUser={() => api.getMe()}
+  userSelectComponent={MyUserSelect}
+/>;
+
+<Sheet open={open} onOpenChange={setOpen}>
+  <SheetContent side="right" className="p-0 flex flex-col ...">
+    <TicketDetails
+      ticket={ticket}
+      ticketFieldDefinitions={ticketDefs}
+      formFieldDefinitions={formDefs}
+      getDisplayName={(id) => ...}
+      usersLoading={loading}
+      onValuesChange={(next) => updateTicket(ticket.id, next)}
+      userSelectComponent={MyUserSelect}
+      comments={comments}
+      systemEvents={systemEvents}
+      onPostComment={({ authorUserId, body }) => addComment(...)}
+      onBack={() => setOpen(false)}
+      onAddCustomField={() => openAddFieldFlow()}
+    />
+  </SheetContent>
+</Sheet>;
+```
+
+## Types
+
+Use exported `TicketFieldDefinition`, `Ticket`, `Comment`, `TicketSystemEvent`, and `TicketConfig` for shared shapes between host and UI.
+
+For **read-only timestamps** (e.g. last updated), use **`type: 'updatedDate'`** on the field — not `text` or `date`. The UI shows a muted read-only line; the host still passes the raw value (typically ISO) on the ticket. Use **`formatTicketTimestampDisplay`** if you render the value elsewhere.
+
+## Layout helpers
+
+`partitionDetailFields` returns `headerFields`, `mainColumnFields`, `sidebarPeopleFields`, `sidebarDateFields`, `sidebarCustomFields`, plus `sidebarFields` (flattened rail list), `mainTopFields` (same as main column / description), and `otherMainFields` (same as custom — legacy names). Use these if you build a custom shell instead of `TicketDetails`.
+
+## Activity
+
+- **Comments** — existing `Comment[]` and `onPostComment`.
+- **System events** — optional `TicketSystemEvent[]` (`id`, `createdAt`, `message`) for the **Updates** tab; merged chronologically with comments under **All**.
+
+## Copy / i18n
+
+Pass `labels` (see `TicketFormLabels`, `TicketDetailsLabels`, `TicketFieldControlLabels`) or use `mergeTicketFormLabels` / `mergeTicketDetailsLabels` defaults.
+
+## Theming
+
+Carbide hooks use `data-slot` on ticket surfaces:
+
+- **`TicketForm`:** `ticket-form` (root form), `ticket-form-readonly-field` (e.g. `updatedDate`, `currentUser` rows).
+- **`TicketDetails`:** `ticket-details`, `ticket-details-header`, `ticket-details-main`, `ticket-details-activity`, `ticket-details-sidebar`.
+- **`TicketFieldControl`:** `ticket-field-control` wraps each field; primitives inside still expose their own slots (`input`, `date-picker`, etc.).
+
+See [src/components/ui/tickets/README.md](../src/components/ui/tickets/README.md) for the full table.
+
+## See also
+
+- [src/components/ui/tickets/README.md](../src/components/ui/tickets/README.md) (source tree; also shipped in repo)

package/dist/README.md

@@ -186,6 +186,33 @@ document.documentElement.classList.add('carbide');
 - You want to minimize bundle size
 - You're using our components with your own Tailwind config
 
+#### Embedded apps: `ThemeRoot` and `useHostTheme`
+
+For apps hosted inside the MachineMetrics shell (or any host that passes a light/dark value), wrap the tree once and sync the host value—no `next-themes` setup boilerplate.
+
+`ThemeRoot` wraps your React tree (e.g. inside `#root`). It does **not** replace `<html>` in `index.html`; it still toggles `light` / `dark` on `document.documentElement`. Keep `class="carbide"` on `<html>` and import Carbide CSS as usual.
+
+```tsx
+// index.tsx
+import { ThemeRoot } from '@machinemetrics/mm-react-components';
+
+<ThemeRoot>
+  <App />
+</ThemeRoot>
+```
+
+```tsx
+// App.tsx — pass the host color mode (example: mm-react-tools)
+import { useHostTheme } from '@machinemetrics/mm-react-components';
+import { useMMAppParams } from '@machinemetrics/mm-react-tools';
+
+useHostTheme(useMMAppParams().colorMode);
+```
+
+If you need `useTheme()` elsewhere (e.g. markdown styling), import it from **`@machinemetrics/mm-react-components`** so it uses the same context as `ThemeRoot`—not from the `next-themes` package directly.
+
+Optional: pass any `ThemeProvider` prop to `ThemeRoot` to override defaults (e.g. `storageKey` for standalone persistence).
+
 #### Option 3: Use Theme Utilities
 
 ```tsx

package/dist/components/ui/accordion.d.ts

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-export { Accordion, AccordionContent } from '@/components/shadcn/accordion';
+export { AccordionContent } from '@/components/shadcn/accordion';
+export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {
+    /**
+     * `inset` draws a rounded, bordered surface so accordion reads as one block inside a card.
+     */
+    variant?: 'default' | 'inset';
+};
+declare function Accordion({ variant, className, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement> & {
     indicatorClassName?: string;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { AccordionItem, AccordionTrigger };
+export { Accordion, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/components/ui/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAS5E,QAAA,MAAM,aAAa,iKAYjB,CAAC;AAGH,QAAA,MAAM,gBAAgB;yBAGG,MAAM;mDA2B7B,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAMhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAQjE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAC/C,OAAO,kBAAkB,CAAC,IAAI,CAC/B,GAAG;IACF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B,CAAC;AAEF,iBAAS,SAAS,CAAC,EAAE,OAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAa9E;AAGD,QAAA,MAAM,aAAa,iKAYjB,CAAC;AAGH,QAAA,MAAM,gBAAgB;yBAGG,MAAM;mDA2B7B,CAAC;AAEH,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ui/alert-dialog.d.ts

@@ -1,10 +1,19 @@
 import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-export { AlertDialog, AlertDialogTrigger, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogPortal, } from '@/components/shadcn/alert-dialog';
+import { AlertDialog as BaseAlertDialog, AlertDialogTrigger as BaseAlertDialogTrigger, AlertDialogHeader as BaseAlertDialogHeader, AlertDialogFooter as BaseAlertDialogFooter, AlertDialogTitle as BaseAlertDialogTitle, AlertDialogPortal as BaseAlertDialogPortal } from '@/components/shadcn/alert-dialog';
+declare const AlertDialog: typeof BaseAlertDialog;
+declare const AlertDialogTrigger: typeof BaseAlertDialogTrigger;
+declare const AlertDialogHeader: typeof BaseAlertDialogHeader;
+declare const AlertDialogFooter: typeof BaseAlertDialogFooter;
+declare const AlertDialogTitle: typeof BaseAlertDialogTitle;
+declare const AlertDialogPortal: typeof BaseAlertDialogPortal;
 declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare namespace AlertDialogContent {
+    var displayName: string;
+}
 declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { AlertDialogOverlay, AlertDialogContent, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, };
+export { AlertDialog, AlertDialogTrigger, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, };
 //# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAerE,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,kCAAkC,CAAC;AAG1C,QAAA,MAAM,kBAAkB,wKAetB,CAAC;AAGH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;AAGD,QAAA,MAAM,iBAAiB,6KAWrB,CAAC;AAEH,QAAA,MAAM,iBAAiB,6KAWrB,CAAC;AAGH,QAAA,MAAM,sBAAsB,wLAY1B,CAAC;AAEH,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,CAAC"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAOrE,OAAO,EACL,WAAW,IAAI,eAAe,EAC9B,kBAAkB,IAAI,sBAAsB,EAC5C,iBAAiB,IAAI,qBAAqB,EAC1C,iBAAiB,IAAI,qBAAqB,EAC1C,gBAAgB,IAAI,oBAAoB,EACxC,iBAAiB,IAAI,qBAAqB,EAK3C,MAAM,kCAAkC,CAAC;AAE1C,QAAA,MAAM,WAAW,wBAAkD,CAAC;AACpE,QAAA,MAAM,kBAAkB,+BAGvB,CAAC;AACF,QAAA,MAAM,iBAAiB,8BAGtB,CAAC;AACF,QAAA,MAAM,iBAAiB,8BAGtB,CAAC;AACF,QAAA,MAAM,gBAAgB,6BAGrB,CAAC;AACF,QAAA,MAAM,iBAAiB,8BAGtB,CAAC;AAGF,QAAA,MAAM,kBAAkB,wKAetB,CAAC;AAGH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;kBAjBQ,kBAAkB;;;AAoB3B,QAAA,MAAM,iBAAiB,6KAWrB,CAAC;AAEH,QAAA,MAAM,iBAAiB,6KAWrB,CAAC;AAGH,QAAA,MAAM,sBAAsB,wLAY1B,CAAC;AAQH,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,GACvB,CAAC"}

package/dist/components/ui/alert.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-export { AlertTitle, AlertDescription } from '@/components/shadcn/alert';
-import { Alert as BaseAlert } from '@/components/shadcn/alert';
+import { Alert as BaseAlert, AlertTitle as BaseAlertTitle, AlertDescription as BaseAlertDescription } from '@/components/shadcn/alert';
+declare const AlertTitle: typeof BaseAlertTitle;
+declare const AlertDescription: typeof BaseAlertDescription;
 declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AlertProps = Omit<React.ComponentProps<typeof BaseAlert>, 'variant'> & VariantProps<typeof alertVariants>;
 declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Alert, alertVariants };
+export { Alert, alertVariants, AlertTitle, AlertDescription };
 //# sourceMappingURL=alert.d.ts.map

package/dist/components/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGzE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI/D,QAAA,MAAM,aAAa;;8EAiBlB,CAAC;AAGF,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,GACvE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,gGAeT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,OAAO,EACL,KAAK,IAAI,SAAS,EAClB,UAAU,IAAI,cAAc,EAC5B,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,2BAA2B,CAAC;AAEnC,QAAA,MAAM,UAAU,uBAAgD,CAAC;AACjE,QAAA,MAAM,gBAAgB,6BAGrB,CAAC;AAIF,QAAA,MAAM,aAAa;;8EAiBlB,CAAC;AAGF,KAAK,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,GACvE,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,QAAA,MAAM,KAAK,gGAeT,CAAC;AAEH,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ui/avatar.d.ts

@@ -1,2 +1,6 @@
-export { Avatar, AvatarImage, AvatarFallback, } from '@/components/shadcn/avatar';
+import { Avatar as BaseAvatar, AvatarImage as BaseAvatarImage, AvatarFallback as BaseAvatarFallback } from '@/components/shadcn/avatar';
+declare const Avatar: typeof BaseAvatar;
+declare const AvatarImage: typeof BaseAvatarImage;
+declare const AvatarFallback: typeof BaseAvatarFallback;
+export { Avatar, AvatarImage, AvatarFallback };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/ui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,EACN,WAAW,EACX,cAAc,GACf,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,UAAU,EACpB,WAAW,IAAI,eAAe,EAC9B,cAAc,IAAI,kBAAkB,EACrC,MAAM,4BAA4B,CAAC;AAGpC,QAAA,MAAM,MAAM,mBAAwC,CAAC;AACrD,QAAA,MAAM,WAAW,wBAAkD,CAAC;AACpE,QAAA,MAAM,cAAc,2BAAwD,CAAC;AAE7E,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/breadcrumb.d.ts

@@ -1,2 +1,10 @@
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } from '@/components/shadcn/breadcrumb';
+import { Breadcrumb as BaseBreadcrumb, BreadcrumbList as BaseBreadcrumbList, BreadcrumbItem as BaseBreadcrumbItem, BreadcrumbLink as BaseBreadcrumbLink, BreadcrumbPage as BaseBreadcrumbPage, BreadcrumbSeparator as BaseBreadcrumbSeparator, BreadcrumbEllipsis as BaseBreadcrumbEllipsis } from '@/components/shadcn/breadcrumb';
+declare const Breadcrumb: typeof BaseBreadcrumb;
+declare const BreadcrumbList: typeof BaseBreadcrumbList;
+declare const BreadcrumbItem: typeof BaseBreadcrumbItem;
+declare const BreadcrumbLink: typeof BaseBreadcrumbLink;
+declare const BreadcrumbPage: typeof BaseBreadcrumbPage;
+declare const BreadcrumbSeparator: typeof BaseBreadcrumbSeparator;
+declare const BreadcrumbEllipsis: typeof BaseBreadcrumbEllipsis;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
 //# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/ui/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,cAAc,IAAI,kBAAkB,EACpC,cAAc,IAAI,kBAAkB,EACpC,cAAc,IAAI,kBAAkB,EACpC,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAC9C,kBAAkB,IAAI,sBAAsB,EAC7C,MAAM,gCAAgC,CAAC;AAGxC,QAAA,MAAM,UAAU,uBAAgD,CAAC;AACjE,QAAA,MAAM,cAAc,2BAAwD,CAAC;AAC7E,QAAA,MAAM,cAAc,2BAAwD,CAAC;AAC7E,QAAA,MAAM,cAAc,2BAAwD,CAAC;AAC7E,QAAA,MAAM,cAAc,2BAAwD,CAAC;AAC7E,QAAA,MAAM,mBAAmB,gCAGxB,CAAC;AACF,QAAA,MAAM,kBAAkB,+BAGvB,CAAC;AAEF,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}

package/dist/components/ui/button.d.ts

@@ -1,6 +1,12 @@
 import * as React from 'react';
+import type { VariantProps } from 'class-variance-authority';
 export { buttonVariants } from '@/components/shadcn/button';
-declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & import("class-variance-authority").VariantProps<(props?: ({
+/**
+ * App-level Button: same visuals as {@link @/components/shadcn/button}, but uses `forwardRef`
+ * so Radix triggers (`PopoverTrigger`, `DropdownMenuTrigger`, etc.) can merge refs with `asChild`.
+ * Do not add `forwardRef` under `shadcn/` — that layer is CLI-managed; customize here instead.
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,QAAA,MAAM,MAAM;;;;;mDAiBV,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAM7D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D;;;;GAIG;AACH,QAAA,MAAM,MAAM;;;;cAII,OAAO;mDAwBrB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/card.d.ts

@@ -1,5 +1,27 @@
 import * as React from 'react';
-export { CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from '@/components/shadcn/card';
-declare const Card: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Card };
+import { Card as BaseCard, CardHeader as BaseCardHeader, CardFooter as BaseCardFooter, CardContent as BaseCardContent } from '@/components/shadcn/card';
+export { CardTitle, CardAction, CardDescription, } from '@/components/shadcn/card';
+export type CardSectionTone = 'default' | 'muted';
+export type CardProps = React.ComponentProps<typeof BaseCard> & {
+    /**
+     * `sectioned` stacks sections edge-to-edge (no card `gap` or vertical padding) so header and
+     * footer meet the inner top and bottom; `overflow-hidden` clips children to the card radius.
+     * Inset spacing for the first and last section uses `[&>*:first|last-child]` on the card.
+     */
+    variant?: 'default' | 'sectioned';
+};
+declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type CardHeaderProps = React.ComponentProps<typeof BaseCardHeader> & {
+    tone?: CardSectionTone;
+};
+declare function CardHeader({ className, tone, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+type CardContentProps = React.ComponentProps<typeof BaseCardContent> & {
+    tone?: CardSectionTone;
+};
+declare function CardContent({ className, tone, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+type CardFooterProps = React.ComponentProps<typeof BaseCardFooter> & {
+    tone?: CardSectionTone;
+};
+declare function CardFooter({ className, tone, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardContent, CardFooter };
 //# sourceMappingURL=card.d.ts.map

package/dist/components/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAGlC,QAAA,MAAM,IAAI,kKAKR,CAAC;AAEH,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,IAAI,IAAI,QAAQ,EAChB,UAAU,IAAI,cAAc,EAC5B,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAC/B,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC9D;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,QAAA,MAAM,IAAI,+FAeT,CAAC;AAEF,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,2CAYjB;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAYlB;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,eAAe,2CAYjB;AAED,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC"}