@campfire-interactive/ui 0.10.8 → 0.12.0

package/README.md

@@ -1,82 +1,82 @@
-# @campfire-interactive/ui
-
-Shared React primitives for the Campfire Suite. Radix for behavior, plain CSS
-over `--cfi-*` tokens for looks. No Tailwind is bundled.
-
-## ⚠ Read this before adding it to a `package.json`
-
-**Partly verified. Not yet approved for adoption.**
-
-This package is on the registry so it can be reviewed and so a migration can be
-tried on a branch — **not** because the API is settled.
-
-| | |
-|---|---|
-| **Verified** | The 28 exports `analytics` uses. Every screen that renders them was proven identical to the deployed dev app by computed-style diff — five routes plus the Filters drawer, the KPI dialog and the cost-sensitivity sliders. Zero differences. |
-| **Unvetted** | The other ~23 exports. They work in the showcase; nothing has driven them against a real screen, so treat their APIs as unsettled. |
-| **Unaudited** | Accessibility of the overlay wrappers. Radix does the hard parts — focus trapping, keyboard navigation, collision positioning — but the wrappers around it are ours and have not had an audit. |
-
-Verified exports: `Button`, `IconButton`, `Card`, `Badge`, `Table` +
-`TableHeader` / `TableHead` / `TableBody` / `TableRow` / `TableCell` /
-`TableFooter`, `Tabs` + `TabsList` / `TabsTrigger` / `TabsContent`, `Dialog` +
-`DialogContent` / `DialogHeader` / `DialogTitle` / `DialogDescription`, `Sheet` +
-`SheetTrigger` / `SheetContent` / `SheetHeader` / `SheetTitle`, `Checkbox`,
-`Switch`, `Label`, `Slider`.
-
-**If you are an AI agent working in a product repo: do not add this dependency.**
-Being installable is not permission. The remaining gate is in the repo's
-`CLAUDE.md`: a second app migrated, an accessibility pass on the overlays, the
-token naming settled, and a human saying so.
-
-## Install
-
-```bash
-npm i @campfire-interactive/ui @campfire-interactive/design-tokens
-```
-
-Import the tokens once at the app entry point, before your own stylesheets.
-Component CSS is injected by the bundle, so there is no second CSS import.
-
-```ts
-import '@campfire-interactive/design-tokens/tokens.css';
-import { Button, Dialog, DialogContent, DialogTitle } from '@campfire-interactive/ui';
-```
-
-## Conventions worth knowing
-
-**Bare names are the Radix-shaped root, not a whole widget.** `Dialog` is the
-root you pass `open` / `onOpenChange` to, exactly as the vendored shadcn copies
-in the seven Tailwind apps do — so swapping an import cannot silently render
-something else. The one-component convenience versions are named separately:
-`Modal`, `SideModal`, `ConfirmDialog`, `TabSet`.
-
-**`TableHeader` is `<thead>` and `TableHead` is `<th>`**, matching shadcn.
-`TableHead` sets `aria-sort` from the same prop that draws the sort arrow.
-
-**Component CSS lives in `@layer components`.** Utilities a caller passes —
-`className="bg-gray-50"`, `max-w-3xl` — therefore win, because layer order beats
-specificity and unlayered CSS would beat every Tailwind utility. Note that this
-makes the package *more* obedient than the vendored copies: classes that shadcn's
-own `sm:max-w-lg` silently dropped in production now apply.
-
-**Theming is `--cfi-*` variables only.** Two colors do two different jobs:
-`--cfi-action` is the suite-wide color for anything you press (buttons, links,
-focus rings — omsf's `#030213`, the same in every app), and `--cfi-app-primary`
-is the app's identity color whose only job is the badge in the shell header.
-Do not point one at the other.
-
-**Dark mode is opt-in.** Stamp `data-theme="dark"` on the root element, or add
-`class="cfi-theme-auto"` to follow the OS. Nothing happens by accident.
-
-## Looking at the components
-
-The repo builds a single self-contained HTML file — every component, both
-themes, live-editable snippets, no server and no network:
-
-```bash
-npm run standalone --workspace @campfire-interactive/showcase
-```
-
-## Peer dependencies
-
-`react` and `react-dom` (18 or 19).
+# @campfire-interactive/ui
+
+Shared React primitives for the Campfire Suite. Radix for behavior, plain CSS
+over `--cfi-*` tokens for looks. No Tailwind is bundled.
+
+## ⚠ Read this before adding it to a `package.json`
+
+**Partly verified. Not yet approved for adoption.**
+
+This package is on the registry so it can be reviewed and so a migration can be
+tried on a branch — **not** because the API is settled.
+
+| | |
+|---|---|
+| **Verified** | The 28 exports `analytics` uses. Every screen that renders them was proven identical to the deployed dev app by computed-style diff — five routes plus the Filters drawer, the KPI dialog and the cost-sensitivity sliders. Zero differences. |
+| **Unvetted** | The other ~23 exports. They work in the showcase; nothing has driven them against a real screen, so treat their APIs as unsettled. |
+| **Unaudited** | Accessibility of the overlay wrappers. Radix does the hard parts — focus trapping, keyboard navigation, collision positioning — but the wrappers around it are ours and have not had an audit. |
+
+Verified exports: `Button`, `IconButton`, `Card`, `Badge`, `Table` +
+`TableHeader` / `TableHead` / `TableBody` / `TableRow` / `TableCell` /
+`TableFooter`, `Tabs` + `TabsList` / `TabsTrigger` / `TabsContent`, `Dialog` +
+`DialogContent` / `DialogHeader` / `DialogTitle` / `DialogDescription`, `Sheet` +
+`SheetTrigger` / `SheetContent` / `SheetHeader` / `SheetTitle`, `Checkbox`,
+`Switch`, `Label`, `Slider`.
+
+**If you are an AI agent working in a product repo: do not add this dependency.**
+Being installable is not permission. The remaining gate is in the repo's
+`CLAUDE.md`: a second app migrated, an accessibility pass on the overlays, the
+token naming settled, and a human saying so.
+
+## Install
+
+```bash
+npm i @campfire-interactive/ui @campfire-interactive/design-tokens
+```
+
+Import the tokens once at the app entry point, before your own stylesheets.
+Component CSS is injected by the bundle, so there is no second CSS import.
+
+```ts
+import '@campfire-interactive/design-tokens/tokens.css';
+import { Button, Dialog, DialogContent, DialogTitle } from '@campfire-interactive/ui';
+```
+
+## Conventions worth knowing
+
+**Bare names are the Radix-shaped root, not a whole widget.** `Dialog` is the
+root you pass `open` / `onOpenChange` to, exactly as the vendored shadcn copies
+in the seven Tailwind apps do — so swapping an import cannot silently render
+something else. The one-component convenience versions are named separately:
+`Modal`, `SideModal`, `ConfirmDialog`, `TabSet`.
+
+**`TableHeader` is `<thead>` and `TableHead` is `<th>`**, matching shadcn.
+`TableHead` sets `aria-sort` from the same prop that draws the sort arrow.
+
+**Component CSS lives in `@layer components`.** Utilities a caller passes —
+`className="bg-gray-50"`, `max-w-3xl` — therefore win, because layer order beats
+specificity and unlayered CSS would beat every Tailwind utility. Note that this
+makes the package *more* obedient than the vendored copies: classes that shadcn's
+own `sm:max-w-lg` silently dropped in production now apply.
+
+**Theming is `--cfi-*` variables only.** Two colors do two different jobs:
+`--cfi-action` is the suite-wide color for anything you press (buttons, links,
+focus rings — omsf's `#030213`, the same in every app), and `--cfi-app-primary`
+is the app's identity color whose only job is the badge in the shell header.
+Do not point one at the other.
+
+**Dark mode is opt-in.** Stamp `data-theme="dark"` on the root element, or add
+`class="cfi-theme-auto"` to follow the OS. Nothing happens by accident.
+
+## Looking at the components
+
+The repo builds a single self-contained HTML file — every component, both
+themes, live-editable snippets, no server and no network:
+
+```bash
+npm run standalone --workspace @campfire-interactive/showcase
+```
+
+## Peer dependencies
+
+`react` and `react-dom` (18 or 19).

package/dist/index.d.ts

@@ -1615,6 +1615,199 @@ declare function useDebouncedValue<T>(value: T, delayMs?: number): T;
  */
 declare function usePersistentState<T>(key: string, initial: T): [T, (next: T | ((prev: T) => T)) => void];
 
+type TimelineTone = 'neutral' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+interface TimelineItem {
+    id: string;
+    /**
+     * A `YYYY-MM-DD` day, an ISO instant, or a Date. Under `calendar` (the
+     * default) an instant is read by its UTC day, which is how a Prisma
+     * `@db.Date` arrives (`2028-01-01T00:00:00.000Z`).
+     */
+    date: Date | string;
+    label: ReactNode;
+    /** The line under the label. Defaults to the date; `null` hides it. */
+    detail?: ReactNode | null;
+    /** The marker's color. `neutral` (default) is the accent while upcoming and muted once past. */
+    tone?: TimelineTone;
+    /** `diamond` for an event of a different kind on the same lane — a re-source date beside the program's own. */
+    shape?: 'dot' | 'diamond';
+    /** The lane it sits on; omitted, the first. */
+    lane?: string;
+}
+interface TimelineLane {
+    id: string;
+    /** Names the lane; shown above it and read as its list label. */
+    label: ReactNode;
+    /** `dashed` for a lane of projected or alternative dates. */
+    line?: 'solid' | 'dashed';
+}
+interface TimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: TimelineItem[];
+    /**
+     * Lanes, top to bottom. Omitted, one unlabeled lane holds everything. An
+     * item naming a lane that is not here goes to the first.
+     */
+    lanes?: TimelineLane[];
+    /** The span drawn. Defaults to the items' own span, with today in it when shown. */
+    start?: Date | string;
+    end?: Date | string;
+    /** Where the today marker sits; `null` hides it. Defaults to now. */
+    today?: Date | string | null;
+    todayLabel?: ReactNode;
+    /** Dates are calendar days, read by UTC day (default). `false` reads them as local instants. */
+    calendar?: boolean;
+    /** Lead-ins for the items outside `start`–`end`, listed under the axis instead of dropped. */
+    beforeLabel?: ReactNode;
+    afterLabel?: ReactNode;
+    /** Shown when there are no items. */
+    emptyLabel?: ReactNode;
+}
+interface TimelineLayoutItem {
+    item: TimelineItem;
+    time: number;
+    /** 0–100 across the axis. */
+    pos: number;
+    /** Which side of the axis the label sits on, and how far out (0 nearest). */
+    side: 'above' | 'below';
+    level: number;
+    past: boolean;
+    /** Near either end the label aligns to that end instead of centering off the edge. */
+    edge: 'start' | 'end' | null;
+}
+interface TimelineLayout {
+    start: number;
+    end: number;
+    /** How many label rows the lane needs above its axis and below it. */
+    lanes: {
+        lane: TimelineLane;
+        items: TimelineLayoutItem[];
+        levels: {
+            above: number;
+            below: number;
+        };
+    }[];
+    before: TimelineLayoutItem[];
+    after: TimelineLayoutItem[];
+    years: {
+        year: number;
+        pos: number;
+    }[];
+    today: number | null;
+    todayPos: number | null;
+}
+/**
+ * Where everything goes. Pure, so the rules are tested without a DOM:
+ * markers are spread across 3–97% so none sits on the frame; an item
+ * outside the span is listed rather than clamped onto it, because a marker
+ * pinned to the edge claims a date it does not have.
+ */
+declare function timelineLayout({ items, lanes, start, end, today, calendar, minGap, }: Pick<TimelineProps, 'items' | 'lanes' | 'start' | 'end' | 'today' | 'calendar'> & {
+    /** How far apart, in percent of the axis, two labels in the same row must be. */
+    minGap?: number;
+}): TimelineLayout;
+/**
+ * Dated events on one axis, with today marked: a program's sourcing
+ * milestones, a contract's renewals, a build's gates.
+ *
+ * Each lane is an ordered list, so a screen reader hears the events in date
+ * order with their dates; the axis, ticks and today line are decoration. In
+ * a container narrower than about 34rem it lays out as that list, one event
+ * per row, because labels on an axis that narrow land on each other.
+ */
+declare function Timeline({ items, lanes, start, end, today, todayLabel, calendar, beforeLabel, afterLabel, emptyLabel, className, ...rest }: TimelineProps): react.JSX.Element;
+
+type KanbanTone = 'neutral' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+interface KanbanColumn {
+    id: string;
+    label: ReactNode;
+    /** The dot beside the label. */
+    tone?: KanbanTone;
+    /**
+     * The count beside the label. Defaults to the cards in the column; pass one
+     * when the column holds fewer than it counts (done cards hidden by a filter).
+     */
+    count?: number;
+    /**
+     * A line under the cards, e.g. "4 done hidden". A function gets the lane's
+     * id (`'__default'` without lanes), for a figure that differs lane to lane.
+     */
+    note?: ReactNode | ((lane: string) => ReactNode);
+}
+interface KanbanLane {
+    id: string;
+    /** Names the swimlane; shown above its row of cells. */
+    label: ReactNode;
+    /** A line after the label, e.g. "3 open". */
+    detail?: ReactNode;
+    /** Any CSS color for the lane's left edge, e.g. a program's color. */
+    color?: string;
+}
+/** What the board needs of a card. The rest of the caller's object is passed back untouched. */
+interface KanbanItem {
+    id: string;
+    /** The column it sits in. An id not in `columns` puts it in the first. */
+    column: string;
+    /** The swimlane it sits in; omitted, or not in `lanes`, the first. */
+    lane?: string;
+}
+interface KanbanBoardProps<T extends KanbanItem> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    columns: KanbanColumn[];
+    /** In the order each cell lists them; the board does not sort. */
+    items: T[];
+    /** Swimlanes, top to bottom. Omitted, one unlabeled lane holds everything. */
+    lanes?: KanbanLane[];
+    /** The card's content. The board draws the card around it, so keep buttons and links out of it. */
+    renderCard: (item: T) => ReactNode;
+    /** Plain text for the card, read in announcements ("Moved {item} to {column}"). */
+    itemLabel: (item: T) => string;
+    /** Plain text for a column in announcements. Defaults to its label when that is a string, else its id. */
+    columnLabel?: (column: KanbanColumn) => string;
+    /**
+     * A card was dropped on another column in its own lane, or moved with
+     * Alt+Left / Alt+Right. Omitted, the board is read-only: nothing drags.
+     * The board does not move the card itself; the caller updates `items`.
+     */
+    onMove?: (item: T, column: string) => void;
+    /** Click or Enter / Space on a card. */
+    onOpen?: (item: T) => void;
+    /** Shown in an empty cell. */
+    emptyLabel?: ReactNode;
+    /** The announcement after a move. */
+    movedLabel?: (item: string, column: string) => string;
+    /** How narrow a column may get before the board scrolls sideways. */
+    minColumnWidth?: string;
+}
+interface KanbanLayout<T extends KanbanItem> {
+    lanes: {
+        lane: KanbanLane;
+        cells: {
+            column: KanbanColumn;
+            items: T[];
+        }[];
+    }[];
+    /** Cards per column across every lane, before any `count` override. */
+    counts: Record<string, number>;
+}
+/**
+ * Puts each card in its lane and column. Pure, so the rules are testable: a
+ * card naming a column or lane the board does not have goes to the first,
+ * rather than disappearing from a board that claims to show everything.
+ */
+declare function kanbanLayout<T extends KanbanItem>(columns: KanbanColumn[], items: T[], lanes?: KanbanLane[]): KanbanLayout<T>;
+/** The column `delta` steps from `from`, or null past either end. */
+declare function kanbanStep(columns: KanbanColumn[], from: string, delta: number): string | null;
+/**
+ * Cards in columns, optionally in swimlanes: tasks by status, deals by stage.
+ *
+ * Cards drag between columns within their own lane (a lane is what the card
+ * belongs to, which a drop on the board is not the place to change). Every
+ * drag has a keyboard twin: Alt+Left / Alt+Right moves the focused card one
+ * column, focus stays on it, and the move is announced. The board never moves
+ * a card on its own; `onMove` tells the caller, and the caller's `items` say
+ * where it is.
+ */
+declare function KanbanBoard<T extends KanbanItem>({ columns, items, lanes, renderCard, itemLabel, columnLabel, onMove, onOpen, emptyLabel, movedLabel, minColumnWidth, className, style, ...rest }: KanbanBoardProps<T>): react.JSX.Element;
+
 interface SortState<K extends string> {
     key: K;
     direction: SortDirection;
@@ -1984,4 +2177,4 @@ declare function formatNumber(value: number | null | undefined, decimals?: numbe
  */
 declare function formatPercent(value: number | null | undefined, decimals?: number): string;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RequiredMark, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionRoot, type AccordionSection, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BootScreen, type BootScreenProps, type Breadcrumb, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardDescription, CardFooter, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ClassValue, Combobox, type ComboboxOption, type ComboboxProps, ComingSoon, type ComingSoonProps, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, CreatableSelect, type CreatableSelectProps, DataList, DataListItem, type DataListItemProps, type DataListProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogRoot, type DialogSize, DialogTitle, DialogTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, ExternalLink, type ExternalLinkProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileButton, type FileButtonProps, FilterBar, type FilterBarProps, type FilterSelect, type FilterToggle, type FilterValue, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, KanbanBoard, type KanbanBoardProps, type KanbanColumn, type KanbanItem, type KanbanLane, type KanbanLayout, type KanbanTone, Label, type LabelProps, ListToolbar, type ListToolbarProps, LoadingState, type LoadingStateProps, Menu, type MenuAction, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Modal, type ModalProps, type MoneyOptions, PageHeader, type PageHeaderProps, type PagedRows, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RequiredMark, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, SelectionBar, type SelectionBarProps, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, SideModal, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortDirection, type SortState, SplitButton, type SplitButtonProps, StatGrid, type StatGridProps, StatTile, type StatTileProps, type StatTone, Switch, type SwitchProps, type TabDefinition, TabSet, type TabSetProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableEmpty, TableFoot, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, TableScroller, Tabs, TabsContent, TabsList, type TabsListProps, TabsRoot, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineLane, type TimelineLayout, type TimelineLayoutItem, type TimelineProps, type TimelineTone, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseSortStateResult, cn, formatCalendarDate, formatDate, formatDateTime, formatMoney, formatNumber, formatPercent, kanbanLayout, kanbanStep, timelineLayout, useDebouncedValue, useFieldControl, usePagedRows, usePersistentState, useSortState, useToast };

package/dist/index.js

@@ -2243,10 +2243,440 @@ function usePersistentState(key, initial) {
   return [value, set];
 }
 
+// src/format.ts
+function formatDate(value) {
+  const day = calendarDay(value);
+  if (day !== null) return day;
+  const d = toDate(value);
+  if (!d) return "\u2014";
+  return ymd(d.getFullYear(), d.getMonth() + 1, d.getDate());
+}
+function formatCalendarDate(value) {
+  const day = calendarDay(value);
+  if (day !== null) return day;
+  const d = toDate(value);
+  if (!d) return "\u2014";
+  return ymd(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate());
+}
+function ymd(year, month, day) {
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${year}-${pad(month)}-${pad(day)}`;
+}
+function calendarDay(value) {
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
+  const d = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
+  return !Number.isNaN(d.getTime()) && d.toISOString().slice(0, 10) === value ? value : "\u2014";
+}
+function formatDateTime(value) {
+  const d = toDate(value);
+  if (!d) return "\u2014";
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${formatDate(d)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+function formatMoney(value, { currency = "USD", decimals, perUnit = false, compact = false } = {}) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  if (compact) return compactMoney(value, currency, decimals ?? 1);
+  const places = decimals ?? (perUnit ? 4 : 2);
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: places,
+    maximumFractionDigits: places
+  }).format(value);
+}
+function compactMoney(value, currency, decimals) {
+  let symbol = currency;
+  try {
+    symbol = new Intl.NumberFormat("en-US", { style: "currency", currency }).formatToParts(0).find((p) => p.type === "currency")?.value ?? currency;
+  } catch {
+  }
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  for (const [size, suffix] of [[1e9, "B"], [1e6, "M"], [1e3, "K"]]) {
+    if (abs >= size) return `${sign}${symbol}${(abs / size).toFixed(decimals)}${suffix}`;
+  }
+  return `${sign}${symbol}${Math.round(abs)}`;
+}
+function formatNumber(value, decimals = 0) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(value);
+}
+function formatPercent(value, decimals = 1) {
+  if (value == null || Number.isNaN(value)) return "\u2014";
+  return `${formatNumber(value, decimals)}%`;
+}
+function toDate(value) {
+  if (value == null || value === "") return null;
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+// src/Timeline.css
+styleInject('@layer components {\n  :where(.cfi-ui-timeline) {\n    container-type: inline-size;\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-sm);\n    min-width: 0;\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-timeline__empty {\n    margin: 0;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-timeline__lane-label {\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n    letter-spacing: var(--cfi-ui-tracking-caps);\n    text-transform: uppercase;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-timeline__track {\n    --_row: 2.25rem;\n    --_above: calc(var(--cfi-ui-timeline-above, 1) * var(--_row) + 0.75rem);\n    --_below: calc(var(--cfi-ui-timeline-below, 1) * var(--_row) + 0.75rem);\n    position: relative;\n    height: calc(var(--_above) + var(--_below) + 2.5rem);\n    margin: 0 var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-timeline__axis {\n    position: absolute;\n    inset-inline: 0;\n    top: var(--_above);\n    height: 0.375rem;\n    margin-top: -0.1875rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-surface-muted);\n  }\n  .cfi-ui-timeline__lane[data-line=dashed] .cfi-ui-timeline__axis {\n    height: 0;\n    margin-top: 0;\n    border-radius: 0;\n    background: none;\n    border-top: 2px dashed var(--cfi-ui-border-strong);\n  }\n  .cfi-ui-timeline__year {\n    position: absolute;\n    top: var(--_above);\n    height: calc(var(--_below) + 0.25rem);\n    width: 0;\n    border-left: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-timeline__year > span {\n    position: absolute;\n    top: 100%;\n    transform: translateX(-50%);\n    padding: 0 var(--cfi-ui-space-3xs);\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content-muted);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-timeline__today {\n    position: absolute;\n    top: 0.25rem;\n    bottom: 0;\n    width: 2px;\n    margin-left: -1px;\n    background: var(--cfi-ui-content);\n    z-index: 1;\n  }\n  .cfi-ui-timeline__today-label {\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    padding: 0 var(--cfi-ui-space-2xs);\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-content);\n    color: var(--cfi-ui-content-inverse);\n    font-weight: var(--cfi-ui-weight-semibold);\n    white-space: nowrap;\n  }\n  .cfi-ui-timeline__items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ui-timeline__item {\n    position: absolute;\n    top: var(--_above);\n    width: 0;\n    height: 0;\n    z-index: 2;\n  }\n  .cfi-ui-timeline__marker {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 0.875rem;\n    height: 0.875rem;\n    transform: translate(-50%, -50%);\n    border: 2px solid var(--cfi-ui-surface);\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-timeline__item[data-shape=diamond] .cfi-ui-timeline__marker {\n    width: 0.75rem;\n    height: 0.75rem;\n    border-radius: 2px;\n    transform: translate(-50%, -50%) rotate(45deg);\n  }\n  .cfi-ui-timeline__item[data-tone=neutral][data-past] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-timeline__item[data-tone=success] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-success);\n  }\n  .cfi-ui-timeline__item[data-tone=warning] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-warning);\n  }\n  .cfi-ui-timeline__item[data-tone=error] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-error);\n  }\n  .cfi-ui-timeline__item[data-tone=info] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-info);\n  }\n  .cfi-ui-timeline__item[data-tone=accent] .cfi-ui-timeline__marker {\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-timeline__text {\n    position: absolute;\n    left: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    transform: translateX(-50%);\n    padding: 0 var(--cfi-ui-space-3xs);\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-surface);\n    white-space: nowrap;\n    line-height: var(--cfi-ui-leading-snug);\n    text-align: center;\n  }\n  .cfi-ui-timeline__item[data-side=above] .cfi-ui-timeline__text {\n    bottom: 0.625rem;\n  }\n  .cfi-ui-timeline__item[data-side=below] .cfi-ui-timeline__text {\n    top: 0.625rem;\n  }\n  .cfi-ui-timeline__item[data-side=above][data-level="1"] .cfi-ui-timeline__text {\n    bottom: calc(0.625rem + var(--_row));\n  }\n  .cfi-ui-timeline__item[data-side=below][data-level="1"] .cfi-ui-timeline__text {\n    top: calc(0.625rem + var(--_row));\n  }\n  .cfi-ui-timeline__item[data-side=above][data-level="2"] .cfi-ui-timeline__text {\n    bottom: calc(0.625rem + 2 * var(--_row));\n  }\n  .cfi-ui-timeline__item[data-side=below][data-level="2"] .cfi-ui-timeline__text {\n    top: calc(0.625rem + 2 * var(--_row));\n  }\n  .cfi-ui-timeline__item[data-edge=start] .cfi-ui-timeline__text {\n    align-items: flex-start;\n    text-align: start;\n    transform: translateX(-0.5rem);\n  }\n  .cfi-ui-timeline__item[data-edge=end] .cfi-ui-timeline__text {\n    align-items: flex-end;\n    text-align: end;\n    transform: translateX(calc(-100% + 0.5rem));\n  }\n  .cfi-ui-timeline__label {\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-timeline__detail {\n    color: var(--cfi-ui-content-muted);\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-timeline__outside {\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-timeline__outside > p {\n    margin: 0;\n  }\n  .cfi-ui-timeline__outside-lead {\n    font-weight: var(--cfi-ui-weight-medium);\n  }\n  @container (max-width: 34rem) {\n    .cfi-ui-timeline__track {\n      height: auto;\n      margin: 0;\n    }\n    .cfi-ui-timeline__axis,\n    .cfi-ui-timeline__year,\n    .cfi-ui-timeline__today {\n      display: none;\n    }\n    .cfi-ui-timeline__items {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cfi-ui-space-2xs);\n    }\n    .cfi-ui-timeline__item {\n      position: static;\n      display: flex;\n      align-items: center;\n      gap: var(--cfi-ui-space-xs);\n      width: auto;\n      height: auto;\n    }\n    .cfi-ui-timeline__marker {\n      position: relative;\n      flex: none;\n      transform: none;\n    }\n    .cfi-ui-timeline__item[data-shape=diamond] .cfi-ui-timeline__marker {\n      transform: rotate(45deg);\n    }\n    .cfi-ui-timeline__item[data-side] .cfi-ui-timeline__text {\n      position: static;\n      padding: 0;\n      flex-direction: row;\n      gap: var(--cfi-ui-space-xs);\n      align-items: baseline;\n      transform: none;\n      white-space: normal;\n      text-align: start;\n    }\n  }\n}\n');
+
+// src/Timeline.tsx
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs28 } from "react/jsx-runtime";
+var DAY = 864e5;
+function timelineTime(value, calendar = true) {
+  if (value == null || value === "") return null;
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    const [y, m, d] = value.split("-").map(Number);
+    return calendar ? Date.UTC(y, m - 1, d) : new Date(y, m - 1, d).getTime();
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  const t = date.getTime();
+  if (Number.isNaN(t)) return null;
+  return calendar ? Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) : t;
+}
+function todayTime(value, calendar) {
+  if (value === null) return null;
+  if (value !== void 0) return timelineTime(value, calendar);
+  const now = /* @__PURE__ */ new Date();
+  return calendar ? Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()) : now.getTime();
+}
+var DEFAULT_LANE = { id: "__default", label: null };
+var SLOTS = [
+  ["above", 0],
+  ["below", 0],
+  ["above", 1],
+  ["below", 1],
+  ["above", 2],
+  ["below", 2]
+];
+function placeLabels(items, minGap) {
+  const last = SLOTS.map(() => -Infinity);
+  const levels = { above: 1, below: 1 };
+  for (const x of items) {
+    let slot = SLOTS.findIndex((_, i) => x.pos - last[i] >= minGap);
+    if (slot === -1) slot = last.indexOf(Math.min(...last));
+    last[slot] = x.pos;
+    [x.side, x.level] = SLOTS[slot];
+    levels[x.side] = Math.max(levels[x.side], x.level + 1);
+  }
+  return levels;
+}
+function timelineLayout({
+  items,
+  lanes,
+  start,
+  end,
+  today,
+  calendar = true,
+  minGap = 12
+}) {
+  const laneList = lanes && lanes.length > 0 ? lanes : [DEFAULT_LANE];
+  const dated = items.map((item) => ({ item, time: timelineTime(item.date, calendar) })).filter((x) => x.time !== null).sort((a, b) => a.time - b.time || a.item.id.localeCompare(b.item.id));
+  const now = todayTime(today, calendar);
+  const times = dated.map((d) => d.time);
+  if (now !== null) times.push(now);
+  let lo = timelineTime(start, calendar) ?? (times.length ? Math.min(...times) : now ?? Date.now());
+  let hi = timelineTime(end, calendar) ?? (times.length ? Math.max(...times) : lo);
+  if (hi <= lo) {
+    lo -= 30 * DAY;
+    hi += 30 * DAY;
+  }
+  const pos = (t) => 3 + (t - lo) / (hi - lo) * 94;
+  const laneIndex = new Map(laneList.map((l, i) => [l.id, i]));
+  const byLane = laneList.map((lane) => ({ lane, items: [], levels: { above: 1, below: 1 } }));
+  const before = [];
+  const after = [];
+  for (const { item, time } of dated) {
+    const p = pos(time);
+    const placed = {
+      item,
+      time,
+      pos: p,
+      side: "above",
+      level: 0,
+      past: now !== null && time < now,
+      edge: p < 12 ? "start" : p > 88 ? "end" : null
+    };
+    if (time < lo) before.push(placed);
+    else if (time > hi) after.push(placed);
+    else byLane[laneIndex.get(item.lane ?? "") ?? 0].items.push(placed);
+  }
+  for (const lane of byLane) lane.levels = placeLabels(lane.items, minGap);
+  const firstYear = new Date(lo).getUTCFullYear() + 1;
+  const lastYear = new Date(hi).getUTCFullYear();
+  const step = lastYear - firstYear >= 12 ? 2 : 1;
+  const years = [];
+  for (let y = firstYear; y <= lastYear; y += step) {
+    const t = calendar ? Date.UTC(y, 0, 1) : new Date(y, 0, 1).getTime();
+    if (t > lo && t <= hi) years.push({ year: y, pos: pos(t) });
+  }
+  const todayInSpan = now !== null && now >= lo && now <= hi;
+  return { start: lo, end: hi, lanes: byLane, before, after, years, today: now, todayPos: todayInSpan ? pos(now) : null };
+}
+function Timeline({
+  items,
+  lanes,
+  start,
+  end,
+  today,
+  todayLabel = "Today",
+  calendar = true,
+  beforeLabel = "Before this view",
+  afterLabel = "After this view",
+  emptyLabel = "No dates",
+  className,
+  ...rest
+}) {
+  const layout = timelineLayout({ items, lanes, start, end, today, calendar });
+  const fmt = (value) => calendar ? formatCalendarDate(value) : formatDate(value);
+  const detailOf = (x) => x.item.detail === void 0 ? fmt(x.item.date) : x.item.detail;
+  const empty = layout.lanes.every((l) => l.items.length === 0) && layout.before.length === 0 && layout.after.length === 0;
+  return /* @__PURE__ */ jsx28("div", { className: cn("cfi-ui", "cfi-ui-timeline", className), ...rest, children: empty ? /* @__PURE__ */ jsx28("p", { className: "cfi-ui-timeline__empty", children: emptyLabel }) : /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    layout.lanes.map(({ lane, items: laneItems, levels }, laneIdx) => /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-timeline__lane", "data-line": lane.line ?? "solid", "data-first": laneIdx === 0 || void 0, children: [
+      lane.label ? /* @__PURE__ */ jsx28("div", { className: "cfi-ui-timeline__lane-label", children: lane.label }) : null,
+      /* @__PURE__ */ jsxs28(
+        "div",
+        {
+          className: "cfi-ui-timeline__track",
+          style: { "--cfi-ui-timeline-above": levels.above, "--cfi-ui-timeline-below": levels.below },
+          children: [
+            /* @__PURE__ */ jsx28("div", { className: "cfi-ui-timeline__axis", "aria-hidden": "true" }),
+            laneIdx === 0 ? layout.years.map((y) => /* @__PURE__ */ jsx28("div", { className: "cfi-ui-timeline__year", style: { left: `${y.pos}%` }, "aria-hidden": "true", children: /* @__PURE__ */ jsx28("span", { children: y.year }) }, y.year)) : null,
+            layout.todayPos !== null ? /* @__PURE__ */ jsx28("div", { className: "cfi-ui-timeline__today", style: { left: `${layout.todayPos}%` }, "aria-hidden": "true", children: laneIdx === layout.lanes.length - 1 ? /* @__PURE__ */ jsx28("span", { className: "cfi-ui-timeline__today-label", children: todayLabel }) : null }) : null,
+            /* @__PURE__ */ jsx28("ol", { className: "cfi-ui-timeline__items", "aria-label": typeof lane.label === "string" ? lane.label : void 0, children: laneItems.map((x) => {
+              const detail = detailOf(x);
+              return /* @__PURE__ */ jsxs28(
+                "li",
+                {
+                  className: "cfi-ui-timeline__item",
+                  style: { left: `${x.pos}%` },
+                  "data-side": x.side,
+                  "data-level": x.level,
+                  "data-edge": x.edge ?? void 0,
+                  "data-past": x.past || void 0,
+                  "data-tone": x.item.tone ?? "neutral",
+                  "data-shape": x.item.shape ?? "dot",
+                  children: [
+                    /* @__PURE__ */ jsx28("span", { className: "cfi-ui-timeline__marker", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-timeline__text", children: [
+                      /* @__PURE__ */ jsx28("span", { className: "cfi-ui-timeline__label", children: x.item.label }),
+                      detail != null && detail !== "" ? /* @__PURE__ */ jsx28("span", { className: "cfi-ui-timeline__detail", children: detail }) : null
+                    ] })
+                  ]
+                },
+                x.item.id
+              );
+            }) })
+          ]
+        }
+      )
+    ] }, lane.id)),
+    layout.before.length > 0 || layout.after.length > 0 ? /* @__PURE__ */ jsx28("div", { className: "cfi-ui-timeline__outside", children: [
+      [beforeLabel, layout.before],
+      [afterLabel, layout.after]
+    ].map(
+      ([lead, list], i) => list.length > 0 ? /* @__PURE__ */ jsxs28("p", { children: [
+        /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-timeline__outside-lead", children: [
+          lead,
+          ":"
+        ] }),
+        " ",
+        list.map((x, j) => /* @__PURE__ */ jsxs28("span", { children: [
+          j > 0 ? " \xB7 " : null,
+          x.item.label,
+          " ",
+          detailOf(x)
+        ] }, x.item.id))
+      ] }, i) : null
+    ) }) : null
+  ] }) });
+}
+
+// src/KanbanBoard.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+
+// src/KanbanBoard.css
+styleInject("@layer components {\n  :where(.cfi-ui-kanban) {\n    min-width: 0;\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-kanban__scroll {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-sm);\n    overflow-x: auto;\n    padding-bottom: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-kanban__grid {\n    display: grid;\n    grid-template-columns: repeat(var(--cfi-ui-kanban-columns, 4), minmax(var(--cfi-ui-kanban-min, 13rem), 1fr));\n    gap: var(--cfi-ui-space-sm);\n  }\n  .cfi-ui-kanban__column-head {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    padding: 0 var(--cfi-ui-space-xs);\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-kanban__dot {\n    flex: none;\n    width: 0.625rem;\n    height: 0.625rem;\n    border-radius: var(--cfi-ui-radius-full);\n    background: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-kanban__column-head[data-tone=accent] .cfi-ui-kanban__dot {\n    background: var(--cfi-ui-accent);\n  }\n  .cfi-ui-kanban__column-head[data-tone=success] .cfi-ui-kanban__dot {\n    background: var(--cfi-ui-success);\n  }\n  .cfi-ui-kanban__column-head[data-tone=warning] .cfi-ui-kanban__dot {\n    background: var(--cfi-ui-warning);\n  }\n  .cfi-ui-kanban__column-head[data-tone=error] .cfi-ui-kanban__dot {\n    background: var(--cfi-ui-error);\n  }\n  .cfi-ui-kanban__column-head[data-tone=info] .cfi-ui-kanban__dot {\n    background: var(--cfi-ui-info);\n  }\n  .cfi-ui-kanban__column-label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .cfi-ui-kanban__count {\n    padding: 0 var(--cfi-ui-space-xs);\n    border-radius: var(--cfi-ui-radius-sm);\n    background: var(--cfi-ui-surface-muted);\n    font-size: var(--cfi-ui-text-xs);\n    font-weight: var(--cfi-ui-weight-medium);\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-kanban__lane[data-labeled] {\n    padding: var(--cfi-ui-space-sm);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-xl);\n    background: var(--cfi-ui-surface);\n    box-shadow: inset 4px 0 0 var(--cfi-ui-kanban-lane-color, var(--cfi-ui-border-strong));\n  }\n  .cfi-ui-kanban__lane-head {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-xs) var(--cfi-ui-space-sm);\n    margin-bottom: var(--cfi-ui-space-sm);\n    padding-left: var(--cfi-ui-space-xs);\n  }\n  .cfi-ui-kanban__lane-label {\n    font-weight: var(--cfi-ui-weight-semibold);\n  }\n  .cfi-ui-kanban__lane-detail {\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-kanban__cell {\n    min-height: 6rem;\n    padding: var(--cfi-ui-space-xs);\n    border-radius: var(--cfi-ui-radius-lg);\n    background: var(--cfi-ui-surface-sunken);\n    transition: background var(--cfi-ui-transition-fast), box-shadow var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-kanban__cell[data-over] {\n    background: var(--cfi-ui-accent-soft);\n    box-shadow: inset 0 0 0 2px var(--cfi-ui-accent);\n  }\n  .cfi-ui-kanban__cards {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-xs);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .cfi-ui-kanban__card {\n    padding: var(--cfi-ui-space-sm);\n    border: 1px solid var(--cfi-ui-border);\n    border-radius: var(--cfi-ui-radius-lg);\n    background: var(--cfi-ui-surface);\n    box-shadow: var(--cfi-ui-shadow-xs);\n    transition:\n      border-color var(--cfi-ui-transition-fast),\n      box-shadow var(--cfi-ui-transition-fast),\n      opacity var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-kanban__card[role=button] {\n    cursor: pointer;\n  }\n  .cfi-ui-kanban__card[data-movable] {\n    cursor: grab;\n  }\n  .cfi-ui-kanban__card[data-movable]:active {\n    cursor: grabbing;\n  }\n  .cfi-ui-kanban__card[role=button]:hover,\n  .cfi-ui-kanban__card[data-movable]:hover {\n    border-color: var(--cfi-ui-border-strong);\n    box-shadow: var(--cfi-ui-shadow-md);\n  }\n  .cfi-ui-kanban__card:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-kanban__card[data-dragging] {\n    opacity: 0.4;\n  }\n  .cfi-ui-kanban__note,\n  .cfi-ui-kanban__empty {\n    margin: 0;\n    padding: var(--cfi-ui-space-xs);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-kanban__live {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .cfi-ui-kanban__cell,\n    .cfi-ui-kanban__card {\n      transition: none;\n    }\n  }\n}\n");
+
+// src/KanbanBoard.tsx
+import { jsx as jsx29, jsxs as jsxs29 } from "react/jsx-runtime";
+var DEFAULT_LANE2 = { id: "__default", label: null };
+function kanbanLayout(columns, items, lanes) {
+  const laneList = lanes && lanes.length > 0 ? lanes : [DEFAULT_LANE2];
+  const columnIds = new Set(columns.map((c) => c.id));
+  const laneIds = new Set(laneList.map((l) => l.id));
+  const counts = Object.fromEntries(columns.map((c) => [c.id, 0]));
+  const cells = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const column = columnIds.has(item.column) ? item.column : columns[0]?.id;
+    if (column === void 0) continue;
+    const lane = item.lane !== void 0 && laneIds.has(item.lane) ? item.lane : laneList[0].id;
+    const key = `${lane}\0${column}`;
+    const list = cells.get(key);
+    if (list) list.push(item);
+    else cells.set(key, [item]);
+    counts[column] += 1;
+  }
+  return {
+    lanes: laneList.map((lane) => ({
+      lane,
+      cells: columns.map((column) => ({ column, items: cells.get(`${lane.id}\0${column.id}`) ?? [] }))
+    })),
+    counts
+  };
+}
+function kanbanStep(columns, from, delta) {
+  const i = columns.findIndex((c) => c.id === from);
+  const next = columns[(i < 0 ? 0 : i) + delta];
+  return next ? next.id : null;
+}
+function KanbanBoard({
+  columns,
+  items,
+  lanes,
+  renderCard,
+  itemLabel,
+  columnLabel = (c) => typeof c.label === "string" ? c.label : c.id,
+  onMove,
+  onOpen,
+  emptyLabel = "Nothing here",
+  movedLabel = (item, column) => `Moved ${item} to ${column}`,
+  minColumnWidth = "13rem",
+  className,
+  style,
+  ...rest
+}) {
+  const layout = kanbanLayout(columns, items, lanes);
+  const [drag, setDrag] = useState6(null);
+  const [over, setOver] = useState6(null);
+  const [announcement, setAnnouncement] = useState6("");
+  const rootRef = useRef4(null);
+  const refocus = useRef4(null);
+  useEffect4(() => {
+    const id = refocus.current;
+    if (!id || !rootRef.current) return;
+    const card = rootRef.current.querySelector(`[data-kanban-card="${CSS.escape(id)}"]`);
+    if (card) {
+      card.focus();
+      refocus.current = null;
+    }
+  });
+  const byId = new Map(items.map((i) => [i.id, i]));
+  const columnById = new Map(columns.map((c) => [c.id, c]));
+  const move = (item, column, viaKeyboard) => {
+    if (!onMove || column === item.column) return;
+    if (viaKeyboard) refocus.current = item.id;
+    onMove(item, column);
+    const target = columnById.get(column);
+    setAnnouncement(movedLabel(itemLabel(item), target ? columnLabel(target) : column));
+  };
+  const endDrag = () => {
+    setDrag(null);
+    setOver(null);
+  };
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("cfi-ui", "cfi-ui-kanban", className),
+      style: { "--cfi-ui-kanban-columns": columns.length, "--cfi-ui-kanban-min": minColumnWidth, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs29("div", { className: "cfi-ui-kanban__scroll", children: [
+          /* @__PURE__ */ jsx29("div", { className: "cfi-ui-kanban__grid cfi-ui-kanban__head", children: columns.map((c) => /* @__PURE__ */ jsxs29("div", { className: "cfi-ui-kanban__column-head", "data-tone": c.tone ?? "neutral", children: [
+            /* @__PURE__ */ jsx29("span", { className: "cfi-ui-kanban__dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx29("span", { className: "cfi-ui-kanban__column-label", children: c.label }),
+            /* @__PURE__ */ jsx29("span", { className: "cfi-ui-kanban__count", children: c.count ?? layout.counts[c.id] })
+          ] }, c.id)) }),
+          layout.lanes.map(({ lane, cells }) => /* @__PURE__ */ jsxs29(
+            "section",
+            {
+              className: "cfi-ui-kanban__lane",
+              "data-labeled": lane.label ? true : void 0,
+              style: lane.color ? { "--cfi-ui-kanban-lane-color": lane.color } : void 0,
+              children: [
+                lane.label ? /* @__PURE__ */ jsxs29("div", { className: "cfi-ui-kanban__lane-head", children: [
+                  /* @__PURE__ */ jsx29("span", { className: "cfi-ui-kanban__lane-label", children: lane.label }),
+                  lane.detail ? /* @__PURE__ */ jsx29("span", { className: "cfi-ui-kanban__lane-detail", children: lane.detail }) : null
+                ] }) : null,
+                /* @__PURE__ */ jsx29("div", { className: "cfi-ui-kanban__grid", children: cells.map(({ column, items: cellItems }) => {
+                  const zone = `${lane.id}\0${column.id}`;
+                  const accepts = drag !== null && drag.lane === lane.id && drag.column !== column.id;
+                  const note = typeof column.note === "function" ? column.note(lane.id) : column.note;
+                  return /* @__PURE__ */ jsxs29(
+                    "div",
+                    {
+                      className: "cfi-ui-kanban__cell",
+                      "data-over": over === zone || void 0,
+                      onDragOver: (e) => {
+                        if (!accepts) return;
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                        if (over !== zone) setOver(zone);
+                      },
+                      onDragLeave: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget)) setOver((o) => o === zone ? null : o);
+                      },
+                      onDrop: (e) => {
+                        e.preventDefault();
+                        const item = drag ? byId.get(drag.id) : void 0;
+                        if (item && accepts) move(item, column.id, false);
+                        endDrag();
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx29("ul", { className: "cfi-ui-kanban__cards", "aria-label": columnLabel(column), children: cellItems.map((item) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(
+                          "div",
+                          {
+                            className: "cfi-ui-kanban__card",
+                            "data-kanban-card": item.id,
+                            "data-dragging": drag?.id === item.id || void 0,
+                            "data-movable": onMove ? true : void 0,
+                            role: onOpen ? "button" : void 0,
+                            tabIndex: onOpen || onMove ? 0 : void 0,
+                            "aria-keyshortcuts": onMove ? "Alt+ArrowLeft Alt+ArrowRight" : void 0,
+                            draggable: onMove ? true : void 0,
+                            onDragStart: (e) => {
+                              e.dataTransfer.effectAllowed = "move";
+                              e.dataTransfer.setData("text/plain", item.id);
+                              setTimeout(() => setDrag({ id: item.id, lane: lane.id, column: column.id }), 0);
+                            },
+                            onDragEnd: endDrag,
+                            onClick: onOpen ? () => onOpen(item) : void 0,
+                            onKeyDown: (e) => {
+                              if (e.target !== e.currentTarget) return;
+                              if (onMove && e.altKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+                                e.preventDefault();
+                                const to = kanbanStep(columns, column.id, e.key === "ArrowLeft" ? -1 : 1);
+                                if (to) move(item, to, true);
+                                return;
+                              }
+                              if (onOpen && (e.key === "Enter" || e.key === " ")) {
+                                e.preventDefault();
+                                onOpen(item);
+                              }
+                            },
+                            children: renderCard(item)
+                          }
+                        ) }, item.id)) }),
+                        note ? /* @__PURE__ */ jsx29("p", { className: "cfi-ui-kanban__note", children: note }) : null,
+                        cellItems.length === 0 && !note ? /* @__PURE__ */ jsx29("p", { className: "cfi-ui-kanban__empty", children: emptyLabel }) : null
+                      ]
+                    },
+                    column.id
+                  );
+                }) })
+              ]
+            },
+            lane.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx29("div", { className: "cfi-ui-kanban__live", role: "status", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+}
+
 // src/useSortState.ts
-import { useCallback as useCallback3, useMemo as useMemo5, useState as useState6 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo5, useState as useState7 } from "react";
 function useSortState(initialKey, initialDirection = "asc") {
-  const [sort, setSort] = useState6({ key: initialKey, direction: initialDirection });
+  const [sort, setSort] = useState7({ key: initialKey, direction: initialDirection });
   const toggle = useCallback3((key) => {
     setSort(
       (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: "asc" }
@@ -2283,21 +2713,21 @@ function useSortState(initialKey, initialDirection = "asc") {
 }
 
 // src/SearchInput.tsx
-import { forwardRef as forwardRef18, useEffect as useEffect4, useRef as useRef4, useState as useState7 } from "react";
+import { forwardRef as forwardRef18, useEffect as useEffect5, useRef as useRef5, useState as useState8 } from "react";
 import { Search as Search2, X as X6 } from "lucide-react";
 
 // src/SearchInput.css
 styleInject("@layer components {\n  .cfi-ui-search__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    background: none;\n    border: none;\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    border-radius: var(--cfi-ui-radius-sm);\n  }\n  .cfi-ui-search__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n  }\n  .cfi-ui-search__clear:hover {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-search__clear:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: 1px;\n  }\n}\n");
 
 // src/SearchInput.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay = 250, placeholder = "Search\u2026", clearLabel = "Clear search", ...rest }, ref) {
-  const [local, setLocal] = useState7(value);
-  const timer = useRef4(void 0);
-  const latest = useRef4(onChange);
+  const [local, setLocal] = useState8(value);
+  const timer = useRef5(void 0);
+  const latest = useRef5(onChange);
   latest.current = onChange;
-  useEffect4(() => setLocal(value), [value]);
-  useEffect4(() => () => clearTimeout(timer.current), []);
+  useEffect5(() => setLocal(value), [value]);
+  useEffect5(() => () => clearTimeout(timer.current), []);
   const push = (next) => {
     setLocal(next);
     clearTimeout(timer.current);
@@ -2309,7 +2739,7 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
     setLocal("");
     latest.current("");
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     Input,
     {
       ...rest,
@@ -2318,8 +2748,8 @@ var SearchInput = forwardRef18(function SearchInput2({ value, onChange, delay =
       value: local,
       placeholder,
       onChange: (e) => push(e.target.value),
-      prefix: /* @__PURE__ */ jsx28(Search2, { "aria-hidden": "true" }),
-      suffix: local ? /* @__PURE__ */ jsx28("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx28(X6, { "aria-hidden": "true" }) }) : void 0
+      prefix: /* @__PURE__ */ jsx30(Search2, { "aria-hidden": "true" }),
+      suffix: local ? /* @__PURE__ */ jsx30("button", { type: "button", className: "cfi-ui-search__clear", onClick: clear, "aria-label": clearLabel, children: /* @__PURE__ */ jsx30(X6, { "aria-hidden": "true" }) }) : void 0
     }
   );
 });
@@ -2331,7 +2761,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-pagination) {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-md);\n    padding-block: var(--cfi-ui-space-sm);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-pagination__controls {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-left: auto;\n  }\n  .cfi-ui-pagination__page {\n    font-variant-numeric: tabular-nums;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-pagination__range {\n    font-variant-numeric: tabular-nums;\n  }\n  .cfi-ui-pagination__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--cfi-ui-control-height-sm);\n    height: var(--cfi-ui-control-height-sm);\n    padding: 0;\n    background: var(--cfi-ui-surface);\n    color: var(--cfi-ui-content);\n    border: 1px solid var(--cfi-ui-border-strong);\n    border-radius: var(--cfi-ui-radius-md);\n    cursor: pointer;\n  }\n  .cfi-ui-pagination__btn > svg {\n    width: 1rem;\n    height: 1rem;\n  }\n  .cfi-ui-pagination__btn:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n  }\n  .cfi-ui-pagination__btn:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: default;\n  }\n  .cfi-ui-pagination__btn:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n}\n");
 
 // src/Pagination.tsx
-import { jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 function Pagination({
   page,
   pageSize,
@@ -2347,12 +2777,12 @@ function Pagination({
   const from = (current - 1) * pageSize + 1;
   const to = Math.min(current * pageSize, totalItems);
   const range = labels?.range?.(from, to, totalItems) ?? `${from}\u2013${to} of ${totalItems.toLocaleString()}`;
-  return /* @__PURE__ */ jsxs28("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs30("nav", { className: cn("cfi-ui", "cfi-ui-pagination", className), "aria-label": "Pagination", children: [
     showRange && // aria-live so a screen-reader user hears where they landed; paging
     // otherwise moves focus nowhere and announces nothing.
-    /* @__PURE__ */ jsx29("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
-    /* @__PURE__ */ jsxs28("div", { className: "cfi-ui-pagination__controls", children: [
-      /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx31("span", { className: "cfi-ui-pagination__range", "aria-live": "polite", children: range }),
+    /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-pagination__controls", children: [
+      /* @__PURE__ */ jsx31(
         "button",
         {
           type: "button",
@@ -2360,15 +2790,15 @@ function Pagination({
           onClick: () => onPageChange(current - 1),
           disabled: current <= 1,
           "aria-label": labels?.previous ?? "Previous page",
-          children: /* @__PURE__ */ jsx29(ChevronLeft, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx31(ChevronLeft, { "aria-hidden": "true" })
         }
       ),
-      /* @__PURE__ */ jsxs28("span", { className: "cfi-ui-pagination__page", children: [
+      /* @__PURE__ */ jsxs30("span", { className: "cfi-ui-pagination__page", children: [
         current,
         " / ",
         pageCount
       ] }),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx31(
         "button",
         {
           type: "button",
@@ -2376,7 +2806,7 @@ function Pagination({
           onClick: () => onPageChange(current + 1),
           disabled: current >= pageCount,
           "aria-label": labels?.next ?? "Next page",
-          children: /* @__PURE__ */ jsx29(ChevronRight, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ jsx31(ChevronRight, { "aria-hidden": "true" })
         }
       )
     ] })
@@ -2387,12 +2817,12 @@ function Pagination({
 styleInject("@layer components {\n  :where(.cfi-ui-list-toolbar) {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--cfi-ui-space-md);\n    min-width: 0;\n  }\n  .cfi-ui-list-toolbar__search {\n    flex: 1 1 14rem;\n    min-width: 0;\n    max-width: 22rem;\n  }\n  .cfi-ui-list-toolbar__filters {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    min-width: 0;\n    flex: 0 1 auto;\n  }\n  .cfi-ui-list-toolbar__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-inline-start: auto;\n  }\n  @media (max-width: 40rem) {\n    .cfi-ui-list-toolbar__search,\n    .cfi-ui-list-toolbar__filters,\n    .cfi-ui-list-toolbar__actions {\n      flex: 1 1 100%;\n      max-width: none;\n      margin-inline-start: 0;\n    }\n  }\n}\n");
 
 // src/ListToolbar.tsx
-import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
 function ListToolbar({ search, filters, actions, className }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
-    search && /* @__PURE__ */ jsx30("div", { className: "cfi-ui-list-toolbar__search", children: search }),
-    filters && /* @__PURE__ */ jsx30("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
-    actions && /* @__PURE__ */ jsx30("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
+  return /* @__PURE__ */ jsxs31("div", { className: cn("cfi-ui", "cfi-ui-list-toolbar", className), children: [
+    search && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__search", children: search }),
+    filters && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__filters", children: filters }),
+    actions && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-list-toolbar__actions", children: actions })
   ] });
 }
 
@@ -2403,7 +2833,7 @@ import { ArrowLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-page-header) {\n    display: flex;\n    flex-direction: column;\n    gap: var(--cfi-ui-space-xs);\n    font-family: var(--cfi-ui-font);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header[data-bordered] {\n    padding-bottom: var(--cfi-ui-space-md);\n    border-bottom: 1px solid var(--cfi-ui-border);\n  }\n  .cfi-ui-page-header__crumbs {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-xs);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-page-header__crumb {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n  }\n  .cfi-ui-page-header__crumb-sep {\n    width: 0.75rem;\n    height: 0.75rem;\n    flex: none;\n    color: var(--cfi-ui-content-subtle);\n  }\n  .cfi-ui-page-header__crumb a {\n    color: inherit;\n    text-decoration: none;\n    border-radius: var(--cfi-ui-radius-sm);\n    transition: color var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-page-header__crumb a:hover {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__crumb a:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-page-header__crumb[data-current] {\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__back {\n    display: inline-flex;\n    align-items: center;\n    align-self: flex-start;\n    gap: var(--cfi-ui-space-2xs);\n    margin-left: -0.5rem;\n    padding: 0.25rem 0.5rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-md);\n    background: none;\n    font: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-page-header__back:hover {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__back:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-page-header__back > svg {\n    width: 1rem;\n    height: 1rem;\n    flex: none;\n  }\n  .cfi-ui-page-header__row {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--cfi-ui-space-md);\n  }\n  .cfi-ui-page-header__titles {\n    min-width: 0;\n  }\n  .cfi-ui-page-header__title,\n  h1.cfi-ui-page-header__title,\n  h2.cfi-ui-page-header__title,\n  h3.cfi-ui-page-header__title {\n    margin: 0;\n    font-size: var(--cfi-ui-text-xl);\n    font-weight: var(--cfi-ui-weight-semibold);\n    line-height: var(--cfi-ui-leading-tight);\n    letter-spacing: -0.01em;\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-page-header__description {\n    margin: 0.25rem 0 0;\n    font-size: var(--cfi-ui-text-sm);\n    line-height: var(--cfi-ui-leading-normal);\n    color: var(--cfi-ui-content-muted);\n  }\n  .cfi-ui-page-header__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    flex: none;\n  }\n  .cfi-ui-page-header__meta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-xs);\n    margin-top: var(--cfi-ui-space-3xs);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-page-header__row {\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cfi-ui-space-sm);\n    }\n    .cfi-ui-page-header__actions {\n      flex-wrap: wrap;\n    }\n  }\n}\n");
 
 // src/PageHeader.tsx
-import { jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs32 } from "react/jsx-runtime";
 function PageHeader({
   title,
   description,
@@ -2417,32 +2847,32 @@ function PageHeader({
   className
 }) {
   const Heading = `h${level}`;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: cn("cfi-ui", "cfi-ui-page-header", className),
       "data-bordered": bordered ? "" : void 0,
       children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx31("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx33("nav", { className: "cfi-ui-page-header__crumbs", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => {
           const last = i === breadcrumbs.length - 1;
-          const label = crumb.render ? crumb.render(crumb.label) : crumb.href ? /* @__PURE__ */ jsx31("a", { href: crumb.href, children: crumb.label }) : crumb.label;
-          return /* @__PURE__ */ jsxs30("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
-            i > 0 && /* @__PURE__ */ jsx31(ChevronRight2, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx31("span", { "aria-current": last ? "page" : void 0, children: label })
+          const label = crumb.render ? crumb.render(crumb.label) : crumb.href ? /* @__PURE__ */ jsx33("a", { href: crumb.href, children: crumb.label }) : crumb.label;
+          return /* @__PURE__ */ jsxs32("span", { className: "cfi-ui-page-header__crumb", "data-current": last ? "" : void 0, children: [
+            i > 0 && /* @__PURE__ */ jsx33(ChevronRight2, { className: "cfi-ui-page-header__crumb-sep", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx33("span", { "aria-current": last ? "page" : void 0, children: label })
           ] }, i);
         }) }),
-        onBack && /* @__PURE__ */ jsxs30("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
-          /* @__PURE__ */ jsx31(ArrowLeft, { "aria-hidden": "true" }),
+        onBack && /* @__PURE__ */ jsxs32("button", { type: "button", className: "cfi-ui-page-header__back", onClick: onBack, children: [
+          /* @__PURE__ */ jsx33(ArrowLeft, { "aria-hidden": "true" }),
           backLabel
         ] }),
-        /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-page-header__row", children: [
-          /* @__PURE__ */ jsxs30("div", { className: "cfi-ui-page-header__titles", children: [
-            /* @__PURE__ */ jsx31(Heading, { className: "cfi-ui-page-header__title", children: title }),
-            description && /* @__PURE__ */ jsx31("p", { className: "cfi-ui-page-header__description", children: description })
+        /* @__PURE__ */ jsxs32("div", { className: "cfi-ui-page-header__row", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "cfi-ui-page-header__titles", children: [
+            /* @__PURE__ */ jsx33(Heading, { className: "cfi-ui-page-header__title", children: title }),
+            description && /* @__PURE__ */ jsx33("p", { className: "cfi-ui-page-header__description", children: description })
           ] }),
-          actions && /* @__PURE__ */ jsx31("div", { className: "cfi-ui-page-header__actions", children: actions })
+          actions && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-page-header__actions", children: actions })
         ] }),
-        children && /* @__PURE__ */ jsx31("div", { className: "cfi-ui-page-header__meta", children })
+        children && /* @__PURE__ */ jsx33("div", { className: "cfi-ui-page-header__meta", children })
       ]
     }
   );
@@ -2455,7 +2885,7 @@ import { X as X7 } from "lucide-react";
 styleInject("@layer components {\n  :where(.cfi-ui-selection-bar) {\n    display: flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-sm);\n    padding: var(--cfi-ui-space-2xs) var(--cfi-ui-space-sm);\n    border: 1px solid var(--cfi-ui-accent);\n    border-radius: var(--cfi-ui-radius-md);\n    background: var(--cfi-ui-accent-soft);\n    font-family: var(--cfi-ui-font);\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content);\n    min-height: 2.5rem;\n  }\n  .cfi-ui-selection-bar__count {\n    font-weight: var(--cfi-ui-weight-medium);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n  }\n  .cfi-ui-selection-bar__actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--cfi-ui-space-2xs);\n  }\n  .cfi-ui-selection-bar__clear {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--cfi-ui-space-3xs);\n    margin-left: auto;\n    padding: 0.25rem 0.5rem;\n    border: 0;\n    border-radius: var(--cfi-ui-radius-sm);\n    background: none;\n    font: inherit;\n    font-size: var(--cfi-ui-text-sm);\n    color: var(--cfi-ui-content-muted);\n    cursor: pointer;\n    transition: color var(--cfi-ui-transition-fast), background var(--cfi-ui-transition-fast);\n  }\n  .cfi-ui-selection-bar__clear:hover:not(:disabled) {\n    background: var(--cfi-ui-surface-hover);\n    color: var(--cfi-ui-content);\n  }\n  .cfi-ui-selection-bar__clear:focus-visible {\n    outline: var(--cfi-ui-focus-width) solid var(--cfi-ui-focus-color);\n    outline-offset: var(--cfi-ui-focus-offset);\n  }\n  .cfi-ui-selection-bar__clear:disabled {\n    color: var(--cfi-ui-content-disabled);\n    cursor: not-allowed;\n  }\n  .cfi-ui-selection-bar__clear > svg {\n    width: 0.875rem;\n    height: 0.875rem;\n    flex: none;\n  }\n  .cfi-ui-selection-bar[data-busy] {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n  .cfi-ui-selection-bar[data-variant=floating] {\n    position: fixed;\n    left: 50%;\n    bottom: var(--cfi-ui-space-lg);\n    transform: translateX(-50%);\n    z-index: var(--cfi-ui-z-dropdown);\n    width: max-content;\n    max-width: calc(100vw - 2 * var(--cfi-ui-space-lg));\n    padding: var(--cfi-ui-space-xs) var(--cfi-ui-space-md);\n    border-radius: var(--cfi-ui-radius-lg);\n    background: var(--cfi-ui-surface-raised);\n    box-shadow: var(--cfi-ui-shadow-lg);\n  }\n  @media (max-width: 640px) {\n    .cfi-ui-selection-bar {\n      flex-wrap: wrap;\n    }\n    .cfi-ui-selection-bar[data-variant=floating] {\n      left: var(--cfi-ui-space-sm);\n      right: var(--cfi-ui-space-sm);\n      width: auto;\n      max-width: none;\n      transform: none;\n    }\n  }\n}\n");
 
 // src/SelectionBar.tsx
-import { jsx as jsx32, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
 function SelectionBar({
   count,
   children,
@@ -2467,7 +2897,7 @@ function SelectionBar({
   className
 }) {
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       role: "status",
@@ -2476,9 +2906,9 @@ function SelectionBar({
       "data-busy": busy ? "" : void 0,
       className: cn("cfi-ui", "cfi-ui-selection-bar", className),
       children: [
-        /* @__PURE__ */ jsx32("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
-        children && /* @__PURE__ */ jsx32("div", { className: "cfi-ui-selection-bar__actions", children }),
-        onClear && /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsx34("span", { className: "cfi-ui-selection-bar__count", children: label(count) }),
+        children && /* @__PURE__ */ jsx34("div", { className: "cfi-ui-selection-bar__actions", children }),
+        onClear && /* @__PURE__ */ jsxs33(
           "button",
           {
             type: "button",
@@ -2486,7 +2916,7 @@ function SelectionBar({
             onClick: onClear,
             disabled: busy,
             children: [
-              /* @__PURE__ */ jsx32(X7, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx34(X7, { "aria-hidden": "true" }),
               clearLabel
             ]
           }
@@ -2497,14 +2927,14 @@ function SelectionBar({
 }
 
 // src/usePagedRows.ts
-import { useEffect as useEffect5, useMemo as useMemo6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState9 } from "react";
 function usePagedRows(all, initialPageSize = 25) {
-  const [page, setPage] = useState8(1);
-  const [pageSize, setSize] = useState8(initialPageSize);
+  const [page, setPage] = useState9(1);
+  const [pageSize, setSize] = useState9(initialPageSize);
   const totalItems = all.length;
   const pageCount = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
   const clamped = Math.min(Math.max(1, page), pageCount);
-  useEffect5(() => {
+  useEffect6(() => {
     if (clamped !== page) setPage(clamped);
   }, [clamped, page]);
   const rows = useMemo6(
@@ -2518,77 +2948,6 @@ function usePagedRows(all, initialPageSize = 25) {
   };
   return { rows, page: clamped, setPage, pageSize, setPageSize, totalItems };
 }
-
-// src/format.ts
-function formatDate(value) {
-  const day = calendarDay(value);
-  if (day !== null) return day;
-  const d = toDate(value);
-  if (!d) return "\u2014";
-  return ymd(d.getFullYear(), d.getMonth() + 1, d.getDate());
-}
-function formatCalendarDate(value) {
-  const day = calendarDay(value);
-  if (day !== null) return day;
-  const d = toDate(value);
-  if (!d) return "\u2014";
-  return ymd(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate());
-}
-function ymd(year, month, day) {
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${year}-${pad(month)}-${pad(day)}`;
-}
-function calendarDay(value) {
-  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return null;
-  const d = /* @__PURE__ */ new Date(`${value}T00:00:00Z`);
-  return !Number.isNaN(d.getTime()) && d.toISOString().slice(0, 10) === value ? value : "\u2014";
-}
-function formatDateTime(value) {
-  const d = toDate(value);
-  if (!d) return "\u2014";
-  const pad = (n) => String(n).padStart(2, "0");
-  return `${formatDate(d)} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-function formatMoney(value, { currency = "USD", decimals, perUnit = false, compact = false } = {}) {
-  if (value == null || Number.isNaN(value)) return "\u2014";
-  if (compact) return compactMoney(value, currency, decimals ?? 1);
-  const places = decimals ?? (perUnit ? 4 : 2);
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency,
-    minimumFractionDigits: places,
-    maximumFractionDigits: places
-  }).format(value);
-}
-function compactMoney(value, currency, decimals) {
-  let symbol = currency;
-  try {
-    symbol = new Intl.NumberFormat("en-US", { style: "currency", currency }).formatToParts(0).find((p) => p.type === "currency")?.value ?? currency;
-  } catch {
-  }
-  const abs = Math.abs(value);
-  const sign = value < 0 ? "-" : "";
-  for (const [size, suffix] of [[1e9, "B"], [1e6, "M"], [1e3, "K"]]) {
-    if (abs >= size) return `${sign}${symbol}${(abs / size).toFixed(decimals)}${suffix}`;
-  }
-  return `${sign}${symbol}${Math.round(abs)}`;
-}
-function formatNumber(value, decimals = 0) {
-  if (value == null || Number.isNaN(value)) return "\u2014";
-  return new Intl.NumberFormat("en-US", {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals
-  }).format(value);
-}
-function formatPercent(value, decimals = 1) {
-  if (value == null || Number.isNaN(value)) return "\u2014";
-  return `${formatNumber(value, decimals)}%`;
-}
-function toDate(value) {
-  if (value == null || value === "") return null;
-  const d = value instanceof Date ? value : new Date(value);
-  return Number.isNaN(d.getTime()) ? null : d;
-}
 export {
   Accordion,
   AccordionContent,
@@ -2636,6 +2995,7 @@ export {
   FilterBar,
   IconButton,
   Input,
+  KanbanBoard,
   Label3 as Label,
   ListToolbar,
   LoadingState,
@@ -2712,6 +3072,7 @@ export {
   TabsRoot,
   TabsTrigger,
   Textarea,
+  Timeline,
   ToastProvider,
   ToggleGroup,
   Tooltip,
@@ -2726,6 +3087,9 @@ export {
   formatMoney,
   formatNumber,
   formatPercent,
+  kanbanLayout,
+  kanbanStep,
+  timelineLayout,
   useDebouncedValue,
   useFieldControl,
   usePagedRows,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/ui",
-  "version": "0.10.8",
+  "version": "0.12.0",
   "description": "Shared UI primitives for the Campfire Suite — Radix behavior, plain CSS styled entirely from the design tokens, no Tailwind required",
   "type": "module",
   "main": "dist/index.js",